chartjs-chart-sankey 0.8.1 → 0.9.1

package/README.md

@@ -1,6 +1,6 @@
 # chartjs-chart-sankey
 
-[Chart.js](https://www.chartjs.org/) **v3.3.x** module for creating sankey diagrams
+[Chart.js](https://www.chartjs.org/) **^3.3** module for creating sankey diagrams
 
 [![npm](https://img.shields.io/npm/v/chartjs-chart-sankey.svg)](https://www.npmjs.com/package/chartjs-chart-sankey)
 [![pre-release](https://img.shields.io/github/v/release/kurkle/chartjs-chart-sankey?include_prereleases&style=flat-square)](https://github.com/kurkle/chartjs-chart-sankey/releases/latest)
@@ -49,6 +49,15 @@ const chart = new Chart(ctx, {
 Example:
 
 ```js
+const colors = {
+  a: 'red',
+  b: 'green',
+  c: 'blue',
+  d: 'gray'
+};
+
+const getColor = (key) => colors[key];
+
 const chart = new Chart(ctx, {
   type: 'sankey',
   data: {
@@ -57,7 +66,8 @@ const chart = new Chart(ctx, {
       data: [
         {from: 'a', to: 'b', flow: 10},
         {from: 'a', to: 'c', flow: 5},
-        {from: 'b', to: 'c', flow: 10}
+        {from: 'b', to: 'c', flow: 10},
+        {from: 'd', to: 'c', flow: 7}
       ],
       colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
       colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
@@ -66,13 +76,17 @@ const chart = new Chart(ctx, {
       labels: {
         a: 'Label A',
         b: 'Label B',
-        c: 'Label C'
+        c: 'Label C',
+        d: 'Label D'
       },
       /* optional priority */
       priority: {
-        a: 0,
         b: 1,
-        c: 2
+        d: 0
+      },
+      /* optional column overrides */
+      column: {
+        d: 1
       },
       size: 'max', // or 'min' if flow overlap is preferred
     }]

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

@@ -1,11 +1,50 @@
 /*!
- * chartjs-chart-sankey v0.8.1
+ * chartjs-chart-sankey v0.9.1
  * https://github.com/kurkle/chartjs-chart-sankey#readme
  * (c) 2022 Jukka Kurkela
  * Released under the MIT license
  */
 import { DatasetController, Element } from 'chart.js';
-import { valueOrDefault, toFont, isNullOrUndef, color } from 'chart.js/helpers';
+import { isArray, isNullOrUndef, valueOrDefault, toFont, color } from 'chart.js/helpers';
+
+/**
+ * @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
@@ -13,15 +52,18 @@ import { valueOrDefault, toFont, isNullOrUndef, color } from 'chart.js/helpers';
  * @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,7 +74,11 @@ 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;
@@ -48,12 +94,6 @@ function nextColumn(keys, to) {
   return columnsNotInTo.length ? columnsNotInTo : keys.slice(0, 1);
 }
 
-/**
- * @param x {any}
- * @return {boolean}
- */
-const defined = x => x !== undefined;
-
 /**
  * @param {SankeyNode} a
  * @param {SankeyNode} b
@@ -61,12 +101,28 @@ const defined = x => x !== undefined;
  */
 const nodeByXY = (a, b) => a.x !== b.x ? a.x - b.x : a.y - b.y;
 
+let prevCountId = -1;
+function getCountId() {
+  prevCountId = prevCountId < 100 ? prevCountId + 1 : 0;
+  return prevCountId;
+}
+
 /**
  * @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);
+function nodeCount(list, prop, countId = getCountId()) {
+  let count = 0;
+  for (const elem of list) {
+    if (elem.node._visited === countId) {
+      continue;
+    }
+    elem.node._visited = countId;
+    count += elem.node[prop].length + nodeCount(elem.node[prop], prop, countId);
+  }
+  return count;
+}
 
 /**
  * @param {string} prop
@@ -74,26 +130,21 @@ const nodeCount = (list, prop) => list.reduce((acc, cur) => acc + cur.node[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 {Array<SankeyNode>} nodeArray
- * @return {SankeyNode}
- */
-const findLargestNode = (nodeArray) => nodeArray.sort((a, b) => Math.max(b.in, b.out) - Math.max(a.in, a.out))[0];
-
 /**
  * @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;
       processFrom(n, y);
     }
     y = Math.max(n.y + n.out, y);
-  });
+  }
   return y;
 }
 
@@ -103,14 +154,15 @@ function processFrom(node, 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;
       processTo(n, y);
     }
     y = Math.max(n.y + n.in, y);
-  });
+  }
   return y;
 }
 
@@ -182,7 +234,8 @@ function processRest(nodeArray, 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);
@@ -222,7 +275,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);
@@ -243,7 +297,7 @@ function addPadding(nodeArray, padding) {
       i++;
     }
     maxY = Math.max(maxY, node.y + Math.max(node.in, node.out));
-  });
+  }
   return maxY;
 }
 
@@ -365,17 +419,6 @@ function getAddY(arr, key, index) {
   return 0;
 }
 
-/**
- * @param {any} size
- * @return {'min' | 'max'}
- */
-function validateSizeValue(size) {
-  if (!size || ['min', 'max'].indexOf(size) === -1) {
-    return 'max';
-  }
-  return size;
-}
-
 class SankeyController extends DatasetController {
   /**
    * @param {ChartMeta<Flow, Element>} meta
@@ -394,7 +437,7 @@ class SankeyController extends DatasetController {
     const parsed = []; /* Array<SankeyParsedData> */
     const nodes = me._nodes = buildNodesFromRawData(data);
     /* getDataset() => SankeyControllerDatasetOptions */
-    const {priority, size} = me.getDataset();
+    const {column, priority, size} = me.getDataset();
     if (priority) {
       for (const node of nodes.values()) {
         if (node.key in priority) {
@@ -402,17 +445,24 @@ 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, validateSizeValue(size));
 
     me._maxX = maxX;
     me._maxY = maxY;
 
-    /* loop over raw data elements {SankeyDataPoint} */
     for (let i = 0, ilen = data.length; i < ilen; ++i) {
-      const dataPoint = data[i]; /* {SankeyDataPoint} */
-      const from = nodes.get(dataPoint.from); /* from {SankeyNode} */
-      const to = nodes.get(dataPoint.to); /* to {SankeyNode} */
+      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({
@@ -531,7 +581,7 @@ class SankeyController extends DatasetController {
   _drawLabel(label, y, height, ctx, textX) {
     const me = this;
     const font = toFont(me.options.font, me.chart.options.font);
-    const lines = isNullOrUndef(label) ? [] : me.toTextLines(label);
+    const lines = isNullOrUndef(label) ? [] : toTextLines(label);
     const linesLength = lines.length;
     const middle = y + height / 2;
     const textHeight = font.lineHeight;
@@ -549,30 +599,6 @@ class SankeyController extends DatasetController {
     }
   }
 
-  /**
-   * @param {string | Array<string>} inputs
-   * @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;
@@ -752,6 +778,28 @@ const controlPoints = (x, y, x2, y2) => x < x2
  */
 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 {
 
   /**
@@ -779,7 +827,6 @@ class Flow extends Element {
     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;
@@ -791,21 +838,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);

package/dist/chartjs-chart-sankey.js

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-sankey v0.8.1
+ * chartjs-chart-sankey v0.9.1
  * https://github.com/kurkle/chartjs-chart-sankey#readme
  * (c) 2022 Jukka Kurkela
  * Released under the MIT license
@@ -10,21 +10,63 @@ typeof define === 'function' && define.amd ? define(['chart.js', 'chart.js/helpe
 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart, global.Chart.helpers));
 })(this, (function (chart_js, helpers) { 'use strict';
 
+/**
+ * @param {string | Array<string>} raw
+ * @return {Array<string>}
+ */
+function toTextLines(raw) {
+  const lines = [];
+  const inputs = helpers.isArray(raw) ? raw : helpers.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 (!helpers.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();
@@ -35,7 +77,11 @@ 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;
@@ -51,12 +97,6 @@ function nextColumn(keys, to) {
   return columnsNotInTo.length ? columnsNotInTo : keys.slice(0, 1);
 }
 
-/**
- * @param x {any}
- * @return {boolean}
- */
-const defined = x => x !== undefined;
-
 /**
  * @param {SankeyNode} a
  * @param {SankeyNode} b
@@ -64,12 +104,28 @@ const defined = x => x !== undefined;
  */
 const nodeByXY = (a, b) => a.x !== b.x ? a.x - b.x : a.y - b.y;
 
+let prevCountId = -1;
+function getCountId() {
+  prevCountId = prevCountId < 100 ? prevCountId + 1 : 0;
+  return prevCountId;
+}
+
 /**
  * @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);
+function nodeCount(list, prop, countId = getCountId()) {
+  let count = 0;
+  for (const elem of list) {
+    if (elem.node._visited === countId) {
+      continue;
+    }
+    elem.node._visited = countId;
+    count += elem.node[prop].length + nodeCount(elem.node[prop], prop, countId);
+  }
+  return count;
+}
 
 /**
  * @param {string} prop
@@ -77,26 +133,21 @@ const nodeCount = (list, prop) => list.reduce((acc, cur) => acc + cur.node[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 {Array<SankeyNode>} nodeArray
- * @return {SankeyNode}
- */
-const findLargestNode = (nodeArray) => nodeArray.sort((a, b) => Math.max(b.in, b.out) - Math.max(a.in, a.out))[0];
-
 /**
  * @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;
       processFrom(n, y);
     }
     y = Math.max(n.y + n.out, y);
-  });
+  }
   return y;
 }
 
@@ -106,14 +157,15 @@ function processFrom(node, 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;
       processTo(n, y);
     }
     y = Math.max(n.y + n.in, y);
-  });
+  }
   return y;
 }
 
@@ -185,7 +237,8 @@ function processRest(nodeArray, 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);
@@ -225,7 +278,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);
@@ -246,7 +300,7 @@ function addPadding(nodeArray, padding) {
       i++;
     }
     maxY = Math.max(maxY, node.y + Math.max(node.in, node.out));
-  });
+  }
   return maxY;
 }
 
@@ -368,17 +422,6 @@ function getAddY(arr, key, index) {
   return 0;
 }
 
-/**
- * @param {any} size
- * @return {'min' | 'max'}
- */
-function validateSizeValue(size) {
-  if (!size || ['min', 'max'].indexOf(size) === -1) {
-    return 'max';
-  }
-  return size;
-}
-
 class SankeyController extends chart_js.DatasetController {
   /**
    * @param {ChartMeta<Flow, Element>} meta
@@ -397,7 +440,7 @@ class SankeyController extends chart_js.DatasetController {
     const parsed = []; /* Array<SankeyParsedData> */
     const nodes = me._nodes = buildNodesFromRawData(data);
     /* getDataset() => SankeyControllerDatasetOptions */
-    const {priority, size} = me.getDataset();
+    const {column, priority, size} = me.getDataset();
     if (priority) {
       for (const node of nodes.values()) {
         if (node.key in priority) {
@@ -405,17 +448,24 @@ class SankeyController extends chart_js.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, validateSizeValue(size));
 
     me._maxX = maxX;
     me._maxY = maxY;
 
-    /* loop over raw data elements {SankeyDataPoint} */
     for (let i = 0, ilen = data.length; i < ilen; ++i) {
-      const dataPoint = data[i]; /* {SankeyDataPoint} */
-      const from = nodes.get(dataPoint.from); /* from {SankeyNode} */
-      const to = nodes.get(dataPoint.to); /* to {SankeyNode} */
+      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({
@@ -534,7 +584,7 @@ class SankeyController extends chart_js.DatasetController {
   _drawLabel(label, y, height, ctx, textX) {
     const me = this;
     const font = helpers.toFont(me.options.font, me.chart.options.font);
-    const lines = helpers.isNullOrUndef(label) ? [] : me.toTextLines(label);
+    const lines = helpers.isNullOrUndef(label) ? [] : toTextLines(label);
     const linesLength = lines.length;
     const middle = y + height / 2;
     const textHeight = font.lineHeight;
@@ -552,30 +602,6 @@ class SankeyController extends chart_js.DatasetController {
     }
   }
 
-  /**
-   * @param {string | Array<string>} inputs
-   * @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 (!helpers.isNullOrUndef(inputs)) {
-        lines.unshift('' + input);
-      }
-    }
-
-    return lines;
-  }
-
   _drawNodes() {
     const me = this;
     const ctx = me._ctx;
@@ -755,6 +781,28 @@ const controlPoints = (x, y, x2, y2) => x < x2
  */
 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 = helpers.color(options.colorFrom).alpha(0.5).rgbString();
+  } else if (options.colorMode === 'to') {
+    fill = helpers.color(options.colorTo).alpha(0.5).rgbString();
+  } else {
+    fill = ctx.createLinearGradient(x, 0, x2, 0);
+    fill.addColorStop(0, helpers.color(options.colorFrom).alpha(0.5).rgbString());
+    fill.addColorStop(1, helpers.color(options.colorTo).alpha(0.5).rgbString());
+  }
+
+  ctx.fillStyle = fill;
+  ctx.strokeStyle = fill;
+  ctx.lineWidth = 0.5;
+}
+
 class Flow extends chart_js.Element {
 
   /**
@@ -782,7 +830,6 @@ class Flow extends chart_js.Element {
     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;
@@ -794,21 +841,7 @@ class Flow extends chart_js.Element {
       ctx.clip();
     }
 
-    let fill;
-
-    if (options.colorMode === 'from') {
-      fill = helpers.color(options.colorFrom).alpha(0.5).rgbString();
-    } else if (options.colorMode === 'to') {
-      fill = helpers.color(options.colorTo).alpha(0.5).rgbString();
-    } else {
-      fill = ctx.createLinearGradient(x, 0, x2, 0);
-      fill.addColorStop(0, helpers.color(options.colorFrom).alpha(0.5).rgbString());
-      fill.addColorStop(1, helpers.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);

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

@@ -1,7 +1,7 @@
 /*!
- * chartjs-chart-sankey v0.8.1
+ * chartjs-chart-sankey v0.9.1
  * https://github.com/kurkle/chartjs-chart-sankey#readme
  * (c) 2022 Jukka Kurkela
  * Released under the MIT license
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Chart,t.Chart.helpers)}(this,(function(t,e){"use strict";function o(t,e){const o=t.filter((t=>!e.has(t)));return o.length?o:t.slice(0,1)}const r=t=>void 0!==t,a=(t,e)=>t.x!==e.x?t.x-e.x:t.y-e.y,n=(t,e)=>t.reduce(((t,o)=>t+o.node[e].length+n(o.node[e],e)),0),i=t=>(e,o)=>n(e.node[t],t)-n(o.node[t],t)||e.node[t].length-o.node[t].length;function s(t,e){return t.from.sort(i("from")).forEach((t=>{const o=t.node;r(o.y)||(o.y=e,s(o,e)),e=Math.max(o.y+o.out,e)})),e}function l(t,e){return t.to.sort(i("to")).forEach((t=>{const o=t.node;r(o.y)||(o.y=e,l(o,e)),e=Math.max(o.y+o.in,e)})),e}function c(t,e){return r(t.y)?t.y:(t.y=e,e)}function h(t,e){const o=(t=>t.sort(((t,e)=>Math.max(e.in,e.out)-Math.max(t.in,t.out)))[0])(t);o.y=0;const a=s(o,0),n=l(o,0),i=function(t,e){const o=t.filter((t=>0===t.x)),a=t.filter((t=>t.x===e)),n=o.filter((t=>!r(t.y))),i=a.filter((t=>!r(t.y))),h=t.filter((t=>t.x>0&&t.x<e&&!r(t.y)));let d=o.reduce(((t,e)=>Math.max(t,e.y+e.out||0)),0),f=a.reduce(((t,e)=>Math.max(t,e.y+e.in||0)),0),u=0;return d>=f?(n.forEach((t=>{d=c(t,d),d=Math.max(d+t.out,l(t,d))})),i.forEach((t=>{f=c(t,f),f=Math.max(f+t.in,l(t,f))}))):(i.forEach((t=>{f=c(t,f),f=Math.max(f+t.in,l(t,f))})),n.forEach((t=>{d=c(t,d),d=Math.max(d+t.out,l(t,d))}))),h.forEach((e=>{let o=t.filter((t=>t.x===e.x&&r(t.y))).reduce(((t,e)=>Math.max(t,e.y+Math.max(e.in,e.out))),0);o=c(e,o),o=Math.max(o+e.in,s(e,o)),o=Math.max(o+e.out,l(e,o)),u=Math.max(u,o)})),Math.max(d,f,u)}(t,e);return Math.max(a,n,i)}function d(t,e,r,n){const i=[...t.values()],s=function(t,e){const r=new Set(e.map((t=>t.to))),a=new Set(e.map((t=>t.from))),n=new Set([...t.keys()]);let i=0;for(;n.size;){const a=o([...n],r);for(let e=0;e<a.length;e++)t.get(a[e]).x=i,n.delete(a[e]);n.size&&(r.clear(),e.filter((t=>n.has(t.from))).forEach((t=>r.add(t.to))),i++)}return[...t.keys()].filter((t=>!a.has(t))).forEach((e=>{t.get(e).x=i})),i}(t,e),l=r?function(t,e){let o=0,r=0;for(let a=0;a<=e;a++){let e=r;const n=t.filter((t=>t.x===a)).sort(((t,e)=>t.priority-e.priority));r=n[0].to.filter((t=>t.node.x>a+1)).reduce(((t,e)=>t+e.flow),0)||0;for(const t of n)t.y=e,e+=Math.max(t.out,t.in);o=Math.max(e,o)}return o}(i,s):h(i,s),c=function(t,e){let o=1,r=0,n=0,i=0;const s=[];return t.sort(a).forEach((t=>{if(t.y){if(0===t.x)s.push(t.y);else{for(r!==t.x&&(r=t.x,n=0),o=n+1;o<s.length&&!(s[o]>t.y);o++);n=o}t.y+=o*e,o++}i=Math.max(i,t.y+Math.max(t.in,t.out))})),i}(i,.03*l);return function(t,e){t.forEach((t=>{const o=Math[e](t.in||t.out,t.out||t.in),r=o<t.in,a=o<t.out;let n=0,i=t.from.length;t.from.sort(((t,e)=>t.node.y+t.node.out/2-(e.node.y+e.node.out/2))).forEach(((t,e)=>{r?t.addY=e*(o-t.flow)/(i-1):(t.addY=n,n+=t.flow)})),n=0,i=t.to.length,t.to.sort(((t,e)=>t.node.y+t.node.in/2-(e.node.y+e.node.in/2))).forEach(((t,e)=>{a?t.addY=e*(o-t.flow)/(i-1):(t.addY=n,n+=t.flow)}))}))}(i,n),{maxX:s,maxY:c}}function f(t,e,o){for(const r of t)if(r.key===e&&r.index===o)return r.addY;return 0}function u(t){return t&&-1!==["min","max"].indexOf(t)?t:"max"}class x extends t.DatasetController{parseObjectData(t,e,o,r){if(0===r)return[];const a=this,{xScale:n,yScale:i}=t,s=[],l=a._nodes=function(t){const e=new Map;for(let o=0;o<t.length;o++){const{from:r,to:a,flow:n}=t[o];if(e.has(r)){const t=e.get(r);t.out+=n,t.to.push({key:a,flow:n,index:o})}else e.set(r,{key:r,in:0,out:n,from:[],to:[{key:a,flow:n,index:o}]});if(e.has(a)){const t=e.get(a);t.in+=n,t.from.push({key:r,flow:n,index:o})}else e.set(a,{key:a,in:n,out:0,from:[{key:r,flow:n,index:o}],to:[]})}const o=(t,e)=>e.flow-t.flow;return[...e.values()].forEach((t=>{t.from=t.from.sort(o),t.from.forEach((t=>{t.node=e.get(t.key)})),t.to=t.to.sort(o),t.to.forEach((t=>{t.node=e.get(t.key)}))})),e}(e),{priority:c,size:h}=a.getDataset();if(c)for(const t of l.values())t.key in c&&(t.priority=c[t.key]);const{maxX:x,maxY:y}=d(l,e,!!c,u(h));a._maxX=x,a._maxY=y;for(let t=0,o=e.length;t<o;++t){const o=e[t],r=l.get(o.from),a=l.get(o.to),c=r.y+f(r.to,o.to,t),h=a.y+f(a.from,o.from,t);s.push({x:n.parse(r.x,t),y:i.parse(c,t),_custom:{from:r,to:a,x:n.parse(a.x,t),y:i.parse(h,t),height:i.parse(o.flow,t)}})}return s.slice(o,o+r)}getMinMax(t){return{min:0,max:t===this._cachedMeta.xScale?this._maxX:this._maxY}}update(t){const e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)}updateElements(t,o,r,a){const n=this,{xScale:i,yScale:s}=n._cachedMeta,l=n.resolveDataElementOptions(o,a),c=n.getSharedOptions(a,t[o],l),h=n.getDataset(),d=e.valueOrDefault(h.borderWidth,1)/2+.5,f=e.valueOrDefault(h.nodeWidth,10);for(let e=o;e<o+r;e++){const o=n.getParsed(e),r=o._custom,l=s.getPixelForValue(o.y);n.updateElement(t[e],e,{x:i.getPixelForValue(o.x)+f+d,y:l,x2:i.getPixelForValue(r.x)-d,y2:s.getPixelForValue(r.y),from:r.from,to:r.to,progress:"reset"===a?0:1,height:Math.abs(s.getPixelForValue(o.y+r.height)-l),options:n.resolveDataElementOptions(e,a)},a)}n.updateSharedOptions(c,a)}_drawLabels(){const t=this,o=t._ctx,r=t._nodes||new Map,a=t.getDataset(),n=u(a.size),i=e.valueOrDefault(a.borderWidth,1),s=e.valueOrDefault(a.nodeWidth,10),l=a.labels,{xScale:c,yScale:h}=t._cachedMeta;o.save();const d=t.chart.chartArea;for(const t of r.values()){const e=c.getPixelForValue(t.x),r=h.getPixelForValue(t.y),f=Math[n](t.in||t.out,t.out||t.in),u=Math.abs(h.getPixelForValue(t.y+f)-r),x=l&&l[t.key]||t.key;let y=e;o.fillStyle=a.color||"black",o.textBaseline="middle",e<d.width/2?(o.textAlign="left",y+=s+i+4):(o.textAlign="right",y-=i+4),this._drawLabel(x,r,u,o,y)}o.restore()}_drawLabel(t,o,r,a,n){const i=this,s=e.toFont(i.options.font,i.chart.options.font),l=e.isNullOrUndef(t)?[]:i.toTextLines(t),c=l.length,h=o+r/2,d=s.lineHeight,f=e.valueOrDefault(i.options.padding,d/2);if(a.font=s.string,c>1){const t=h-d*c/2+f;for(let e=0;e<c;e++)a.fillText(l[e],n,t+e*d)}else a.fillText(t,n,h)}toTextLines(t){let o,r=[];for(t=[].concat(t);t.length;)o=t.pop(),"string"==typeof o?r.unshift.apply(r,o.split("\n")):Array.isArray(o)?t.push.apply(t,o):e.isNullOrUndef(t)||r.unshift(""+o);return r}_drawNodes(){const t=this,o=t._ctx,r=t._nodes||new Map,a=t.getDataset(),n=u(a.size),{xScale:i,yScale:s}=t._cachedMeta,l=e.valueOrDefault(a.borderWidth,1),c=e.valueOrDefault(a.nodeWidth,10);o.save(),o.strokeStyle=a.borderColor||"black",o.lineWidth=l;for(const t of r.values()){o.fillStyle=t.color;const e=i.getPixelForValue(t.x),r=s.getPixelForValue(t.y),a=Math[n](t.in||t.out,t.out||t.in),h=Math.abs(s.getPixelForValue(t.y+a)-r);l&&o.strokeRect(e,r,c,h),o.fillRect(e,r,c,h)}o.restore()}draw(){const t=this,e=t._ctx,o=t.getMeta().data||[];for(let t=0,e=o.length;t<e;++t){const e=o[t];e.from.color=e.options.colorFrom,e.to.color=e.options.colorTo}t._drawNodes();for(let t=0,r=o.length;t<r;++t)o[t].draw(e);t._drawLabels()}}x.id="sankey",x.defaults={dataElementType:"flow",animations:{numbers:{type:"number",properties:["x","y","x2","y2","height"]},progress:{easing:"linear",duration:t=>"data"===t.type?200*(t.parsed._custom.x-t.parsed.x):void 0,delay:t=>"data"===t.type?500*t.parsed.x+20*t.dataIndex:void 0},colors:{type:"color",properties:["colorFrom","colorTo"]}},transitions:{hide:{animations:{colors:{type:"color",properties:["colorFrom","colorTo"],to:"transparent"}}},show:{animations:{colors:{type:"color",properties:["colorFrom","colorTo"],from:"transparent"}}}}},x.overrides={interaction:{mode:"nearest",intersect:!0},datasets:{color:()=>"#efefef",clip:!1,parsing:!0},plugins:{tooltip:{callbacks:{title:()=>"",label(t){const e=t.dataset.data[t.dataIndex];return e.from+" -> "+e.to+": "+e.flow}}},legend:{display:!1}},scales:{x:{type:"linear",bounds:"data",display:!1,min:0,offset:!1},y:{type:"linear",bounds:"data",display:!1,min:0,reverse:!0,offset:!1}},layout:{padding:{top:3,left:3,right:13,bottom:3}}};const y=(t,e,o,r)=>t<o?{cp1:{x:t+(o-t)/3*2,y:e},cp2:{x:t+(o-t)/3,y:r}}:{cp1:{x:t-(t-o)/3,y:0},cp2:{x:o+(t-o)/3,y:0}},p=(t,e,o)=>({x:t.x+o*(e.x-t.x),y:t.y+o*(e.y-t.y)});class g extends t.Element{constructor(t){super(),this.options=void 0,this.x=void 0,this.y=void 0,this.x2=void 0,this.y2=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const{x:o,x2:r,y:a,y2:n,height:i,progress:s}=this,{cp1:l,cp2:c}=y(o,a,r,n),h=this.options;if(0===s)return;let d;t.save(),s<1&&(t.beginPath(),t.rect(o,Math.min(a,n),(r-o)*s+1,Math.abs(n-a)+i+1),t.clip()),"from"===h.colorMode?d=e.color(h.colorFrom).alpha(.5).rgbString():"to"===h.colorMode?d=e.color(h.colorTo).alpha(.5).rgbString():(d=t.createLinearGradient(o,0,r,0),d.addColorStop(0,e.color(h.colorFrom).alpha(.5).rgbString()),d.addColorStop(1,e.color(h.colorTo).alpha(.5).rgbString())),t.fillStyle=d,t.strokeStyle=d,t.lineWidth=.5,t.beginPath(),t.moveTo(o,a),t.bezierCurveTo(l.x,l.y,c.x,c.y,r,n),t.lineTo(r,n+i),t.bezierCurveTo(c.x,c.y+i,l.x,l.y+i,o,a+i),t.lineTo(o,a),t.stroke(),t.closePath(),t.fill(),t.restore()}inRange(t,e,o){const{x:r,y:a,x2:n,y2:i,height:s}=this.getProps(["x","y","x2","y2","height"],o);if(t<r||t>n)return!1;const{cp1:l,cp2:c}=y(r,a,n,i),h=(t-r)/(n-r),d={x:n,y:i},f=p({x:r,y:a},l,h),u=p(l,c,h),x=p(c,d,h),g=p(f,u,h),m=p(u,x,h),M=p(g,m,h).y;return e>=M&&e<=M+s}inXRange(t,e){const{x:o,x2:r}=this.getProps(["x","x2"],e);return t>=o&&t<=r}inYRange(t,e){const{y:o,y2:r,height:a}=this.getProps(["y","y2","height"],e),n=Math.min(o,r),i=Math.max(o,r)+a;return t>=n&&t<=i}getCenterPoint(t){const{x:e,y:o,x2:r,y2:a,height:n}=this.getProps(["x","y","x2","y2","height"],t);return{x:(e+r)/2,y:(o+a+n)/2}}tooltipPosition(t){return this.getCenterPoint(t)}getRange(t){return"x"===t?this.width/2:this.height/2}}g.id="flow",g.defaults={colorFrom:"red",colorTo:"green",colorMode:"gradient"},t.Chart.register(x,g)}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Chart,t.Chart.helpers)}(this,(function(t,e){"use strict";function o(t){return t&&-1!==["min","max"].indexOf(t)?t:"max"}const r=t=>void 0!==t;function n(t,e){const o=t.filter((t=>!e.has(t)));return o.length?o:t.slice(0,1)}const a=(t,e)=>t.x!==e.x?t.x-e.x:t.y-e.y;let i=-1;function s(t,e,o=function(){return i=i<100?i+1:0,i}()){let r=0;for(const n of t)n.node._visited!==o&&(n.node._visited=o,r+=n.node[e].length+s(n.node[e],e,o));return r}const l=t=>(e,o)=>s(e.node[t],t)-s(o.node[t],t)||e.node[t].length-o.node[t].length;function c(t,e){t.from.sort(l("from"));for(const o of t.from){const t=o.node;r(t.y)||(t.y=e,c(t,e)),e=Math.max(t.y+t.out,e)}return e}function f(t,e){t.to.sort(l("to"));for(const o of t.to){const t=o.node;r(t.y)||(t.y=e,f(t,e)),e=Math.max(t.y+t.in,e)}return e}function h(t,e){return r(t.y)?t.y:(t.y=e,e)}function d(t,e){t.sort(((t,e)=>Math.max(e.in,e.out)-Math.max(t.in,t.out)));const o=t[0];o.y=0;const n=c(o,0),a=f(o,0),i=function(t,e){const o=t.filter((t=>0===t.x)),n=t.filter((t=>t.x===e)),a=o.filter((t=>!r(t.y))),i=n.filter((t=>!r(t.y))),s=t.filter((t=>t.x>0&&t.x<e&&!r(t.y)));let l=o.reduce(((t,e)=>Math.max(t,e.y+e.out||0)),0),d=n.reduce(((t,e)=>Math.max(t,e.y+e.in||0)),0),u=0;return l>=d?(a.forEach((t=>{l=h(t,l),l=Math.max(l+t.out,f(t,l))})),i.forEach((t=>{d=h(t,d),d=Math.max(d+t.in,f(t,d))}))):(i.forEach((t=>{d=h(t,d),d=Math.max(d+t.in,f(t,d))})),a.forEach((t=>{l=h(t,l),l=Math.max(l+t.out,f(t,l))}))),s.forEach((e=>{let o=t.filter((t=>t.x===e.x&&r(t.y))).reduce(((t,e)=>Math.max(t,e.y+Math.max(e.in,e.out))),0);o=h(e,o),o=Math.max(o+e.in,c(e,o)),o=Math.max(o+e.out,f(e,o)),u=Math.max(u,o)})),Math.max(l,d,u)}(t,e);return Math.max(n,a,i)}function u(t,e,o,i){const s=[...t.values()],l=function(t,e){const o=new Set(e.map((t=>t.to))),a=new Set(e.map((t=>t.from))),i=new Set([...t.keys()]);let s=0;for(;i.size;){const a=n([...i],o);for(const e of a){const o=t.get(e);r(o.x)||(o.x=s),i.delete(e)}i.size&&(o.clear(),e.filter((t=>i.has(t.from))).forEach((t=>o.add(t.to))),s++)}return[...t.keys()].filter((t=>!a.has(t))).forEach((e=>{const o=t.get(e);o.column||(o.x=s)})),s}(t,e),c=o?function(t,e){let o=0,r=0;for(let n=0;n<=e;n++){let e=r;const a=t.filter((t=>t.x===n)).sort(((t,e)=>t.priority-e.priority));r=a[0].to.filter((t=>t.node.x>n+1)).reduce(((t,e)=>t+e.flow),0)||0;for(const t of a)t.y=e,e+=Math.max(t.out,t.in);o=Math.max(e,o)}return o}(s,l):d(s,l),f=function(t,e){let o=1,r=0,n=0,i=0;const s=[];t.sort(a);for(const a of t){if(a.y){if(0===a.x)s.push(a.y);else{for(r!==a.x&&(r=a.x,n=0),o=n+1;o<s.length&&!(s[o]>a.y);o++);n=o}a.y+=o*e,o++}i=Math.max(i,a.y+Math.max(a.in,a.out))}return i}(s,.03*c);return function(t,e){t.forEach((t=>{const o=Math[e](t.in||t.out,t.out||t.in),r=o<t.in,n=o<t.out;let a=0,i=t.from.length;t.from.sort(((t,e)=>t.node.y+t.node.out/2-(e.node.y+e.node.out/2))).forEach(((t,e)=>{r?t.addY=e*(o-t.flow)/(i-1):(t.addY=a,a+=t.flow)})),a=0,i=t.to.length,t.to.sort(((t,e)=>t.node.y+t.node.in/2-(e.node.y+e.node.in/2))).forEach(((t,e)=>{n?t.addY=e*(o-t.flow)/(i-1):(t.addY=a,a+=t.flow)}))}))}(s,i),{maxX:l,maxY:f}}function x(t,e,o){for(const r of t)if(r.key===e&&r.index===o)return r.addY;return 0}class y extends t.DatasetController{parseObjectData(t,e,r,n){if(0===n)return[];const a=this,{xScale:i,yScale:s}=t,l=[],c=a._nodes=function(t){const e=new Map;for(let o=0;o<t.length;o++){const{from:r,to:n,flow:a}=t[o];if(e.has(r)){const t=e.get(r);t.out+=a,t.to.push({key:n,flow:a,index:o})}else e.set(r,{key:r,in:0,out:a,from:[],to:[{key:n,flow:a,index:o}]});if(e.has(n)){const t=e.get(n);t.in+=a,t.from.push({key:r,flow:a,index:o})}else e.set(n,{key:n,in:a,out:0,from:[{key:r,flow:a,index:o}],to:[]})}const o=(t,e)=>e.flow-t.flow;return[...e.values()].forEach((t=>{t.from=t.from.sort(o),t.from.forEach((t=>{t.node=e.get(t.key)})),t.to=t.to.sort(o),t.to.forEach((t=>{t.node=e.get(t.key)}))})),e}(e),{column:f,priority:h,size:d}=a.getDataset();if(h)for(const t of c.values())t.key in h&&(t.priority=h[t.key]);if(f)for(const t of c.values())t.key in f&&(t.column=!0,t.x=f[t.key]);const{maxX:y,maxY:p}=u(c,e,!!h,o(d));a._maxX=y,a._maxY=p;for(let t=0,o=e.length;t<o;++t){const o=e[t],r=c.get(o.from),n=c.get(o.to),a=r.y+x(r.to,o.to,t),f=n.y+x(n.from,o.from,t);l.push({x:i.parse(r.x,t),y:s.parse(a,t),_custom:{from:r,to:n,x:i.parse(n.x,t),y:s.parse(f,t),height:s.parse(o.flow,t)}})}return l.slice(r,r+n)}getMinMax(t){return{min:0,max:t===this._cachedMeta.xScale?this._maxX:this._maxY}}update(t){const e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)}updateElements(t,o,r,n){const a=this,{xScale:i,yScale:s}=a._cachedMeta,l=a.resolveDataElementOptions(o,n),c=a.getSharedOptions(n,t[o],l),f=a.getDataset(),h=e.valueOrDefault(f.borderWidth,1)/2+.5,d=e.valueOrDefault(f.nodeWidth,10);for(let e=o;e<o+r;e++){const o=a.getParsed(e),r=o._custom,l=s.getPixelForValue(o.y);a.updateElement(t[e],e,{x:i.getPixelForValue(o.x)+d+h,y:l,x2:i.getPixelForValue(r.x)-h,y2:s.getPixelForValue(r.y),from:r.from,to:r.to,progress:"reset"===n?0:1,height:Math.abs(s.getPixelForValue(o.y+r.height)-l),options:a.resolveDataElementOptions(e,n)},n)}a.updateSharedOptions(c,n)}_drawLabels(){const t=this,r=t._ctx,n=t._nodes||new Map,a=t.getDataset(),i=o(a.size),s=e.valueOrDefault(a.borderWidth,1),l=e.valueOrDefault(a.nodeWidth,10),c=a.labels,{xScale:f,yScale:h}=t._cachedMeta;r.save();const d=t.chart.chartArea;for(const t of n.values()){const e=f.getPixelForValue(t.x),o=h.getPixelForValue(t.y),n=Math[i](t.in||t.out,t.out||t.in),u=Math.abs(h.getPixelForValue(t.y+n)-o),x=c&&c[t.key]||t.key;let y=e;r.fillStyle=a.color||"black",r.textBaseline="middle",e<d.width/2?(r.textAlign="left",y+=l+s+4):(r.textAlign="right",y-=s+4),this._drawLabel(x,o,u,r,y)}r.restore()}_drawLabel(t,o,r,n,a){const i=this,s=e.toFont(i.options.font,i.chart.options.font),l=e.isNullOrUndef(t)?[]:function(t){const o=[],r=e.isArray(t)?t:e.isNullOrUndef(t)?[]:[t];for(;r.length;){const t=r.pop();"string"==typeof t?o.unshift.apply(o,t.split("\n")):Array.isArray(t)?r.push.apply(r,t):e.isNullOrUndef(r)||o.unshift(""+t)}return o}(t),c=l.length,f=o+r/2,h=s.lineHeight,d=e.valueOrDefault(i.options.padding,h/2);if(n.font=s.string,c>1){const t=f-h*c/2+d;for(let e=0;e<c;e++)n.fillText(l[e],a,t+e*h)}else n.fillText(t,a,f)}_drawNodes(){const t=this,r=t._ctx,n=t._nodes||new Map,a=t.getDataset(),i=o(a.size),{xScale:s,yScale:l}=t._cachedMeta,c=e.valueOrDefault(a.borderWidth,1),f=e.valueOrDefault(a.nodeWidth,10);r.save(),r.strokeStyle=a.borderColor||"black",r.lineWidth=c;for(const t of n.values()){r.fillStyle=t.color;const e=s.getPixelForValue(t.x),o=l.getPixelForValue(t.y),n=Math[i](t.in||t.out,t.out||t.in),a=Math.abs(l.getPixelForValue(t.y+n)-o);c&&r.strokeRect(e,o,f,a),r.fillRect(e,o,f,a)}r.restore()}draw(){const t=this,e=t._ctx,o=t.getMeta().data||[];for(let t=0,e=o.length;t<e;++t){const e=o[t];e.from.color=e.options.colorFrom,e.to.color=e.options.colorTo}t._drawNodes();for(let t=0,r=o.length;t<r;++t)o[t].draw(e);t._drawLabels()}}y.id="sankey",y.defaults={dataElementType:"flow",animations:{numbers:{type:"number",properties:["x","y","x2","y2","height"]},progress:{easing:"linear",duration:t=>"data"===t.type?200*(t.parsed._custom.x-t.parsed.x):void 0,delay:t=>"data"===t.type?500*t.parsed.x+20*t.dataIndex:void 0},colors:{type:"color",properties:["colorFrom","colorTo"]}},transitions:{hide:{animations:{colors:{type:"color",properties:["colorFrom","colorTo"],to:"transparent"}}},show:{animations:{colors:{type:"color",properties:["colorFrom","colorTo"],from:"transparent"}}}}},y.overrides={interaction:{mode:"nearest",intersect:!0},datasets:{color:()=>"#efefef",clip:!1,parsing:!0},plugins:{tooltip:{callbacks:{title:()=>"",label(t){const e=t.dataset.data[t.dataIndex];return e.from+" -> "+e.to+": "+e.flow}}},legend:{display:!1}},scales:{x:{type:"linear",bounds:"data",display:!1,min:0,offset:!1},y:{type:"linear",bounds:"data",display:!1,min:0,reverse:!0,offset:!1}},layout:{padding:{top:3,left:3,right:13,bottom:3}}};const p=(t,e,o,r)=>t<o?{cp1:{x:t+(o-t)/3*2,y:e},cp2:{x:t+(o-t)/3,y:r}}:{cp1:{x:t-(t-o)/3,y:0},cp2:{x:o+(t-o)/3,y:0}},g=(t,e,o)=>({x:t.x+o*(e.x-t.x),y:t.y+o*(e.y-t.y)});class m extends t.Element{constructor(t){super(),this.options=void 0,this.x=void 0,this.y=void 0,this.x2=void 0,this.y2=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const{x:o,x2:r,y:n,y2:a,height:i,progress:s}=this,{cp1:l,cp2:c}=p(o,n,r,a);0!==s&&(t.save(),s<1&&(t.beginPath(),t.rect(o,Math.min(n,a),(r-o)*s+1,Math.abs(a-n)+i+1),t.clip()),function(t,{x:o,x2:r,options:n}){let a;"from"===n.colorMode?a=e.color(n.colorFrom).alpha(.5).rgbString():"to"===n.colorMode?a=e.color(n.colorTo).alpha(.5).rgbString():(a=t.createLinearGradient(o,0,r,0),a.addColorStop(0,e.color(n.colorFrom).alpha(.5).rgbString()),a.addColorStop(1,e.color(n.colorTo).alpha(.5).rgbString())),t.fillStyle=a,t.strokeStyle=a,t.lineWidth=.5}(t,this),t.beginPath(),t.moveTo(o,n),t.bezierCurveTo(l.x,l.y,c.x,c.y,r,a),t.lineTo(r,a+i),t.bezierCurveTo(c.x,c.y+i,l.x,l.y+i,o,n+i),t.lineTo(o,n),t.stroke(),t.closePath(),t.fill(),t.restore())}inRange(t,e,o){const{x:r,y:n,x2:a,y2:i,height:s}=this.getProps(["x","y","x2","y2","height"],o);if(t<r||t>a)return!1;const{cp1:l,cp2:c}=p(r,n,a,i),f=(t-r)/(a-r),h={x:a,y:i},d=g({x:r,y:n},l,f),u=g(l,c,f),x=g(c,h,f),y=g(d,u,f),m=g(u,x,f),M=g(y,m,f).y;return e>=M&&e<=M+s}inXRange(t,e){const{x:o,x2:r}=this.getProps(["x","x2"],e);return t>=o&&t<=r}inYRange(t,e){const{y:o,y2:r,height:n}=this.getProps(["y","y2","height"],e),a=Math.min(o,r),i=Math.max(o,r)+n;return t>=a&&t<=i}getCenterPoint(t){const{x:e,y:o,x2:r,y2:n,height:a}=this.getProps(["x","y","x2","y2","height"],t);return{x:(e+r)/2,y:(o+n+a)/2}}tooltipPosition(t){return this.getCenterPoint(t)}getRange(t){return"x"===t?this.width/2:this.height/2}}m.id="flow",m.defaults={colorFrom:"red",colorTo:"green",colorMode:"gradient"},t.Chart.register(y,m)}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-sankey",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Chart.js module for creating sankey diagrams",
   "main": "dist/chartjs-chart-sankey.js",
   "module": "dist/chartjs-chart-sankey.esm.js",
@@ -10,11 +10,11 @@
     "autobuild": "rollup -c -w",
     "dev": "karma start --no-single-run --auto-watch --browsers chrome",
     "dev:ff": "karma start --no-single-run --auto-watch --browsers firefox",
-    "lint": "concurrently -r \"npm:lint-*\"",
+    "lint": "concurrently --group \"npm:lint-*\"",
     "lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\"",
     "lint-md": "eslint \"**/*.md\"",
     "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
-    "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
+    "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"",
     "test-lint": "npm run lint",
     "test-karma": "karma start --auto-watch --single-run"
   },
@@ -39,34 +39,34 @@
   "homepage": "https://github.com/kurkle/chartjs-chart-sankey#readme",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.26.1",
-    "chart.js": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "chart.js": "^3.3.0",
     "chartjs-adapter-date-fns": "^2.0.0",
-    "chartjs-test-utils": "^0.3.0",
-    "concurrently": "^6.0.0",
+    "chartjs-test-utils": "^0.4.0",
+    "concurrently": "^7.0.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.19.0",
-    "eslint": "^7.22.0",
+    "eslint": "^8.8.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-markdown": "^2.2.0",
-    "jasmine-core": "^3.7.1",
+    "jasmine-core": "^4.0.0",
     "karma": "^6.2.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "karma-rollup-preprocessor": "^7.0.7",
-    "karma-spec-reporter": "0.0.32",
+    "karma-rollup-preprocessor": "7.0.7",
+    "karma-spec-reporter": "^0.0.33",
     "rollup": "^2.42.1",
     "rollup-plugin-istanbul": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "~4.3"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "chart.js": "^3.0.0"
+    "chart.js": "^3.3.0"
   }
 }

package/types/index.esm.d.ts

@@ -3,8 +3,10 @@ import {
   ChartComponent,
   DatasetController,
   Element,
+  VisualElement,
   FontSpec
 } from 'chart.js';
+import { AnyObject } from 'chart.js/types/basic';
 
 declare module 'chart.js' {
 
@@ -24,6 +26,7 @@ declare module 'chart.js' {
     colorMode: 'gradient' | 'from' | 'to';
     /* Map<node.key, priority_value> */
     priority?: Record<string, number>
+    column?: Record<string, number>
     /* Map<node.key, label> */
     labels?: Record<string, string>
 
@@ -52,6 +55,8 @@ declare module 'chart.js' {
     out: number
     from: Array<FromToElement>
     to: Array<FromToElement>
+    /* true if x is defined by SankeyControllerDatasetOptions.column map  */
+    column?: boolean
     /* priority extracted from the SankeyControllerDatasetOptions.priority map */
     priority?: number
     y?: number
@@ -75,28 +80,28 @@ declare module 'chart.js' {
       datasetOptions: SankeyControllerDatasetOptions;
       defaultDataPoint: SankeyDataPoint;
       parsedDataType: SankeyParsedData;
-      metaExtensions:{}
+      metaExtensions: AnyObject
       /* TODO: define sankey chart options */
-      chartOptions: any;
+      chartOptions: AnyObject;
       scales: keyof CartesianScaleTypeRegistry;
     };
   }
 }
 
-type FlowOptions = {
+export interface FlowOptions {
   colorMode: 'gradient' | 'from' | 'to';
   colorFrom: string
   colorTo: string
 }
 
-type FlowConfig = {
+export interface FlowConfig {
   x: number;
   y: number;
   x2: number;
   y2: number;
   height: number;
   options: FlowOptions
-};
+}
 
 export type SankeyController = DatasetController
 export const SankeyController: ChartComponent & {
@@ -104,7 +109,11 @@ export const SankeyController: ChartComponent & {
   new(chart: Chart, datasetIndex: number): SankeyController;
 };
 
-export type Flow = Element<FlowConfig, FlowOptions>
+export interface Flow<
+  T extends FlowConfig = FlowConfig,
+  O extends FlowOptions = FlowOptions
+> extends Element<T, O>, VisualElement {}
+
 export const Flow: ChartComponent & {
   prototype: Flow;
   new(cfg: FlowConfig): Flow;