@progress/kendo-charts 2.4.0-dev.202405290547 → 2.4.0-dev.202406110723

package/dist/es/chart/legend/legend-layout.js

@@ -1,7 +1,9 @@
 import { drawing as draw } from '@progress/kendo-drawing';
 
 import { ChartElement, Box, rectToBox } from '../../core';
-import { CENTER, HORIZONTAL, START, VERTICAL } from '../../common/constants';
+import { CENTER, HORIZONTAL, START, END, VERTICAL } from '../../common/constants';
+
+var alignItems = function (rtl) { return (rtl ? END : START); };
 
 var LegendLayout = (function (ChartElement) {
     function LegendLayout(options, chartService) {
@@ -25,7 +27,7 @@ var LegendLayout = (function (ChartElement) {
             lineSpacing: vertical ? options.spacing : 0,
             orientation: vertical ? VERTICAL : HORIZONTAL,
             reverse: options.rtl,
-            alignItems: vertical ? START : CENTER
+            alignItems: vertical ? alignItems(options.rtl) : CENTER
         });
 
         for (var idx = 0; idx < children.length; idx++) {

package/dist/es/common/deep-extend.js

@@ -4,8 +4,11 @@ var OBJECT = "object";
 var UNDEFINED = "undefined";
 
 function deepExtendOne(destination, source) {
-
     for (var property in source) {
+        if (property === '__proto__' || property === 'constructor') {
+            continue;
+        }
+
         var propValue = source[property];
         var propType = typeof propValue;
 
@@ -17,7 +20,6 @@ function deepExtendOne(destination, source) {
         }
 
         if (propInit && propInit !== Array) {
-
             if (propValue instanceof Date) {
                 destination[property] = new Date(propValue.getTime());
             } else if (isFunction(propValue.clone)) {
@@ -49,4 +51,4 @@ export default function deepExtend(destination) {
     }
 
     return destination;
-}
+}

package/dist/es/sankey/label.js

@@ -17,10 +17,15 @@ export var Label = (function (SankeyElement) {
     Label.prototype.getElement = function getElement () {
         var options = deepExtend({}, this.options, this.options.node.label);
         var node = options.node;
-        var totalWidth = options.totalWidth;
-        var position = options.position;
+        var diagramMinX = options.diagramMinX;
+        var diagramMaxX = options.diagramMaxX;
         var text = options.text;
         var offset = options.offset;
+        var rtl = options.rtl;
+        var position = options.position;
+        if (rtl && position !== INSIDE) {
+            position = position === BEFORE ? AFTER : BEFORE;
+        }
 
         if (!options.visible || !text) {
             return null;
@@ -28,13 +33,20 @@ export var Label = (function (SankeyElement) {
 
         var nodeBox = new Box(node.x0, node.y0, node.x1, node.y1);
         var visualOptions = this.visualOptions();
+        if (rtl && !visualOptions.align) {
+            visualOptions.align = 'right';
+        }
         var textbox = new TextBox(text, visualOptions);
         textbox.reflow(new Box());
         var textSizeBox = textbox.box;
-
-        var goesOutside = node.x1 + textSizeBox.width() > totalWidth;
         var textY = nodeBox.center().y - (textSizeBox.height() / 2);
-        var side = position === BEFORE || (position === INSIDE && goesOutside) ? BEFORE : AFTER;
+
+        var labelAfterLastNode = node.x1 + textSizeBox.width() > diagramMaxX;
+        var labelBeforeFirstNode = node.x0 - textSizeBox.width() < diagramMinX;
+        var side = position === BEFORE || (position === INSIDE && labelAfterLastNode) ? BEFORE : AFTER;
+        if (rtl) {
+            side = position === AFTER || (position === INSIDE && labelBeforeFirstNode) ? AFTER : BEFORE;
+        }
         var textOrigin = [side === BEFORE ? node.x0 - textSizeBox.width() : node.x1, textY];
 
         var textRect = new Box(textOrigin[0], textOrigin[1], textOrigin[0] + textSizeBox.width(), textOrigin[1] + textSizeBox.height());
@@ -67,11 +79,13 @@ setDefaultOptions(Label, {
     position: INSIDE, // inside, before, after
 });
 
-export var resolveLabelOptions = function (node, options, totalWidth) { return deepExtend({},
+export var resolveLabelOptions = function (node, options, rtl, diagramMinX, diagramMaxX) { return deepExtend({},
     options,
     {
         node: node,
-        totalWidth: totalWidth,
+        diagramMinX: diagramMinX,
+        diagramMaxX: diagramMaxX,
+        rtl: rtl,
         visual: node.label.visual,
         visible: node.label.visible,
         margin: node.label.margin,

package/dist/es/sankey/legend.js

@@ -1,7 +1,7 @@
 import { default as ChartLegend } from "../chart/legend/legend";
 import { SankeyElement } from "./element";
 import { setDefaultOptions } from '../common';
-import { BOTTOM, CENTER, POINTER } from "../common/constants";
+import { BOTTOM, CENTER, LEFT, POINTER, RIGHT } from "../common/constants";
 import { AREA } from "../chart/constants";
 
 var sortData = function (a, b) {
@@ -11,6 +11,15 @@ var sortData = function (a, b) {
     return a.node.y0 - b.node.y0;
 };
 
+var sortDataRTL = function (a, b) {
+    if (a.node.x1 - b.node.x1 !== 0) {
+        return a.node.x1 - b.node.x1;
+    }
+    return b.node.y0 - a.node.y0;
+};
+
+var sort = function (rtl) { return (rtl ? sortDataRTL : sortData); };
+
 export var Legend = (function (SankeyElement) {
     function Legend () {
         SankeyElement.apply(this, arguments);
@@ -23,8 +32,10 @@ export var Legend = (function (SankeyElement) {
     Legend.prototype.getElement = function getElement () {
         var options = this.options;
         var drawingRect = options.drawingRect;
+        var rtl = options.rtl;
         var nodes = options.nodes; if ( nodes === void 0 ) nodes = [];
         var item = options.item;
+        var position = options.position;
 
         if (options.visible === false || !nodes.length) {
             return null;
@@ -36,12 +47,13 @@ export var Legend = (function (SankeyElement) {
                 background: item.areaBackground !== undefined ? item.areaBackground : node.color,
                 opacity: item.areaOpacity !== undefined ? item.areaOpacity : node.opacity
             },
-            node: node,
+            node: node
         }); });
 
-        data.sort(sortData);
+        data.sort(sort(rtl));
 
-        var legend = new ChartLegend(Object.assign({}, options, {data: data}));
+        var reverse = rtl && position !== LEFT && position !== RIGHT;
+        var legend = new ChartLegend(Object.assign({}, options, {data: data, reverse: reverse}), { rtl: rtl });
         legend.reflow(drawingRect);
 
         legend.renderVisual();

package/dist/es/sankey/link.js

@@ -44,7 +44,7 @@ var angelBetweenTwoLines = function (line1, line2) {
     return Math.abs(a1 - a2);
 };
 
-var calculateControlPointsOffsetX = function (link) {
+var calculateControlPointsOffsetX = function (link, rtl) {
     var x0 = link.x0;
     var x1 = link.x1;
     var y0 = link.y0;
@@ -76,7 +76,12 @@ var calculateControlPointsOffsetX = function (link) {
     // Another option is to assume the triangle is isosceles
     // => offset = Math.sqrt(2) * upperNarrowness;
 
-    return y0 - y1 > 0 ? (-1) * offset : offset;
+    var sign = y0 - y1 > 0 ? (-1) : 1;
+    if (rtl) {
+        sign = -sign;
+    }
+
+    return sign * offset;
 };
 
 export var Link = (function (SankeyElement) {
@@ -129,7 +134,9 @@ export var Link = (function (SankeyElement) {
         if (!this.options.navigatable) {
             return;
         }
-        var link = this.options.link;
+        var ref = this.options;
+        var link = ref.link;
+        var rtl = ref.rtl;
         var x0 = link.x0;
         var x1 = link.x1;
         var y0 = link.y0;
@@ -137,7 +144,7 @@ export var Link = (function (SankeyElement) {
         var xC = (x0 + x1) / 2;
         var halfWidth = link.width / 2;
 
-        var offset = calculateControlPointsOffsetX(link);
+        var offset = calculateControlPointsOffsetX(link, rtl);
 
         this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
             .moveTo(x0, y0 + halfWidth)

package/dist/es/sankey/sankey.js

@@ -13,6 +13,28 @@ import { defined } from '../drawing-utils';
 var LINK = 'link';
 var NODE = 'node';
 
+var toRtl = function (sankey) {
+    var nodes = sankey.nodes;
+    var links = sankey.links;
+    var startX = Math.min.apply(Math, nodes.map(function (node) { return node.x0; }));
+    var endX = Math.max.apply(Math, nodes.map(function (node) { return node.x1; }));
+    var width = endX - startX;
+
+    nodes.forEach(function (node) {
+        var x0 = width - (node.x1 - 2 * startX);
+        var x1 = width - (node.x0 - 2 * startX);
+        node.x0 = x0;
+        node.x1 = x1;
+    });
+
+    links.forEach(function (link) {
+        var x0 = width - (link.x1 - 2 * startX);
+        var x1 = width - (link.x0 - 2 * startX);
+        link.x1 = x0;
+        link.x0 = x1;
+    });
+};
+
 export var Sankey = (function (Observable) {
     function Sankey(element, options, theme) {
         Observable.call(this);
@@ -96,11 +118,15 @@ export var Sankey = (function (Observable) {
         element.addEventListener('pointerdown', this._onDownHandler);
 
         this._focusState = {
-            node: this.columns[0][0],
+            node: this.firstFocusableNode(),
             link: null
         };
     };
 
+    Sankey.prototype.firstFocusableNode = function firstFocusableNode () {
+        return this.columns[0][0];
+    };
+
     Sankey.prototype._initResizeObserver = function _initResizeObserver () {
         var this$1 = this;
 
@@ -160,10 +186,13 @@ export var Sankey = (function (Observable) {
     };
 
     Sankey.prototype.trigger = function trigger (name, ev) {
+        var dataItem = ev.element.dataItem;
+        var targetType = ev.element.type;
+
         var event = Object.assign({}, ev,
             {type: name,
-            targetType: ev.element.type,
-            dataItem: ev.element.dataItem});
+            targetType: targetType,
+            dataItem: dataItem});
 
         return Observable.prototype.trigger.call(this, name, event);
     };
@@ -443,6 +472,13 @@ export var Sankey = (function (Observable) {
 
     Sankey.prototype._keydown = function _keydown (ev) {
         var handler = this['on' + ev.key];
+        var rtl = this.options.rtl;
+
+        if (rtl && ev.key === 'ArrowLeft') {
+            handler = this.onArrowRight;
+        } else if (rtl && ev.key === 'ArrowRight') {
+            handler = this.onArrowLeft;
+        }
 
         if (handler) {
             handler.call(this, ev);
@@ -452,7 +488,7 @@ export var Sankey = (function (Observable) {
     Sankey.prototype.onEscape = function onEscape (ev) {
         ev.preventDefault();
 
-        this._focusState = { node: this.columns[0][0], link: null };
+        this._focusState = { node: this.firstFocusableNode(), link: null };
         this._focusNode();
     };
 
@@ -595,6 +631,7 @@ export var Sankey = (function (Observable) {
         var nodeColors = sankeyOptions.nodeColors;
         var disableAutoLayout = sankeyOptions.disableAutoLayout;
         var disableKeyboardNavigation = sankeyOptions.disableKeyboardNavigation;
+        var rtl = sankeyOptions.rtl;
         var autoLayout = !disableAutoLayout;
         var padding = disableKeyboardNavigation ? 0 : highlightOptions.width / 2;
 
@@ -647,12 +684,21 @@ export var Sankey = (function (Observable) {
 
         var box = new Box();
 
+        var diagramMinX = calculatedNodes.reduce(function (acc, node) { return Math.min(acc, node.x0); }, Infinity);
+        var diagramMaxX = calculatedNodes.reduce(function (acc, node) { return Math.max(acc, node.x1); }, 0);
+
         calculatedNodes.forEach(function (nodeEl, i) {
+            if (rtl) {
+                var x0 = nodeEl.x0;
+                var x1 = nodeEl.x1;
+                nodeEl.x0 = diagramMaxX - x1;
+                nodeEl.x1 = diagramMaxX - x0;
+            }
             var nodeOps = resolveNodeOptions(nodeEl, nodes, nodeColors, i);
             var nodeInstance = new Node(nodeOps);
             box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
 
-            var labelInstance = new Label(resolveLabelOptions(nodeEl, labels, sankeyBox.width()));
+            var labelInstance = new Label(resolveLabelOptions(nodeEl, labels, rtl, diagramMinX, diagramMaxX));
             var labelVisual = labelInstance.exportVisual();
             if (labelVisual) {
                 box.wrap(rectToBox(labelVisual.rawBBox()));
@@ -726,14 +772,15 @@ export var Sankey = (function (Observable) {
         var sankeyOptions = options || this.options;
         var sankeyContext = context || this;
 
-        var data = sankeyOptions.data;
         var labelOptions = sankeyOptions.labels;
         var nodesOptions = sankeyOptions.nodes;
         var linkOptions = sankeyOptions.links;
         var nodeColors = sankeyOptions.nodeColors;
         var title = sankeyOptions.title;
         var legend = sankeyOptions.legend;
+        var rtl = sankeyOptions.rtl;
         var disableKeyboardNavigation = sankeyOptions.disableKeyboardNavigation;
+        var data = sankeyOptions.data;
         var ref = sankeyContext.size;
         var width = ref.width;
         var height = ref.height;
@@ -743,6 +790,9 @@ export var Sankey = (function (Observable) {
         var sankey = ref$1.sankey;
         var titleBox = ref$1.titleBox;
         var legendBox = ref$1.legendBox;
+        if (rtl) {
+            toRtl(sankey);
+        }
         var nodes = sankey.nodes;
         var links = sankey.links;
         var columns = sankey.columns;
@@ -821,10 +871,11 @@ export var Sankey = (function (Observable) {
             var target = link.target;
             var sourceNode = visualNodes.get(source.id);
             var targetNode = visualNodes.get(target.id);
-            var linkOps = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
-            linkOps.root = function () { return sankeyContext.element; };
-            linkOps.navigatable = disableKeyboardNavigation !== true;
-            var linkInstance = new Link(linkOps);
+            var resolvedOptions = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
+            resolvedOptions.root = function () { return sankeyContext.element; };
+            resolvedOptions.navigatable = disableKeyboardNavigation !== true;
+            resolvedOptions.rtl = rtl;
+            var linkInstance = new Link(resolvedOptions);
             var linkVisual = linkInstance.exportVisual();
 
             linkVisual.type = LINK;
@@ -833,7 +884,7 @@ export var Sankey = (function (Observable) {
                 target: Object.assign({}, targetNode.dataItem),
                 value: link.value
             };
-            linkVisual.linkOptions = linkOps;
+            linkVisual.linkOptions = resolvedOptions;
             linksVisuals.push(linkVisual);
 
             sourceNode.links.push(linkVisual);
@@ -851,9 +902,11 @@ export var Sankey = (function (Observable) {
             visual.append(linkVisual);
         });
 
-        var diagramWidth = nodes.reduce(function (acc, node) { return Math.max(acc, node.x1); }, 0);
+        var diagramMinX = nodes.reduce(function (acc, node) { return Math.min(acc, node.x0); }, Infinity);
+        var diagramMaxX = nodes.reduce(function (acc, node) { return Math.max(acc, node.x1); }, 0);
+
         nodes.forEach(function (node) {
-            var textOps = resolveLabelOptions(node, labelOptions, diagramWidth);
+            var textOps = resolveLabelOptions(node, labelOptions, rtl, diagramMinX, diagramMaxX);
             var labelInstance = new Label(textOps);
             var labelVisual = labelInstance.exportVisual();
 
@@ -863,7 +916,7 @@ export var Sankey = (function (Observable) {
         });
 
         if (legendBox) {
-            var legendElement = new Legend(Object.assign({}, legend, {drawingRect: legendBox, nodes: nodes}));
+            var legendElement = new Legend(Object.assign({}, legend, {rtl: rtl, drawingRect: legendBox, nodes: nodes}));
             var legendVisual = legendElement.exportVisual();
             visual.append(legendVisual);
         }
@@ -923,7 +976,6 @@ setDefaultOptions(Sankey, {
             lineJoin: "round",
             width: 1
         },
-        align: LEFT,
         offset: { left: 0, top: 0 }
     },
     nodes: {

package/dist/es2015/chart/legend/legend-layout.js

@@ -1,7 +1,9 @@
 import { drawing as draw } from '@progress/kendo-drawing';
 
 import { ChartElement, Box, rectToBox } from '../../core';
-import { CENTER, HORIZONTAL, START, VERTICAL } from '../../common/constants';
+import { CENTER, HORIZONTAL, START, END, VERTICAL } from '../../common/constants';
+
+const alignItems = rtl => (rtl ? END : START);
 
 class LegendLayout extends ChartElement {
 
@@ -20,7 +22,7 @@ class LegendLayout extends ChartElement {
             lineSpacing: vertical ? options.spacing : 0,
             orientation: vertical ? VERTICAL : HORIZONTAL,
             reverse: options.rtl,
-            alignItems: vertical ? START : CENTER
+            alignItems: vertical ? alignItems(options.rtl) : CENTER
         });
 
         for (let idx = 0; idx < children.length; idx++) {

package/dist/es2015/common/deep-extend.js

@@ -4,8 +4,11 @@ const OBJECT = "object";
 const UNDEFINED = "undefined";
 
 function deepExtendOne(destination, source) {
-
     for (let property in source) {
+        if (property === '__proto__' || property === 'constructor') {
+            continue;
+        }
+
         let propValue = source[property];
         let propType = typeof propValue;
 
@@ -17,7 +20,6 @@ function deepExtendOne(destination, source) {
         }
 
         if (propInit && propInit !== Array) {
-
             if (propValue instanceof Date) {
                 destination[property] = new Date(propValue.getTime());
             } else if (isFunction(propValue.clone)) {
@@ -47,4 +49,4 @@ export default function deepExtend(destination) {
     }
 
     return destination;
-}
+}

package/dist/es2015/sankey/label.js

@@ -8,7 +8,11 @@ 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;
+        const { node, diagramMinX, diagramMaxX, text, offset, rtl } = options;
+        let position = options.position;
+        if (rtl && position !== INSIDE) {
+            position = position === BEFORE ? AFTER : BEFORE;
+        }
 
         if (!options.visible || !text) {
             return null;
@@ -16,13 +20,20 @@ export class Label extends SankeyElement {
 
         const nodeBox = new Box(node.x0, node.y0, node.x1, node.y1);
         const visualOptions = this.visualOptions();
+        if (rtl && !visualOptions.align) {
+            visualOptions.align = 'right';
+        }
         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 labelAfterLastNode = node.x1 + textSizeBox.width() > diagramMaxX;
+        const labelBeforeFirstNode = node.x0 - textSizeBox.width() < diagramMinX;
+        let side = position === BEFORE || (position === INSIDE && labelAfterLastNode) ? BEFORE : AFTER;
+        if (rtl) {
+            side = position === AFTER || (position === INSIDE && labelBeforeFirstNode) ? AFTER : BEFORE;
+        }
         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());
@@ -53,11 +64,13 @@ setDefaultOptions(Label, {
     position: INSIDE, // inside, before, after
 });
 
-export const resolveLabelOptions = (node, options, totalWidth) => deepExtend({},
+export const resolveLabelOptions = (node, options, rtl, diagramMinX, diagramMaxX) => deepExtend({},
     options,
     {
         node,
-        totalWidth,
+        diagramMinX,
+        diagramMaxX,
+        rtl,
         visual: node.label.visual,
         visible: node.label.visible,
         margin: node.label.margin,

package/dist/es2015/sankey/legend.js

@@ -1,7 +1,7 @@
 import { default as ChartLegend } from "../chart/legend/legend";
 import { SankeyElement } from "./element";
 import { setDefaultOptions } from '../common';
-import { BOTTOM, CENTER, POINTER } from "../common/constants";
+import { BOTTOM, CENTER, LEFT, POINTER, RIGHT } from "../common/constants";
 import { AREA } from "../chart/constants";
 
 const sortData = (a, b) => {
@@ -11,10 +11,19 @@ const sortData = (a, b) => {
     return a.node.y0 - b.node.y0;
 };
 
+const sortDataRTL = (a, b) => {
+    if (a.node.x1 - b.node.x1 !== 0) {
+        return a.node.x1 - b.node.x1;
+    }
+    return b.node.y0 - a.node.y0;
+};
+
+const sort = (rtl) => (rtl ? sortDataRTL : sortData);
+
 export class Legend extends SankeyElement {
     getElement() {
         const options = this.options;
-        const { drawingRect, nodes = [], item } = options;
+        const { drawingRect, rtl, nodes = [], item, position } = options;
 
         if (options.visible === false || !nodes.length) {
             return null;
@@ -26,12 +35,13 @@ export class Legend extends SankeyElement {
                 background: item.areaBackground !== undefined ? item.areaBackground : node.color,
                 opacity: item.areaOpacity !== undefined ? item.areaOpacity : node.opacity
             },
-            node: node,
+            node: node
         }));
 
-        data.sort(sortData);
+        data.sort(sort(rtl));
 
-        const legend = new ChartLegend(Object.assign({}, options, {data}));
+        const reverse = rtl && position !== LEFT && position !== RIGHT;
+        const legend = new ChartLegend(Object.assign({}, options, {data, reverse}), { rtl });
         legend.reflow(drawingRect);
 
         legend.renderVisual();

package/dist/es2015/sankey/link.js

@@ -31,7 +31,7 @@ const angelBetweenTwoLines = (line1, line2) => {
     return Math.abs(a1 - a2);
 };
 
-const calculateControlPointsOffsetX = (link) => {
+const calculateControlPointsOffsetX = (link, rtl) => {
     const { x0, x1, y0, y1 } = link;
     let xC = (x0 + x1) / 2;
 
@@ -60,7 +60,12 @@ const calculateControlPointsOffsetX = (link) => {
     // Another option is to assume the triangle is isosceles
     // => offset = Math.sqrt(2) * upperNarrowness;
 
-    return y0 - y1 > 0 ? (-1) * offset : offset;
+    let sign = y0 - y1 > 0 ? (-1) : 1;
+    if (rtl) {
+        sign = -sign;
+    }
+
+    return sign * offset;
 };
 
 export class Link extends SankeyElement {
@@ -102,12 +107,12 @@ export class Link extends SankeyElement {
         if (!this.options.navigatable) {
             return;
         }
-        const link = this.options.link;
+        const { link, rtl } = this.options;
         const { x0, x1, y0, y1 } = link;
         const xC = (x0 + x1) / 2;
         const halfWidth = link.width / 2;
 
-        const offset = calculateControlPointsOffsetX(link);
+        const offset = calculateControlPointsOffsetX(link, rtl);
 
         this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
             .moveTo(x0, y0 + halfWidth)