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

package/dist/es2015/sankey/label.js

@@ -0,0 +1,69 @@
+import { setDefaultOptions, deepExtend } from '../common';
+import { SankeyElement } from './element';
+import { Box, TextBox } from '../core';
+const INSIDE = 'inside';
+const BEFORE = 'before';
+const AFTER = 'after';
+
+export class Label extends SankeyElement {
+    getElement() {
+        const options = deepExtend({}, this.options, this.options.node.label);
+        const { node, totalWidth, position, text, offset } = options;
+
+        if (!options.visible || !text) {
+            return null;
+        }
+
+        const nodeBox = new Box(node.x0, node.y0, node.x1, node.y1);
+        const visualOptions = this.visualOptions();
+        const textbox = new TextBox(text, visualOptions);
+        textbox.reflow(new Box());
+        const textSizeBox = textbox.box;
+
+        const goesOutside = node.x1 + textSizeBox.width() > totalWidth;
+        const textY = nodeBox.center().y - (textSizeBox.height() / 2);
+        const side = position === BEFORE || (position === INSIDE && goesOutside) ? BEFORE : AFTER;
+        const textOrigin = [side === BEFORE ? node.x0 - textSizeBox.width() : node.x1, textY];
+
+        const textRect = new Box(textOrigin[0], textOrigin[1], textOrigin[0] + textSizeBox.width(), textOrigin[1] + textSizeBox.height());
+        textRect.translate(offset.left || 0, offset.top || 0);
+        textbox.reflow(textRect);
+
+        textbox.renderVisual();
+
+        return textbox.visual;
+    }
+
+    visualOptions() {
+        const options = deepExtend({}, this.options, this.options.node.label);
+        return {
+            color: options.color,
+            opacity: options.opacity,
+            font: options.font,
+            border: options.border,
+            margin: options.margin,
+            padding: options.padding,
+            align: options.align,
+        };
+    }
+}
+
+setDefaultOptions(Label, {
+    position: INSIDE, // inside, before, after
+});
+
+export const resolveLabelOptions = (node, options, totalWidth) => deepExtend({},
+    options,
+    {
+        node,
+        totalWidth,
+        visual: node.label.visual,
+        visible: node.label.visible,
+        margin: node.label.margin,
+        padding: node.label.padding,
+        border: node.label.border,
+        align: node.label.align,
+        opacity: node.label.opacity,
+        offset: node.label.offset
+    }
+);

package/dist/es2015/sankey/link.js

@@ -0,0 +1,49 @@
+import { drawing } from '@progress/kendo-drawing';
+import { SankeyElement } from './element';
+import { deepExtend } from '../common';
+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;
+
+        return new drawing.Path(this.visualOptions())
+            .moveTo(source.x1, y0).curveTo([xC, y0], [xC, y1], [target.x0, y1]);
+    }
+
+    visualOptions() {
+        const options = this.options;
+        const link = this.options.link;
+        return {
+            stroke: {
+                width: options.link.width,
+                color: link.color || options.color,
+                opacity: defined(link.opacity) ? link.opacity : options.opacity
+            }
+        };
+    }
+}
+
+export const resolveLinkOptions = (link, options, sourceNode, targetNode) => {
+    const linkOptions = deepExtend({},
+        options,
+        {
+            link,
+            opacity: link.opacity,
+            color: link.color,
+            colorType: link.colorType,
+            visual: link.visual,
+            highlight: link.highlight
+        }
+    );
+
+    if (linkOptions.colorType === 'source') {
+        linkOptions.color = sourceNode.options.fill.color;
+    } else if (linkOptions.colorType === 'target') {
+        linkOptions.color = targetNode.options.fill.color;
+    }
+
+    return linkOptions;
+};

package/dist/es2015/sankey/node.js

