@progress/kendo-charts 2.7.2-dev.202502101310 → 2.7.2-develop.1

package/dist/es/chart/funnel-chart/funnel-chart.js

@@ -9,9 +9,9 @@ import { bindSegments, evalOptions } from '../utils';
 import { CENTER, LEFT } from '../../common/constants';
 import { autoTextColor, deepExtend, isFunction, getTemplate, limitValue, setDefaultOptions } from '../../common';
 
-var FunnelChart = (function (ChartElement) {
-    function FunnelChart(plotArea, options) {
-        ChartElement.call(this, options);
+class FunnelChart extends ChartElement {
+    constructor(plotArea, options) {
+        super(options);
 
         this.plotArea = plotArea;
         this.chartService = plotArea.chartService;
@@ -21,40 +21,30 @@ var FunnelChart = (function (ChartElement) {
         this.render();
     }
 
-    if ( ChartElement ) FunnelChart.__proto__ = ChartElement;
-    FunnelChart.prototype = Object.create( ChartElement && ChartElement.prototype );
-    FunnelChart.prototype.constructor = FunnelChart;
-
-    FunnelChart.prototype.formatPointValue = function formatPointValue (point, format) {
+    formatPointValue(point, format) {
         return this.plotArea.chartService.format.auto(format,point.value);
-    };
-
-    FunnelChart.prototype.render = function render () {
-        var this$1 = this;
+    }
 
-        var seriesIx = 0;
-        var ref = this;
-        var options = ref.options;
-        var seriesColors = ref.plotArea.options.seriesColors; if ( seriesColors === void 0 ) seriesColors = [];
-        var series = options.series[seriesIx];
-        var data = series.data;
+    render() {
+        const seriesIx = 0;
+        const { options, plotArea: { options: { seriesColors = [] } } } = this;
+        const series = options.series[seriesIx];
+        const data = series.data;
 
         if (!data) {
             return;
         }
 
-        var ref$1 = bindSegments(series);
-        var total = ref$1.total;
-        var points = ref$1.points;
+        const { total, points } = bindSegments(series);
 
-        for (var i = 0; i < points.length; i++) {
-            var pointData = points[i];
+        for (let i = 0; i < points.length; i++) {
+            const pointData = points[i];
 
             if (!pointData) {
                 continue;
             }
 
-            var fields = pointData.fields;
+            let fields = pointData.fields;
 
             if (!isFunction(series.color)) {
                 series.color = fields.color || seriesColors[i % seriesColors.length];
@@ -62,25 +52,25 @@ var FunnelChart = (function (ChartElement) {
 
             fields = deepExtend({
                 index: i,
-                owner: this$1,
+                owner: this,
                 series: series,
                 seriesIx: seriesIx,
                 dataItem: data[i],
                 percentage: pointData.value / total
             }, fields, { visible: pointData.visible });
 
-            var value = pointData.valueFields.value;
-            var segment = this$1.createSegment(value, fields);
-            var label = this$1.createLabel(value, fields);
+            const value = pointData.valueFields.value;
+            const segment = this.createSegment(value, fields);
+            const label = this.createLabel(value, fields);
 
             if (segment && label) {
                 segment.append(label);
             }
         }
-    };
+    }
 
-    FunnelChart.prototype.evalSegmentOptions = function evalSegmentOptions (options, value, fields) {
-        var series = fields.series;
+    evalSegmentOptions(options, value, fields) {
+        const series = fields.series;
 
         evalOptions(options, {
             value: value,
@@ -91,10 +81,10 @@ var FunnelChart = (function (ChartElement) {
             "data", "content", "template", "toggle", "visual",
             "ariaTemplate", "ariaContent"
         ] });
-    };
+    }
 
-    FunnelChart.prototype.createSegment = function createSegment (value, fields) {
-        var seriesOptions = deepExtend({}, fields.series);
+    createSegment(value, fields) {
+        const seriesOptions = deepExtend({}, fields.series);
         seriesOptions.pattern = fields.pattern || seriesOptions.pattern;
 
         this.evalSegmentOptions(seriesOptions, value, fields);
@@ -103,7 +93,7 @@ var FunnelChart = (function (ChartElement) {
 
         if (fields.visible !== false) {
 
-            var segment = new FunnelSegment(value, seriesOptions, fields);
+            const segment = new FunnelSegment(value, seriesOptions, fields);
             Object.assign(segment, fields);
 
             this.append(segment);
@@ -111,17 +101,16 @@ var FunnelChart = (function (ChartElement) {
 
             return segment;
         }
-    };
+    }
 
-    FunnelChart.prototype.createLabel = function createLabel (value, fields) {
-        var series = fields.series;
-        var dataItem = fields.dataItem;
-        var labels = deepExtend({}, this.options.labels, series.labels);
-        var text = value;
+    createLabel(value, fields) {
+        const { series, dataItem } = fields;
+        const labels = deepExtend({}, this.options.labels, series.labels);
+        let text = value;
 
         if (labels.visible) {
-            var labelTemplate = getTemplate(labels);
-            var data = {
+            const labelTemplate = getTemplate(labels);
+            const data = {
                 dataItem: dataItem,
                 value: value,
                 percentage: fields.percentage,
@@ -142,7 +131,7 @@ var FunnelChart = (function (ChartElement) {
             }
 
             this.evalSegmentOptions(labels, value, fields);
-            var textBox = new TextBox(text, deepExtend({
+            const textBox = new TextBox(text, deepExtend({
                 vAlign: labels.position
             }, labels), data);
 
@@ -150,17 +139,17 @@ var FunnelChart = (function (ChartElement) {
 
             return textBox;
         }
-    };
+    }
 
-    FunnelChart.prototype.labelPadding = function labelPadding () {
-        var labels = this.labels;
-        var padding = { left: 0, right: 0 };
+    labelPadding() {
+        const labels = this.labels;
+        const padding = { left: 0, right: 0 };
 
-        for (var i = 0; i < labels.length; i++) {
-            var label = labels[i];
-            var align = label.options.align;
+        for (let i = 0; i < labels.length; i++) {
+            const label = labels[i];
+            const align = label.options.align;
             if (align !== CENTER) {
-                var width = labels[i].box.width();
+                const width = labels[i].box.width();
 
                 if (align === LEFT) {
                     padding.left = Math.max(padding.left, width);
@@ -171,33 +160,31 @@ var FunnelChart = (function (ChartElement) {
         }
 
         return padding;
-    };
+    }
 
-    FunnelChart.prototype.dynamicSlopeReflow = function dynamicSlopeReflow (box, width, totalHeight) {
-        var ref = this;
-        var options = ref.options;
-        var segments = ref.points;
-        var count = segments.length;
-        var firstSegment = segments[0];
-        var maxSegment = firstSegment;
+    dynamicSlopeReflow(box, width, totalHeight) {
+        const { options, points: segments } = this;
+        const count = segments.length;
+        const firstSegment = segments[0];
+        let maxSegment = firstSegment;
 
-        for (var idx = 0; idx < segments.length; idx++) {
+        for (let idx = 0; idx < segments.length; idx++) {
             if (segments[idx].percentage > maxSegment.percentage) {
                 maxSegment = segments[idx];
             }
         }
 
-        var lastUpperSide = (firstSegment.percentage / maxSegment.percentage) * width;
-        var previousOffset = (width - lastUpperSide) / 2;
-        var previousHeight = 0;
+        let lastUpperSide = (firstSegment.percentage / maxSegment.percentage) * width;
+        let previousOffset = (width - lastUpperSide) / 2;
+        let previousHeight = 0;
 
-        for (var idx$1 = 0; idx$1 < count; idx$1++) {
-            var percentage = segments[idx$1].percentage;
-            var nextSegment = segments[idx$1 + 1];
-            var nextPercentage = (nextSegment ? nextSegment.percentage : percentage);
-            var points = segments[idx$1].points = [];
-            var height = (options.dynamicHeight) ? (totalHeight * percentage) : (totalHeight / count);
-            var offset = (void 0);
+        for (let idx = 0; idx < count; idx++) {
+            const percentage = segments[idx].percentage;
+            const nextSegment = segments[idx + 1];
+            const nextPercentage = (nextSegment ? nextSegment.percentage : percentage);
+            const points = segments[idx].points = [];
+            const height = (options.dynamicHeight) ? (totalHeight * percentage) : (totalHeight / count);
+            let offset;
 
             if (!percentage) {
                 offset = nextPercentage ? 0 : width / 2;
@@ -216,25 +203,23 @@ var FunnelChart = (function (ChartElement) {
             previousHeight += height + options.segmentSpacing;
             lastUpperSide = limitValue(width - 2 * offset, 0, width);
         }
-    };
-
-    FunnelChart.prototype.constantSlopeReflow = function constantSlopeReflow (box, width, totalHeight) {
-        var ref = this;
-        var options = ref.options;
-        var segments = ref.points;
-        var count = segments.length;
-        var decreasingWidth = options.neckRatio <= 1;
-        var neckRatio = decreasingWidth ? options.neckRatio * width : width;
-        var previousOffset = decreasingWidth ? 0 : (width - width / options.neckRatio) / 2;
-        var topMostWidth = decreasingWidth ? width : width - previousOffset * 2;
-        var finalNarrow = (topMostWidth - neckRatio) / 2;
-        var previousHeight = 0;
-
-        for (var idx = 0; idx < count; idx++) {
-            var points = segments[idx].points = [];
-            var percentage = segments[idx].percentage;
-            var offset = (options.dynamicHeight) ? (finalNarrow * percentage) : (finalNarrow / count);
-            var height = (options.dynamicHeight) ? (totalHeight * percentage) : (totalHeight / count);
+    }
+
+    constantSlopeReflow(box, width, totalHeight) {
+        const { options, points: segments } = this;
+        const count = segments.length;
+        const decreasingWidth = options.neckRatio <= 1;
+        const neckRatio = decreasingWidth ? options.neckRatio * width : width;
+        let previousOffset = decreasingWidth ? 0 : (width - width / options.neckRatio) / 2;
+        const topMostWidth = decreasingWidth ? width : width - previousOffset * 2;
+        const finalNarrow = (topMostWidth - neckRatio) / 2;
+        let previousHeight = 0;
+
+        for (let idx = 0; idx < count; idx++) {
+            const points = segments[idx].points = [];
+            const percentage = segments[idx].percentage;
+            const offset = (options.dynamicHeight) ? (finalNarrow * percentage) : (finalNarrow / count);
+            const height = (options.dynamicHeight) ? (totalHeight * percentage) : (totalHeight / count);
 
             points.push(new geom.Point(box.x1 + previousOffset, box.y1 + previousHeight));
             points.push(new geom.Point(box.x1 + width - previousOffset, box.y1 + previousHeight));
@@ -243,20 +228,20 @@ var FunnelChart = (function (ChartElement) {
             previousOffset += offset;
             previousHeight += height + options.segmentSpacing;
         }
-    };
+    }
 
-    FunnelChart.prototype.reflow = function reflow (chartBox) {
-        var points = this.points;
-        var count = points.length;
+    reflow(chartBox) {
+        const points = this.points;
+        const count = points.length;
 
         if (!count) {
             return;
         }
 
-        var options = this.options;
-        var box = chartBox.clone().unpad(this.labelPadding());
-        var totalHeight = box.height() - options.segmentSpacing * (count - 1);
-        var width = box.width();
+        const options = this.options;
+        const box = chartBox.clone().unpad(this.labelPadding());
+        const totalHeight = box.height() - options.segmentSpacing * (count - 1);
+        const width = box.width();
 
         if (options.dynamicSlope) {
             this.dynamicSlopeReflow(box, width, totalHeight);
@@ -264,13 +249,11 @@ var FunnelChart = (function (ChartElement) {
             this.constantSlopeReflow(box, width, totalHeight);
         }
 
-        for (var idx = 0; idx < count; idx++) {
+        for (let idx = 0; idx < count; idx++) {
             points[idx].reflow(chartBox);
         }
-    };
-
-    return FunnelChart;
-}(ChartElement));
+    }
+}
 
 setDefaultOptions(FunnelChart, {
     neckRatio: 0.3,

package/dist/es/chart/funnel-chart/funnel-segment.js

@@ -9,20 +9,16 @@ import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mix
 import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 import { createPatternFill } from '../../core/pattern';
 
-var FunnelSegment = (function (ChartElement) {
-    function FunnelSegment(value, options, segmentOptions) {
-        ChartElement.call(this, options);
+class FunnelSegment extends ChartElement {
+    constructor(value, options, segmentOptions) {
+        super(options);
 
         this.value = value;
         this.options.index = segmentOptions.index;
     }
 
-    if ( ChartElement ) FunnelSegment.__proto__ = ChartElement;
-    FunnelSegment.prototype = Object.create( ChartElement && ChartElement.prototype );
-    FunnelSegment.prototype.constructor = FunnelSegment;
-
-    FunnelSegment.prototype.getLabelText = function getLabelText (options) {
-        var labelTemplate = getTemplate(options);
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
 
         if (labelTemplate) {
             return labelTemplate(this.pointData());
@@ -31,28 +27,26 @@ var FunnelSegment = (function (ChartElement) {
         }
 
         return this.value;
-    };
+    }
 
-    FunnelSegment.prototype.reflow = function reflow (chartBox) {
-        var points = this.points;
-        var label = this.children[0];
-        var x1 = Math.min(points[0].x, points[3].x);
-        var x2 = Math.max(points[1].x, points[2].x);
+    reflow(chartBox) {
+        const points = this.points;
+        const label = this.children[0];
+        const x1 = Math.min(points[0].x, points[3].x);
+        const x2 = Math.max(points[1].x, points[2].x);
 
         this.box = new Box(x1, points[0].y, x2, points[2].y);
 
         if (label) {
             label.reflow(new Box(chartBox.x1, points[0].y, chartBox.x2, points[2].y));
         }
-    };
-
-    FunnelSegment.prototype.createVisual = function createVisual () {
-        var this$1 = this;
+    }
 
-        var options = this.options;
-        var visual;
+    createVisual() {
+        const options = this.options;
+        let visual;
 
-        ChartElement.prototype.createVisual.call(this);
+        super.createVisual();
 
         this.addAccessibilityAttributesToVisual();
 
@@ -66,7 +60,7 @@ var FunnelSegment = (function (ChartElement) {
                 points: this.points,
                 options: options,
                 sender: this.getSender(),
-                createVisual: function () { return this$1.createPath(); }
+                createVisual: () => this.createPath()
             });
         } else {
             visual = this.createPath();
@@ -75,12 +69,12 @@ var FunnelSegment = (function (ChartElement) {
         if (visual) {
             this.visual.append(visual);
         }
-    };
+    }
 
-    FunnelSegment.prototype.createPath = function createPath () {
-        var options = this.options;
-        var border = options.border;
-        var path = draw.Path.fromPoints(this.points, {
+    createPath() {
+        const options = this.options;
+        const border = options.border;
+        const path = draw.Path.fromPoints(this.points, {
             fill: createPatternFill(options.pattern, {
                 color: options.color,
                 opacity: options.opacity
@@ -93,34 +87,34 @@ var FunnelSegment = (function (ChartElement) {
         }).close();
 
         return path;
-    };
+    }
 
-    FunnelSegment.prototype.createHighlight = function createHighlight (style) {
+    createHighlight(style) {
         return draw.Path.fromPoints(this.points, style);
-    };
+    }
 
-    FunnelSegment.prototype.highlightVisual = function highlightVisual () {
+    highlightVisual() {
         return this.visual.children[0];
-    };
+    }
 
-    FunnelSegment.prototype.highlightVisualArgs = function highlightVisualArgs () {
-        var path = draw.Path.fromPoints(this.points).close();
+    highlightVisualArgs() {
+        const path = draw.Path.fromPoints(this.points).close();
 
         return {
             options: this.options,
             path: path
         };
-    };
+    }
 
-    FunnelSegment.prototype.createFocusHighlight = function createFocusHighlight (style) {
-        var borderWidth = this.options.focusHighlight.border.width;
-        var result = draw.Path.fromPoints(this.points, deepExtend({}, style, {
+    createFocusHighlight(style) {
+        const borderWidth = this.options.focusHighlight.border.width;
+        const result = draw.Path.fromPoints(this.points, deepExtend({}, style, {
             stroke: {
                 width: borderWidth * 2
             }
         })).close();
 
-        var clipPath = new draw.MultiPath();
+        const clipPath = new draw.MultiPath();
 
         clipPath.paths.push(draw.Path.fromRect(this.box.clone().pad(borderWidth).toRect()));
         clipPath.paths.push(draw.Path.fromPoints(this.points));
@@ -128,10 +122,10 @@ var FunnelSegment = (function (ChartElement) {
         result.clip(clipPath);
 
         return result;
-    };
+    }
 
-    FunnelSegment.prototype.tooltipAnchor = function tooltipAnchor () {
-        var box = this.box;
+    tooltipAnchor() {
+        const box = this.box;
         return {
             point: new Point(box.center().x, box.y1),
             align: {
@@ -139,14 +133,14 @@ var FunnelSegment = (function (ChartElement) {
                 vertical: "top"
             }
         };
-    };
+    }
 
-    FunnelSegment.prototype.formatValue = function formatValue (format) {
-        var point = this;
+    formatValue(format) {
+        const point = this;
         return point.owner.formatPointValue(point, format);
-    };
+    }
 
-    FunnelSegment.prototype.pointData = function pointData () {
+    pointData() {
         return {
             dataItem: this.dataItem,
             category: this.category,
@@ -154,14 +148,12 @@ var FunnelSegment = (function (ChartElement) {
             series: this.series,
             percentage: this.percentage
         };
-    };
+    }
 
-    FunnelSegment.prototype.getIndex = function getIndex () {
+    getIndex() {
         return this.index;
-    };
-
-    return FunnelSegment;
-}(ChartElement));
+    }
+}
 
 setDefaultOptions(FunnelSegment, {
     color: WHITE,

package/dist/es/chart/funnel-chart/pyramid-chart.js

@@ -1,20 +1,14 @@
 import FunnelChart from './funnel-chart';
 
-var MAX_NECK_RATIO = 1e6;
+const MAX_NECK_RATIO = 1e6;
 
-var PyramidChart = (function (FunnelChart) {
-    function PyramidChart(plotArea, options) {
+class PyramidChart extends FunnelChart {
+    constructor(plotArea, options) {
         options.dynamicSlope = false;
         options.neckRatio = MAX_NECK_RATIO;
 
-        FunnelChart.call(this, plotArea, options);
+        super(plotArea, options);
     }
-
-    if ( FunnelChart ) PyramidChart.__proto__ = FunnelChart;
-    PyramidChart.prototype = Object.create( FunnelChart && FunnelChart.prototype );
-    PyramidChart.prototype.constructor = PyramidChart;
-
-    return PyramidChart;
-}(FunnelChart));
+}
 
 export default PyramidChart;

package/dist/es/chart/heatmap-chart/color-scale.js

@@ -1,16 +1,14 @@
 import { parseColor } from '@progress/kendo-drawing';
 
 // Linear color scale from the given color to white minus minimum lightness offset.
-var colorScale = function (color, minLightnessOffset) {
-    if ( minLightnessOffset === void 0 ) minLightnessOffset = 0.05;
+const colorScale = (color, minLightnessOffset = 0.05) => {
+    const baseColor = parseColor(color);
+    const offset = 1 - minLightnessOffset;
 
-    var baseColor = parseColor(color);
-    var offset = 1 - minLightnessOffset;
-
-    return function (value) {
-        var hsl = baseColor.toHSL();
-        var range = 100 - hsl.l;
-        var point = offset - value;
+    return (value) => {
+        const hsl = baseColor.toHSL();
+        const range = 100 - hsl.l;
+        const point = offset - value;
         hsl.l += Math.min(point * range, range);
 
         return hsl.toCss();