From 8fcbb0e5a22274360279ee66c531c18d72ea5507 Mon Sep 17 00:00:00 2001 From: Daniel Caldas <11733994+danielcaldas@users.noreply.github.com> Date: Mon, 4 Mar 2019 16:38:43 +0100 Subject: [PATCH] Refactor/run lint on sandbox (#179) * Minor typos in docs * Configure lint to run against sandbox --- .eslintignore | 3 +- package.json | 3 +- sandbox/Sandbox.jsx | 66 ++-- sandbox/data/custom-node/CustomNode.jsx | 20 +- .../data/custom-node/custom-node.config.js | 34 +- sandbox/data/marvel/marvel.config.js | 34 +- sandbox/data/marvel/marvel.data.js | 312 +++++++++--------- sandbox/data/small/small.config.js | 28 +- sandbox/index.jsx | 10 +- src/components/graph/graph.config.js | 2 +- src/components/graph/graph.renderer.jsx | 8 +- 11 files changed, 262 insertions(+), 258 deletions(-) diff --git a/.eslintignore b/.eslintignore index 55bef869b..7fa67c699 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ -/cypress/** \ No newline at end of file +/cypress/** +/sandbox/rd3g* \ No newline at end of file diff --git a/package.json b/package.json index b0d45fccb..735e2a669 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "functional:local": "export CYPRESS_SANDBOX_URL=http://localhost:3002 && cypress open", "functional:remote": "export CYPRESS_SANDBOX_URL=https://danielcaldas.github.io/react-d3-graph/sandbox/index.html && cypress open", "functional": "export CYPRESS_SANDBOX_URL=http://127.0.0.1:8888 && cypress run", - "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\"", + "lint:fix": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js --fix \"src/**/*.js*\" \"sandbox/**/*.js*\"", + "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\" \"sandbox/**/*.js*\"", "lint:test": "node_modules/eslint/bin/eslint.js --config=.eslintrc.test.config.js \"test/**/*.spec.js\"", "lint": "npm run lint:src && npm run lint:test && npm run docs:lint", "precommit": "lint-staged", diff --git a/sandbox/Sandbox.jsx b/sandbox/Sandbox.jsx index 15438255c..3dda5f1bd 100644 --- a/sandbox/Sandbox.jsx +++ b/sandbox/Sandbox.jsx @@ -1,16 +1,16 @@ /*global console*/ /*eslint require-jsdoc: 0, valid-jsdoc: 0, no-console: 0*/ -import React from 'react'; +import React from "react"; -import Form from 'react-jsonschema-form'; +import Form from "react-jsonschema-form"; -import './styles.css'; +import "./styles.css"; -import defaultConfig from '../src/components/graph/graph.config'; -import { Graph } from '../src'; -import utils from './utils'; -import reactD3GraphUtils from '../src/utils'; -import { JsonTree } from 'react-editable-json-tree'; +import defaultConfig from "../src/components/graph/graph.config"; +import { Graph } from "../src"; +import utils from "./utils"; +import reactD3GraphUtils from "../src/utils"; +import { JsonTree } from "react-editable-json-tree"; const sandboxData = utils.loadDataset(); @@ -28,16 +28,16 @@ export default class Sandbox extends React.Component { const { config: configOverride, data, fullscreen } = sandboxData; const config = Object.assign(defaultConfig, configOverride); - const schemaProps = utils.generateFormSchema(config, '', {}); + const schemaProps = utils.generateFormSchema(config, "", {}); const schema = { - type: 'object', - properties: schemaProps + type: "object", + properties: schemaProps, }; const uiSchema = { - height: { 'ui:readonly': 'true' }, - width: { 'ui:readonly': 'true' } + height: { "ui:readonly": "true" }, + width: { "ui:readonly": "true" }, }; this.uiSchema = uiSchema; @@ -47,11 +47,11 @@ export default class Sandbox extends React.Component { generatedConfig: {}, schema, data, - fullscreen + fullscreen, }; } - onClickGraph = () => console.info(`Clicked the graph`); + onClickGraph = () => console.info("Clicked the graph"); onClickNode = id => { !this.state.config.collapsible && window.alert(`Clicked node ${id}`); @@ -127,7 +127,7 @@ export default class Sandbox extends React.Component { while (this.state.data.nodes[i] && this.state.data.nodes[i].id && nLinks) { this.state.data.links.push({ source: newNode, - target: this.state.data.nodes[i].id + target: this.state.data.nodes[i].id, }); i++; @@ -135,13 +135,13 @@ export default class Sandbox extends React.Component { } this.setState({ - data: this.state.data + data: this.state.data, }); } else { // 1st node const data = { - nodes: [{ id: 'Node 1' }], - links: [] + nodes: [{ id: "Node 1" }], + links: [], }; this.setState({ data }); @@ -161,7 +161,7 @@ export default class Sandbox extends React.Component { this.setState({ data }); } else { - window.alert('No more nodes to remove!'); + window.alert("No more nodes to remove!"); } }; @@ -174,7 +174,7 @@ export default class Sandbox extends React.Component { utils.setValue(config, k, data.formData[k]); // Set new values for schema of jsonform schemaPropsValues[k] = {}; - schemaPropsValues[k]['default'] = data.formData[k]; + schemaPropsValues[k]["default"] = data.formData[k]; } return { config, schemaPropsValues }; @@ -186,7 +186,7 @@ export default class Sandbox extends React.Component { this.state.schema.properties = reactD3GraphUtils.merge(this.state.schema.properties, schemaPropsValues); this.setState({ - config + config, }); }; @@ -201,23 +201,23 @@ export default class Sandbox extends React.Component { onClickSubmit = () => { // Hack for allow submit button to live outside jsonform - document.body.querySelector('.invisible-button').click(); + document.body.querySelector(".invisible-button").click(); }; resetGraphConfig = () => { const generatedConfig = {}; - const schemaProps = utils.generateFormSchema(defaultConfig, '', {}); + const schemaProps = utils.generateFormSchema(defaultConfig, "", {}); const schema = { - type: 'object', - properties: schemaProps + type: "object", + properties: schemaProps, }; this.setState({ config: defaultConfig, generatedConfig, - schema + schema, }); }; @@ -232,7 +232,7 @@ export default class Sandbox extends React.Component { return nodes.map(n => Object.assign({}, n, { x: n.x || Math.floor(Math.random() * 500), - y: n.y || Math.floor(Math.random() * 500) + y: n.y || Math.floor(Math.random() * 500), }) ); }; @@ -250,7 +250,7 @@ export default class Sandbox extends React.Component { */ buildCommonInteractionsPanel = () => { const btnStyle = { - cursor: this.state.config.staticGraph ? 'not-allowed' : 'pointer' + cursor: this.state.config.staticGraph ? "not-allowed" : "pointer", }; const fullscreen = this.state.fullscreen ? ( @@ -309,11 +309,11 @@ export default class Sandbox extends React.Component { const data = { nodes: this.decorateGraphNodesWithInitialPositioning(this.state.data.nodes), links: this.state.data.links, - focusedNodeId: this.state.data.focusedNodeId + focusedNodeId: this.state.data.focusedNodeId, }; const graphProps = { - id: 'graph', + id: "graph", data, config: this.state.config, onClickNode: this.onClickNode, @@ -324,13 +324,13 @@ export default class Sandbox extends React.Component { onMouseOverNode: this.onMouseOverNode, onMouseOutNode: this.onMouseOutNode, onMouseOverLink: this.onMouseOverLink, - onMouseOutLink: this.onMouseOutLink + onMouseOutLink: this.onMouseOutLink, }; if (this.state.fullscreen) { graphProps.config = Object.assign({}, graphProps.config, { height: window.innerHeight, - width: window.innerWidth + width: window.innerWidth, }); return ( diff --git a/sandbox/data/custom-node/CustomNode.jsx b/sandbox/data/custom-node/CustomNode.jsx index 1297c6ec4..047b6bd22 100644 --- a/sandbox/data/custom-node/CustomNode.jsx +++ b/sandbox/data/custom-node/CustomNode.jsx @@ -1,25 +1,27 @@ -import React from 'react'; +/* eslint-disable valid-jsdoc */ +import React from "react"; -import './res/styles/custom-node.css'; +import "./res/styles/custom-node.css"; -const ICON_PATH = './data/custom-node/res/images/'; +const ICON_PATH = "./data/custom-node/res/images/"; const ICON_TYPES = { - MAN: ICON_PATH + 'man.svg', - WOMAN: ICON_PATH + 'girl.svg', - CAR: ICON_PATH + 'car.svg', - BIKE: ICON_PATH + 'bike.svg' + MAN: ICON_PATH + "man.svg", + WOMAN: ICON_PATH + "girl.svg", + CAR: ICON_PATH + "car.svg", + BIKE: ICON_PATH + "bike.svg", }; /** * Component that renders a person's name and gender, along with icons * representing if they have a driver license for bike and / or car. + * @param {Object} props component props to render. */ function CustomNode({ person }) { - const isMale = person.gender === 'male'; + const isMale = person.gender === "male"; return ( -
+
{person.name}
diff --git a/sandbox/data/custom-node/custom-node.config.js b/sandbox/data/custom-node/custom-node.config.js index 17e2d7334..2686db332 100644 --- a/sandbox/data/custom-node/custom-node.config.js +++ b/sandbox/data/custom-node/custom-node.config.js @@ -1,5 +1,5 @@ -import React from 'react'; -import CustomNode from './CustomNode'; +import React from "react"; +import CustomNode from "./CustomNode"; module.exports = { automaticRearrangeAfterDropNode: false, @@ -15,31 +15,31 @@ module.exports = { staticGraph: false, width: 800, node: { - color: '#d3d3d3', - fontColor: 'black', + color: "#d3d3d3", + fontColor: "black", fontSize: 12, - fontWeight: 'normal', - highlightColor: 'red', + fontWeight: "normal", + highlightColor: "red", highlightFontSize: 12, - highlightFontWeight: 'bold', - highlightStrokeColor: 'SAME', + highlightFontWeight: "bold", + highlightStrokeColor: "SAME", highlightStrokeWidth: 1.5, - labelProperty: 'name', - mouseCursor: 'pointer', + labelProperty: "name", + mouseCursor: "pointer", opacity: 1, renderLabel: false, size: 700, - strokeColor: 'none', + strokeColor: "none", strokeWidth: 1.5, - svg: '', - symbolType: 'circle', - viewGenerator: node => + svg: "", + symbolType: "circle", + viewGenerator: node => , }, link: { - color: '#d3d3d3', + color: "#d3d3d3", opacity: 1, semanticStrokeWidth: false, strokeWidth: 4, - highlightColor: 'blue' - } + highlightColor: "blue", + }, }; diff --git a/sandbox/data/marvel/marvel.config.js b/sandbox/data/marvel/marvel.config.js index e2cd336ee..080d425b4 100644 --- a/sandbox/data/marvel/marvel.config.js +++ b/sandbox/data/marvel/marvel.config.js @@ -18,36 +18,36 @@ module.exports = { alphaTarget: 0.05, gravity: -250, linkLength: 120, - linkStrength: 2 + linkStrength: 2, }, node: { - color: '#d3d3d3', - fontColor: 'black', + color: "#d3d3d3", + fontColor: "black", fontSize: 10, - fontWeight: 'normal', - highlightColor: 'red', + fontWeight: "normal", + highlightColor: "red", highlightFontSize: 14, - highlightFontWeight: 'bold', - highlightStrokeColor: 'red', + highlightFontWeight: "bold", + highlightStrokeColor: "red", highlightStrokeWidth: 1.5, labelProperty: n => (n.name ? `${n.id} - ${n.name}` : n.id), - mouseCursor: 'crosshair', + mouseCursor: "crosshair", opacity: 0.9, renderLabel: true, size: 200, - strokeColor: 'none', + strokeColor: "none", strokeWidth: 1.5, - svg: '', - symbolType: 'circle', - viewGenerator: null + svg: "", + symbolType: "circle", + viewGenerator: null, }, link: { - color: 'lightgray', - highlightColor: 'red', - mouseCursor: 'pointer', + color: "lightgray", + highlightColor: "red", + mouseCursor: "pointer", opacity: 1, semanticStrokeWidth: true, strokeWidth: 3, - type: 'STRAIGHT' - } + type: "STRAIGHT", + }, }; diff --git a/sandbox/data/marvel/marvel.data.js b/sandbox/data/marvel/marvel.data.js index 6cbf5f83b..ad205aa69 100644 --- a/sandbox/data/marvel/marvel.data.js +++ b/sandbox/data/marvel/marvel.data.js @@ -4,269 +4,269 @@ module.exports = { links: [ // Groups { - source: 'Marvel', - target: 'Heroes' + source: "Marvel", + target: "Heroes", }, { - source: 'Marvel', - target: 'Villains' + source: "Marvel", + target: "Villains", }, { - source: 'Marvel', - target: 'Teams' + source: "Marvel", + target: "Teams", }, // Heroes { - source: 'Heroes', - target: 'Spider-Man' + source: "Heroes", + target: "Spider-Man", }, { - source: 'Heroes', - target: 'CAPTAIN MARVEL' + source: "Heroes", + target: "CAPTAIN MARVEL", }, { - source: 'Heroes', - target: 'HULK' + source: "Heroes", + target: "HULK", }, { - source: 'Heroes', - target: 'Black Widow' + source: "Heroes", + target: "Black Widow", }, { - source: 'Heroes', - target: 'Daredevil' + source: "Heroes", + target: "Daredevil", }, { - source: 'Heroes', - target: 'Wolverine' + source: "Heroes", + target: "Wolverine", }, { - source: 'Heroes', - target: 'Captain America' + source: "Heroes", + target: "Captain America", }, { - source: 'Heroes', - target: 'Iron Man' + source: "Heroes", + target: "Iron Man", }, { - source: 'Heroes', - target: 'THOR' + source: "Heroes", + target: "THOR", }, // Villains { - source: 'Villains', - target: 'Dr. Doom' + source: "Villains", + target: "Dr. Doom", }, { - source: 'Villains', - target: 'Mystique' + source: "Villains", + target: "Mystique", }, { - source: 'Villains', - target: 'Red Skull' + source: "Villains", + target: "Red Skull", }, { - source: 'Villains', - target: 'Ronan' + source: "Villains", + target: "Ronan", }, { - source: 'Villains', - target: 'Magneto' + source: "Villains", + target: "Magneto", }, { - source: 'Villains', - target: 'Thanos' + source: "Villains", + target: "Thanos", }, { - source: 'Villains', - target: 'Black Cat' + source: "Villains", + target: "Black Cat", }, // Teams { - source: 'Teams', - target: 'Avengers' + source: "Teams", + target: "Avengers", }, { - source: 'Teams', - target: 'Guardians of the Galaxy' + source: "Teams", + target: "Guardians of the Galaxy", }, { - source: 'Teams', - target: 'Defenders' + source: "Teams", + target: "Defenders", }, { - source: 'Teams', - target: 'X-Men' + source: "Teams", + target: "X-Men", }, { - source: 'Teams', - target: 'Fantastic Four' + source: "Teams", + target: "Fantastic Four", }, { - source: 'Teams', - target: 'Inhumans' - } + source: "Teams", + target: "Inhumans", + }, ], nodes: [ // Groups { - id: 'Marvel', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/marvel.png', + id: "Marvel", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/marvel.png", size: 500, - fontSize: 18 + fontSize: 18, }, { - id: 'Heroes', - symbolType: 'circle', - color: 'red', - size: 300 + id: "Heroes", + symbolType: "circle", + color: "red", + size: 300, }, { - id: 'Villains', - symbolType: 'circle', - color: 'red', - size: 300 + id: "Villains", + symbolType: "circle", + color: "red", + size: 300, }, { - id: 'Teams', - symbolType: 'circle', - color: 'red', - size: 300 + id: "Teams", + symbolType: "circle", + color: "red", + size: 300, }, // Heroes { - id: 'Spider-Man', - name: 'Peter Benjamin Parker', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png', - size: 400 + id: "Spider-Man", + name: "Peter Benjamin Parker", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png", + size: 400, }, { - id: 'CAPTAIN MARVEL', - name: 'Carol Danvers', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png', - size: 400 + id: "CAPTAIN MARVEL", + name: "Carol Danvers", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png", + size: 400, }, { - id: 'HULK', - name: 'Robert Bruce Banner', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_hulk.png', - size: 400 + id: "HULK", + name: "Robert Bruce Banner", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_hulk.png", + size: 400, }, { - id: 'Black Widow', - name: 'Natasha Alianovna Romanova', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_blackwidow.png', - size: 400 + id: "Black Widow", + name: "Natasha Alianovna Romanova", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_blackwidow.png", + size: 400, }, { - id: 'Daredevil', - name: 'Matthew Michael Murdock', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_daredevil.png', - size: 400 + id: "Daredevil", + name: "Matthew Michael Murdock", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_daredevil.png", + size: 400, }, { - id: 'Wolverine', - name: 'James Howlett', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_wolverine.png', - size: 400 + id: "Wolverine", + name: "James Howlett", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_wolverine.png", + size: 400, }, { - id: 'Captain America', - name: 'Steven Rogers', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainamerica.png', - size: 400 + id: "Captain America", + name: "Steven Rogers", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainamerica.png", + size: 400, }, { - id: 'Iron Man', - name: 'Tony Stark', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_ironman.png', - size: 400 + id: "Iron Man", + name: "Tony Stark", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_ironman.png", + size: 400, }, { - id: 'THOR', - name: 'Thor Odinson', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_thor.png', - size: 400 + id: "THOR", + name: "Thor Odinson", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_thor.png", + size: 400, }, // Villains { - id: 'Dr. Doom', - name: 'Victor von Doom', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/drdoom.png', - size: 400 + id: "Dr. Doom", + name: "Victor von Doom", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/drdoom.png", + size: 400, }, { - id: 'Mystique', - name: 'Unrevealed', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/mystique.png', - size: 400 + id: "Mystique", + name: "Unrevealed", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/mystique.png", + size: 400, }, { - id: 'Red Skull', - name: 'Johann Shmidt', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/redskull.png', - size: 400 + id: "Red Skull", + name: "Johann Shmidt", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/redskull.png", + size: 400, }, { - id: 'Ronan', - name: 'Ronan', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/ronan.png', - size: 400 + id: "Ronan", + name: "Ronan", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/ronan.png", + size: 400, }, { - id: 'Magneto', - name: 'Max Eisenhardt', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/magneto.png', - size: 400 + id: "Magneto", + name: "Max Eisenhardt", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/magneto.png", + size: 400, }, { - id: 'Thanos', - name: 'Thanos', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/thanos.png', - size: 400 + id: "Thanos", + name: "Thanos", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/thanos.png", + size: 400, }, { - id: 'Black Cat', - name: 'Felicia Hardy', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/blackcat.png', - size: 400 + id: "Black Cat", + name: "Felicia Hardy", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/blackcat.png", + size: 400, }, // Teams { - id: 'Avengers', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/avengers.png', - size: 400 + id: "Avengers", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/avengers.png", + size: 400, }, { - id: 'Guardians of the Galaxy', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/gofgalaxy.png', - size: 400 + id: "Guardians of the Galaxy", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/gofgalaxy.png", + size: 400, }, { - id: 'Defenders', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/defenders.png', - size: 400 + id: "Defenders", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/defenders.png", + size: 400, }, { - id: 'X-Men', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/xmen.png', - size: 400 + id: "X-Men", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/xmen.png", + size: 400, }, { - id: 'Fantastic Four', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/fantasticfour.png', - size: 400 + id: "Fantastic Four", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/fantasticfour.png", + size: 400, }, { - id: 'Inhumans', - name: '', - svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/inhumans.png', - size: 400 - } - ] + id: "Inhumans", + name: "", + svg: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/inhumans.png", + size: 400, + }, + ], }; diff --git a/sandbox/data/small/small.config.js b/sandbox/data/small/small.config.js index f2620f221..22be86d43 100644 --- a/sandbox/data/small/small.config.js +++ b/sandbox/data/small/small.config.js @@ -12,30 +12,30 @@ module.exports = { staticGraph: false, width: 800, node: { - color: '#d3d3d3', - fontColor: 'black', + color: "#d3d3d3", + fontColor: "black", fontSize: 12, - fontWeight: 'normal', - highlightColor: 'red', + fontWeight: "normal", + highlightColor: "red", highlightFontSize: 12, - highlightFontWeight: 'bold', - highlightStrokeColor: 'SAME', + highlightFontWeight: "bold", + highlightStrokeColor: "SAME", highlightStrokeWidth: 1.5, - labelProperty: 'name', - mouseCursor: 'pointer', + labelProperty: "name", + mouseCursor: "pointer", opacity: 1, renderLabel: true, size: 450, - strokeColor: 'none', + strokeColor: "none", strokeWidth: 1.5, - svg: '', - symbolType: 'circle' + svg: "", + symbolType: "circle", }, link: { - color: '#d3d3d3', + color: "#d3d3d3", opacity: 1, semanticStrokeWidth: false, strokeWidth: 4, - highlightColor: 'blue' - } + highlightColor: "blue", + }, }; diff --git a/sandbox/index.jsx b/sandbox/index.jsx index e4ac88d2c..4105a92dc 100644 --- a/sandbox/index.jsx +++ b/sandbox/index.jsx @@ -1,8 +1,8 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import React from "react"; +import ReactDOM from "react-dom"; -import Sandbox from './Sandbox'; +import Sandbox from "./Sandbox"; -const app = document.getElementById('app'); +const app = document.getElementById("app"); -ReactDOM.render(, app); +ReactDOM.render(, app); diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js index b146c1040..3d406f0f9 100644 --- a/src/components/graph/graph.config.js +++ b/src/components/graph/graph.config.js @@ -148,7 +148,7 @@ *
* @param {Object} link link object is explained in the next section. ⬇️ * - * @param {string} [link.color="#d3d3d3"] - 🚅🚅🚅 the color for links + * @param {string} [link.color="#d3d3d3"] - 🔍🔍🔍 the color for links * (from version 1.3.0 this property can be configured at link level). * @param {string} [link.fontColor="black"] - 🔍🔍🔍 fill color for link's svg label. * @param {number} [link.fontSize=8] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size} diff --git a/src/components/graph/graph.renderer.jsx b/src/components/graph/graph.renderer.jsx index 28d2e02df..2f600f737 100644 --- a/src/components/graph/graph.renderer.jsx +++ b/src/components/graph/graph.renderer.jsx @@ -25,7 +25,7 @@ import { isNodeVisible } from "./collapse.helper"; * @param {Object} highlightedLink - same as {@link #graphrenderer|highlightedLink in renderGraph}. * @param {number} transform - value that indicates the amount of zoom transformation. * @returns {Array.} returns the generated array of Link components. - * @memberof Graph/helper + * @memberof Graph/renderer */ function _renderLinks(nodes, links, linksMatrix, config, linkCallbacks, highlightedNode, highlightedLink, transform) { let outLinks = links; @@ -67,7 +67,7 @@ function _renderLinks(nodes, links, linksMatrix, config, linkCallbacks, highligh * @param {number} transform - value that indicates the amount of zoom transformation. * @param {Object.} linksMatrix - the matrix of connections of the graph * @returns {Array.} returns the generated array of node components - * @memberof Graph/helper + * @memberof Graph/renderer */ function _renderNodes(nodes, nodeCallbacks, config, highlightedNode, highlightedLink, transform, linksMatrix) { let outNodes = Object.keys(nodes); @@ -95,7 +95,7 @@ function _renderNodes(nodes, nodeCallbacks, config, highlightedNode, highlighted * NOTE: defs are static svg graphical objects, thus we only need to render them once, the result * is cached on the 1st call and from there we simply return the cached jsx. * @returns {Function} memoized build definitions function. - * @memberof Graph/helper + * @memberof Graph/renderer */ function _renderDefs() { let cachedDefs; @@ -128,7 +128,7 @@ function _renderDefs() { * Memoized reference for _renderDefs. * @param {Object} config - an object containing rd3g consumer defined configurations {@link #config config} for the graph. * @returns {Object} graph reusable objects [defs](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs). - * @memberof Graph/helper + * @memberof Graph/renderer */ const _memoizedRenderDefs = _renderDefs();