@progress/kendo-charts 2.0.0 → 2.1.0-dev.202401181402

package/dist/es/sankey/sankey.js

@@ -0,0 +1,345 @@
+import { drawing } from '@progress/kendo-drawing';
+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 { LEFT } from '../common/constants';
+import Box from '../core/box';
+import rectToBox from '../core/utils/rect-to-box';
+import { Observable } from '../common/observable';
+
+var LINK = 'link';
+var NODE = 'node';
+
+export var Sankey = (function (Observable) {
+    function Sankey(element, options, theme) {
+        Observable.call(this);
+
+        this._initElement(element);
+        this._initTheme(theme);
+        this._setOptions(options);
+        this._initSurface();
+
+        if (options && options.data) {
+            this._redraw();
+        }
+
+        this._initResizeObserver();
+    }
+
+    if ( Observable ) Sankey.__proto__ = Observable;
+    Sankey.prototype = Object.create( Observable && Observable.prototype );
+    Sankey.prototype.constructor = Sankey;
+
+    Sankey.prototype.destroy = function destroy () {
+        this.unbind();
+        this._destroySurface();
+        this._destroyResizeObserver();
+    };
+
+    Sankey.prototype._initElement = function _initElement (element) {
+        this.element = element;
+        addClass(this.element, [ "k-chart", "k-sankey" ]);
+    };
+
+    Sankey.prototype._initSurface = function _initSurface () {
+        if (!this.surface) {
+            this._destroySurface();
+            this._initSurfaceElement();
+            this.surface = this._createSurface();
+        }
+    };
+
+    Sankey.prototype._initResizeObserver = function _initResizeObserver () {
+        var this$1 = this;
+
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+                var ref = entry.contentRect;
+                var width = ref.width;
+                var height = ref.height;
+                if (entry.target !== this$1.element ||
+                    (this$1.size.width === width && this$1.size.height === height)) {
+                    return;
+                }
+                this$1.size = { width: width, height: height };
+                this$1.surface.setSize(this$1.size);
+                this$1._redraw();
+            });
+        });
+        this._resizeObserver = observer;
+        observer.observe(this.element);
+    };
+
+    Sankey.prototype._createSurface = function _createSurface () {
+        return drawing.Surface.create(this.surfaceElement, {
+            mouseenter: this._mouseenter.bind(this),
+            mouseleave: this._mouseleave.bind(this)
+        });
+    };
+
+    Sankey.prototype._initTheme = function _initTheme (theme) {
+        var currentTheme = theme || this.theme || {};
+        this.theme = currentTheme;
+        this.options = deepExtend({}, currentTheme, this.options);
+    };
+
+    Sankey.prototype.setLinksOpacity = function setLinksOpacity (opacity) {
+        var this$1 = this;
+
+        this.linksVisuals.forEach(function (link) {
+            this$1.setOpacity(link, opacity);
+        });
+    };
+
+    Sankey.prototype.setOpacity = function setOpacity (link, opacity) {
+        link.options.set('stroke', Object.assign({}, link.options.stroke, {opacity: opacity}));
+    };
+
+    Sankey.prototype.trigger = function trigger (name, ev) {
+        ev.type = name;
+        return Observable.prototype.trigger.call(this, name, ev);
+    };
+
+    Sankey.prototype._mouseenter = function _mouseenter (ev) {
+        var this$1 = this;
+
+        var element = ev.element;
+        var isLink = element.type === LINK;
+        var isNode = element.type === NODE;
+
+        if ((isLink && this.trigger('linkEnter', ev)) ||
+            (isNode && this.trigger('nodeEnter', ev))) {
+            return;
+        }
+
+        var ref = this.options.links;
+        var highlight = ref.highlight;
+        if (isLink) {
+            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);
+            });
+        }
+    };
+
+    Sankey.prototype._mouseleave = function _mouseleave (ev) {
+        var element = ev.element;
+        var isLink = element.type === LINK;
+        var isNode = element.type === NODE;
+        var target = ev.originalEvent.relatedTarget;
+
+        if (isLink && target && target.nodeName === 'text') {
+            return;
+        }
+
+        if ((isLink && this.trigger('linkLeave', ev)) ||
+            (isNode && this.trigger('nodeLeave', ev))) {
+            return;
+        }
+
+        if (isLink || isNode) {
+            this.setLinksOpacity(this.options.links.opacity);
+        }
+    };
+
+    Sankey.prototype._destroySurface = function _destroySurface () {
+        if (this.surface) {
+            this.surface.destroy();
+            this.surface = null;
+            this._destroySurfaceElement();
+        }
+    };
+
+    Sankey.prototype._destroyResizeObserver = function _destroyResizeObserver () {
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+    };
+
+    Sankey.prototype._initSurfaceElement = function _initSurfaceElement () {
+        if (!this.surfaceElement) {
+            this.surfaceElement = document.createElement('div');
+            this.element.appendChild(this.surfaceElement);
+        }
+    };
+
+    Sankey.prototype._destroySurfaceElement = function _destroySurfaceElement () {
+        if (this.surfaceElement && this.surfaceElement.parentNode) {
+            this.surfaceElement.parentNode.removeChild(this.surfaceElement);
+            this.surfaceElement = null;
+        }
+    };
+
+    Sankey.prototype.setOptions = function setOptions (options, theme) {
+        this._setOptions(options);
+        this._initTheme(theme);
+        this._initSurface();
+        this._redraw();
+    };
+
+    Sankey.prototype._redraw = function _redraw () {
+        this.surface.clear();
+
+        var ref = this._getSize();
+        var width = ref.width;
+        var height = ref.height;
+        this.size = { width: width, height: height };
+        this.surface.setSize(this.size);
+
+        this.createVisual();
+
+        this.surface.draw(this.visual);
+    };
+
+    Sankey.prototype._getSize = function _getSize () {
+        return this.element.getBoundingClientRect();
+    };
+
+    Sankey.prototype.createVisual = function createVisual () {
+        this.visual = this._render();
+    };
+
+    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 box = new Box();
+
+        calculatedNodes.forEach(function (nodeEl, i) {
+            var nodeOps = resolveNodeOptions(nodeEl, nodes, nodesColors, i);
+            var nodeInstance = new Node(nodeOps);
+            box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
+
+            var labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: options.width }, labels));
+            var labelVisual = labelInstance.exportVisual();
+            if (labelVisual) {
+                box.wrap(rectToBox(labelVisual.rawBBox()));
+            }
+        });
+
+        var offsetX = box.x1 < 0 ? -box.x1 : 0;
+        var offsetY = box.y1 < 0 ? -box.y1 : 0;
+
+        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;
+
+        return calculateSankey(Object.assign({}, options, {width: width, height: height, offsetX: offsetX, offsetY: offsetY}));
+    };
+
+    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 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 ref$2 = this.calculateSankey(calcOptions);
+        var nodes = ref$2.nodes;
+        var links = ref$2.links;
+
+        var visual = new drawing.Group();
+
+        var visualNodes = new Map();
+
+        nodes.forEach(function (node, i) {
+            var nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
+
+            var nodeInstance = new Node(nodeOps);
+            var nodeVisual = nodeInstance.exportVisual();
+            nodeVisual.links = [];
+            nodeVisual.type = NODE;
+            visualNodes.set(node.id, nodeVisual);
+
+            visual.append(nodeVisual);
+        });
+
+        links = links.slice().sort(function (a, b) { return b.value - a.value; });
+
+        var linksVisuals = [];
+
+        links.forEach(function (link) {
+            var source = link.source;
+            var target = link.target;
+            var sourceNode = visualNodes.get(source.id);
+            var targetNode = visualNodes.get(target.id);
+            var linkOps = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
+            var linkInstance = new Link(linkOps);
+            var linkVisual = linkInstance.exportVisual();
+
+            linkVisual.type = LINK;
+            linksVisuals.push(linkVisual);
+
+            sourceNode.links.push(linkVisual);
+            targetNode.links.push(linkVisual);
+
+            visual.append(linkVisual);
+        });
+
+        this.linksVisuals = linksVisuals;
+
+        nodes.forEach(function (node) {
+            var textOps = resolveLabelOptions(node, labelOptions, width);
+            var labelInstance = new Label(textOps);
+            var labelVisual = labelInstance.exportVisual();
+
+            if (labelVisual) {
+                visual.append(labelVisual);
+            }
+        });
+
+        return visual;
+    };
+
+    Sankey.prototype.exportVisual = function exportVisual () {
+        return this._render();
+    };
+
+    Sankey.prototype._setOptions = function _setOptions (options) {
+        this.options = deepExtend({}, this.options, options);
+    };
+
+    return Sankey;
+}(Observable));
+
+setDefaultOptions(Sankey, {
+    labels: {
+        visible: true,
+        margin: {
+            left: 8,
+            right: 8
+        },
+        padding: 0,
+        border: {
+            width: 0
+        },
+        align: LEFT,
+        opacity: 1,
+        offset: { left: 0, top: 0 }
+    },
+    nodes: {
+        width: 24,
+        padding: 16,
+        opacity: 1,
+        offset: { left: 0, top: 0 }
+    },
+    links: {
+        colorType: 'static', // 'source', 'target', 'static'
+        opacity: 0.4,
+        highlight: {
+            opacity: 0.8,
+            inactiveOpacity: 0.2
+        }
+    }
+});

