@progress/kendo-charts 2.2.0-dev.202401301155 → 2.2.0-dev.202402011056

package/dist/es/sankey/legend.js

@@ -0,0 +1,59 @@
+import { default as ChartLegend } from "../chart/legend/legend";
+import { SankeyElement } from "./element";
+import { setDefaultOptions } from '../common';
+import { nodeColor } from "./node";
+import { BOTTOM, CENTER, POINTER } from "../common/constants";
+import { AREA } from "../chart/constants";
+
+export var Legend = (function (SankeyElement) {
+    function Legend () {
+        SankeyElement.apply(this, arguments);
+    }
+
+    if ( SankeyElement ) Legend.__proto__ = SankeyElement;
+    Legend.prototype = Object.create( SankeyElement && SankeyElement.prototype );
+    Legend.prototype.constructor = Legend;
+
+    Legend.prototype.getElement = function getElement () {
+        var options = this.options;
+        var drawingRect = options.drawingRect;
+        var nodes = options.nodes; if ( nodes === void 0 ) nodes = [];
+        var colors = options.colors; if ( colors === void 0 ) colors = [];
+
+        if (options.visible === false || !nodes.length) {
+            return null;
+        }
+
+        var data = nodes.map(function (node, index) { return ({
+            text: (node.label && node.label.text) || '',
+            area: { background: nodeColor(node, colors, index), opacity: node.opacity },
+            node: node,
+        }); });
+
+        var legend = new ChartLegend(Object.assign({}, options, {data: data}));
+        legend.reflow(drawingRect);
+
+        legend.renderVisual();
+        return legend.visual;
+    };
+
+    Legend.prototype.createElement = function createElement () {
+        return this.getElement();
+    };
+
+    return Legend;
+}(SankeyElement));
+
+setDefaultOptions(Legend, {
+    markers: { visible: false },
+    item: {
+        type: AREA,
+        cursor: POINTER,
+        opacity: 1
+    },
+    position: BOTTOM,
+    align: CENTER,
+    border: {
+        width: 0
+    }
+});

package/dist/es/sankey/node.js

@@ -34,10 +34,12 @@ export var Node = (function (SankeyElement) {
     return Node;
 }(SankeyElement));
 