@@ -0,0 +1,40 @@
+import { geometry, drawing } from '@progress/kendo-drawing';
+import { SankeyElement } from './element';
+import { deepExtend } from '../common';
+
+export class Node extends SankeyElement {
+    getElement() {
+        const options = this.options;
+        const node = options.node;
+        const rect = new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+
+        return drawing.Path.fromRect(rect, this.visualOptions());
+    }
+
+    visualOptions() {
+        const options = deepExtend({}, this.options, this.options.node);
+
+        return {
+            fill: {
+                color: options.color,
+                opacity: options.opacity
+            },
+            stroke: { width: 0 },
+        };
+    }
+}
+
+export const resolveNodeOptions = (node, options, nodesColors, index) => {
+    const nodeOptions = deepExtend({}, options, options.node);
+    return deepExtend({},
+        { color: nodesColors[index % nodesColors.length] },
+        nodeOptions,
+        { node },
+        {
+            visual: node.visual,
+            opacity: node.opacity,
+            offset: node.offset,
+            color: node.color
+        }
+    );
+};

package/dist/es2015/sankey/sankey.js

@@ -0,0 +1,315 @@
+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';
+
+const LINK = 'link';
+const NODE = 'node';
+
+export class Sankey extends Observable {
+    constructor(element, options, theme) {
+        super();
+
+        this._initElement(element);
+        this._initTheme(theme);
+        this._setOptions(options);
+        this._initSurface();
+
+        if (options && options.data) {
+            this._redraw();
+        }
+
+        this._initResizeObserver();
+    }
+
+    destroy() {
+        this.unbind();
+        this._destroySurface();
+        this._destroyResizeObserver();
+    }
+
+    _initElement(element) {
+        this.element = element;
+        addClass(this.element, [ "k-chart", "k-sankey" ]);
+    }
+
+    _initSurface() {
+        if (!this.surface) {
+            this._destroySurface();
+            this._initSurfaceElement();
+            this.surface = this._createSurface();
+        }
+    }
+
+    _initResizeObserver() {
+        const observer = new ResizeObserver((entries) => {
+            entries.forEach(entry => {
+                const { width, height } = entry.contentRect;
+                if (entry.target !== this.element ||
+                    (this.size.width === width && this.size.height === height)) {
+                    return;
+                }
+                this.size = { width, height };
+                this.surface.setSize(this.size);
+                this._redraw();
+            });
+        });
+        this._resizeObserver = observer;
+        observer.observe(this.element);
+    }
+
+    _createSurface() {
+        return drawing.Surface.create(this.surfaceElement, {
+            mouseenter: this._mouseenter.bind(this),
+            mouseleave: this._mouseleave.bind(this)
+        });
+    }
+
+    _initTheme(theme) {
+        let currentTheme = theme || this.theme || {};
+        this.theme = currentTheme;
+        this.options = deepExtend({}, currentTheme, this.options);
+    }
+
+    setLinksOpacity(opacity) {
+        this.linksVisuals.forEach(link => {
+            this.setOpacity(link, opacity);
+        });
+    }
+
+    setOpacity(link, opacity) {
+        link.options.set('stroke', Object.assign({}, link.options.stroke, {opacity}));
+    }
+
+    trigger(name, ev) {
+        ev.type = name;
+        return super.trigger(name, ev);
+    }
+
+    _mouseenter(ev) {
+        const element = ev.element;
+        const isLink = element.type === LINK;
+        const isNode = element.type === NODE;
+
+        if ((isLink && this.trigger('linkEnter', ev)) ||
+            (isNode && this.trigger('nodeEnter', ev))) {
+            return;
+        }
+
+        const { highlight } = this.options.links;
+        if (isLink) {
+            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);
+            });
+        }
+    }
+
+    _mouseleave(ev) {
+        const element = ev.element;
+        const isLink = element.type === LINK;
+        const isNode = element.type === NODE;
+        const 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);
+        }
+    }
+
+    _destroySurface() {
+        if (this.surface) {
+            this.surface.destroy();
+            this.surface = null;
+            this._destroySurfaceElement();
+        }
+    }
+
+    _destroyResizeObserver() {
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+    }
+
+    _initSurfaceElement() {
+        if (!this.surfaceElement) {
+            this.surfaceElement = document.createElement('div');
+            this.element.appendChild(this.surfaceElement);
+        }
+    }
+
+    _destroySurfaceElement() {
+        if (this.surfaceElement && this.surfaceElement.parentNode) {
+            this.surfaceElement.parentNode.removeChild(this.surfaceElement);
+            this.surfaceElement = null;
+        }
+    }
+
+    setOptions(options, theme) {
+        this._setOptions(options);
+        this._initTheme(theme);
+        this._initSurface();
+        this._redraw();
+    }
+
+    _redraw() {
+        this.surface.clear();
+
+        const { width, height } = this._getSize();
+        this.size = { width, height };
+        this.surface.setSize(this.size);
+
+        this.createVisual();
+
+        this.surface.draw(this.visual);
+    }
+
+    _getSize() {
+        return this.element.getBoundingClientRect();
+    }
+
+    createVisual() {
+        this.visual = this._render();
+    }
+
+    calculateSankey(options) {
+        const { nodes, labels, nodesColors } = this.options;
+        const calculatedNodes = calculateSankey(options).nodes;
+        const box = new Box();
+
+        calculatedNodes.forEach((nodeEl, i) => {
+            const nodeOps = resolveNodeOptions(nodeEl, nodes, nodesColors, i);
+            const nodeInstance = new Node(nodeOps);
+            box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
+
+            const labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: options.width }, labels));
+            const labelVisual = labelInstance.exportVisual();
+            if (labelVisual) {
+                box.wrap(rectToBox(labelVisual.rawBBox()));
+            }
+        });
+
+        const offsetX = box.x1 < 0 ? -box.x1 : 0;
+        const offsetY = box.y1 < 0 ? -box.y1 : 0;
+
+        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;
+
+        return calculateSankey(Object.assign({}, options, {width, height, offsetX, offsetY}));
+    }
+
+    _render() {
+        const { data, labels: labelOptions, nodes: nodesOptions, links: linkOptions, nodesColors } = this.options;
+        const { width, height } = this.size;
+        const calcOptions = Object.assign({}, data, {width, height, nodesOptions});
+        let { nodes, links } = this.calculateSankey(calcOptions);
+
+        const visual = new drawing.Group();
+
+        const visualNodes = new Map();
+
+        nodes.forEach((node, i) => {
+            const nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
+
+            const nodeInstance = new Node(nodeOps);
+            const nodeVisual = nodeInstance.exportVisual();
+            nodeVisual.links = [];
+            nodeVisual.type = NODE;
+            visualNodes.set(node.id, nodeVisual);
+
+            visual.append(nodeVisual);
+        });
+
+        links = links.slice().sort((a, b) => b.value - a.value);
+
+        const linksVisuals = [];
+
+        links.forEach(link => {
+            const { source, target } = link;
+            const sourceNode = visualNodes.get(source.id);
+            const targetNode = visualNodes.get(target.id);
+            const linkOps = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
+            const linkInstance = new Link(linkOps);
+            const 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((node) => {
+            const textOps = resolveLabelOptions(node, labelOptions, width);
+            const labelInstance = new Label(textOps);
+            const labelVisual = labelInstance.exportVisual();
+
+            if (labelVisual) {
+                visual.append(labelVisual);
+            }
+        });
+
+        return visual;
+    }
+
+    exportVisual() {
+        return this._render();
+    }
+
+    _setOptions(options) {
+        this.options = deepExtend({}, this.options, options);
+    }
+}
+
+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/es2015/sankey.js

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

package/dist/npm/main.d.ts

@@ -7,6 +7,7 @@ export * from './gauges';
 export * from './barcode';
 export * from './qrcode';
 export * from './map';
+export * from './sankey';
 export * from './common';
 export * from './field-types'
 export * from './validation';