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

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

@@ -11,31 +11,27 @@ import { TOP, BOTTOM, LEFT, RIGHT, DEFAULT_FONT, CIRCLE, WHITE, CENTER, DEFAULT_
 import { autoTextColor, setDefaultOptions, getSpacing, getTemplate, deepExtend, round, rad } from '../../common';
 import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
-var PieSegment = (function (ChartElement) {
-    function PieSegment(value, sector, options) {
-        ChartElement.call(this, options);
+class PieSegment extends ChartElement {
+    constructor(value, sector, options) {
+        super(options);
 
         this.value = value;
         this.sector = sector;
     }
 
-    if ( ChartElement ) PieSegment.__proto__ = ChartElement;
-    PieSegment.prototype = Object.create( ChartElement && ChartElement.prototype );
-    PieSegment.prototype.constructor = PieSegment;
-
-    PieSegment.prototype.render = function render () {
+    render() {
         if (this._rendered || this.visible === false) {
             return;
         }
         this._rendered = true;
 
         this.createLabel();
-    };
+    }
 
-    PieSegment.prototype.createLabel = function createLabel () {
-        var labels = this.options.labels;
-        var chartService = this.owner.chartService;
-        var labelText = this.getLabelText(labels);
+    createLabel() {
+        const labels = this.options.labels;
+        const chartService = this.owner.chartService;
+        let labelText = this.getLabelText(labels);
 
         if (labels.visible && (labelText || labelText === 0)) {
             if (labels.position === CENTER || labels.position === INSIDE_END) {
@@ -46,7 +42,7 @@ var PieSegment = (function (ChartElement) {
                     labels.background = this.options.color;
                 }
             } else {
-                var themeLabels = chartService.theme.seriesDefaults.labels;
+                const themeLabels = chartService.theme.seriesDefaults.labels;
                 labels.color = labels.color || themeLabels.color;
                 labels.background = labels.background || themeLabels.background;
             }
@@ -63,36 +59,34 @@ var PieSegment = (function (ChartElement) {
 
             this.append(this.label);
         }
-    };
+    }
 
-    PieSegment.prototype.getLabelText = function getLabelText (options) {
-        var labelTemplate = getTemplate(options);
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
 
         if (labelTemplate) {
             return labelTemplate(this.pointData());
         }
 
         return this.owner.chartService.format.auto(options.format, this.value);
-    };
+    }
 
-    PieSegment.prototype.reflow = function reflow (targetBox) {
+    reflow(targetBox) {
         this.render();
         this.box = targetBox;
         this.reflowLabel();
-    };
+    }
 
-    PieSegment.prototype.reflowLabel = function reflowLabel () {
-        var ref = this;
-        var labelsOptions = ref.options.labels;
-        var label = ref.label;
-        var sector = this.sector.clone();
-        var labelsDistance = labelsOptions.distance;
-        var angle = sector.middle();
+    reflowLabel() {
+        const { options: { labels: labelsOptions }, label } = this;
+        const sector = this.sector.clone();
+        const labelsDistance = labelsOptions.distance;
+        const angle = sector.middle();
 
         if (label) {
-            var labelHeight = label.box.height();
-            var labelWidth = label.box.width();
-            var lp;
+            const labelHeight = label.box.height();
+            const labelWidth = label.box.width();
+            let lp;
 
             if (labelsOptions.position === CENTER) {
                 sector.radius = Math.abs((sector.radius - labelHeight) / 2) + labelHeight;
@@ -103,7 +97,7 @@ var PieSegment = (function (ChartElement) {
                 lp = sector.point(angle);
                 label.reflow(new Box(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
             } else {
-                var x1;
+                let x1;
                 lp = sector.clone().expand(labelsDistance).point(angle);
                 if (lp.x >= sector.center.x) {
                     x1 = lp.x + labelWidth;
@@ -115,23 +109,19 @@ var PieSegment = (function (ChartElement) {
                 label.reflow(new Box(x1, lp.y - labelHeight, lp.x, lp.y));
             }
         }
-    };
-
-    PieSegment.prototype.createVisual = function createVisual () {
-        var this$1 = this;
+    }
 
-        var ref = this;
-        var sector = ref.sector;
-        var options = ref.options;
+    createVisual() {
+        const { sector, options } = this;
 
-        ChartElement.prototype.createVisual.call(this);
+        super.createVisual();
 
         this.addAccessibilityAttributesToVisual();
 
         if (this.value) {
             if (options.visual) {
-                var startAngle = (sector.startAngle + 180) % 360;
-                var visual = options.visual({
+                const startAngle = (sector.startAngle + 180) % 360;
+                const visual = options.visual({
                     category: this.category,
                     dataItem: this.dataItem,
                     value: this.value,
@@ -144,9 +134,9 @@ var PieSegment = (function (ChartElement) {
                     endAngle: startAngle + sector.angle,
                     options: options,
                     sender: this.getSender(),
-                    createVisual: function () {
-                        var group = new draw.Group();
-                        this$1.createSegmentVisual(group);
+                    createVisual: () => {
+                        const group = new draw.Group();
+                        this.createSegmentVisual(group);
 
                         return group;
                     }
@@ -159,14 +149,12 @@ var PieSegment = (function (ChartElement) {
                 this.createSegmentVisual(this.visual);
             }
         }
-    };
+    }
 
-    PieSegment.prototype.createSegmentVisual = function createSegmentVisual (group) {
-        var ref = this;
-        var sector = ref.sector;
-        var options = ref.options;
-        var borderOptions = options.border || {};
-        var border = borderOptions.width > 0 ? {
+    createSegmentVisual(group) {
+        const { sector, options } = this;
+        const borderOptions = options.border || {};
+        const border = borderOptions.width > 0 ? {
             stroke: {
                 color: borderOptions.color,
                 width: borderOptions.width,
@@ -174,12 +162,12 @@ var PieSegment = (function (ChartElement) {
                 dashType: borderOptions.dashType
             }
         } : {};
-        var color = options.color;
-        var fill = createPatternFill(options.pattern, {
+        const color = options.color;
+        const fill = createPatternFill(options.pattern, {
             color: color,
             opacity: options.opacity
         });
-        var visual = this.createSegment(sector, deepExtend({
+        const visual = this.createSegment(sector, deepExtend({
             fill: fill,
             stroke: {
                 opacity: options.opacity
@@ -200,20 +188,18 @@ var PieSegment = (function (ChartElement) {
                 userSpace: true
             }, options.overlay)));
         }
-    };
+    }
 
-    PieSegment.prototype.createSegment = function createSegment (sector, options) {
+    createSegment(sector, options) {
         if (options.singleSegment) {
             return new draw.Circle(new geom.Circle(new geom.Point(sector.center.x, sector.center.y), sector.radius), options);
         }
 
         return ShapeBuilder.current.createRing(sector, options);
-    };
+    }
 
-    PieSegment.prototype.createAnimation = function createAnimation () {
-        var ref = this;
-        var options = ref.options;
-        var center = ref.sector.center;
+    createAnimation() {
+        const { options, sector: { center } } = this;
 
         deepExtend(options, {
             animation: {
@@ -222,12 +208,12 @@ var PieSegment = (function (ChartElement) {
             }
         });
 
-        ChartElement.prototype.createAnimation.call(this);
-    };
+        super.createAnimation();
+    }
 
-    PieSegment.prototype.createHighlight = function createHighlight (options) {
-        var highlight = this.options.highlight || {};
-        var border = highlight.border || {};
+    createHighlight(options) {
+        const highlight = this.options.highlight || {};
+        const border = highlight.border || {};
 
         return this.createSegment(this.sector, deepExtend({}, options, {
             fill: {
@@ -240,14 +226,14 @@ var PieSegment = (function (ChartElement) {
                 color: border.color
             }
         }));
-    };
+    }
 
-    PieSegment.prototype.highlightVisual = function highlightVisual () {
+    highlightVisual() {
         return this.visual.children[0];
-    };
+    }
 
-    PieSegment.prototype.highlightVisualArgs = function highlightVisualArgs () {
-        var sector = this.sector;
+    highlightVisualArgs() {
+        const sector = this.sector;
 
         return {
             options: this.options,
@@ -258,17 +244,17 @@ var PieSegment = (function (ChartElement) {
             endAngle: sector.angle + sector.startAngle,
             visual: this.visual
         };
-    };
+    }
 
-    PieSegment.prototype.createFocusHighlight = function createFocusHighlight (style) {
-        var borderWidth = this.options.focusHighlight.border.width;
-        var result = this.createSegment(this.sector, deepExtend({}, style, {
+    createFocusHighlight(style) {
+        const borderWidth = this.options.focusHighlight.border.width;
+        const result = this.createSegment(this.sector, deepExtend({}, style, {
             stroke: {
                 width: borderWidth * 2
             }
         }));
 
-        var clipPath = new draw.MultiPath();
+        const clipPath = new draw.MultiPath();
 
         clipPath.paths.push(draw.Path.fromRect(result.bbox()));
         clipPath.paths.push(this.createSegment(this.sector, {}));
@@ -276,24 +262,24 @@ var PieSegment = (function (ChartElement) {
         result.clip(clipPath);
 
         return result;
-    };
+    }
 
-    PieSegment.prototype.tooltipAnchor = function tooltipAnchor () {
-        var sector = this.sector.clone().expand(TOOLTIP_OFFSET);
-        var midAndle = sector.middle();
-        var midPoint = sector.point(midAndle);
+    tooltipAnchor() {
+        const sector = this.sector.clone().expand(TOOLTIP_OFFSET);
+        const midAndle = sector.middle();
+        const midPoint = sector.point(midAndle);
 
         return {
             point: midPoint,
             align: tooltipAlignment(midAndle + 180)
         };
-    };
+    }
 
-    PieSegment.prototype.formatValue = function formatValue (format) {
+    formatValue(format) {
         return this.owner.formatPointValue(this, format);
-    };
+    }
 
-    PieSegment.prototype.pointData = function pointData () {
+    pointData() {
         return {
             dataItem: this.dataItem,
             category: this.category,
@@ -301,25 +287,23 @@ var PieSegment = (function (ChartElement) {
             series: this.series,
             percentage: this.percentage
         };
-    };
+    }
 
-    PieSegment.prototype.getIndex = function getIndex () {
+    getIndex() {
         return this.index;
-    };
-
-    return PieSegment;
-}(ChartElement));
+    }
+}
 
-var RAD_30 = round(rad(30), DEFAULT_PRECISION);
-var RAD_60 = round(rad(60), DEFAULT_PRECISION);
+const RAD_30 = round(rad(30), DEFAULT_PRECISION);
+const RAD_60 = round(rad(60), DEFAULT_PRECISION);
 
 function tooltipAlignment(angle) {
-    var radians = rad(angle);
-    var sine = round(Math.sin(radians), DEFAULT_PRECISION);
-    var cosine = round(Math.cos(radians), DEFAULT_PRECISION);
+    const radians = rad(angle);
+    const sine = round(Math.sin(radians), DEFAULT_PRECISION);
+    const cosine = round(Math.cos(radians), DEFAULT_PRECISION);
 
 
-    var horizontal;
+    let horizontal;
     if (Math.abs(sine) > RAD_60) {
         horizontal = CENTER;
     } else if (cosine < 0) {
@@ -328,7 +312,7 @@ function tooltipAlignment(angle) {
         horizontal = LEFT;
     }
 
-    var vertical;
+    let vertical;
     if (Math.abs(sine) < RAD_30) {
         vertical = CENTER;
     } else if (sine < 0) {