@progress/kendo-charts 2.3.0-dev.202402161236 → 2.3.0-dev.202403071434

package/dist/es2015/sankey/calculation.js

@@ -3,24 +3,39 @@ import { deepExtend } from '../common';
 const max = (array, mapFn) => Math.max.apply(null, array.map(mapFn));
 const min = (array, mapFn) => Math.min.apply(null, array.map(mapFn));
 const sum = (array, mapFn) => array.map(mapFn).reduce((acc, curr) => (acc + curr), 0);
-const sortAsc = (a, b) => a.y0 - b.y0;
+const sortAsc = (a, b) => (a.y0 === b.y0 ? a.index - b.index : a.y0 + a.y1 - b.y0 - b.y1);
 const sortSource = (a, b) => sortAsc(a.source, b.source);
 const sortTarget = (a, b) => sortAsc(a.target, b.target);
 const value = (node) => node.value;
 
 function sortLinks(nodes) {
-    nodes.forEach((node) => {
-        const { sourceLinks, targetLinks } = node;
-        sourceLinks.sort(sortTarget);
-        targetLinks.sort(sortSource);
+    nodes.forEach(node => {
+        node.targetLinks.forEach(link => {
+            link.source.sourceLinks.sort(sortTarget);
+        });
+        node.sourceLinks.forEach(link => {
+            link.target.targetLinks.sort(sortSource);
+        });
     });
 }
 
+const calcLayer = (node, maxDepth) => {
+    if (node.align === 'left') {
+        return node.depth;
+    }
+
+    if (node.align === 'right') {
+        return maxDepth - node.height;
+    }
+
+    return node.sourceLinks.length ? node.depth : maxDepth;
+};
+
 class Sankey {
     constructor(options) {
-        const offset = options.nodesOptions.offset || {};
+        const { offset = {}, align } = options.nodesOptions;
         this.data = {
-            nodes: options.nodes.map((node) => deepExtend({}, { offset }, node)),
+            nodes: options.nodes.map((node) => deepExtend({}, { offset, align }, node)),
             links: options.links.map((link) => deepExtend({}, link))
         };
 
@@ -30,6 +45,10 @@ class Sankey {
         this.offsetY = options.offsetY || 0;
         this.nodeWidth = options.nodesOptions.width;
         this.nodePadding = options.nodesOptions.padding;
+        this.reverse = options.reverse;
+        this.targetColumnIndex = options.targetColumnIndex;
+        this.loops = options.loops;
+        this.autoLayout = options.autoLayout;
     }
 
     calculate() {
@@ -37,19 +56,21 @@ class Sankey {
         this.connectLinksToNodes(nodes, links);
         this.calculateNodeValues(nodes);
         this.calculateNodeDepths(nodes);
+        this.calculateNodeHeights(nodes);
 
         const columns = this.calculateNodeColumns(nodes);
         this.calculateNodeBreadths(columns);
         this.applyNodesOffset(nodes);
         this.calculateLinkBreadths(nodes);
 
-        return this.data;
+        return Object.assign({}, this.data, {columns});
     }
 
     connectLinksToNodes(nodes, links) {
         const nodesMap = new Map();
 
-        nodes.forEach((node) => {
+        nodes.forEach((node, i) => {
+            node.index = i;
             node.sourceLinks = [];
             node.targetLinks = [];
             node.id = node.id !== undefined ? node.id : node.label.text;
@@ -93,17 +114,36 @@ class Sankey {
         }
     }
 
+    calculateNodeHeights(nodes) {
+        let current = new Set(nodes);
+        let next = new Set;
+        let x = 0;
+        const eachNode = (node) => {
+            node.height = x;
+            node.targetLinks.forEach((link) => {
+                next.add(link.source);
+            });
+        };
+        while (current.size) {
+            current.forEach(eachNode);
+            x++;
+            current = next;
+            next = new Set;
+        }
+    }
+
     calculateNodeColumns(nodes) {
         const maxDepth = max(nodes, (d) => d.depth);
         const columnWidth = (this.width - this.offsetX - this.nodeWidth) / maxDepth;
         const columns = new Array(maxDepth + 1);
         for (let i = 0; i < nodes.length; i++) {
             const node = nodes[i];
-            const depth = Math.max(0, Math.min(maxDepth, node.sourceLinks.length ? node.depth : maxDepth));
-            node.x0 = this.offsetX + depth * columnWidth;
+            const layer = Math.max(0, Math.min(maxDepth, calcLayer(node, maxDepth)));
+            node.x0 = this.offsetX + layer * columnWidth;
             node.x1 = node.x0 + this.nodeWidth;
-            columns[depth] = columns[depth] || [];
-            columns[depth].push(node);
+            node.layer = layer;
+            columns[layer] = columns[layer] || [];
+            columns[layer].push(node);
         }
 
         return columns;
@@ -112,31 +152,39 @@ class Sankey {
     calculateNodeBreadths(columns) {
         const kSize = min(columns, (c) => (this.height - this.offsetY - (c.length - 1) * this.nodePadding) / sum(c, value));
 
-        for (let c = 0; c < columns.length; c++) {
-            const nodes = columns[c];
+        columns.forEach(nodes => {
             let y = this.offsetY;
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
+            nodes.forEach((node) => {
                 node.y0 = y;
                 node.y1 = y + node.value * kSize;
                 y = node.y1 + this.nodePadding;
-                for (let l = 0; l < node.sourceLinks.length; l++) {
-                    const link = node.sourceLinks[l];
+                node.sourceLinks.forEach((link) => {
                     link.width = link.value * kSize;
-                }
-            }
-
+                });
+            });
             y = (this.height - y + this.nodePadding) / (nodes.length + 1);
-            for (let i = 0; i < nodes.length; ++i) {
-                const node = nodes[i];
+            nodes.forEach((node, i) => {
                 node.y0 += y * (i + 1);
                 node.y1 += y * (i + 1);
+            });
+        });
+
+        if (this.autoLayout !== false) {
+            const loops = this.loops !== undefined ? this.loops : columns.length - 1;
+            const targetColumnIndex = this.targetColumnIndex || 1;
+
+            for (let i = 0; i < loops; i++) {
+                if (!this.reverse) {
+                    this.uncurlLinksToLeft(columns, targetColumnIndex);
+                    this.uncurlLinksToRight(columns, targetColumnIndex);
+                } else {
+                    this.uncurlLinksToRight(columns, targetColumnIndex);
+                    this.uncurlLinksToLeft(columns, targetColumnIndex);
+                }
             }
         }
 
-        for (let c = 0; c < columns.length; c++) {
-            sortLinks(columns[c]);
-        }
+        columns.forEach(sortLinks);
     }
 
     applyNodesOffset(nodes) {
@@ -156,15 +204,175 @@ class Sankey {
             let y = node.y0;
             let y1 = y;
             sourceLinks.forEach((link) => {
+                link.x0 = link.source.x1;
                 link.y0 = y + link.width / 2;
                 y += link.width;
             });
             targetLinks.forEach((link) => {
+                link.x1 = link.target.x0;
                 link.y1 = y1 + link.width / 2;
                 y1 += link.width;
             });
         });
     }
+
+    uncurlLinksToRight(columns, targetColumnIndex) {
+        const n = columns.length;
+        for (let i = targetColumnIndex; i < n; i++) {
+            const column = columns[i];
+            column.forEach((target) => {
+                let y = 0;
+                let sum = 0;
+                target.targetLinks.forEach((link) => {
+                    let kValue = link.value * (target.layer - link.source.layer);
+                    y += this.targetTopPos(link.source, target) * kValue;
+                    sum += kValue;
+                });
+
+                let dy = y === 0 ? 0 : (y / sum - target.y0);
+                target.y0 += dy;
+                target.y1 += dy;
+                sortLinks([target]);
+            });
+            column.sort(sortAsc);
+            this.arrangeNodesVertically(column);
+        }
+    }
+
+    uncurlLinksToLeft(columns, targetColumnIndex) {
+        const l = columns.length;
+        const startIndex = l - 1 - targetColumnIndex;
+        for (let i = startIndex; i >= 0; i--) {
+            const column = columns[i];
+            for (let j = 0; j < column.length; j++) {
+                const source = column[j];
+                let y = 0;
+                let sum = 0;
+                source.sourceLinks.forEach((link) => {
+                    let kValue = link.value * (link.target.layer - source.layer);
+                    y += this.sourceTopPos(source, link.target) * kValue;
+                    sum += kValue;
+                });
+                let dy = y === 0 ? 0 : (y / sum - source.y0);
+                source.y0 += dy;
+                source.y1 += dy;
+                sortLinks([source]);
+            }
+
+            column.sort(sortAsc);
+            this.arrangeNodesVertically(column);
+        }
+    }
+
+    arrangeNodesVertically(nodes) {
+        const startIndex = 0;
+        const endIndex = nodes.length - 1;
+
+        this.arrangeUp(nodes, this.height, endIndex);
+        this.arrangeDown(nodes, this.offsetY, startIndex);
+    }
+
+    arrangeDown(nodes, yPos, index) {
+        let currentY = yPos;
+
+        for (let i = index; i < nodes.length; i++) {
+            const node = nodes[i];
+            const dy = Math.max(0, currentY - node.y0);
+            node.y0 += dy;
+            node.y1 += dy;
+            currentY = node.y1 + this.nodePadding;
+        }
+    }
+
+    arrangeUp(nodes, yPos, index) {
+        let currentY = yPos;
+        for (let i = index; i >= 0; --i) {
+            const node = nodes[i];
+            const dy = Math.max(0, node.y1 - currentY);
+            node.y0 -= dy;
+            node.y1 -= dy;
+            currentY = node.y0 - this.nodePadding;
+        }
+    }
+
+    sourceTopPos(source, target) {
+        let y = target.y0 - ((target.targetLinks.length - 1) * this.nodePadding) / 2;
+        for (let i = 0; i < target.targetLinks.length; i++) {
+            const link = target.targetLinks[i];
+            if (link.source === source) {
+                break;
+            }
+            y += link.width + this.nodePadding;
+        }
+        for (let i = 0; i < source.sourceLinks.length; i++) {
+            const link = source.sourceLinks[i];
+            if (link.target === target) {
+                break;
+            }
+            y -= link.width;
+        }
+        return y;
+    }
+
+    targetTopPos(source, target) {
+        let y = source.y0 - ((source.sourceLinks.length - 1) * this.nodePadding) / 2;
+        for (let i = 0; i < source.sourceLinks.length; i++) {
+            const link = source.sourceLinks[i];
+            if (link.target === target) {
+                break;
+            }
+            y += link.width + this.nodePadding;
+        }
+        for (let i = 0; i < target.targetLinks.length; i++) {
+            const link = target.targetLinks[i];
+            if (link.source === source) {
+                break;
+            }
+            y -= link.width;
+        }
+        return y;
+    }
 }
 
 export const calculateSankey = (options) => new Sankey(options).calculate();
+
+export const crossesValue = (links) => {
+    let value = 0;
+    const linksLength = links.length;
+
+    for (let i = 0; i < linksLength; i++) {
+        const link = links[i];
+
+        for (let lNext = i + 1; lNext < linksLength; lNext++) {
+            const nextLink = links[lNext];
+
+            if (intersect(link, nextLink)) {
+                value += Math.min(link.value, nextLink.value);
+            }
+        }
+    }
+
+    return value;
+};
+
+function rotationDirection(p1x, p1y, p2x, p2y, p3x, p3y) {
+    const expression1 = (p3y - p1y) * (p2x - p1x);
+    const expression2 = (p2y - p1y) * (p3x - p1x);
+
+    if (expression1 > expression2) {
+        return 1;
+    } else if (expression1 === expression2) {
+        return 0;
+    }
+
+    return -1;
+}
+
+function intersect(link1, link2) {
+    const f1 = rotationDirection(link1.x0, link1.y0, link1.x1, link1.y1, link2.x1, link2.y1);
+    const f2 = rotationDirection(link1.x0, link1.y0, link1.x1, link1.y1, link2.x0, link2.y0);
+    const f3 = rotationDirection(link1.x0, link1.y0, link2.x0, link2.y0, link2.x1, link2.y1);
+    const f4 = rotationDirection(link1.x1, link1.y1, link2.x0, link2.y0, link2.x1, link2.y1);
+
+    return f1 !== f2 && f3 !== f4;
+}

package/dist/es2015/sankey/link.js

@@ -6,11 +6,11 @@ import { defined } from '../drawing-utils';
 export class Link extends SankeyElement {
     getElement() {
         const link = this.options.link;
-        const { source, target, y0, y1 } = link;
-        const xC = (source.x0 + target.x1) / 2;
+        const { x0, x1, y0, y1 } = link;
+        const xC = (x0 + x1) / 2;
 
         return new drawing.Path(this.visualOptions())
-            .moveTo(source.x1, y0).curveTo([xC, y0], [xC, y1], [target.x0, y1]);
+            .moveTo(x0, y0).curveTo([xC, y0], [xC, y1], [x1, y1]);
     }
 
     visualOptions() {

package/dist/es2015/sankey/sankey.js

@@ -1,6 +1,6 @@
-import { drawing } from '@progress/kendo-drawing';
+import { geometry, drawing } from '@progress/kendo-drawing';
 import { deepExtend, addClass, setDefaultOptions } from '../common';
-import { calculateSankey } from './calculation';
+import { calculateSankey, crossesValue } from './calculation';
 import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
@@ -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';
@@ -59,6 +60,7 @@ export class Sankey extends Observable {
                 }
                 this.size = { width, height };
                 this.surface.setSize(this.size);
+                this.resize = true;
                 this._redraw();
             });
         });
@@ -242,11 +244,11 @@ 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, disableAutoLayout } = sankeyOptions;
+        const autoLayout = !disableAutoLayout;
 
-        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();
@@ -255,34 +257,35 @@ 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);
             }
         }
 
         const legendBox = this.legendBox(legend, data.nodes, legendArea);
+        const legendPosition = (legend && legend.position) || Legend.prototype.options.position;
 
         if (legendBox) {
-            if (legend.position === LEFT) {
+            if (legendPosition === LEFT) {
                 sankeyBox.unpad({ left: legendBox.width() });
             }
 
-            if (legend.position === RIGHT) {
+            if (legendPosition === RIGHT) {
                 sankeyBox.shrink(legendBox.width(), 0);
             }
 
-            if (legend.position === TOP) {
+            if (legendPosition === TOP) {
                 sankeyBox.unpad({ top: legendBox.height() });
             }
 
-            if (legend.position === BOTTOM) {
+            if (legendPosition === 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 calculatedNodes = calculateSankey(Object.assign({}, calcOptions, {offsetX: 0, offsetY: 0, width: sankeyBox.width(), height: sankeyBox.height()})).nodes;
         const box = new Box();
 
         calculatedNodes.forEach((nodeEl, i) => {
@@ -290,34 +293,90 @@ 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(resolveLabelOptions(nodeEl, labels, sankeyBox.width()));
             const labelVisual = labelInstance.exportVisual();
             if (labelVisual) {
                 box.wrap(rectToBox(labelVisual.rawBBox()));
             }
         });
 
-        let offsetX = (box.x1 < 0 ? -box.x1 : 0) + sankeyBox.x1;
-        let offsetY = (box.y1 < 0 ? -box.y1 : 0) + sankeyBox.y1;
+        let offsetX = sankeyBox.x1;
+        let offsetY = sankeyBox.y1;
 
-        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;
+        let width = sankeyBox.width() + offsetX;
+        let height = sankeyBox.height() + offsetY;
+
+        width -= box.x2 > sankeyBox.width() ? box.x2 - sankeyBox.width() : 0;
+        height -= box.y2 > sankeyBox.height() ? box.y2 - sankeyBox.height() : 0;
+
+        offsetX += box.x1 < 0 ? -box.x1 : 0;
+        offsetY += box.y1 < 0 ? -box.y1 : 0;
+
+        if (autoLayout === false) {
+            return {
+                sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height, autoLayout: false})),
+                legendBox,
+                titleBox
+            };
+        }
+
+        if (this.resize && autoLayout && this.permutation) {
+            this.resize = false;
+            return {
+                sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height}, this.permutation)),
+                legendBox,
+                titleBox
+            };
+        }
+
+        const startColumn = 1;
+        const loops = 2;
+        const columnsLength = calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height, autoLayout: false})).columns.length;
+        const results = [];
+
+        const permutation = (targetColumnIndex, reverse) => {
+            let currPerm = calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height, loops: loops, targetColumnIndex, reverse}));
+            let crosses = crossesValue(currPerm.links);
+            results.push({
+                crosses: crosses,
+                reverse: reverse,
+                targetColumnIndex: targetColumnIndex
+            });
+            return crosses === 0;
+        };
+
+        for (let index = startColumn; index <= columnsLength - 1; index++) {
+            if (permutation(index, false) || permutation(index, true)) {
+                break;
+            }
+        }
+
+        const minCrosses = Math.min.apply(null, results.map(r => r.crosses));
+        const bestResult = results.find(r => r.crosses === minCrosses);
+        this.permutation = { targetColumnIndex: bestResult.targetColumnIndex, reverse: bestResult.reverse };
+        const result = calculateSankey(Object.assign({}, calcOptions, {offsetX, offsetY, width, height}, this.permutation));
 
         return {
-            sankey: calculateSankey(Object.assign({}, options, {offsetX, offsetY, width, height})),
+            sankey: result,
             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}));
