Add fontColor as a configuration option for node's <text> fill proper…

…ty (#64) * Add fontColor as a configuration option for node's <text> fill property * fix docs * Fix failing tests + update snapshot tests * Make default font color black * Change order of props/keys to be in alphabetical order * Revert sandbox bundle * Fix snapshoit test by adding fontColor prop * Fix typo in prettierrc
danielcaldas · Apr 11, 2018 · e4ef748 · e4ef748
1 parent 364166a
commit e4ef748
Show file tree

Hide file tree

Showing 9 changed files with 495 additions and 1,232 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,5 +1,5 @@
 module.exports = {
     printWidth: 120,
-    tabWidt: 4,
+    tabWidth: 4,
     singleQuote: true
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js
@@ -55,6 +55,7 @@
  * @param {string} [node.color='#d3d3d3'] - 🔍🔍🔍 this is the color that will be applied to the node if no **color property**
  * is found inside the node itself (yes **you can pass a property 'color' inside the node and that color will override the
  * this default one**).
+ * @param {string} [node.fontColor='black'] - fill color for node's <text> svg label
  * @param {number} [node.fontSize=10] - {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control|font-size}
  * property for all nodes' labels.
  * @param {string} [node.fontWeight='normal'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control|font-weight}
@@ -139,6 +140,7 @@ export default {
     width: 800,
     node: {
         color: '#d3d3d3',
+        fontColor: 'black',
         fontSize: 8,
         fontWeight: 'normal',
         highlightColor: 'SAME',

diff --git a/src/components/graph/graph.helper.js b/src/components/graph/graph.helper.js
@@ -294,13 +294,15 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
     const dx = fontSize * t + nodeSize / 100 + 1.5;
     const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth;
     const svg = node.svg || config.node.svg;
+    const fontColor = node.fontColor || config.node.fontColor;
 
     return {
         className: CONST.NODE_CLASS_NAME,
         cursor: config.node.mouseCursor,
         cx: (node && node.x) || '0',
         cy: (node && node.y) || '0',
         fill,
+        fontColor,
         fontSize: fontSize * t,
         dx,
         fontWeight: highlight ? config.node.highlightFontWeight : config.node.fontWeight,

diff --git a/src/components/node/Node.jsx b/src/components/node/Node.jsx
@@ -25,8 +25,9 @@ import nodeHelper from './node.helper';
  *     cy=22
  *     fill='green'
  *     fontSize=10
- *     dx=90
+ *     fontColor='black'
  *     fontWeight='normal'
+ *     dx=90
  *     label='label text'
  *     opacity=1
  *     renderLabel=true
@@ -41,83 +42,88 @@ import nodeHelper from './node.helper';
  *     onMouseOutNode={onMouseOutNode} />
  */
 export default class Node extends React.Component {
-    /**
-     * Handle click on the node.
-     * @returns {undefined}
-     */
-    handleOnClickNode = () => this.props.onClickNode && this.props.onClickNode(this.props.id);
+  /**
+   * Handle click on the node.
+   * @returns {undefined}
+   */
+  handleOnClickNode = () => this.props.onClickNode && this.props.onClickNode(this.props.id);
 
-    /**
-     * Handle mouse over node event.
-     * @returns {undefined}
-     */
-    handleOnMouseOverNode = () => this.props.onMouseOverNode && this.props.onMouseOverNode(this.props.id);
+  /**
+   * Handle mouse over node event.
+   * @returns {undefined}
+   */
+  handleOnMouseOverNode = () => this.props.onMouseOverNode && this.props.onMouseOverNode(this.props.id);
 
-    /**
-     * Handle mouse out node event.
-     * @returns {undefined}
-     */
-    handleOnMouseOutNode = () => this.props.onMouseOut && this.props.onMouseOut(this.props.id);
+  /**
+   * Handle mouse out node event.
+   * @returns {undefined}
+   */
+  handleOnMouseOutNode = () => this.props.onMouseOut && this.props.onMouseOut(this.props.id);
 
-    render() {
-        const nodeProps = {
-            cursor: this.props.cursor,
-            onClick: this.handleOnClickNode,
-            onMouseOut: this.handleOnMouseOutNode,
-            onMouseOver: this.handleOnMouseOverNode,
-            opacity: this.props.opacity
-        };
+  render() {
+    const nodeProps = {
+      cursor: this.props.cursor,
+      onClick: this.handleOnClickNode,
+      onMouseOut: this.handleOnMouseOutNode,
+      onMouseOver: this.handleOnMouseOverNode,
+      opacity: this.props.opacity
+    };
 
-        const textProps = {
-            dx: this.props.dx || CONST.NODE_LABEL_DX,
-            dy: CONST.NODE_LABEL_DY,
-            fontSize: this.props.fontSize,
-            fontWeight: this.props.fontWeight,
-            opacity: this.props.opacity
-        };
+    const textProps = {
+      dx: this.props.dx || CONST.NODE_LABEL_DX,
+      dy: CONST.NODE_LABEL_DY,
+      fill: this.props.fontColor,
+      fontSize: this.props.fontSize,
+      fontWeight: this.props.fontWeight,
+      opacity: this.props.opacity
+    };
 
-        const size = this.props.size;
-        let gtx = this.props.cx;
-        let gty = this.props.cy;
-        let label;
-        let node;
+    const size = this.props.size;
+    let gtx = this.props.cx;
+    let gty = this.props.cy;
+    let label;
+    let node;
 
-        if (this.props.svg) {
-            const height = size / 10;
-            const width = size / 10;
-            const tx = width / 2;
-            const ty = height / 2;
-            const transform = `translate(${tx},${ty})`;
+    if (this.props.svg) {
+      const height = size / 10;
+      const width = size / 10;
+      const tx = width / 2;
+      const ty = height / 2;
+      const transform = `translate(${tx},${ty})`;
 
-            label = (<text {...textProps} transform={transform}>{this.props.label}</text>);
-            node = (<image {...nodeProps} href={this.props.svg} width={width} height={height}/>);
+      label = (
+        <text {...textProps} transform={transform}>
+          {this.props.label}
+        </text>
+      );
+      node = <image {...nodeProps} href={this.props.svg} width={width} height={height} />;
 
-            // svg offset transform regarding svg width/height
-            gtx -= tx;
-            gty -= ty;
-        } else {
-            nodeProps.d = nodeHelper.buildSvgSymbol(size, this.props.type);
-            nodeProps.fill = this.props.fill;
-            nodeProps.stroke = this.props.stroke;
-            nodeProps.strokeWidth = this.props.strokeWidth;
+      // svg offset transform regarding svg width/height
+      gtx -= tx;
+      gty -= ty;
+    } else {
+      nodeProps.d = nodeHelper.buildSvgSymbol(size, this.props.type);
+      nodeProps.fill = this.props.fill;
+      nodeProps.stroke = this.props.stroke;
+      nodeProps.strokeWidth = this.props.strokeWidth;
 
-            label = (<text {...textProps}>{this.props.label}</text>);
-            node = (<path {...nodeProps} />);
-        }
+      label = <text {...textProps}>{this.props.label}</text>;
+      node = <path {...nodeProps} />;
+    }
 
-        const gProps = {
-            className: this.props.className,
-            cx: this.props.cx,
-            cy: this.props.cy,
-            id: this.props.id,
-            transform: `translate(${gtx},${gty})`
-        };
+    const gProps = {
+      className: this.props.className,
+      cx: this.props.cx,
+      cy: this.props.cy,
+      id: this.props.id,
+      transform: `translate(${gtx},${gty})`
+    };
 
-        return (
-            <g {...gProps}>
-                {node}
-                {this.props.renderLabel && label}
-            </g>
-        );
-    }
+    return (
+      <g {...gProps}>
+        {node}
+        {this.props.renderLabel && label}
+      </g>
+    );
+  }
 }
diff --git a/test/component/graph/graph.helper.test.js b/test/component/graph/graph.helper.test.js
@@ -60,6 +60,7 @@ describe('Graph Helper', () => {
                     fill: 'red',
                     fontSize: 12,
                     fontWeight: 'bold',
+                    fontColor: 'black',
                     id: 'id',
                     label: 'id',
                     onClickNode: undefined,
@@ -101,6 +102,7 @@ describe('Graph Helper', () => {
                         fill: 'green',
                         fontSize: 8,
                         fontWeight: 'normal',
+                        fontColor: 'black',
                         id: 'id',
                         label: 'id',
                         onClickNode: undefined,
@@ -141,6 +143,7 @@ describe('Graph Helper', () => {
                         fill: 'green',
                         fontSize: 8,
                         fontWeight: 'normal',
+                        fontColor: 'black',
                         id: 'id',
                         label: 'id',
                         onClickNode: undefined,

diff --git a/test/snapshot/graph/__snapshots__/graph.snapshot.test.js.snap b/test/snapshot/graph/__snapshots__/graph.snapshot.test.js.snap
@@ -682,6 +682,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -710,6 +711,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -738,6 +740,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -766,6 +769,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -794,6 +798,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -822,6 +827,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -850,6 +856,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -878,6 +885,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -906,6 +914,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -934,6 +943,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -962,6 +972,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -990,6 +1001,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1018,6 +1030,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1046,6 +1059,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1074,6 +1088,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1102,6 +1117,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1130,6 +1146,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1158,6 +1175,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1186,6 +1204,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}
@@ -1214,6 +1233,7 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
         <text
           dx={10.5}
           dy=".35em"
+          fill="black"
           fontSize={8}
           fontWeight="normal"
           opacity={1}

diff --git a/test/snapshot/node/__snapshots__/node.snapshot.test.js.snap b/test/snapshot/node/__snapshots__/node.snapshot.test.js.snap
@@ -22,6 +22,7 @@ exports[`Snapshot - Node Component should match snapshot 1`] = `
   <text
     dx=".90em"
     dy=".35em"
+    fill="black"
     fontSize="12"
     fontWeight="bold"
     opacity="1"