chartjs-chart-sankey 0.7.1 → 0.9.0

package/dist/chartjs-chart-sankey.esm.js

@@ -1,27 +1,69 @@
 /*!
- * chartjs-chart-sankey v0.7.1
+ * chartjs-chart-sankey v0.9.0
  * https://github.com/kurkle/chartjs-chart-sankey#readme
- * (c) 2021 Jukka Kurkela
+ * (c) 2022 Jukka Kurkela
  * Released under the MIT license
  */
 import { DatasetController, Element } from 'chart.js';
-import { valueOrDefault, isNullOrUndef, color } from 'chart.js/helpers';
+import { isArray, isNullOrUndef, valueOrDefault, toFont, color } from 'chart.js/helpers';
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
+ * @param {string | Array<string>} raw
+ * @return {Array<string>}
+ */
+function toTextLines(raw) {
+  const lines = [];
+  const inputs = isArray(raw) ? raw : isNullOrUndef(raw) ? [] : [raw];
+
+  while (inputs.length) {
+    const input = inputs.pop();
+    if (typeof input === 'string') {
+      lines.unshift.apply(lines, input.split('\n'));
+    } else if (Array.isArray(input)) {
+      inputs.push.apply(inputs, input);
+    } else if (!isNullOrUndef(inputs)) {
+      lines.unshift('' + input);
+    }
+  }
+
+  return lines;
+}
+
+/**
+* @param {any} size
+* @return {'min' | 'max'}
+*/
+function validateSizeValue(size) {
+  if (!size || ['min', 'max'].indexOf(size) === -1) {
+    return 'max';
+  }
+  return size;
+}
+
+/**
+ * @param x {any}
+ * @return {boolean}
+ */
+const defined = x => x !== undefined;
+
+/**
+ * @param {Map<string, SankeyNode>} nodes
+ * @param {Array<SankeyDataPoint>} data
  * @return {number}
  */
 function calculateX(nodes, data) {
-  const to = new Set(data.map(x => x.to));
-  const from = new Set(data.map(x => x.from));
+  const to = new Set(data.map(dataPoint => dataPoint.to));
+  const from = new Set(data.map(dataPoint => dataPoint.from));
   const keys = new Set([...nodes.keys()]);
   let x = 0;
   while (keys.size) {
     const column = nextColumn([...keys], to);
-    for (let i = 0; i < column.length; i++) {
-      nodes.get(column[i]).x = x;
-      keys.delete(column[i]);
+    for (const key of column) {
+      const node = nodes.get(key);
+      if (!defined(node.x)) {
+        node.x = x;
+      }
+      keys.delete(key);
     }
     if (keys.size) {
       to.clear();
@@ -32,15 +74,19 @@ function calculateX(nodes, data) {
   [...nodes.keys()]
     .filter(key => !from.has(key))
     .forEach(key => {
-      nodes.get(key).x = x;
+      const node = nodes.get(key);
+      // Only move the node to right edge, if it's column is not defined
+      if (!node.column) {
+        node.x = x;
+      }
     });
 
   return x;
 }
 
 /**
- * @param keys {Array<string>}
- * @param to {Set<string>}
+ * @param {Array<string>} keys
+ * @param {Set<string>} to
  * @return {Array<string>}
  */
 function nextColumn(keys, to) {
@@ -49,74 +95,64 @@ function nextColumn(keys, to) {
 }
 
 /**
- * @param x {any}
- * @return {boolean}
- */
-const defined = x => x !== undefined;
-
-/**
- * @param a {SankeyNode}
- * @param b {SankeyNode}
+ * @param {SankeyNode} a
+ * @param {SankeyNode} b
  * @return {number}
  */
 const nodeByXY = (a, b) => a.x !== b.x ? a.x - b.x : a.y - b.y;
 
 /**
- * @param list {Array<FromToElement>}
- * @param prop {string}
+ * @param {Array<FromToElement>} list
+ * @param {string} prop
  * @return {number}
  */
 const nodeCount = (list, prop) => list.reduce((acc, cur) => acc + cur.node[prop].length + nodeCount(cur.node[prop], prop), 0);
 
 /**
- * @param prop {string}
+ * @param {string} prop
  * @return {function(FromToElement, FromToElement): number}
  */
-const flowByNodeCount = (prop) => (a, b) => nodeCount(a.node[prop], prop) - nodeCount(b.node[prop], prop);
+const flowByNodeCount = (prop) => (a, b) => (nodeCount(a.node[prop], prop) - nodeCount(b.node[prop], prop)) || (a.node[prop].length - b.node[prop].length);
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @return {SankeyNode}
- */
-function findLargestNode(nodeArray) {
-  return nodeArray.sort((a, b) => Math.max(b.in, b.out) - Math.max(a.in, a.out))[0];
-}
-
-/**
- * @param node {SankeyNode}
- * @param y {number}
+ * @param {SankeyNode} node
+ * @param {number} y
  * @return {number}
  */
 function processFrom(node, y) {
-  node.from.sort(flowByNodeCount('from')).forEach(flow => {
+  node.from.sort(flowByNodeCount('from'));
+  for (const flow of node.from) {
     const n = flow.node;
     if (!defined(n.y)) {
       n.y = y;
-      y = Math.max(y + n.out, processFrom(n, y));
+      processFrom(n, y);
     }
-  });
+    y = Math.max(n.y + n.out, y);
+  }
   return y;
 }
 
 /**
- * @param node {SankeyNode}
- * @param y {number}
+ * @param {SankeyNode} node
+ * @param {number} y
  * @return {number}
  */
 function processTo(node, y) {
-  node.to.sort(flowByNodeCount('to')).forEach(flow => {
+  node.to.sort(flowByNodeCount('to'));
+  for (const flow of node.to) {
     const n = flow.node;
     if (!defined(n.y)) {
       n.y = y;
-      y = Math.max(y + n.in, processTo(n, y));
+      processTo(n, y);
     }
-  });
+    y = Math.max(n.y + n.in, y);
+  }
   return y;
 }
 
 /**
- * @param node {SankeyNode}
- * @param value {number}
+ * @param {SankeyNode} node
+ * @param {number} value
  * @return {number}
  */
 function setOrGetY(node, value) {
@@ -128,8 +164,8 @@ function setOrGetY(node, value) {
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param maxX {number}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {number} maxX
  * @return {number}
  */
 function processRest(nodeArray, maxX) {
@@ -137,9 +173,11 @@ function processRest(nodeArray, maxX) {
   const rightNodes = nodeArray.filter(node => node.x === maxX);
   const leftToDo = leftNodes.filter(node => !defined(node.y));
   const rightToDo = rightNodes.filter(node => !defined(node.y));
+  const centerToDo = nodeArray.filter(node => node.x > 0 && node.x < maxX && !defined(node.y));
 
   let leftY = leftNodes.reduce((acc, cur) => Math.max(acc, (cur.y + cur.out) || 0), 0);
   let rightY = rightNodes.reduce((acc, cur) => Math.max(acc, (cur.y + cur.in) || 0), 0);
+  let centerY = 0;
 
   if (leftY >= rightY) {
     leftToDo.forEach(node => {
@@ -162,17 +200,26 @@ function processRest(nodeArray, maxX) {
       leftY = Math.max(leftY + node.out, processTo(node, leftY));
     });
   }
+  centerToDo.forEach(node => {
+    let y = nodeArray.filter(n => n.x === node.x && defined(n.y))
+      .reduce((acc, cur) => Math.max(acc, cur.y + Math.max(cur.in, cur.out)), 0);
+    y = setOrGetY(node, y);
+    y = Math.max(y + node.in, processFrom(node, y));
+    y = Math.max(y + node.out, processTo(node, y));
+    centerY = Math.max(centerY, y);
+  });
 
-  return Math.max(leftY, rightY);
+  return Math.max(leftY, rightY, centerY);
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param maxX {number}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {number} maxX
  * @return {number}
  */
 function calculateY(nodeArray, maxX) {
-  const start = findLargestNode(nodeArray);
+  nodeArray.sort((a, b) => Math.max(b.in, b.out) - Math.max(a.in, a.out));
+  const start = nodeArray[0];
   start.y = 0;
   const left = processFrom(start, 0);
   const right = processTo(start, 0);
@@ -181,15 +228,17 @@ function calculateY(nodeArray, maxX) {
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param maxX {number}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {number} maxX
  * @return {number}
  */
 function calculateYUsingPriority(nodeArray, maxX) {
   let maxY = 0;
+  let nextYStart = 0;
   for (let x = 0; x <= maxX; x++) {
-    let y = 0;
+    let y = nextYStart;
     const nodes = nodeArray.filter(node => node.x === x).sort((a, b) => a.priority - b.priority);
+    nextYStart = nodes[0].to.filter(to => to.node.x > x + 1).reduce((acc, cur) => acc + cur.flow, 0) || 0;
     for (const node of nodes) {
       node.y = y;
       y += Math.max(node.out, node.in);
@@ -200,8 +249,8 @@ function calculateYUsingPriority(nodeArray, maxX) {
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param padding {number}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {number} padding
  * @return {number}
  */
 function addPadding(nodeArray, padding) {
@@ -210,7 +259,8 @@ function addPadding(nodeArray, padding) {
   let prev = 0;
   let maxY = 0;
   const rows = [];
-  nodeArray.sort(nodeByXY).forEach(node => {
+  nodeArray.sort(nodeByXY);
+  for (const node of nodeArray) {
     if (node.y) {
       if (node.x === 0) {
         rows.push(node.y);
@@ -231,49 +281,61 @@ function addPadding(nodeArray, padding) {
       i++;
     }
     maxY = Math.max(maxY, node.y + Math.max(node.in, node.out));
-  });
-
+  }
   return maxY;
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {'min' | 'max'} size
  */
-function sortFlows(nodeArray) {
-  nodeArray.forEach(node => {
+function sortFlows(nodeArray, size) {
+  nodeArray.forEach((node) => {
+    const nodeSize = Math[size](node.in || node.out, node.out || node.in);
+    const overlapFrom = nodeSize < node.in;
+    const overlapTo = nodeSize < node.out;
     let addY = 0;
-    node.from.sort((a, b) => (a.node.y + a.node.out / 2) - (b.node.y + b.node.out / 2)).forEach(flow => {
-      flow.addY = addY;
-      addY += flow.flow;
+    let len = node.from.length;
+    node.from.sort((a, b) => (a.node.y + a.node.out / 2) - (b.node.y + b.node.out / 2)).forEach((flow, idx) => {
+      if (overlapFrom) {
+        flow.addY = idx * (nodeSize - flow.flow) / (len - 1);
+      } else {
+        flow.addY = addY;
+        addY += flow.flow;
+      }
     });
     addY = 0;
-    node.to.sort((a, b) => (a.node.y + a.node.in / 2) - (b.node.y + b.node.in / 2)).forEach(flow => {
-      flow.addY = addY;
-      addY += flow.flow;
+    len = node.to.length;
+    node.to.sort((a, b) => (a.node.y + a.node.in / 2) - (b.node.y + b.node.in / 2)).forEach((flow, idx) => {
+      if (overlapTo) {
+        flow.addY = idx * (nodeSize - flow.flow) / (len - 1);
+      } else {
+        flow.addY = addY;
+        addY += flow.flow;
+      }
     });
   });
 }
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
- * @param priority {boolean}
+ * @param {Map<string, SankeyNode>} nodes
+ * @param {Array<SankeyDataPoint>} data
+ * @param {boolean} priority
+ * @param {'min' | 'max'} size
  * @return {{maxY: number, maxX: number}}
  */
-function layout(nodes, data, priority) {
+function layout(nodes, data, priority, size) {
   const nodeArray = [...nodes.values()];
   const maxX = calculateX(nodes, data);
   const maxY = priority ? calculateYUsingPriority(nodeArray, maxX) : calculateY(nodeArray, maxX);
   const padding = maxY * 0.03; // rows;
-
   const maxYWithPadding = addPadding(nodeArray, padding);
-  sortFlows(nodeArray);
-
+  sortFlows(nodeArray, size);
   return {maxX, maxY: maxYWithPadding};
 }
 
 /**
- * @param data {Array<SankeyDataPoint>} Array of raw data elements
+ * @param {Array<SankeyDataPoint>} data Array of raw data elements
  * @return {Map<string, SankeyNode>}
  */
 function buildNodesFromRawData(data) {
@@ -287,45 +349,39 @@ function buildNodesFromRawData(data) {
         in: 0,
         out: flow,
         from: [],
-        to: [{key: to, flow: flow}],
+        to: [{key: to, flow: flow, index: i}],
       });
     } else {
       const node = nodes.get(from);
       node.out += flow;
-      node.to.push({key: to, flow: flow});
+      node.to.push({key: to, flow: flow, index: i});
     }
     if (!nodes.has(to)) {
       nodes.set(to, {
         key: to,
         in: flow,
         out: 0,
-        from: [{key: from, flow: flow}],
+        from: [{key: from, flow: flow, index: i}],
         to: [],
       });
     } else {
       const node = nodes.get(to);
       node.in += flow;
-      node.from.push({key: from, flow: flow});
+      node.from.push({key: from, flow: flow, index: i});
     }
   }
 
   const flowSort = (a, b) => b.flow - a.flow;
 
   [...nodes.values()].forEach(node => {
-    let tmp = 0;
     node.from = node.from.sort(flowSort);
     node.from.forEach(x => {
       x.node = nodes.get(x.key);
-      x.addY = tmp;
-      tmp += x.flow;
     });
 
-    tmp = 0;
     node.to = node.to.sort(flowSort);
     node.to.forEach(x => {
       x.node = nodes.get(x.key);
-      x.addY = tmp;
-      tmp += x.flow;
     });
   });
 
@@ -333,14 +389,15 @@ function buildNodesFromRawData(data) {
 }
 
 /**
- * @param arr {Array<FromToElement>}
- * @param key {string}
+ * @param {Array<FromToElement>} arr
+ * @param {string} key
+ * @param {number} index
  * @return {number}
  */
-function getAddY(arr, key) {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i].key === key) {
-      return arr[i].addY;
+function getAddY(arr, key, index) {
+  for (const item of arr) {
+    if (item.key === key && item.index === index) {
+      return item.addY;
     }
   }
   return 0;
@@ -348,10 +405,10 @@ function getAddY(arr, key) {
 
 class SankeyController extends DatasetController {
   /**
-   * @param meta {ChartMeta<Flow, Element>}
-   * @param data {Array<SankeyDataPoint>} Array of original data elements
-   * @param start {number}
-   * @param count {number}
+   * @param {ChartMeta<Flow, Element>} meta
+   * @param {Array<SankeyDataPoint>} data Array of original data elements
+   * @param {number} start
+   * @param {number} count
    * @return {Array<SankeyParsedData>}
    */
   parseObjectData(meta, data, start, count) {
@@ -364,7 +421,7 @@ class SankeyController extends DatasetController {
     const parsed = []; /* Array<SankeyParsedData> */
     const nodes = me._nodes = buildNodesFromRawData(data);
     /* getDataset() => SankeyControllerDatasetOptions */
-    const priority = me.getDataset().priority;
+    const {column, priority, size} = me.getDataset();
     if (priority) {
       for (const node of nodes.values()) {
         if (node.key in priority) {
@@ -372,18 +429,26 @@ class SankeyController extends DatasetController {
         }
       }
     }
+    if (column) {
+      for (const node of nodes.values()) {
+        if (node.key in column) {
+          node.column = true;
+          node.x = column[node.key];
+        }
+      }
+    }
 
-    const {maxX, maxY} = layout(nodes, data, !!priority);
+    const {maxX, maxY} = layout(nodes, data, !!priority, validateSizeValue(size));
 
     me._maxX = maxX;
     me._maxY = maxY;
 
     for (let i = 0, ilen = data.length; i < ilen; ++i) {
-      const flow = data[i];
-      const from = nodes.get(flow.from);
-      const to = nodes.get(flow.to);
-      const fromY = from.y + getAddY(from.to, flow.to);
-      const toY = to.y + getAddY(to.from, flow.from);
+      const dataPoint = data[i];
+      const from = nodes.get(dataPoint.from);
+      const to = nodes.get(dataPoint.to);
+      const fromY = from.y + getAddY(from.to, dataPoint.to, i);
+      const toY = to.y + getAddY(to.from, dataPoint.from, i);
       parsed.push({
         x: xScale.parse(from.x, i),
         y: yScale.parse(fromY, i),
@@ -392,7 +457,7 @@ class SankeyController extends DatasetController {
           to,
           x: xScale.parse(to.x, i),
           y: yScale.parse(toY, i),
-          height: yScale.parse(flow.flow, i),
+          height: yScale.parse(dataPoint.flow, i),
         }
       });
     }
@@ -415,10 +480,10 @@ class SankeyController extends DatasetController {
   }
 
   /**
-   * @param elems {Array<Flow>}
-   * @param start {number}
-   * @param count {number}
-   * @param mode {"resize" | "reset" | "none" | "hide" | "show" | "normal" | "active"}
+   * @param {Array<Flow>} elems
+   * @param {number} start
+   * @param {number} count
+   * @param {"resize" | "reset" | "none" | "hide" | "show" | "normal" | "active"} mode
    */
   updateElements(elems, start, count, mode) {
     const me = this;
@@ -459,6 +524,7 @@ class SankeyController extends DatasetController {
     const ctx = me._ctx;
     const nodes = me._nodes || new Map();
     const dataset = me.getDataset(); /* SankeyControllerDatasetOptions */
+    const size = validateSizeValue(dataset.size);
     const borderWidth = valueOrDefault(dataset.borderWidth, 1);
     const nodeWidth = valueOrDefault(dataset.nodeWidth, 10);
     const labels = dataset.labels;
@@ -469,7 +535,8 @@ class SankeyController extends DatasetController {
     for (const node of nodes.values()) {
       const x = xScale.getPixelForValue(node.x);
       const y = yScale.getPixelForValue(node.y);
-      const max = Math.max(node.in, node.out);
+
+      const max = Math[size](node.in || node.out, node.out || node.in);
       const height = Math.abs(yScale.getPixelForValue(node.y + max) - y);
       const label = labels && labels[node.key] || node.key;
       let textX = x;
@@ -488,19 +555,23 @@ class SankeyController extends DatasetController {
   }
 
   /**
-   * @param label {string}
-   * @param y {number}
-   * @param height {number}
-   * @param ctx {CanvasRenderingContext2D}
-   * @param textX {number}
+   * @param {string} label
+   * @param {number} y
+   * @param {number} height
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} textX
    * @private
    */
   _drawLabel(label, y, height, ctx, textX) {
-    const lines = isNullOrUndef(label) ? [] : this.toTextLines(label);
+    const me = this;
+    const font = toFont(me.options.font, me.chart.options.font);
+    const lines = isNullOrUndef(label) ? [] : toTextLines(label);
     const linesLength = lines.length;
     const middle = y + height / 2;
-    const padding = 7.5;
-    const textHeight = 15;
+    const textHeight = font.lineHeight;
+    const padding = valueOrDefault(me.options.padding, textHeight / 2);
+
+    ctx.font = font.string;
 
     if (linesLength > 1) {
       const top = middle - (textHeight * linesLength / 2) + padding;
@@ -512,35 +583,12 @@ class SankeyController extends DatasetController {
     }
   }
 
-  /**
-   * @param inputs {string | Array<string>}
-   * @return {Array<string>}
-   * @todo move this in Chart.helpers.toTextLines
-   */
-  toTextLines(inputs) {
-    let lines = [];
-    let input;
-
-    inputs = [].concat(inputs);
-    while (inputs.length) {
-      input = inputs.pop();
-      if (typeof input === 'string') {
-        lines.unshift.apply(lines, input.split('\n'));
-      } else if (Array.isArray(input)) {
-        inputs.push.apply(inputs, input);
-      } else if (!isNullOrUndef(inputs)) {
-        lines.unshift('' + input);
-      }
-    }
-
-    return lines;
-  }
-
   _drawNodes() {
     const me = this;
     const ctx = me._ctx;
     const nodes = me._nodes || new Map();
     const dataset = me.getDataset();  /* SankeyControllerDatasetOptions */
+    const size = validateSizeValue(dataset.size);
     const {xScale, yScale} = me._cachedMeta;
     const borderWidth = valueOrDefault(dataset.borderWidth, 1);
     const nodeWidth = valueOrDefault(dataset.nodeWidth, 10);
@@ -553,7 +601,8 @@ class SankeyController extends DatasetController {
       ctx.fillStyle = node.color;
       const x = xScale.getPixelForValue(node.x);
       const y = yScale.getPixelForValue(node.y);
-      const max = Math.max(node.in, node.out);
+
+      const max = Math[size](node.in || node.out, node.out || node.in);
       const height = Math.abs(yScale.getPixelForValue(node.y + max) - y);
       if (borderWidth) {
         ctx.strokeRect(x, y, nodeWidth, height);
@@ -591,6 +640,7 @@ class SankeyController extends DatasetController {
 }
 
 SankeyController.id = 'sankey';
+
 SankeyController.defaults = {
   dataElementType: 'flow',
   animations: {
@@ -626,9 +676,10 @@ SankeyController.defaults = {
           from: 'transparent'
         }
       }
-    },
+    }
   }
 };
+
 SankeyController.overrides = {
   interaction: {
     mode: 'nearest',
@@ -649,10 +700,10 @@ SankeyController.overrides = {
           const item = context.dataset.data[context.dataIndex];
           return item.from + ' -> ' + item.to + ': ' + item.flow;
         }
-      }
+      },
     },
     legend: {
-      display: false
+      display: false,
     },
   },
   scales: {
@@ -661,7 +712,7 @@ SankeyController.overrides = {
       bounds: 'data',
       display: false,
       min: 0,
-      offset: false
+      offset: false,
     },
     y: {
       type: 'linear',
@@ -669,27 +720,27 @@ SankeyController.overrides = {
       display: false,
       min: 0,
       reverse: true,
-      offset: false
-    }
+      offset: false,
+    },
   },
   layout: {
     padding: {
       top: 3,
       left: 3,
       right: 13,
-      bottom: 3
-    }
-  }
+      bottom: 3,
+    },
+  },
 };
 
 /**
  * @typedef {{x: number, y: number}} ControlPoint
  * @typedef {{cp1: ControlPoint, cp2: ControlPoint}} ControlPoints
  *
- * @param x {number}
- * @param y {number}
- * @param x2 {number}
- * @param y2 {number}
+ * @param {number} x
+ * @param {number} y
+ * @param {number} x2
+ * @param {number} y2
  * @return {ControlPoints}
  */
 const controlPoints = (x, y, x2, y2) => x < x2
@@ -704,17 +755,39 @@ const controlPoints = (x, y, x2, y2) => x < x2
 
 /**
  *
- * @param p1 {ControlPoint}
- * @param p2 {ControlPoint}
- * @param t {number}
+ * @param {ControlPoint} p1
+ * @param {ControlPoint} p2
+ * @param {number} t
  * @return {ControlPoint}
  */
 const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y)});
 
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Flow} flow
+ */
+function setStyle(ctx, {x, x2, options}) {
+  let fill;
+
+  if (options.colorMode === 'from') {
+    fill = color(options.colorFrom).alpha(0.5).rgbString();
+  } else if (options.colorMode === 'to') {
+    fill = color(options.colorTo).alpha(0.5).rgbString();
+  } else {
+    fill = ctx.createLinearGradient(x, 0, x2, 0);
+    fill.addColorStop(0, color(options.colorFrom).alpha(0.5).rgbString());
+    fill.addColorStop(1, color(options.colorTo).alpha(0.5).rgbString());
+  }
+
+  ctx.fillStyle = fill;
+  ctx.strokeStyle = fill;
+  ctx.lineWidth = 0.5;
+}
+
 class Flow extends Element {
 
   /**
-   * @param cfg {FlowConfig}
+   * @param {FlowConfig} cfg
    */
   constructor(cfg) {
     super();
@@ -732,13 +805,12 @@ class Flow extends Element {
   }
 
   /**
-   * @param ctx {CanvasRenderingContext2D}
+   * @param {CanvasRenderingContext2D} ctx
    */
   draw(ctx) {
     const me = this;
     const {x, x2, y, y2, height, progress} = me;
     const {cp1, cp2} = controlPoints(x, y, x2, y2);
-    const options = me.options;
 
     if (progress === 0) {
       return;
@@ -750,21 +822,7 @@ class Flow extends Element {
       ctx.clip();
     }
 
-    let fill;
-
-    if (options.colorMode === 'from') {
-      fill = color(options.colorFrom).alpha(0.5).rgbString();
-    } else if (options.colorMode === 'to') {
-      fill = color(options.colorTo).alpha(0.5).rgbString();
-    } else {
-      fill = ctx.createLinearGradient(x, 0, x2, 0);
-      fill.addColorStop(0, color(options.colorFrom).alpha(0.5).rgbString());
-      fill.addColorStop(1, color(options.colorTo).alpha(0.5).rgbString());
-    }
-
-    ctx.fillStyle = fill;
-    ctx.strokeStyle = fill;
-    ctx.lineWidth = 0.5;
+    setStyle(ctx, me);
 
     ctx.beginPath();
     ctx.moveTo(x, y);
@@ -781,9 +839,9 @@ class Flow extends Element {
   }
 
   /**
-   * @param mouseX {number}
-   * @param mouseY {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseX
+   * @param {number} mouseY
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inRange(mouseX, mouseY, useFinalPosition) {
@@ -805,8 +863,8 @@ class Flow extends Element {
   }
 
   /**
-   * @param mouseX {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseX
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inXRange(mouseX, useFinalPosition) {
@@ -815,8 +873,8 @@ class Flow extends Element {
   }
 
   /**
-   * @param mouseY {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseY
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inYRange(mouseY, useFinalPosition) {
@@ -827,7 +885,7 @@ class Flow extends Element {
   }
 
   /**
-   * @param useFinalPosition {boolean}
+   * @param {boolean} useFinalPosition
    * @return {{x: number, y:number}}
    */
   getCenterPoint(useFinalPosition) {
@@ -843,7 +901,7 @@ class Flow extends Element {
   }
 
   /**
-   * @param axis {"x" | "y"}
+   * @param {"x" | "y"} axis
    * @return {number}
    */
   getRange(axis) {