+export var nodeColor = function (node, nodesColors, index) { return node.color || nodesColors[index % nodesColors.length]; };
+
 export var resolveNodeOptions = function (node, options, nodesColors, index) {
     var nodeOptions = deepExtend({}, options, options.node);
     return deepExtend({},
-        { color: nodesColors[index % nodesColors.length] },
+        { color: nodeColor(node, nodesColors, index) },
         nodeOptions,
         { node: node },
         {

package/dist/es/sankey/sankey.js

@@ -1,14 +1,15 @@
 import { drawing } from '@progress/kendo-drawing';
-import { deepExtend, addClass, setDefaultOptions, getSpacing } from '../common';
+import { deepExtend, addClass, setDefaultOptions } from '../common';
 import { calculateSankey } from './calculation';
 import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
 import { Title } from './title';
-import { CENTER, LEFT, TOP } from '../common/constants';
+import { BOTTOM, LEFT, RIGHT, TOP } from '../common/constants';
 import Box from '../core/box';
 import rectToBox from '../core/utils/rect-to-box';
 import { Observable } from '../common/observable';
+import { Legend } from './legend';
 
 var LINK = 'link';
 var NODE = 'node';
@@ -104,11 +105,10 @@ export var Sankey = (function (Observable) {
     };
 
     Sankey.prototype._mouseenter = function _mouseenter (ev) {
-        var this$1 = this;
-
         var element = ev.element;
         var isLink = element.type === LINK;
         var isNode = element.type === NODE;
+        var isLegendItem = Boolean(element.chartElement && element.chartElement.options.node);
 
         if ((isLink && this.trigger('linkEnter', ev)) ||
             (isNode && this.trigger('nodeEnter', ev))) {
@@ -121,10 +121,10 @@ export var Sankey = (function (Observable) {
             this.setLinksOpacity(highlight.inactiveOpacity);
             this.setOpacity(element, highlight.opacity);
         } else if (isNode) {
-            this.setLinksOpacity(highlight.inactiveOpacity);
-            element.links.forEach(function (link) {
-                this$1.setOpacity(link, highlight.opacity);
-            });
+            this.highlightLinks(element, highlight);
+        } else if (isLegendItem) {
+            var nodeVisual = this.nodesVisuals.get(element.chartElement.options.node.id);
+            this.highlightLinks(nodeVisual, highlight);
         }
     };
 
@@ -132,6 +132,7 @@ export var Sankey = (function (Observable) {
         var element = ev.element;
         var isLink = element.type === LINK;
         var isNode = element.type === NODE;
+        var isLegendItem = Boolean(element.chartElement && element.chartElement.options.node);
         var target = ev.originalEvent.relatedTarget;
 
         if (isLink && target && target.nodeName === 'text') {
@@ -143,11 +144,22 @@ export var Sankey = (function (Observable) {
             return;
         }
 
-        if (isLink || isNode) {
+        if (isLink || isNode || isLegendItem) {
             this.setLinksOpacity(this.options.links.opacity);
         }
     };
 
+    Sankey.prototype.highlightLinks = function highlightLinks (node, highlight) {
+        var this$1 = this;
+
+        if (node) {
+            this.setLinksOpacity(highlight.inactiveOpacity);
+            node.links.forEach(function (link) {
+                this$1.setOpacity(link, highlight.opacity);
+            });
+        }
+    };
+
     Sankey.prototype._destroySurface = function _destroySurface () {
         if (this.surface) {
             this.surface.destroy();
@@ -206,25 +218,74 @@ export var Sankey = (function (Observable) {
         this.visual = this._render();
     };
 
-    Sankey.prototype.titleHeight = function titleHeight (title, totalWidth) {
-        if (!title.visible || !title.text) {
-            return 0;
+    Sankey.prototype.titleBox = function titleBox (title, drawingRect) {
+        if (!title || title.visible === false || !title.text) {
+            return null;
         }
 
-        var titleElement = new Title(deepExtend({}, { totalWidth: totalWidth }, title));
+        var titleElement = new Title(Object.assign({}, {drawingRect: drawingRect}, title));
         var titleVisual = titleElement.exportVisual();
-        return titleVisual.chartElement.box.height();
+        return titleVisual.chartElement.box;
     };
 
-    Sankey.prototype.calculateSankey = function calculateSankey$1 (options) {
-        var title = this.options.title;
-        var titleHeight = this.titleHeight(title, options.width);
+    Sankey.prototype.legendBox = function legendBox (options, nodes, drawingRect) {
+        if (!options || options.visible === false) {
+            return null;
+        }
+
+        var legend = new Legend(Object.assign({}, {nodes: nodes}, options, {drawingRect: drawingRect}));
+        var legendVisual = legend.exportVisual();
+
+        return legendVisual.chartElement.box;
+    };
 
+    Sankey.prototype.calculateSankey = function calculateSankey$1 (options) {
         var ref = this.options;
-        var nodes = ref.nodes;
-        var labels = ref.labels;
-        var nodesColors = ref.nodesColors;
-        var calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: 0, offsetY: titleHeight})).nodes;
+        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);
+        var titleBox = this.titleBox(title, sankeyBox);
+
+        var legendArea = sankeyBox.clone();
+
+        if (titleBox) {
+            var titleHeight = titleBox.height();
+            if (title.position === TOP) {
+                sankeyBox.unpad({ top: titleHeight });
+                legendArea = new Box(0, titleHeight, options.width, options.height);
+            } else {
+                sankeyBox.shrink(0, titleHeight);
+                legendArea = new Box(0, 0, options.width, options.height - titleHeight);
+            }
+        }
+
+        var legendBox = this.legendBox(legend, data.nodes, legendArea);
+
+        if (legendBox) {
+            if (legend.position === LEFT) {
+                sankeyBox.unpad({ left: legendBox.width() });
+            }
+
+            if (legend.position === RIGHT) {
+                sankeyBox.shrink(legendBox.width(), 0);
+            }
+
+            if (legend.position === TOP) {
+                sankeyBox.unpad({ top: legendBox.height() });
+            }
+
+            if (legend.position === BOTTOM) {
+                sankeyBox.shrink(0, legendBox.height());
+            }
+        }
+
+        var calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
         var box = new Box();
 
         calculatedNodes.forEach(function (nodeEl, i) {
@@ -239,16 +300,17 @@ export var Sankey = (function (Observable) {
             }
         });
 
-        var offsetX = box.x1 < 0 ? -box.x1 : 0;
-        var offsetY = box.y1 < 0 ? -box.y1 : 0;
+        var offsetX = (box.x1 < 0 ? -box.x1 : 0) + sankeyBox.x1;
+        var offsetY = (box.y1 < 0 ? -box.y1 : 0) + sankeyBox.y1;
 
-        var width = box.width() > options.width ? offsetX + options.width - (box.width() - options.width) : options.width;
-        var height = box.height() > options.height ? offsetY + options.height - (box.height() - options.height) : options.height;
+        var width = box.width() > sankeyBox.x2 ? offsetX + sankeyBox.x2 - (box.width() - sankeyBox.x2) : sankeyBox.x2;
+        var height = box.height() > sankeyBox.y2 ? offsetY + sankeyBox.y2 - (box.height() - sankeyBox.y2) : sankeyBox.y2;
 
-        height -= titleHeight;
-        offsetY += title.position === TOP ? titleHeight : 0;
-
-        return calculateSankey(Object.assign({}, options, {width: width, height: height, offsetX: offsetX, offsetY: offsetY}));
+        return {
+            sankey: calculateSankey(Object.assign({}, options, {offsetX: offsetX, offsetY: offsetY, width: width, height: height})),
+            legendBox: legendBox,
+            titleBox: titleBox
+        };
     };
 
     Sankey.prototype._render = function _render () {
@@ -259,22 +321,32 @@ export var Sankey = (function (Observable) {
         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;
-        var calcOptions = Object.assign({}, data, {width: width, height: height, nodesOptions: nodesOptions, title: title});
+        var calcOptions = Object.assign({}, data, {width: width, height: height, nodesOptions: nodesOptions, title: title, legend: legend});
         var ref$2 = this.calculateSankey(calcOptions);
-        var nodes = ref$2.nodes;
-        var links = ref$2.links;
+        var sankey = ref$2.sankey;
+        var titleBox = ref$2.titleBox;
+        var legendBox = ref$2.legendBox;
+        var nodes = sankey.nodes;
+        var links = sankey.links;
 
         var visual = new drawing.Group();
 
-        if (title.visible && title.text) {
-            var titleElement = new Title(deepExtend({}, { wrapWidth: width, wrapHeight: height }, title));
+        if (titleBox) {
+            var titleElement = new Title(Object.assign({}, title, {drawingRect: titleBox}));
             var titleVisual = titleElement.exportVisual();
             visual.append(titleVisual);
         }
 
+        if (legendBox) {
+            var legendElement = new Legend(Object.assign({}, legend, {drawingRect: legendBox, nodes: nodes, colors: nodesColors}));
+            var legendVisual = legendElement.exportVisual();
+            visual.append(legendVisual);
+        }
+
         var visualNodes = new Map();
 
         nodes.forEach(function (node, i) {
@@ -289,11 +361,11 @@ export var Sankey = (function (Observable) {
             visual.append(nodeVisual);
         });
 
-        links = links.slice().sort(function (a, b) { return b.value - a.value; });
+        var sortedLinks = links.slice().sort(function (a, b) { return b.value - a.value; });
 
         var linksVisuals = [];
 
-        links.forEach(function (link) {
+        sortedLinks.forEach(function (link) {
             var source = link.source;
             var target = link.target;
             var sourceNode = visualNodes.get(source.id);
@@ -312,6 +384,7 @@ export var Sankey = (function (Observable) {
         });
 
         this.linksVisuals = linksVisuals;
+        this.nodesVisuals = visualNodes;
 
         nodes.forEach(function (node) {
             var textOps = resolveLabelOptions(node, labelOptions, width);
@@ -365,16 +438,5 @@ setDefaultOptions(Sankey, {
             opacity: 0.8,
             inactiveOpacity: 0.2
         }
-    },
-    title: {
-        visible: true,
-        position: TOP,
-        align: CENTER,
-        opacity: 1,
-        border: {
-            width: 0
-        },
-        margin: getSpacing(5),
-        padding: getSpacing(5)
-    },
+    }
 });

package/dist/es/sankey/title.js

@@ -1,9 +1,7 @@
+import { Title as ChartTitle } from "../core";
 import { SankeyElement } from "./element";
-import { Title as CoreTitle } from "../core";
-import Box from "../core/box";
-import { deepExtend } from "../common";
-import { BOTTOM } from "../common/constants";
-import { getSpacing } from "../common";
+import { setDefaultOptions, getSpacing } from '../common';
+import { CENTER, TOP } from "../common/constants";
 
 export var Title = (function (SankeyElement) {
     function Title () {
@@ -15,25 +13,17 @@ export var Title = (function (SankeyElement) {
     Title.prototype.constructor = Title;
 
     Title.prototype.getElement = function getElement () {
-        var options = deepExtend({}, this.options, this.options.title);
-        var wrapWidth = options.wrapWidth;
-        var wrapHeight = options.wrapHeight;
+        var options = this.options;
+        var drawingRect = options.drawingRect;
         var text = options.text;
-        var border = options.border;
-        var padding = getSpacing(options.padding);
-        var margin = getSpacing(options.margin);
 
-        if (!options.visible || !text) {
+        if (options.visible === false || !text) {
             return null;
         }
 
-        var title = CoreTitle.buildTitle(text, options);
-        var titleSizeBox = title.children[0].container.box;
-        var totalTitleHeight = margin.top + border.width + padding.top + titleSizeBox.height() + padding.bottom + border.width + margin.bottom;
-        var offsetTop = options.position === BOTTOM ? wrapHeight - totalTitleHeight : 0;
-        var titleRect = new Box(0, offsetTop, wrapWidth, offsetTop + totalTitleHeight);
+        var title = ChartTitle.buildTitle(text, options);
 
-        title.reflow(titleRect);
+        title.reflow(drawingRect);
 
         title.renderVisual();
         return title.visual;
@@ -45,3 +35,14 @@ export var Title = (function (SankeyElement) {
 
     return Title;
 }(SankeyElement));
+
+setDefaultOptions(Title, {
+    position: TOP, // 'top', 'bottom'
+    align: CENTER, // 'left', 'right', 'center'
+    opacity: 1,
+    border: {
+        width: 0
+    },
+    margin: getSpacing(5),
+    padding: getSpacing(5)
+});

package/dist/es2015/sankey/legend.js

@@ -0,0 +1,47 @@
+import { default as ChartLegend } from "../chart/legend/legend";
+import { SankeyElement } from "./element";
+import { setDefaultOptions } from '../common';
+import { nodeColor } from "./node";
+import { BOTTOM, CENTER, POINTER } from "../common/constants";
+import { AREA } from "../chart/constants";
+
+export class Legend extends SankeyElement {
+    getElement() {
+        const options = this.options;
+        const { drawingRect, nodes = [], colors = [] } = options;
+
+        if (options.visible === false || !nodes.length) {
+            return null;
+        }
+
+        const data = nodes.map((node, index) => ({
+            text: (node.label && node.label.text) || '',
+            area: { background: nodeColor(node, colors, index), opacity: node.opacity },
+            node: node,
+        }));
+
+        const legend = new ChartLegend(Object.assign({}, options, {data}));
+        legend.reflow(drawingRect);
+
+        legend.renderVisual();
+        return legend.visual;
+    }
+
+    createElement() {
+        return this.getElement();
+    }
+}
+
+setDefaultOptions(Legend, {
+    markers: { visible: false },
+    item: {
+        type: AREA,
+        cursor: POINTER,
+        opacity: 1
+    },
+    position: BOTTOM,
+    align: CENTER,
+    border: {
+        width: 0
+    }
+});

package/dist/es2015/sankey/node.js

@@ -24,10 +24,12 @@ export class Node extends SankeyElement {
     }
 }
 
+export const nodeColor = (node, nodesColors, index) => node.color || nodesColors[index % nodesColors.length];
+
 export const resolveNodeOptions = (node, options, nodesColors, index) => {
     const nodeOptions = deepExtend({}, options, options.node);
     return deepExtend({},
-        { color: nodesColors[index % nodesColors.length] },
+        { color: nodeColor(node, nodesColors, index) },
         nodeOptions,
         { node },
         {