chartjs-chart-sankey 0.8.0 → 0.8.1

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

@@ -1,15 +1,15 @@
 /*!
- * chartjs-chart-sankey v0.8.0
+ * chartjs-chart-sankey v0.8.1
  * 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, toFont, isNullOrUndef, color } from 'chart.js/helpers';
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
+ * @param {Map<string, SankeyNode>} nodes
+ * @param {Array<SankeyDataPoint>} data
  * @return {number}
  */
 function calculateX(nodes, data) {
@@ -39,8 +39,8 @@ function calculateX(nodes, data) {
 }
 
 /**
- * @param keys {Array<string>}
- * @param to {Set<string>}
+ * @param {Array<string>} keys
+ * @param {Set<string>} to
  * @return {Array<string>}
  */
 function nextColumn(keys, to) {
@@ -55,34 +55,34 @@ function nextColumn(keys, to) {
 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>}
+ * @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 node {SankeyNode}
- * @param y {number}
+ * @param {SankeyNode} node
+ * @param {number} y
  * @return {number}
  */
 function processFrom(node, y) {
@@ -90,15 +90,16 @@ function processFrom(node, y) {
     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) {
@@ -106,15 +107,16 @@ function processTo(node, y) {
     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) {
@@ -126,8 +128,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) {
@@ -135,9 +137,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 => {
@@ -160,13 +164,21 @@ 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) {
@@ -179,15 +191,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);
@@ -198,8 +212,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) {
@@ -234,8 +248,8 @@ function addPadding(nodeArray, padding) {
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param size {'min' | 'max'}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {'min' | 'max'} size
  */
 function sortFlows(nodeArray, size) {
   nodeArray.forEach((node) => {
@@ -266,10 +280,10 @@ function sortFlows(nodeArray, size) {
 }
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
- * @param priority {boolean}
- * @param size {'min' | 'max'}
+ * @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, size) {
@@ -283,7 +297,7 @@ function layout(nodes, data, priority, size) {
 }
 
 /**
- * @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) {
@@ -297,25 +311,25 @@ 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});
     }
   }
 
@@ -337,21 +351,22 @@ 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;
 }
 
 /**
- * @param size {any}
+ * @param {any} size
  * @return {'min' | 'max'}
  */
 function validateSizeValue(size) {
@@ -363,10 +378,10 @@ function validateSizeValue(size) {
 
 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) {
@@ -398,8 +413,8 @@ class SankeyController extends DatasetController {
       const dataPoint = data[i]; /* {SankeyDataPoint} */
       const from = nodes.get(dataPoint.from); /* from {SankeyNode} */
       const to = nodes.get(dataPoint.to); /* to {SankeyNode} */
-      const fromY = from.y + getAddY(from.to, dataPoint.to);
-      const toY = to.y + getAddY(to.from, dataPoint.from);
+      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),
@@ -431,10 +446,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;
@@ -506,11 +521,11 @@ 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) {
@@ -535,7 +550,7 @@ class SankeyController extends DatasetController {
   }
 
   /**
-   * @param inputs {string | Array<string>}
+   * @param {string | Array<string>} inputs
    * @return {Array<string>}
    * @todo move this in Chart.helpers.toTextLines
    */
@@ -615,6 +630,7 @@ class SankeyController extends DatasetController {
 }
 
 SankeyController.id = 'sankey';
+
 SankeyController.defaults = {
   dataElementType: 'flow',
   animations: {
@@ -653,6 +669,7 @@ SankeyController.defaults = {
     }
   }
 };
+
 SankeyController.overrides = {
   interaction: {
     mode: 'nearest',
@@ -710,10 +727,10 @@ SankeyController.overrides = {
  * @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
@@ -728,9 +745,9 @@ 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)});
@@ -738,7 +755,7 @@ const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t *
 class Flow extends Element {
 
   /**
-   * @param cfg {FlowConfig}
+   * @param {FlowConfig} cfg
    */
   constructor(cfg) {
     super();
@@ -756,7 +773,7 @@ class Flow extends Element {
   }
 
   /**
-   * @param ctx {CanvasRenderingContext2D}
+   * @param {CanvasRenderingContext2D} ctx
    */
   draw(ctx) {
     const me = this;
@@ -805,9 +822,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) {
@@ -829,8 +846,8 @@ class Flow extends Element {
   }
 
   /**
-   * @param mouseX {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseX
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inXRange(mouseX, useFinalPosition) {
@@ -839,8 +856,8 @@ class Flow extends Element {
   }
 
   /**
-   * @param mouseY {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseY
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inYRange(mouseY, useFinalPosition) {
@@ -851,7 +868,7 @@ class Flow extends Element {
   }
 
   /**
-   * @param useFinalPosition {boolean}
+   * @param {boolean} useFinalPosition
    * @return {{x: number, y:number}}
    */
   getCenterPoint(useFinalPosition) {
@@ -867,7 +884,7 @@ class Flow extends Element {
   }
 
   /**
-   * @param axis {"x" | "y"}
+   * @param {"x" | "y"} axis
    * @return {number}
    */
   getRange(axis) {

package/dist/chartjs-chart-sankey.js

@@ -1,18 +1,18 @@
 /*!
- * chartjs-chart-sankey v0.8.0
+ * chartjs-chart-sankey v0.8.1
  * https://github.com/kurkle/chartjs-chart-sankey#readme
- * (c) 2021 Jukka Kurkela
+ * (c) 2022 Jukka Kurkela
  * Released under the MIT license
  */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js'), require('chart.js/helpers')) :
 typeof define === 'function' && define.amd ? define(['chart.js', 'chart.js/helpers'], factory) :
 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart, global.Chart.helpers));
-}(this, (function (chart_js, helpers) { 'use strict';
+})(this, (function (chart_js, helpers) { 'use strict';
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
+ * @param {Map<string, SankeyNode>} nodes
+ * @param {Array<SankeyDataPoint>} data
  * @return {number}
  */
 function calculateX(nodes, data) {
@@ -42,8 +42,8 @@ function calculateX(nodes, data) {
 }
 
 /**
- * @param keys {Array<string>}
- * @param to {Set<string>}
+ * @param {Array<string>} keys
+ * @param {Set<string>} to
  * @return {Array<string>}
  */
 function nextColumn(keys, to) {
@@ -58,34 +58,34 @@ function nextColumn(keys, to) {
 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>}
+ * @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 node {SankeyNode}
- * @param y {number}
+ * @param {SankeyNode} node
+ * @param {number} y
  * @return {number}
  */
 function processFrom(node, y) {
@@ -93,15 +93,16 @@ function processFrom(node, y) {
     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) {
@@ -109,15 +110,16 @@ function processTo(node, y) {
     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) {
@@ -129,8 +131,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) {
@@ -138,9 +140,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 => {
@@ -163,13 +167,21 @@ 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) {
@@ -182,15 +194,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);
@@ -201,8 +215,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) {
@@ -237,8 +251,8 @@ function addPadding(nodeArray, padding) {
 }
 
 /**
- * @param nodeArray {Array<SankeyNode>}
- * @param size {'min' | 'max'}
+ * @param {Array<SankeyNode>} nodeArray
+ * @param {'min' | 'max'} size
  */
 function sortFlows(nodeArray, size) {
   nodeArray.forEach((node) => {
@@ -269,10 +283,10 @@ function sortFlows(nodeArray, size) {
 }
 
 /**
- * @param nodes {Map<string, SankeyNode>}
- * @param data {Array<SankeyDataPoint>}
- * @param priority {boolean}
- * @param size {'min' | 'max'}
+ * @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, size) {
@@ -286,7 +300,7 @@ function layout(nodes, data, priority, size) {
 }
 
 /**
- * @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) {
@@ -300,25 +314,25 @@ 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});
     }
   }
 
@@ -340,21 +354,22 @@ 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;
 }
 
 /**
- * @param size {any}
+ * @param {any} size
  * @return {'min' | 'max'}
  */
 function validateSizeValue(size) {
@@ -366,10 +381,10 @@ function validateSizeValue(size) {
 
 class SankeyController extends chart_js.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) {
@@ -401,8 +416,8 @@ class SankeyController extends chart_js.DatasetController {
       const dataPoint = data[i]; /* {SankeyDataPoint} */
       const from = nodes.get(dataPoint.from); /* from {SankeyNode} */
       const to = nodes.get(dataPoint.to); /* to {SankeyNode} */
-      const fromY = from.y + getAddY(from.to, dataPoint.to);
-      const toY = to.y + getAddY(to.from, dataPoint.from);
+      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),
@@ -434,10 +449,10 @@ class SankeyController extends chart_js.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;
@@ -509,11 +524,11 @@ class SankeyController extends chart_js.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) {
@@ -538,7 +553,7 @@ class SankeyController extends chart_js.DatasetController {
   }
 
   /**
-   * @param inputs {string | Array<string>}
+   * @param {string | Array<string>} inputs
    * @return {Array<string>}
    * @todo move this in Chart.helpers.toTextLines
    */
@@ -618,6 +633,7 @@ class SankeyController extends chart_js.DatasetController {
 }
 
 SankeyController.id = 'sankey';
+
 SankeyController.defaults = {
   dataElementType: 'flow',
   animations: {
@@ -656,6 +672,7 @@ SankeyController.defaults = {
     }
   }
 };
+
 SankeyController.overrides = {
   interaction: {
     mode: 'nearest',
@@ -713,10 +730,10 @@ SankeyController.overrides = {
  * @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
@@ -731,9 +748,9 @@ 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)});
@@ -741,7 +758,7 @@ const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t *
 class Flow extends chart_js.Element {
 
   /**
-   * @param cfg {FlowConfig}
+   * @param {FlowConfig} cfg
    */
   constructor(cfg) {
     super();
@@ -759,7 +776,7 @@ class Flow extends chart_js.Element {
   }
 
   /**
-   * @param ctx {CanvasRenderingContext2D}
+   * @param {CanvasRenderingContext2D} ctx
    */
   draw(ctx) {
     const me = this;
@@ -808,9 +825,9 @@ class Flow extends chart_js.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) {
@@ -832,8 +849,8 @@ class Flow extends chart_js.Element {
   }
 
   /**
-   * @param mouseX {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseX
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inXRange(mouseX, useFinalPosition) {
@@ -842,8 +859,8 @@ class Flow extends chart_js.Element {
   }
 
   /**
-   * @param mouseY {number}
-   * @param useFinalPosition {boolean}
+   * @param {number} mouseY
+   * @param {boolean} useFinalPosition
    * @return {boolean}
    */
   inYRange(mouseY, useFinalPosition) {
@@ -854,7 +871,7 @@ class Flow extends chart_js.Element {
   }
 
   /**
-   * @param useFinalPosition {boolean}
+   * @param {boolean} useFinalPosition
    * @return {{x: number, y:number}}
    */
   getCenterPoint(useFinalPosition) {
@@ -870,7 +887,7 @@ class Flow extends chart_js.Element {
   }
 
   /**
-   * @param axis {"x" | "y"}
+   * @param {"x" | "y"} axis
    * @return {number}
    */
   getRange(axis) {
@@ -887,4 +904,4 @@ Flow.defaults = {
 
 chart_js.Chart.register(SankeyController, Flow);
 
-})));
+}));

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

@@ -1,7 +1,7 @@
 /*!
- * chartjs-chart-sankey v0.8.0
+ * chartjs-chart-sankey v0.8.1
  * https://github.com/kurkle/chartjs-chart-sankey#readme
- * (c) 2021 Jukka Kurkela
+ * (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);function s(t,e){return t.from.sort(i("from")).forEach((t=>{const o=t.node;r(o.y)||(o.y=e,e=Math.max(e+o.out,s(o,e)))})),e}function l(t,e){return t.to.sort(i("to")).forEach((t=>{const o=t.node;r(o.y)||(o.y=e,e=Math.max(e+o.in,l(o,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)));let s=o.reduce(((t,e)=>Math.max(t,e.y+e.out||0)),0),h=a.reduce(((t,e)=>Math.max(t,e.y+e.in||0)),0);return s>=h?(n.forEach((t=>{s=c(t,s),s=Math.max(s+t.out,l(t,s))})),i.forEach((t=>{h=c(t,h),h=Math.max(h+t.in,l(t,h))}))):(i.forEach((t=>{h=c(t,h),h=Math.max(h+t.in,l(t,h))})),n.forEach((t=>{s=c(t,s),s=Math.max(s+t.out,l(t,s))}))),Math.max(s,h)}(t,e);return Math.max(a,n,i)}function f(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;for(let r=0;r<=e;r++){let e=0;const a=t.filter((t=>t.x===r)).sort(((t,e)=>t.priority-e.priority));for(const t of a)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 d(t,e){for(let o=0;o<t.length;o++)if(t[o].key===e)return t[o].addY;return 0}function u(t){return t&&-1!==["min","max"].indexOf(t)?t:"max"}class y 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})}else e.set(r,{key:r,in:0,out:n,from:[],to:[{key:a,flow:n}]});if(e.has(a)){const t=e.get(a);t.in+=n,t.from.push({key:r,flow:n})}else e.set(a,{key:a,in:n,out:0,from:[{key:r,flow:n}],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:y,maxY:x}=f(l,e,!!c,u(h));a._maxX=y,a._maxY=x;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+d(r.to,o.to),h=a.y+d(a.from,o.from);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(),f=e.valueOrDefault(h.borderWidth,1)/2+.5,d=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)+d+f,y:l,x2:i.getPixelForValue(r.x)-f,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 f=t.chart.chartArea;for(const t of r.values()){const e=c.getPixelForValue(t.x),r=h.getPixelForValue(t.y),d=Math[n](t.in||t.out,t.out||t.in),u=Math.abs(h.getPixelForValue(t.y+d)-r),y=l&&l[t.key]||t.key;let x=e;o.fillStyle=a.color||"black",o.textBaseline="middle",e<f.width/2?(o.textAlign="left",x+=s+i+4):(o.textAlign="right",x-=i+4),this._drawLabel(y,r,u,o,x)}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,f=s.lineHeight,d=e.valueOrDefault(i.options.padding,f/2);if(a.font=s.string,c>1){const t=h-f*c/2+d;for(let e=0;e<c;e++)a.fillText(l[e],n,t+e*f)}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()}}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 x=(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}=x(o,a,r,n),h=this.options;if(0===s)return;let f;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?f=e.color(h.colorFrom).alpha(.5).rgbString():"to"===h.colorMode?f=e.color(h.colorTo).alpha(.5).rgbString():(f=t.createLinearGradient(o,0,r,0),f.addColorStop(0,e.color(h.colorFrom).alpha(.5).rgbString()),f.addColorStop(1,e.color(h.colorTo).alpha(.5).rgbString())),t.fillStyle=f,t.strokeStyle=f,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}=x(r,a,n,i),h=(t-r)/(n-r),f={x:n,y:i},d=p({x:r,y:a},l,h),u=p(l,c,h),y=p(c,f,h),g=p(d,u,h),m=p(u,y,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(y,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,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)}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-sankey",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Chart.js module for creating sankey diagrams",
   "main": "dist/chartjs-chart-sankey.js",
   "module": "dist/chartjs-chart-sankey.esm.js",
@@ -9,6 +9,7 @@
     "build": "rollup -c",
     "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-js": "eslint \"src/**/*.js\" \"test/**/*.js\"",
     "lint-md": "eslint \"**/*.md\"",