chartjs-chart-sankey 0.14.0 → 0.14.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2024 Jukka Kurkela
+Copyright (c) 2019-2026 Jukka Kurkela
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -36,6 +36,27 @@ import {SankeyController, Flow} from 'chartjs-chart-sankey';
 Chart.register(SankeyController, Flow);
 ```
 
+For script tag usage, load the browser bundle after Chart.js. The browser bundle registers the sankey controller
+and flow element automatically.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-sankey"></script>
+```
+
+The same bundle can be loaded from UNPKG:
+
+```html
+<script src="https://unpkg.com/chart.js"></script>
+<script src="https://unpkg.com/chartjs-chart-sankey"></script>
+```
+
+If a CDN does not use the package metadata for its default file, reference the browser bundle directly:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-sankey/dist/chartjs-chart-sankey.min.js"></script>
+```
+
 To create a sankey chart, include chartjs-chart-sankey.js after chart.js and then create the chart by setting the `type`
 attribute to `'sankey'`
 

package/dist/{chartjs-chart-sankey.js → chartjs-chart-sankey.cjs}

@@ -1,14 +1,14 @@
 /*!
- * chartjs-chart-sankey v0.14.0
- * https://github.com/kurkle/chartjs-chart-sankey#readme
- * (c) 2024 Jukka Kurkela
+ * chartjs-chart-sankey v0.0.0-development
+ * https://chartjs-chart-sankey.pages.dev/
+ * (c) 2026 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';
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('chart.js'), require('chart.js/helpers')) :
+typeof define === 'function' && define.amd ? define(['exports', 'chart.js', 'chart.js/helpers'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["chartjs-chart-sankey"] = {}, global.Chart, global.Chart.helpers));
+})(this, (function (exports, chart_js, helpers) { 'use strict';
 
 const defined = (x)=>x !== undefined;
 function toTextLines(raw) {
@@ -71,9 +71,9 @@ const setColumns = (nodes, column)=>{
 const getParsedData = (data, parsing)=>{
     const { from: fromKey = 'from', to: toKey = 'to', flow: flowKey = 'flow' } = parsing;
     return data.map(({ [fromKey]: from, [toKey]: to, [flowKey]: flow })=>({
+            flow,
             from,
-            to,
-            flow
+            to
         }));
 };
 function buildNodesFromData(data, { size, priority, column }) {
@@ -81,39 +81,39 @@ function buildNodesFromData(data, { size, priority, column }) {
     for(let i = 0; i < data.length; i++){
         const { from, to, flow } = data[i];
         const fromNode = nodes.get(from) ?? {
-            key: from,
+            from: [],
             in: 0,
+            key: from,
             out: 0,
             size: 0,
-            from: [],
             to: []
         };
         const toNode = (from === to ? fromNode : nodes.get(to)) ?? {
-            key: to,
+            from: [],
             in: 0,
+            key: to,
             out: 0,
             size: 0,
-            from: [],
             to: []
         };
         fromNode.out += flow;
         fromNode.to.push({
-            key: to,
+            addY: 0,
             flow: flow,
             index: i,
-            node: toNode,
-            addY: 0
+            key: to,
+            node: toNode
         });
         if (fromNode.to.length === 1) {
             nodes.set(from, fromNode);
         }
         toNode.in += flow;
         toNode.from.push({
-            key: from,
+            addY: 0,
             flow: flow,
             index: i,
-            node: fromNode,
-            addY: 0
+            key: from,
+            node: fromNode
         });
         if (toNode.from.length === 1) {
             nodes.set(to, toNode);
@@ -424,12 +424,13 @@ class SankeyController extends chart_js.DatasetController {
         const sankeyData = getParsedData(data, this.options.parsing);
         const { xScale, yScale } = meta;
         const parsed = [];
-        const nodes = this._nodes = buildNodesFromData(sankeyData, this.options);
+        const nodes = buildNodesFromData(sankeyData, this.options);
+        this._nodes = nodes;
         const { maxX, maxY } = layout(nodes, sankeyData, {
-            priority: !!this.options.priority,
             height: this.chart.canvas.height,
+            modeX: this.options.modeX,
             nodePadding: this.options.nodePadding,
-            modeX: this.options.modeX
+            priority: !!this.options.priority
         });
         this._maxX = maxX;
         this._maxY = maxY;
@@ -442,24 +443,24 @@ class SankeyController extends chart_js.DatasetController {
             const fromY = (from.y ?? 0) + getAddY(from.to, dataPoint.to, i);
             const toY = (to.y ?? 0) + getAddY(to.from, dataPoint.from, i);
             parsed.push({
-                x: xScale.parse(from.x, i),
-                y: yScale.parse(fromY, i),
                 _custom: {
+                    flow: dataPoint.flow,
                     from,
+                    height: yScale.parse(dataPoint.flow, i),
                     to,
                     x: xScale.parse(to.x, i),
-                    y: yScale.parse(toY, i),
-                    height: yScale.parse(dataPoint.flow, i),
-                    flow: dataPoint.flow
-                }
+                    y: yScale.parse(toY, i)
+                },
+                x: xScale.parse(from.x, i),
+                y: yScale.parse(fromY, i)
             });
         }
         return parsed.slice(start, start + count);
     }
     getMinMax(scale) {
         return {
-            min: 0,
-            max: scale === this._cachedMeta.xScale ? this._maxX : this._maxY
+            max: scale === this._cachedMeta.xScale ? this._maxX : this._maxY,
+            min: 0
         };
     }
     update(mode) {
@@ -478,15 +479,15 @@ class SankeyController extends chart_js.DatasetController {
             const custom = parsed._custom;
             const y = yScale.getPixelForValue(parsed.y);
             this.updateElement(elems[i], i, {
-                x: xScale.getPixelForValue(parsed.x) + nodeWidth + borderSpace,
-                y,
-                x2: xScale.getPixelForValue(custom.x) - borderSpace,
-                y2: yScale.getPixelForValue(custom.y),
                 from: custom.from,
-                to: custom.to,
-                progress: mode === 'reset' ? 0 : 1,
                 height: Math.abs(yScale.getPixelForValue(parsed.y + custom.height) - y),
-                options: this.resolveDataElementOptions(i, mode)
+                options: this.resolveDataElementOptions(i, mode),
+                progress: mode === 'reset' ? 0 : 1,
+                to: custom.to,
+                x: xScale.getPixelForValue(parsed.x) + nodeWidth + borderSpace,
+                x2: xScale.getPixelForValue(custom.x) - borderSpace,
+                y,
+                y2: yScale.getPixelForValue(custom.y)
             }, mode);
         }
         this.updateSharedOptions(sharedOptions, mode, firstOpts);
@@ -589,116 +590,116 @@ class SankeyController extends chart_js.DatasetController {
 }
 SankeyController.id = 'sankey';
 SankeyController.defaults = {
-    dataElementType: 'flow',
     animations: {
+        colors: {
+            properties: [
+                'colorFrom',
+                'colorTo'
+            ],
+            type: 'color'
+        },
         numbers: {
-            type: 'number',
             properties: [
                 'x',
                 'y',
                 'x2',
                 'y2',
                 'height'
-            ]
+            ],
+            type: 'number'
         },
         progress: {
-            easing: 'linear',
+            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed.x * 500 + ctx.dataIndex * 20 : undefined,
             duration: (ctx)=>ctx.type === 'data' ? (ctx.parsed._custom.x - ctx.parsed.x) * 200 : undefined,
-            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed.x * 500 + ctx.dataIndex * 20 : undefined
-        },
-        colors: {
-            type: 'color',
-            properties: [
-                'colorFrom',
-                'colorTo'
-            ]
+            easing: 'linear'
         }
     },
-    color: 'black',
     borderColor: 'black',
     borderWidth: 1,
+    color: 'black',
+    dataElementType: 'flow',
     modeX: 'edge',
-    nodeWidth: 10,
     nodePadding: 10,
+    nodeWidth: 10,
     transitions: {
         hide: {
             animations: {
                 colors: {
-                    type: 'color',
                     properties: [
                         'colorFrom',
                         'colorTo'
                     ],
-                    to: 'transparent'
+                    to: 'transparent',
+                    type: 'color'
                 }
             }
         },
         show: {
             animations: {
                 colors: {
-                    type: 'color',
+                    from: 'transparent',
                     properties: [
                         'colorFrom',
                         'colorTo'
                     ],
-                    from: 'transparent'
+                    type: 'color'
                 }
             }
         }
     }
 };
 SankeyController.overrides = {
-    interaction: {
-        mode: 'nearest',
-        intersect: true
-    },
     datasets: {
         clip: false,
         parsing: {
+            flow: 'flow',
             from: 'from',
-            to: 'to',
-            flow: 'flow'
+            to: 'to'
+        }
+    },
+    interaction: {
+        intersect: true,
+        mode: 'nearest'
+    },
+    layout: {
+        padding: {
+            bottom: 3,
+            left: 3,
+            right: 13,
+            top: 3
         }
     },
     plugins: {
+        legend: {
+            display: false
+        },
         tooltip: {
             callbacks: {
-                title () {
-                    return '';
-                },
                 label (context) {
                     const parsedCustom = context.parsed._custom;
                     return parsedCustom.from.key + ' -> ' + parsedCustom.to.key + ': ' + parsedCustom.flow;
+                },
+                title () {
+                    return '';
                 }
             }
-        },
-        legend: {
-            display: false
         }
     },
     scales: {
         x: {
-            type: 'linear',
             bounds: 'data',
             display: false,
             min: 0,
-            offset: false
+            offset: false,
+            type: 'linear'
         },
         y: {
-            type: 'linear',
             bounds: 'data',
             display: false,
             min: 0,
+            offset: false,
             reverse: true,
-            offset: false
-        }
-    },
-    layout: {
-        padding: {
-            top: 3,
-            left: 3,
-            right: 13,
-            bottom: 3
+            type: 'linear'
         }
     }
 };
@@ -842,10 +843,10 @@ class Flow extends chart_js.Element {
 }
 Flow.id = 'flow';
 Flow.defaults = {
+    alpha: 0.5,
     colorFrom: 'red',
-    colorTo: 'green',
     colorMode: 'gradient',
-    alpha: 0.5,
+    colorTo: 'green',
     hoverColorFrom: (_ctx, options)=>helpers.getHoverColor(options.colorFrom),
     hoverColorTo: (_ctx, options)=>helpers.getHoverColor(options.colorTo)
 };
@@ -855,4 +856,7 @@ Flow.descriptors = {
 
 chart_js.Chart.register(SankeyController, Flow);
 
+exports.Flow = Flow;
+exports.SankeyController = SankeyController;
+
 }));

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

@@ -1,7 +1,7 @@
 /*!
- * chartjs-chart-sankey v0.14.0
- * https://github.com/kurkle/chartjs-chart-sankey#readme
- * (c) 2024 Jukka Kurkela
+ * chartjs-chart-sankey v0.0.0-development
+ * https://chartjs-chart-sankey.pages.dev/
+ * (c) 2026 Jukka Kurkela
  * Released under the MIT license
  */
 import { DatasetController, Element } from 'chart.js';
@@ -68,9 +68,9 @@ const setColumns = (nodes, column)=>{
 const getParsedData = (data, parsing)=>{
     const { from: fromKey = 'from', to: toKey = 'to', flow: flowKey = 'flow' } = parsing;
     return data.map(({ [fromKey]: from, [toKey]: to, [flowKey]: flow })=>({
+            flow,
             from,
-            to,
-            flow
+            to
         }));
 };
 function buildNodesFromData(data, { size, priority, column }) {
@@ -78,39 +78,39 @@ function buildNodesFromData(data, { size, priority, column }) {
     for(let i = 0; i < data.length; i++){
         const { from, to, flow } = data[i];
         const fromNode = nodes.get(from) ?? {
-            key: from,
+            from: [],
             in: 0,
+            key: from,
             out: 0,
             size: 0,
-            from: [],
             to: []
         };
         const toNode = (from === to ? fromNode : nodes.get(to)) ?? {
-            key: to,
+            from: [],
             in: 0,
+            key: to,
             out: 0,
             size: 0,
-            from: [],
             to: []
         };
         fromNode.out += flow;
         fromNode.to.push({
-            key: to,
+            addY: 0,
             flow: flow,
             index: i,
-            node: toNode,
-            addY: 0
+            key: to,
+            node: toNode
         });
         if (fromNode.to.length === 1) {
             nodes.set(from, fromNode);
         }
         toNode.in += flow;
         toNode.from.push({
-            key: from,
+            addY: 0,
             flow: flow,
             index: i,
-            node: fromNode,
-            addY: 0
+            key: from,
+            node: fromNode
         });
         if (toNode.from.length === 1) {
             nodes.set(to, toNode);
@@ -421,12 +421,13 @@ class SankeyController extends DatasetController {
         const sankeyData = getParsedData(data, this.options.parsing);
         const { xScale, yScale } = meta;
         const parsed = [];
-        const nodes = this._nodes = buildNodesFromData(sankeyData, this.options);
+        const nodes = buildNodesFromData(sankeyData, this.options);
+        this._nodes = nodes;
         const { maxX, maxY } = layout(nodes, sankeyData, {
-            priority: !!this.options.priority,
             height: this.chart.canvas.height,
+            modeX: this.options.modeX,
             nodePadding: this.options.nodePadding,
-            modeX: this.options.modeX
+            priority: !!this.options.priority
         });
         this._maxX = maxX;
         this._maxY = maxY;
@@ -439,24 +440,24 @@ class SankeyController extends DatasetController {
             const fromY = (from.y ?? 0) + getAddY(from.to, dataPoint.to, i);
             const toY = (to.y ?? 0) + getAddY(to.from, dataPoint.from, i);
             parsed.push({
-                x: xScale.parse(from.x, i),
-                y: yScale.parse(fromY, i),
                 _custom: {
+                    flow: dataPoint.flow,
                     from,
+                    height: yScale.parse(dataPoint.flow, i),
                     to,
                     x: xScale.parse(to.x, i),
-                    y: yScale.parse(toY, i),
-                    height: yScale.parse(dataPoint.flow, i),
-                    flow: dataPoint.flow
-                }
+                    y: yScale.parse(toY, i)
+                },
+                x: xScale.parse(from.x, i),
+                y: yScale.parse(fromY, i)
             });
         }
         return parsed.slice(start, start + count);
     }
     getMinMax(scale) {
         return {
-            min: 0,
-            max: scale === this._cachedMeta.xScale ? this._maxX : this._maxY
+            max: scale === this._cachedMeta.xScale ? this._maxX : this._maxY,
+            min: 0
         };
     }
     update(mode) {
@@ -475,15 +476,15 @@ class SankeyController extends DatasetController {
             const custom = parsed._custom;
             const y = yScale.getPixelForValue(parsed.y);
             this.updateElement(elems[i], i, {
-                x: xScale.getPixelForValue(parsed.x) + nodeWidth + borderSpace,
-                y,
-                x2: xScale.getPixelForValue(custom.x) - borderSpace,
-                y2: yScale.getPixelForValue(custom.y),
                 from: custom.from,
-                to: custom.to,
-                progress: mode === 'reset' ? 0 : 1,
                 height: Math.abs(yScale.getPixelForValue(parsed.y + custom.height) - y),
-                options: this.resolveDataElementOptions(i, mode)
+                options: this.resolveDataElementOptions(i, mode),
+                progress: mode === 'reset' ? 0 : 1,
+                to: custom.to,
+                x: xScale.getPixelForValue(parsed.x) + nodeWidth + borderSpace,
+                x2: xScale.getPixelForValue(custom.x) - borderSpace,
+                y,
+                y2: yScale.getPixelForValue(custom.y)
             }, mode);
         }
         this.updateSharedOptions(sharedOptions, mode, firstOpts);
@@ -586,116 +587,116 @@ class SankeyController extends DatasetController {
 }
 SankeyController.id = 'sankey';
 SankeyController.defaults = {
-    dataElementType: 'flow',
     animations: {
+        colors: {
+            properties: [
+                'colorFrom',
+                'colorTo'
+            ],
+            type: 'color'
+        },
         numbers: {
-            type: 'number',
             properties: [
                 'x',
                 'y',
                 'x2',
                 'y2',
                 'height'
-            ]
+            ],
+            type: 'number'
         },
         progress: {
-            easing: 'linear',
+            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed.x * 500 + ctx.dataIndex * 20 : undefined,
             duration: (ctx)=>ctx.type === 'data' ? (ctx.parsed._custom.x - ctx.parsed.x) * 200 : undefined,
-            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed.x * 500 + ctx.dataIndex * 20 : undefined
-        },
-        colors: {
-            type: 'color',
-            properties: [
-                'colorFrom',
-                'colorTo'
-            ]
+            easing: 'linear'
         }
     },
-    color: 'black',
     borderColor: 'black',
     borderWidth: 1,
+    color: 'black',
+    dataElementType: 'flow',
     modeX: 'edge',
-    nodeWidth: 10,
     nodePadding: 10,
+    nodeWidth: 10,
     transitions: {
         hide: {
             animations: {
                 colors: {
-                    type: 'color',
                     properties: [
                         'colorFrom',
                         'colorTo'
                     ],
-                    to: 'transparent'
+                    to: 'transparent',
+                    type: 'color'
                 }
             }
         },
         show: {
             animations: {
                 colors: {
-                    type: 'color',
+                    from: 'transparent',
                     properties: [
                         'colorFrom',
                         'colorTo'
                     ],
-                    from: 'transparent'
+                    type: 'color'
                 }
             }
         }
     }
 };
 SankeyController.overrides = {
-    interaction: {
-        mode: 'nearest',
-        intersect: true
-    },
     datasets: {
         clip: false,
         parsing: {
+            flow: 'flow',
             from: 'from',
-            to: 'to',
-            flow: 'flow'
+            to: 'to'
+        }
+    },
+    interaction: {
+        intersect: true,
+        mode: 'nearest'
+    },
+    layout: {
+        padding: {
+            bottom: 3,
+            left: 3,
+            right: 13,
+            top: 3
         }
     },
     plugins: {
+        legend: {
+            display: false
+        },
         tooltip: {
             callbacks: {
-                title () {
-                    return '';
-                },
                 label (context) {
                     const parsedCustom = context.parsed._custom;
                     return parsedCustom.from.key + ' -> ' + parsedCustom.to.key + ': ' + parsedCustom.flow;
+                },
+                title () {
+                    return '';
                 }
             }
-        },
-        legend: {
-            display: false
         }
     },
     scales: {
         x: {
-            type: 'linear',
             bounds: 'data',
             display: false,
             min: 0,
-            offset: false
+            offset: false,
+            type: 'linear'
         },
         y: {
-            type: 'linear',
             bounds: 'data',
             display: false,
             min: 0,
+            offset: false,
             reverse: true,
-            offset: false
-        }
-    },
-    layout: {
-        padding: {
-            top: 3,
-            left: 3,
-            right: 13,
-            bottom: 3
+            type: 'linear'
         }
     }
 };
@@ -839,10 +840,10 @@ class Flow extends Element {
 }
 Flow.id = 'flow';
 Flow.defaults = {
+    alpha: 0.5,
     colorFrom: 'red',
-    colorTo: 'green',
     colorMode: 'gradient',
-    alpha: 0.5,
+    colorTo: 'green',
     hoverColorFrom: (_ctx, options)=>getHoverColor(options.colorFrom),
     hoverColorTo: (_ctx, options)=>getHoverColor(options.colorTo)
 };