package/dist/es/sankey.js

@@ -0,0 +1 @@
+export { Sankey } from './sankey/sankey';

package/dist/es2015/{map/scroller → common}/observable.js

@@ -1,6 +1,6 @@
 import {
     Class
-} from '../../common';
+} from '../common';
 
 const STRING = "string";
 const FUNCTION = "function";

package/dist/es2015/main.js

@@ -7,6 +7,7 @@ export * from './gauges';
 export * from './barcode';
 export * from './qrcode';
 export * from './map';
+export * from './sankey';
 export * from './common';
 
 export { baseTheme as chartBaseTheme } from './chart/base-theme';

package/dist/es2015/map/attribution.js

@@ -11,7 +11,7 @@ import {
     removeChildren
 } from './utils';
 
-import { Observable } from './scroller/observable';
+import { Observable } from '../common/observable';
 
 export class Attribution extends Observable {
     constructor(element, options) {

package/dist/es2015/map/map.js

@@ -76,7 +76,7 @@ import {
 
 import {
     Observable
-} from './scroller/observable';
+} from '../common/observable';
 
 import MapService from './../services/map-service';
 

package/dist/es2015/map/navigator.js

@@ -8,7 +8,7 @@ import {
 
 import {
     Observable
-} from './scroller/observable';
+} from '../common/observable';
 
 import {
     proxy,

package/dist/es2015/map/scroller/draggable.js

@@ -5,7 +5,7 @@ import {
 
 import {
     Observable
-} from './observable';
+} from '../../common/observable';
 
 import {
     getEventMap,

package/dist/es2015/map/scroller/scroller.js

@@ -39,7 +39,7 @@ import {
 
 import {
     Observable
-} from './observable';
+} from '../../common/observable';
 
 let
     extend = Object.assign,

package/dist/es2015/map/scroller/user-events.js

@@ -16,7 +16,7 @@ import {
 
 import {
     Observable
-} from './observable';
+} from '../../common/observable';
 
 const extend = Object.assign;
 

package/dist/es2015/map/zoom.js

@@ -9,7 +9,7 @@ import {
 
 import {
     Observable
-} from './scroller/observable';
+} from '../common/observable';
 
 import {
     on,

package/dist/es2015/sankey/calculation.js

@@ -0,0 +1,170 @@
+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 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);
+    });
+}
+
+class Sankey {
+    constructor(options) {
+        const offset = options.nodesOptions.offset || {};
+        this.data = {
+            nodes: options.nodes.map((node) => deepExtend({}, { offset }, node)),
+            links: options.links.map((link) => deepExtend({}, link))
+        };
+
+        this.width = options.width;
+        this.height = options.height;
+        this.offsetX = options.offsetX || 0;
+        this.offsetY = options.offsetY || 0;
+        this.nodeWidth = options.nodesOptions.width;
+        this.nodePadding = options.nodesOptions.padding;
+    }
+
+    calculate() {
+        const { nodes, links } = this.data;
+        this.connectLinksToNodes(nodes, links);
+        this.calculateNodeValues(nodes);
+        this.calculateNodeDepths(nodes);
+
+        const columns = this.calculateNodeColumns(nodes);
+        this.calculateNodeBreadths(columns);
+        this.applyNodesOffset(nodes);
+        this.calculateLinkBreadths(nodes);
+
+        return this.data;
+    }
+
+    connectLinksToNodes(nodes, links) {
+        const nodesMap = new Map();
+
+        nodes.forEach((node) => {
+            node.sourceLinks = [];
+            node.targetLinks = [];
+            node.id = node.id !== undefined ? node.id : node.label.text;
+            nodesMap.set(node.id, node);
+        });
+
+        links.forEach((link) => {
+            link.source = nodesMap.get(link.sourceId);
+            link.target = nodesMap.get(link.targetId);
+            link.source.sourceLinks.push(link);
+            link.target.targetLinks.push(link);
+        });
+    }
+
+    calculateNodeValues(nodes) {
+        nodes.forEach((node) => {
+            node.value = Math.max(
+                sum(node.sourceLinks, value),
+                sum(node.targetLinks, value)
+            );
+        });
+    }
+
+    calculateNodeDepths(nodes) {
+        let current = new Set(nodes);
+        let next = new Set();
+        let currDepth = 0;
+        while (current.size) {
+            const currentNodes = Array.from(current);
+            for (let n = 0; n < currentNodes.length; n++) {
+                const node = currentNodes[n];
+                node.depth = currDepth;
+                for (let l = 0; l < node.sourceLinks.length; l++) {
+                    const link = node.sourceLinks[l];
+                    next.add(link.target);
+                }
+            }
+            currDepth++;
+            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;
+            node.x1 = node.x0 + this.nodeWidth;
+            columns[depth] = columns[depth] || [];
+            columns[depth].push(node);
+        }
+
+        return columns;
+    }
+
+    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];
+            let y = this.offsetY;
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                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];
+                    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];
+                node.y0 += y * (i + 1);
+                node.y1 += y * (i + 1);
+            }
+        }
+
+        for (let c = 0; c < columns.length; c++) {
+            sortLinks(columns[c]);
+        }
+    }
+
+    applyNodesOffset(nodes) {
+        nodes.forEach((node) => {
+            const offsetX = (node.offset ? node.offset.left : 0) || 0;
+            const offsetY = (node.offset ? node.offset.top : 0) || 0;
+            node.x0 += offsetX;
+            node.x1 += offsetX;
+            node.y0 += offsetY;
+            node.y1 += offsetY;
+        });
+    }
+
+    calculateLinkBreadths(nodes) {
+        nodes.forEach((node) => {
+            const { sourceLinks, targetLinks } = node;
+            let y = node.y0;
+            let y1 = y;
+            sourceLinks.forEach((link) => {
+                link.y0 = y + link.width / 2;
+                y += link.width;
+            });
+            targetLinks.forEach((link) => {
+                link.y1 = y1 + link.width / 2;
+                y1 += link.width;
+            });
+        });
+    }
+}
+
+export const calculateSankey = (options) => new Sankey(options).calculate();

package/dist/es2015/sankey/element.js

@@ -0,0 +1,41 @@
+import {
+    Class,
+    deepExtend
+} from '../common';
+
+export class SankeyElement extends Class {
+    constructor(options) {
+        super();
+        this.options = deepExtend({}, this.options, options);
+        this.createVisual();
+    }
+
+    createVisual() {
+        this.visual = this.createElement();
+    }
+
+    exportVisual() {
+        return this.visual;
+    }
+
+    createElement() {
+        const customVisual = this.options.visual;
+        let visual;
+
+        if (customVisual) {
+            visual = customVisual({
+                sender: this.getSender(),
+                options: this.visualOptions(),
+                createVisual: () => this.getElement()
+            });
+        } else {
+            visual = this.getElement();
+        }
+
+        return visual;
+    }
+
+    getSender() {
+        return this;
+    }
+}