@progress/kendo-charts 2.1.1-dev.202401290907 → 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

@@ -4,10 +4,12 @@ import { calculateSankey } from './calculation';
 import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
-import { LEFT } from '../common/constants';
+import { Title } from './title';
+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';
@@ -103,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))) {
@@ -120,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);
         }
     };
 
@@ -131,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') {
@@ -142,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();
@@ -205,12 +218,74 @@ export var Sankey = (function (Observable) {
         this.visual = this._render();
     };
 
+    Sankey.prototype.titleBox = function titleBox (title, drawingRect) {
+        if (!title || title.visible === false || !title.text) {
+            return null;
+        }
+
+        var titleElement = new Title(Object.assign({}, {drawingRect: drawingRect}, title));
+        var titleVisual = titleElement.exportVisual();
+        return titleVisual.chartElement.box;
+    };
+
+    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(options).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) {
@@ -225,13 +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;
 
-        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 () {
@@ -241,16 +320,33 @@ export var Sankey = (function (Observable) {
         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;
-        var calcOptions = Object.assign({}, data, {width: width, height: height, nodesOptions: nodesOptions});
+        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 (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) {
@@ -265,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);
@@ -288,6 +384,7 @@ export var Sankey = (function (Observable) {
         });
 
         this.linksVisuals = linksVisuals;
+        this.nodesVisuals = visualNodes;
 
         nodes.forEach(function (node) {
             var textOps = resolveLabelOptions(node, labelOptions, width);

package/dist/es/sankey/title.js

@@ -0,0 +1,48 @@
+import { Title as ChartTitle } from "../core";
+import { SankeyElement } from "./element";
+import { setDefaultOptions, getSpacing } from '../common';
+import { CENTER, TOP } from "../common/constants";
+
+export var Title = (function (SankeyElement) {
+    function Title () {
+        SankeyElement.apply(this, arguments);
+    }
+
+    if ( SankeyElement ) Title.__proto__ = SankeyElement;
+    Title.prototype = Object.create( SankeyElement && SankeyElement.prototype );
+    Title.prototype.constructor = Title;
+
+    Title.prototype.getElement = function getElement () {
+        var options = this.options;
+        var drawingRect = options.drawingRect;
+        var text = options.text;
+
+        if (options.visible === false || !text) {
+            return null;
+        }
+
+        var title = ChartTitle.buildTitle(text, options);
+
+        title.reflow(drawingRect);
+
+        title.renderVisual();
+        return title.visual;
+    };
+
+    Title.prototype.createElement = function createElement () {
+        return this.getElement();
+    };
+
+    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 },
         {

package/dist/es2015/sankey/sankey.js

@@ -4,10 +4,12 @@ import { calculateSankey } from './calculation';
 import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
-import { LEFT } from '../common/constants';
+import { Title } from './title';
+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';
 
 const LINK = 'link';
 const NODE = 'node';
@@ -96,6 +98,7 @@ export class Sankey extends Observable {
         const element = ev.element;
         const isLink = element.type === LINK;
         const isNode = element.type === NODE;
+        const isLegendItem = Boolean(element.chartElement && element.chartElement.options.node);
 
         if ((isLink && this.trigger('linkEnter', ev)) ||
             (isNode && this.trigger('nodeEnter', ev))) {
@@ -107,10 +110,10 @@ export class Sankey extends Observable {
             this.setLinksOpacity(highlight.inactiveOpacity);
             this.setOpacity(element, highlight.opacity);
         } else if (isNode) {
-            this.setLinksOpacity(highlight.inactiveOpacity);
-            element.links.forEach(link => {
-                this.setOpacity(link, highlight.opacity);
-            });
+            this.highlightLinks(element, highlight);
+        } else if (isLegendItem) {
+            const nodeVisual = this.nodesVisuals.get(element.chartElement.options.node.id);
+            this.highlightLinks(nodeVisual, highlight);
         }
     }
 
@@ -118,6 +121,7 @@ export class Sankey extends Observable {
         const element = ev.element;
         const isLink = element.type === LINK;
         const isNode = element.type === NODE;
+        const isLegendItem = Boolean(element.chartElement && element.chartElement.options.node);
         const target = ev.originalEvent.relatedTarget;
 
         if (isLink && target && target.nodeName === 'text') {
@@ -129,11 +133,20 @@ export class Sankey extends Observable {
             return;
         }
 
-        if (isLink || isNode) {
+        if (isLink || isNode || isLegendItem) {
             this.setLinksOpacity(this.options.links.opacity);
         }
     }
 
+    highlightLinks(node, highlight) {
+        if (node) {
+            this.setLinksOpacity(highlight.inactiveOpacity);
+            node.links.forEach(link => {
+                this.setOpacity(link, highlight.opacity);
+            });
+        }
+    }
+
     _destroySurface() {
         if (this.surface) {
             this.surface.destroy();
@@ -190,9 +203,68 @@ export class Sankey extends Observable {
         this.visual = this._render();
     }
 
+    titleBox(title, drawingRect) {
+        if (!title || title.visible === false || !title.text) {
+            return null;
+        }
+
+        const titleElement = new Title(Object.assign({}, {drawingRect}, title));
+        const titleVisual = titleElement.exportVisual();
+        return titleVisual.chartElement.box;
+    }
+
+    legendBox(options, nodes, drawingRect) {
+        if (!options || options.visible === false) {
+            return null;
+        }
+
+        const legend = new Legend(Object.assign({}, {nodes}, options, {drawingRect}));
+        const legendVisual = legend.exportVisual();
+
+        return legendVisual.chartElement.box;
+    }
+
     calculateSankey(options) {
+        const { title, legend, data } = this.options;
         const { nodes, labels, nodesColors } = this.options;
-        const calculatedNodes = calculateSankey(options).nodes;
+
+        const sankeyBox = new Box(0, 0, options.width, options.height);
+        const titleBox = this.titleBox(title, sankeyBox);
+
+        let legendArea = sankeyBox.clone();
+
+        if (titleBox) {
+            const 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);
+            }
+        }
+
+        const 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());
+            }
+        }
+
+        const calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
         const box = new Box();
 
         calculatedNodes.forEach((nodeEl, i) => {
@@ -207,23 +279,40 @@ export class Sankey extends Observable {
             }
         });
 
-        const offsetX = box.x1 < 0 ? -box.x1 : 0;
-        const offsetY = box.y1 < 0 ? -box.y1 : 0;
+        let offsetX = (box.x1 < 0 ? -box.x1 : 0) + sankeyBox.x1;
+        let offsetY = (box.y1 < 0 ? -box.y1 : 0) + sankeyBox.y1;
 
-        const width = box.width() > options.width ? offsetX + options.width - (box.width() - options.width) : options.width;
-        const height = box.height() > options.height ? offsetY + options.height - (box.height() - options.height) : options.height;
+        let width = box.width() > sankeyBox.x2 ? offsetX + sankeyBox.x2 - (box.width() - sankeyBox.x2) : sankeyBox.x2;
+        let height = box.height() > sankeyBox.y2 ? offsetY + sankeyBox.y2 - (box.height() - sankeyBox.y2) : sankeyBox.y2;
 
-        return calculateSankey(Object.assign({}, options, {width, height, offsetX, offsetY}));
+        return {
+            sankey: calculateSankey(Object.assign({}, options, {offsetX, offsetY, width, height})),
+            legendBox,
+            titleBox
+        };
     }
 
     _render() {
-        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodesColors } = this.options;
+        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodesColors, title, legend } = this.options;
         const { width, height } = this.size;
-        const calcOptions = Object.assign({}, data, {width, height, nodesOptions});
-        let { nodes, links } = this.calculateSankey(calcOptions);
+        const calcOptions = Object.assign({}, data, {width, height, nodesOptions, title, legend});
+        const { sankey, titleBox, legendBox } = this.calculateSankey(calcOptions);
+        const { nodes, links } = sankey;
 
         const visual = new drawing.Group();
 
+        if (titleBox) {
+            const titleElement = new Title(Object.assign({}, title, {drawingRect: titleBox}));
+            const titleVisual = titleElement.exportVisual();
+            visual.append(titleVisual);
+        }
+
+        if (legendBox) {
+            const legendElement = new Legend(Object.assign({}, legend, {drawingRect: legendBox, nodes, colors: nodesColors}));
+            const legendVisual = legendElement.exportVisual();
+            visual.append(legendVisual);
+        }
+
         const visualNodes = new Map();
 
         nodes.forEach((node, i) => {
@@ -238,11 +327,11 @@ export class Sankey extends Observable {
             visual.append(nodeVisual);
         });
 
-        links = links.slice().sort((a, b) => b.value - a.value);
+        const sortedLinks = links.slice().sort((a, b) => b.value - a.value);
 
         const linksVisuals = [];
 
-        links.forEach(link => {
+        sortedLinks.forEach(link => {
             const { source, target } = link;
             const sourceNode = visualNodes.get(source.id);
             const targetNode = visualNodes.get(target.id);
@@ -260,6 +349,7 @@ export class Sankey extends Observable {
         });
 
         this.linksVisuals = linksVisuals;
+        this.nodesVisuals = visualNodes;
 
         nodes.forEach((node) => {
             const textOps = resolveLabelOptions(node, labelOptions, width);

package/dist/es2015/sankey/title.js

@@ -0,0 +1,37 @@
+import { Title as ChartTitle } from "../core";
+import { SankeyElement } from "./element";
+import { setDefaultOptions, getSpacing } from '../common';
+import { CENTER, TOP } from "../common/constants";
+
+export class Title extends SankeyElement {
+    getElement() {
+        const options = this.options;
+        const { drawingRect, text } = options;
+
+        if (options.visible === false || !text) {
+            return null;
+        }
+
+        const title = ChartTitle.buildTitle(text, options);
+
+        title.reflow(drawingRect);
+
+        title.renderVisual();
+        return title.visual;
+    }
+
+    createElement() {
+        return this.getElement();
+    }
+}
+
+setDefaultOptions(Title, {
+    position: TOP, // 'top', 'bottom'
+    align: CENTER, // 'left', 'right', 'center'
+    opacity: 1,
+    border: {
+        width: 0
+    },
+    margin: getSpacing(5),
+    padding: getSpacing(5)
+});