@@ -332,6 +391,7 @@ export class Sankey extends Observable {
         }
 
         const visualNodes = new Map();
+        sankeyContext.nodesVisuals = visualNodes;
 
         nodes.forEach((node, i) => {
             const nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
@@ -354,6 +414,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;
@@ -377,11 +438,9 @@ export class Sankey extends Observable {
             visual.append(linkVisual);
         });
 
-        this.linksVisuals = linksVisuals;
-        this.nodesVisuals = visualNodes;
-
+        const diagramWidth = nodes.reduce((acc, node) => Math.max(acc, node.x1), 0);
         nodes.forEach((node) => {
-            const textOps = resolveLabelOptions(node, labelOptions, width);
+            const textOps = resolveLabelOptions(node, labelOptions, diagramWidth);
             const labelInstance = new Label(textOps);
             const labelVisual = labelInstance.exportVisual();
 
@@ -393,8 +452,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) {
@@ -403,6 +472,9 @@ export class Sankey extends Observable {
 }
 
 setDefaultOptions(Sankey, {
+    title: {
+        position: TOP, // 'top', 'bottom'
+    },
     labels: {
         visible: true,
         margin: {
@@ -421,6 +493,7 @@ setDefaultOptions(Sankey, {
         width: 24,
         padding: 16,
         opacity: 1,
+        align: 'stretch', // 'left', 'right', 'stretch'
         offset: { left: 0, top: 0 }
     },
     links: {

package/dist/es2015/sankey/title.js

@@ -26,7 +26,6 @@ export class Title extends SankeyElement {
 }
 
 setDefaultOptions(Title, {
-    position: TOP, // 'top', 'bottom'
     align: CENTER, // 'left', 'right', 'center'
     opacity: 1,
     border: {