@progress/kendo-charts 2.2.0 → 2.3.0-dev.202402161315

package/dist/es/sankey/sankey.js

@@ -1,4 +1,4 @@
-import { drawing } from '@progress/kendo-drawing';
+import { geometry, drawing } from '@progress/kendo-drawing';
 import { deepExtend, addClass, setDefaultOptions } from '../common';
 import { calculateSankey } from './calculation';
 import { Node, resolveNodeOptions } from './node';
@@ -10,6 +10,7 @@ import Box from '../core/box';
 import rectToBox from '../core/utils/rect-to-box';
 import { Observable } from '../common/observable';
 import { Legend } from './legend';
+import { defined } from '../drawing-utils';
 
 var LINK = 'link';
 var NODE = 'node';
@@ -77,7 +78,8 @@ export var Sankey = (function (Observable) {
     Sankey.prototype._createSurface = function _createSurface () {
         return drawing.Surface.create(this.surfaceElement, {
             mouseenter: this._mouseenter.bind(this),
-            mouseleave: this._mouseleave.bind(this)
+            mouseleave: this._mouseleave.bind(this),
+            mousemove: this._mousemove.bind(this),
         });
     };
 
@@ -100,8 +102,11 @@ export var Sankey = (function (Observable) {
     };
 
     Sankey.prototype.trigger = function trigger (name, ev) {
-        ev.type = name;
-        return Observable.prototype.trigger.call(this, name, ev);
+        var event = Object.assign({}, ev,
+            {type: name,
+            dataItem: ev.element.dataItem});
+
+        return Observable.prototype.trigger.call(this, name, event);
     };
 
     Sankey.prototype._mouseenter = function _mouseenter (ev) {
@@ -139,6 +144,10 @@ export var Sankey = (function (Observable) {
             return;
         }
 
+        if (isLink || isNode) {
+            this.trigger('hideTooltip', ev);
+        }
+
         if ((isLink && this.trigger('linkLeave', ev)) ||
             (isNode && this.trigger('nodeLeave', ev))) {
             return;
@@ -149,6 +158,16 @@ export var Sankey = (function (Observable) {
         }
     };
 
+    Sankey.prototype._mousemove = function _mousemove (ev) {
+        var element = ev.element;
+
+        if (element.type === NODE) {
+            this.trigger('nodeTooltip', ev);
+        } else if (element.type === LINK) {
+            this.trigger('linkTooltip', ev);
+        }
+    };
+
     Sankey.prototype.highlightLinks = function highlightLinks (node, highlight) {
         var this$1 = this;
 
@@ -239,17 +258,15 @@ export var Sankey = (function (Observable) {
         return legendVisual.chartElement.box;
     };
 
-    Sankey.prototype.calculateSankey = function calculateSankey$1 (options) {
-        var ref = this.options;
-        var title = ref.title;
-        var legend = ref.legend;
-        var data = ref.data;
-        var ref$1 = this.options;
-        var nodes = ref$1.nodes;
-        var labels = ref$1.labels;
-        var nodesColors = ref$1.nodesColors;
-
-        var sankeyBox = new Box(0, 0, options.width, options.height);
+    Sankey.prototype.calculateSankey = function calculateSankey$1 (calcOptions, sankeyOptions) {
+        var title = sankeyOptions.title;
+        var legend = sankeyOptions.legend;
+        var data = sankeyOptions.data;
+        var nodes = sankeyOptions.nodes;
+        var labels = sankeyOptions.labels;
+        var nodesColors = sankeyOptions.nodesColors;
+
+        var sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
         var titleBox = this.titleBox(title, sankeyBox);
 
         var legendArea = sankeyBox.clone();
@@ -258,10 +275,10 @@ export var Sankey = (function (Observable) {
             var titleHeight = titleBox.height();
             if (title.position === TOP) {
                 sankeyBox.unpad({ top: titleHeight });
-                legendArea = new Box(0, titleHeight, options.width, options.height);
+                legendArea = new Box(0, titleHeight, calcOptions.width, calcOptions.height);
             } else {
                 sankeyBox.shrink(0, titleHeight);
-                legendArea = new Box(0, 0, options.width, options.height - titleHeight);
+                legendArea = new Box(0, 0, calcOptions.width, calcOptions.height - titleHeight);
             }
         }
 
@@ -285,7 +302,7 @@ export var Sankey = (function (Observable) {
             }
         }
 
-        var calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
+        var calculatedNodes = calculateSankey(Object.assign({}, calcOptions, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
         var box = new Box();
 
         calculatedNodes.forEach(function (nodeEl, i) {
@@ -293,7 +310,7 @@ export var Sankey = (function (Observable) {
             var nodeInstance = new Node(nodeOps);
             box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
 
-            var labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: options.width }, labels));
+            var labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: calcOptions.width }, labels));
             var labelVisual = labelInstance.exportVisual();
             if (labelVisual) {
                 box.wrap(rectToBox(labelVisual.rawBBox()));
@@ -307,33 +324,38 @@ export var Sankey = (function (Observable) {
         var height = box.height() > sankeyBox.y2 ? offsetY + sankeyBox.y2 - (box.height() - sankeyBox.y2) : sankeyBox.y2;
 
         return {
-            sankey: calculateSankey(Object.assign({}, options, {offsetX: offsetX, offsetY: offsetY, width: width, height: height})),
+            sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height})),
             legendBox: legendBox,
             titleBox: titleBox
         };
     };
 
-    Sankey.prototype._render = function _render () {
-        var ref = this.options;
-        var data = ref.data;
-        var labelOptions = ref.labels;
-        var nodesOptions = ref.nodes;
-        var linkOptions = ref.links;
-        var nodesColors = ref.nodesColors;
-        var title = ref.title;
-        var legend = ref.legend;
-        var ref$1 = this.size;
-        var width = ref$1.width;
-        var height = ref$1.height;
+    Sankey.prototype._render = function _render (options, context) {
+        var sankeyOptions = options || this.options;
+        var sankeyContext = context || this;
+
+        var data = sankeyOptions.data;
+        var labelOptions = sankeyOptions.labels;
+        var nodesOptions = sankeyOptions.nodes;
+        var linkOptions = sankeyOptions.links;
+        var nodesColors = sankeyOptions.nodesColors;
+        var title = sankeyOptions.title;
+        var legend = sankeyOptions.legend;
+        var ref = sankeyContext.size;
+        var width = ref.width;
+        var height = ref.height;
+
         var calcOptions = Object.assign({}, data, {width: width, height: height, nodesOptions: nodesOptions, title: title, legend: legend});
-        var ref$2 = this.calculateSankey(calcOptions);
-        var sankey = ref$2.sankey;
-        var titleBox = ref$2.titleBox;
-        var legendBox = ref$2.legendBox;
+        var ref$1 = this.calculateSankey(calcOptions, sankeyOptions);
+        var sankey = ref$1.sankey;
+        var titleBox = ref$1.titleBox;
+        var legendBox = ref$1.legendBox;
         var nodes = sankey.nodes;
         var links = sankey.links;
 
-        var visual = new drawing.Group();
+        var visual = new drawing.Group({
+            clip: drawing.Path.fromRect(new geometry.Rect([0, 0], [width, height]))
+        });
 
         if (titleBox) {
             var titleElement = new Title(Object.assign({}, title, {drawingRect: titleBox}));
@@ -348,6 +370,7 @@ export var Sankey = (function (Observable) {
         }
 
         var visualNodes = new Map();
+        sankeyContext.nodesVisuals = visualNodes;
 
         nodes.forEach(function (node, i) {
             var nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
@@ -356,6 +379,12 @@ export var Sankey = (function (Observable) {
             var nodeVisual = nodeInstance.exportVisual();
             nodeVisual.links = [];
             nodeVisual.type = NODE;
+
+            nodeVisual.dataItem = Object.assign({}, data.nodes[i],
+                {color: nodeOps.color,
+                opacity: nodeOps.opacity,
+                sourceLinks: node.sourceLinks.map(function (link) { return ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value }); }),
+                targetLinks: node.targetLinks.map(function (link) { return ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value }); })});
             visualNodes.set(node.id, nodeVisual);
 
             visual.append(nodeVisual);
@@ -364,6 +393,7 @@ export var Sankey = (function (Observable) {
         var sortedLinks = links.slice().sort(function (a, b) { return b.value - a.value; });
 
         var linksVisuals = [];
+        sankeyContext.linksVisuals = linksVisuals;
 
         sortedLinks.forEach(function (link) {
             var source = link.source;
@@ -375,6 +405,11 @@ export var Sankey = (function (Observable) {
             var linkVisual = linkInstance.exportVisual();
 
             linkVisual.type = LINK;
+            linkVisual.dataItem = {
+                source: Object.assign({}, sourceNode.dataItem),
+                target: Object.assign({}, targetNode.dataItem),
+                value: link.value
+            };
             linksVisuals.push(linkVisual);
 
             sourceNode.links.push(linkVisual);
@@ -383,9 +418,6 @@ export var Sankey = (function (Observable) {
             visual.append(linkVisual);
         });
 
-        this.linksVisuals = linksVisuals;
-        this.nodesVisuals = visualNodes;
-
         nodes.forEach(function (node) {
             var textOps = resolveLabelOptions(node, labelOptions, width);
             var labelInstance = new Label(textOps);
@@ -399,8 +431,18 @@ export var Sankey = (function (Observable) {
         return visual;
     };
 
-    Sankey.prototype.exportVisual = function exportVisual () {
-        return this._render();
+    Sankey.prototype.exportVisual = function exportVisual (exportOptions) {
+        var options = (exportOptions && exportOptions.options) ?
+            deepExtend({}, this.options, exportOptions.options) : this.options;
+
+        var context = {
+            size: {
+                width: defined(exportOptions && exportOptions.width) ? exportOptions.width : this.size.width,
+                height: defined(exportOptions && exportOptions.height) ? exportOptions.height : this.size.height
+            }
+        };
+
+        return this._render(options, context);
     };
 
     Sankey.prototype._setOptions = function _setOptions (options) {

package/dist/es2015/sankey/sankey.js

@@ -1,4 +1,4 @@
-import { drawing } from '@progress/kendo-drawing';
+import { geometry, drawing } from '@progress/kendo-drawing';
 import { deepExtend, addClass, setDefaultOptions } from '../common';
 import { calculateSankey } from './calculation';
 import { Node, resolveNodeOptions } from './node';
@@ -10,6 +10,7 @@ import Box from '../core/box';
 import rectToBox from '../core/utils/rect-to-box';
 import { Observable } from '../common/observable';
 import { Legend } from './legend';
+import { defined } from '../drawing-utils';
 
 const LINK = 'link';
 const NODE = 'node';
@@ -69,7 +70,8 @@ export class Sankey extends Observable {
     _createSurface() {
         return drawing.Surface.create(this.surfaceElement, {
             mouseenter: this._mouseenter.bind(this),
-            mouseleave: this._mouseleave.bind(this)
+            mouseleave: this._mouseleave.bind(this),
+            mousemove: this._mousemove.bind(this),
         });
     }
 
@@ -90,8 +92,11 @@ export class Sankey extends Observable {
     }
 
     trigger(name, ev) {
-        ev.type = name;
-        return super.trigger(name, ev);
+        const event = Object.assign({}, ev,
+            {type: name,
+            dataItem: ev.element.dataItem});
+
+        return super.trigger(name, event);
     }
 
     _mouseenter(ev) {
@@ -128,6 +133,10 @@ export class Sankey extends Observable {
             return;
         }
 
+        if (isLink || isNode) {
+            this.trigger('hideTooltip', ev);
+        }
+
         if ((isLink && this.trigger('linkLeave', ev)) ||
             (isNode && this.trigger('nodeLeave', ev))) {
             return;
@@ -138,6 +147,16 @@ export class Sankey extends Observable {
         }
     }
 
+    _mousemove(ev) {
+        const element = ev.element;
+
+        if (element.type === NODE) {
+            this.trigger('nodeTooltip', ev);
+        } else if (element.type === LINK) {
+            this.trigger('linkTooltip', ev);
+        }
+    }
+
     highlightLinks(node, highlight) {
         if (node) {
             this.setLinksOpacity(highlight.inactiveOpacity);
@@ -224,11 +243,10 @@ export class Sankey extends Observable {
         return legendVisual.chartElement.box;
     }
 
-    calculateSankey(options) {
-        const { title, legend, data } = this.options;
-        const { nodes, labels, nodesColors } = this.options;
+    calculateSankey(calcOptions, sankeyOptions) {
+        const { title, legend, data, nodes, labels, nodesColors } = sankeyOptions;
 
-        const sankeyBox = new Box(0, 0, options.width, options.height);
+        const sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
         const titleBox = this.titleBox(title, sankeyBox);
 
         let legendArea = sankeyBox.clone();
@@ -237,10 +255,10 @@ export class Sankey extends Observable {
             const titleHeight = titleBox.height();
             if (title.position === TOP) {
                 sankeyBox.unpad({ top: titleHeight });
-                legendArea = new Box(0, titleHeight, options.width, options.height);
+                legendArea = new Box(0, titleHeight, calcOptions.width, calcOptions.height);
             } else {
                 sankeyBox.shrink(0, titleHeight);
-                legendArea = new Box(0, 0, options.width, options.height - titleHeight);
+                legendArea = new Box(0, 0, calcOptions.width, calcOptions.height - titleHeight);
             }
         }
 
@@ -264,7 +282,7 @@ export class Sankey extends Observable {
             }
         }
 
-        const calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
+        const calculatedNodes = calculateSankey(Object.assign({}, calcOptions, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
         const box = new Box();
 
         calculatedNodes.forEach((nodeEl, i) => {
@@ -272,7 +290,7 @@ export class Sankey extends Observable {
             const nodeInstance = new Node(nodeOps);
             box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
 
-            const labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: options.width }, labels));
+            const labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: calcOptions.width }, labels));
             const labelVisual = labelInstance.exportVisual();
             if (labelVisual) {
                 box.wrap(rectToBox(labelVisual.rawBBox()));
@@ -286,20 +304,26 @@ export class Sankey extends Observable {
         let height = box.height() > sankeyBox.y2 ? offsetY + sankeyBox.y2 - (box.height() - sankeyBox.y2) : sankeyBox.y2;
 
         return {
-            sankey: calculateSankey(Object.assign({}, options, {offsetX, offsetY, width, height})),
+            sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height})),
             legendBox,
             titleBox
         };
     }
 
-    _render() {
-        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodesColors, title, legend } = this.options;
-        const { width, height } = this.size;
+    _render(options, context) {
+        const sankeyOptions = options || this.options;
+        const sankeyContext = context || this;
+
+        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodesColors, title, legend } = sankeyOptions;
+        const { width, height } = sankeyContext.size;
+
         const calcOptions = Object.assign({}, data, {width, height, nodesOptions, title, legend});
-        const { sankey, titleBox, legendBox } = this.calculateSankey(calcOptions);
+        const { sankey, titleBox, legendBox } = this.calculateSankey(calcOptions, sankeyOptions);
         const { nodes, links } = sankey;
 
-        const visual = new drawing.Group();
+        const visual = new drawing.Group({
+            clip: drawing.Path.fromRect(new geometry.Rect([0, 0], [width, height]))
+        });
 
         if (titleBox) {
             const titleElement = new Title(Object.assign({}, title, {drawingRect: titleBox}));
@@ -314,6 +338,7 @@ export class Sankey extends Observable {
         }
 
         const visualNodes = new Map();
+        sankeyContext.nodesVisuals = visualNodes;
 
         nodes.forEach((node, i) => {
             const nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
@@ -322,6 +347,12 @@ export class Sankey extends Observable {
             const nodeVisual = nodeInstance.exportVisual();
             nodeVisual.links = [];
             nodeVisual.type = NODE;
+
+            nodeVisual.dataItem = Object.assign({}, data.nodes[i],
+                {color: nodeOps.color,
+                opacity: nodeOps.opacity,
+                sourceLinks: node.sourceLinks.map(link => ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value })),
+                targetLinks: node.targetLinks.map(link => ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value }))});
             visualNodes.set(node.id, nodeVisual);
 
             visual.append(nodeVisual);
@@ -330,6 +361,7 @@ export class Sankey extends Observable {
         const sortedLinks = links.slice().sort((a, b) => b.value - a.value);
 
         const linksVisuals = [];
+        sankeyContext.linksVisuals = linksVisuals;
 
         sortedLinks.forEach(link => {
             const { source, target } = link;
@@ -340,6 +372,11 @@ export class Sankey extends Observable {
             const linkVisual = linkInstance.exportVisual();
 
             linkVisual.type = LINK;
+            linkVisual.dataItem = {
+                source: Object.assign({}, sourceNode.dataItem),
+                target: Object.assign({}, targetNode.dataItem),
+                value: link.value
+            };
             linksVisuals.push(linkVisual);
 
             sourceNode.links.push(linkVisual);
@@ -348,9 +385,6 @@ export class Sankey extends Observable {
             visual.append(linkVisual);
         });
 
-        this.linksVisuals = linksVisuals;
-        this.nodesVisuals = visualNodes;
-
         nodes.forEach((node) => {
             const textOps = resolveLabelOptions(node, labelOptions, width);
             const labelInstance = new Label(textOps);
@@ -364,8 +398,18 @@ export class Sankey extends Observable {
         return visual;
     }
 
-    exportVisual() {
-        return this._render();
+    exportVisual(exportOptions) {
+        const options = (exportOptions && exportOptions.options) ?
+            deepExtend({}, this.options, exportOptions.options) : this.options;
+
+        const context = {
+            size: {
+                width: defined(exportOptions && exportOptions.width) ? exportOptions.width : this.size.width,
+                height: defined(exportOptions && exportOptions.height) ? exportOptions.height : this.size.height
+            }
+        };
+
+        return this._render(options, context);
     }
 
     _setOptions(options) {