Customize color for a link (#79)

* Customizable color for individual links

When adding links to a dataset now, we can add optionally include a 'color'
property. If it's set, said color will override the default color
defined in the configuration object.

In order for this to work, the 'buildLinkProps' is now receiving a 'link' object, which could contain any additional data aside from the source and target nodes. In this case, we'll be only considering a 'color' property that will be taken into account when setting the stroke color of the line to draw.

The former 'source' and 'target' parameters that used to be stand-alone parameters in the function, are now data contained inside of the
new 'link' object.

* Add tests for custom link feature

Added some new tests in the 'graph.helper.test' suite to check whether
the customization of the color for a certain link is working correctly.

We will be checking whether the stroke color matches the expected one in
both scenarios: when a custom color is set and when no color has been
passed along the link data.

Author: LonelyPrincess

src/components/graph/graph.helper.js

@@ -176,8 +176,7 @@ function _validateGraphData(data) {
 
 /**
  * Build some Link properties based on given parameters.
- * @param  {string} source - the id of the source node (from).
- * @param  {string} target - the id of the target node (to).
+ * @param  {Object} link - the link object for which we will generate properties.
  * @param  {Object.<string, Object>} nodes - same as {@link #buildGraph|nodes in buildGraph}.
  * @param  {Object.<string, Object>} links - same as {@link #buildGraph|links in buildGraph}.
  * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
@@ -188,17 +187,9 @@ function _validateGraphData(data) {
  * @returns {Object} returns an object that aggregates all props for creating respective Link component instance.
  * @memberof Graph/helper
  */
-function buildLinkProps(
-    source,
-    target,
-    nodes,
-    links,
-    config,
-    linkCallbacks,
-    highlightedNode,
-    highlightedLink,
-    transform
-) {
+function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform) {
+    const { source, target } = link;
+
     const x1 = (nodes[source] && nodes[source].x) || 0;
     const y1 = (nodes[source] && nodes[source].y) || 0;
     const x2 = (nodes[target] && nodes[target].x) || 0;
@@ -230,7 +221,7 @@ function buildLinkProps(
         opacity = highlight ? config.link.opacity : config.highlightOpacity;
     }
 
-    let stroke = config.link.color;
+    let stroke = link.color || config.link.color;
 
     if (highlight) {
         stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;

src/components/graph/graph.renderer.jsx

@@ -32,8 +32,7 @@ function _buildLinks(nodes, links, linksMatrix, config, linkCallbacks, highlight
         const targetId = target.id || target;
         const key = `${sourceId}${CONST.COORDS_SEPARATOR}${targetId}`;
         const props = buildLinkProps(
-            `${sourceId}`,
-            `${targetId}`,
+            { ...link, source: `${sourceId}`, target: `${targetId}` },
             nodes,
             linksMatrix,
             config,

test/component/graph/graph.helper.test.js

@@ -20,6 +20,55 @@ describe('Graph Helper', () => {
         utils.throwErr = jest.fn();
     });
 
+    describe('#buildLinkProps', () => {
+        let that = {};
+
+        beforeAll(() => {
+            const linkConfig = Object.assign({}, config.link);
+
+            that = {
+                config: { link: linkConfig },
+                link: { source: 'source', target: 'target' }
+            };
+        });
+
+        describe('when building props for a link', () => {
+            describe('and no custom color is set', () => {
+                test('should return default color defined in link config', () => {
+                    const props = graphHelper.buildLinkProps(
+                        that.link,
+                        {},
+                        {},
+                        that.config,
+                        [],
+                        undefined,
+                        undefined,
+                        1
+                    );
+
+                    expect(props.stroke).toEqual(that.config.link.color);
+                });
+            });
+
+            describe('and custom color is set to green', () => {
+                test('should return green color in the props', () => {
+                    const props = graphHelper.buildLinkProps(
+                        { ...that.link, color: 'green' },
+                        {},
+                        {},
+                        that.config,
+                        [],
+                        undefined,
+                        undefined,
+                        1
+                    );
+
+                    expect(props.stroke).toEqual('green');
+                });
+            });
+        });
+    });
+
     describe('#buildNodeProps', () => {
         let that = {};