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

package/dist/es2015/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';
 
 const LINK = 'link';
 const NODE = 'node';
@@ -97,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))) {
@@ -108,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);
         }
     }
 
@@ -119,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') {
@@ -130,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();
@@ -191,22 +203,68 @@ export class Sankey extends Observable {
         this.visual = this._render();
     }
 
-    titleHeight(title, totalWidth) {
-        if (!title.visible || !title.text) {
-            return 0;
+    titleBox(title, drawingRect) {
+        if (!title || title.visible === false || !title.text) {
+            return null;
         }
 
-        const titleElement = new Title(deepExtend({}, { totalWidth }, title));
+        const titleElement = new Title(Object.assign({}, {drawingRect}, title));
         const titleVisual = titleElement.exportVisual();
-        return titleVisual.chartElement.box.height();
+        return titleVisual.chartElement.box;
     }
 
-    calculateSankey(options) {
-        const title = this.options.title;
-        const titleHeight = this.titleHeight(title, options.width);
+    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(Object.assign({}, options, {offsetX: 0, offsetY: titleHeight})).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) => {
@@ -221,32 +279,40 @@ export class Sankey extends Observable {
             }
         });
 
-        const offsetX = box.x1 < 0 ? -box.x1 : 0;
-        let offsetY = box.y1 < 0 ? -box.y1 : 0;
-
-        const width = box.width() > options.width ? offsetX + options.width - (box.width() - options.width) : options.width;
-        let height = box.height() > options.height ? offsetY + options.height - (box.height() - options.height) : options.height;
+        let offsetX = (box.x1 < 0 ? -box.x1 : 0) + sankeyBox.x1;
+        let offsetY = (box.y1 < 0 ? -box.y1 : 0) + sankeyBox.y1;
 
-        height -= titleHeight;
-        offsetY += title.position === TOP ? titleHeight : 0;
+        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, title } = 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, title});
-        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 (title.visible && title.text) {
-            const titleElement = new Title(deepExtend({}, { wrapWidth: width, wrapHeight: height }, title));
+        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) => {
@@ -261,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);
@@ -283,6 +349,7 @@ export class Sankey extends Observable {
         });
 
         this.linksVisuals = linksVisuals;
+        this.nodesVisuals = visualNodes;
 
         nodes.forEach((node) => {
             const textOps = resolveLabelOptions(node, labelOptions, width);
@@ -334,16 +401,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/es2015/sankey/title.js

@@ -1,28 +1,20 @@
+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 class Title extends SankeyElement {
     getElement() {
-        const options = deepExtend({}, this.options, this.options.title);
-        const { wrapWidth, wrapHeight, text, border } = options;
-        const padding = getSpacing(options.padding);
-        const margin = getSpacing(options.margin);
+        const options = this.options;
+        const { drawingRect, text } = options;
 
-        if (!options.visible || !text) {
+        if (options.visible === false || !text) {
             return null;
         }
 
-        const title = CoreTitle.buildTitle(text, options);
-        const titleSizeBox = title.children[0].container.box;
-        const totalTitleHeight = margin.top + border.width + padding.top + titleSizeBox.height() + padding.bottom + border.width + margin.bottom;
-        const offsetTop = options.position === BOTTOM ? wrapHeight - totalTitleHeight : 0;
-        const titleRect = new Box(0, offsetTop, wrapWidth, offsetTop + totalTitleHeight);
+        const title = ChartTitle.buildTitle(text, options);
 
-        title.reflow(titleRect);
+        title.reflow(drawingRect);
 
         title.renderVisual();
         return title.visual;
@@ -32,3 +24,14 @@ export class Title extends SankeyElement {
         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)
+});