Added JsDoc for link attributes strokeDasharray, strokeDashoffset and…

… strokeLinecap

docs/DOCUMENTATION.md

@@ -524,9 +524,6 @@ const graph = {
         This is how link strokeWidth will be calculated:`javascript strokeWidth += (linkValue * strokeWidth) / 10;` (optional, default `false`)
     -   `link.strokeWidth` **[number][181]** <a id="link-stroke-width" href="#link-stroke-width">🔗</a> 🔍🔍🔍 strokeWidth for all links. By default the actual value is obtain by the
         following expression:`javascript link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value` (optional, default `1.5`)
-    -   `link.strokeDasharray` **[string][183]** <a id="link-stroke-dasharray" href="#link-stroke-dasharray">🔗</a> 🔍🔍🔍 strokeDasharray for all links.
-    -   `link.strokeDashoffset` **[number][181]** <a id="link-stroke-dashoffset" href="#link-stroke-dashoffset">🔗</a> 🔍🔍🔍 strokeDashoffset for all links.
-    -   `link.strokeLinecap` **[string][183]** <a id="link-stroke-linecap" href="#link-stroke-linecap">🔗</a> 🔍🔍🔍 strokeLinecap for all links.
     -   `link.markerHeight` **[number][181]** <a id="link-marker-height" href="#link-marker-height">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerHeight">markerHeight</a>
         property for the link arrowhead height. _Note: this property can only be set in the first mount, it does not update dynamically._ (optional, default `6`)
     -   `link.markerWidth` **[number][181]** <a id="link-marker-width" href="#link-marker-width">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/SVG/Attribute/markerWidth">markerWidth</a>
@@ -1390,11 +1387,9 @@ components.
     },
     ...
     }
-
     ```
 
     ```
-
 -   `linkCallbacks` **[Array][185]&lt;[Function][186]>** array of callbacks for used defined event handler for link interactions.
 -   `config` **[Object][184]** an object containing rd3g consumer defined configurations [config][195] for the graph.
 -   `highlightedNode` **[string][183]** this value contains a string that represents the some currently highlighted node.

src/components/graph/graph.builder.js

@@ -92,9 +92,10 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
     stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
   }
 
-  let strokeDasharray = link.strokeDasharray || config.link.strokeDasharray;
-  let strokeDashoffset = link.strokeDashoffset || config.link.strokeDashoffset;
-  let strokeLinecap = link.strokeLinecap || config.link.strokeLinecap;
+  const strokeDasharray = link.strokeDasharray || config.link.strokeDasharray;
+  const strokeDashoffset = link.strokeDashoffset || config.link.strokeDashoffset;
+  const strokeLinecap = link.strokeLinecap || config.link.strokeLinecap;
+
   let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);
 
   if (config.link.semanticStrokeWidth) {

src/components/graph/graph.config.js

@@ -222,6 +222,16 @@
  * - "CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
  * </br>
  * <img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
+ * @param {number} [link.strokeDasharray=0] - <a id="link-stroke-dasharray" href="#link-stroke-dasharray">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray">stroke-dasharray</a>
+ * The stroke-dasharray attribute defines the pattern of dashes and gaps used to paint the link.
+ * @param {number} [link.strokeDashoffset=0] - <a id="link-stroke-dashoffset" href="#link-stroke-dashoffset">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a>
+ * The stroke-dashoffset attribute defines an offset on the rendering of the associated dash array.
+ * @param {string} [link.strokeLinecap="butt"] - <a id="link-stroke-linecap" href="#link-stroke-linecap">🔗</a> <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap">stroke-linecap</a>
+ * The stroke-linecap attribute defines the shape to be used at the start and end of the link.
+ * The stroke-linecap options are:
+ *   - "butt"
+ *   - "round"
+ *   - "square"
  *
  * @example
  * // A simple config that uses some properties
@@ -303,5 +313,8 @@ export default {
     markerHeight: 6,
     markerWidth: 6,
     type: "STRAIGHT",
+    strokeDasharray: 0,
+    strokeDashoffset: 0,
+    strokeLinecap: "butt",
   },
 };