scichart 2.1.2301 → 2.2.2389

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -9,22 +20,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEventListenerToPieSegment = exports.SciChartPieSurface = exports.EPieType = exports.ESizingMode = void 0;
+exports.addEventListenerToPieSegment = exports.SciChartPieSurface = exports.EPieValueMode = exports.EPieType = exports.ESizingMode = void 0;
 var chartBuilder_1 = require("../../../Builder/chartBuilder");
+var classFactory_1 = require("../../../Builder/classFactory");
 var createMaster3d_1 = require("../../../Charting3D/Visuals/createMaster3d");
 var app_1 = require("../../../constants/app");
+var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
 var Deleter_1 = require("../../../Core/Deleter");
 var ObservableArray_1 = require("../../../Core/ObservableArray");
 var Rect_1 = require("../../../Core/Rect");
+var BaseType_1 = require("../../../types/BaseType");
 var SciChartSurfaceType_1 = require("../../../types/SciChartSurfaceType");
 var SciChartJSDarkTheme_1 = require("../../Themes/SciChartJSDarkTheme");
+var PieLabelProvider_1 = require("../Axis/LabelProvider/PieLabelProvider");
 var createMaster_1 = require("../createMaster");
 var createSingle_1 = require("../createSingle");
 var SciChartPieLegend_1 = require("../Legend/SciChartPieLegend");
 var sciChartInitCommon_1 = require("../sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var constants_1 = require("./constants");
-var PieSegment_1 = require("./PieSegment/PieSegment");
+var constants_2 = require("./PieSegment/constants");
 /** @ignore */
 var DEG_TO_RAD = Math.PI / 180;
 /** @ignore */
@@ -45,6 +60,11 @@ var EPieType;
     EPieType["Pie"] = "Pie";
     EPieType["Donut"] = "Donut";
 })(EPieType = exports.EPieType || (exports.EPieType = {}));
+var EPieValueMode;
+(function (EPieValueMode) {
+    EPieValueMode[EPieValueMode["Percentage"] = 0] = "Percentage";
+    EPieValueMode[EPieValueMode["Raw"] = 1] = "Raw";
+})(EPieValueMode = exports.EPieValueMode || (exports.EPieValueMode = {}));
 /**
  * @summary The {@link SciChartPieSurface} is the root Pie and Donut Chart control in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart Library}
@@ -64,24 +84,36 @@ var SciChartPieSurface = /** @class */ (function () {
     function SciChartPieSurface(canvases, options) {
         var _this = this;
         if (canvases === void 0) { canvases = {}; }
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         this.animate = true;
+        /* The number of frames for the animation. Default 30.  A frame will be trigged every 20ms. */
+        this.animationFrames = 30;
         this.pieTypeProperty = EPieType.Pie;
         this.holeRadiusProperty = 0.5;
         this.holeRadiusSizingModeProperty = ESizingMode.Relative;
         this.seriesSpacingProperty = 0;
+        this.labelRadiusProperty = 1;
         this.titleDivs = [];
         this.sweepAnimationDone = false;
         this.suspendUpdate = false;
         this.themeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
         this.previousThemeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
         this.deletables = [];
+        this.valueModeProperty = EPieValueMode.Percentage;
+        this.labelStyleProperty = {
+            fontSize: 14,
+            fontFamily: "Arial",
+            color: "#1e323d",
+            fontWeight: "bold"
+        };
         this.domChartRoot = canvases.domChartRoot;
         this.domCanvas2D = canvases.domCanvas2D;
         this.domSvgContainer = canvases.domSvgContainer;
         this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
         this.domDivContainer = canvases.domDivContainer;
-        this.viewRect = new Rect_1.Rect(0, 0, this.domCanvas2D.width, this.domCanvas2D.height);
+        var width = this.domCanvas2D.width;
+        var height = this.domCanvas2D.height;
+        this.viewRect = new Rect_1.Rect(0, 0, width, height);
         this.drawChart = this.drawChart.bind(this);
         this.delete = this.delete.bind(this);
         this.invalidateElement = this.invalidateElement.bind(this);
@@ -92,6 +124,8 @@ var SciChartPieSurface = /** @class */ (function () {
             var _a, _b;
             (_a = args.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(_this.detachPieSegment);
             (_b = args.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(_this.attachPieSegment);
+            // Do this only after all changes have been processed
+            _this.invalidateElement();
         });
         this.applySciChartBackground(SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.sciChartBackground);
         this.legend = new SciChartPieLegend_1.SciChartPieLegend();
@@ -105,11 +139,19 @@ var SciChartPieSurface = /** @class */ (function () {
         this.holeRadiusProperty = (_d = options === null || options === void 0 ? void 0 : options.holeRadius) !== null && _d !== void 0 ? _d : this.holeRadius;
         this.animate = (_e = options === null || options === void 0 ? void 0 : options.animate) !== null && _e !== void 0 ? _e : this.animate;
         this.holeRadiusSizingModeProperty = (_f = options === null || options === void 0 ? void 0 : options.holeRadiusSizingMode) !== null && _f !== void 0 ? _f : this.holeRadiusSizingModeProperty;
-        // this.seriesSpacingProperty = options?.seriesSpacing ?? this.seriesSpacingProperty;
-        this.legend.showLegend = (_g = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _g !== void 0 ? _g : this.legend.showLegend;
-        this.legend.animate = (_h = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _h !== void 0 ? _h : this.legend.animate;
-        this.legend.showCheckboxes = (_j = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _j !== void 0 ? _j : this.legend.showCheckboxes;
-        this.legend.showSeriesMarkers = (_k = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _k !== void 0 ? _k : this.legend.showSeriesMarkers;
+        this.seriesSpacingProperty = (_g = options === null || options === void 0 ? void 0 : options.seriesSpacing) !== null && _g !== void 0 ? _g : this.seriesSpacingProperty;
+        this.legend.showLegend = (_h = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _h !== void 0 ? _h : this.legend.showLegend;
+        this.legend.animate = (_j = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _j !== void 0 ? _j : this.legend.animate;
+        this.legend.showCheckboxes = (_k = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _k !== void 0 ? _k : this.legend.showCheckboxes;
+        this.legend.showSeriesMarkers = (_l = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _l !== void 0 ? _l : this.legend.showSeriesMarkers;
+        this.paddingProperty = (_m = options === null || options === void 0 ? void 0 : options.padding) !== null && _m !== void 0 ? _m : this.paddingProperty;
+        if (options === null || options === void 0 ? void 0 : options.labelProvider) {
+            if (!("getSegmentText" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
+                options.labelProvider = (0, classFactory_1.createType)(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, undefined, options.labelProvider.options);
+            }
+        }
+        this.labelProvider = (_o = options === null || options === void 0 ? void 0 : options.labelProvider) !== null && _o !== void 0 ? _o : new PieLabelProvider_1.PieLabelProvider();
+        this.valueModeProperty = (_p = options === null || options === void 0 ? void 0 : options.valueMode) !== null && _p !== void 0 ? _p : this.valueModeProperty;
     }
     /**
      * Creates a {@link SciChartPieSurface} to occupy the div by element ID in your DOM.
@@ -134,6 +176,42 @@ var SciChartPieSurface = /** @class */ (function () {
             setTimeout(function () { return resolve(scps); }, 0);
         });
     };
+    Object.defineProperty(SciChartPieSurface.prototype, "labelProvider", {
+        /**
+         * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
+         */
+        get: function () {
+            return this.labelProviderProperty;
+        },
+        /**
+         * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
+         */
+        set: function (labelProvider) {
+            if (labelProvider && this.labelProviderProperty !== labelProvider) {
+                this.labelProviderProperty = labelProvider;
+                this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_PROVIDER);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "labelStyle", {
+        /**
+         * Gets or sets a {@link TTextStyle} object for styling labels
+         */
+        get: function () {
+            return this.labelStyleProperty;
+        },
+        /**
+         * Gets or sets a {@link TTextStyle} object for styling labels
+         */
+        set: function (textStyle) {
+            this.labelStyleProperty = __assign(__assign({}, this.labelStyle), textStyle);
+            this.notifyPropertyChanged(constants_1.PROPERTY.TEXT_STYLE);
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -141,6 +219,9 @@ var SciChartPieSurface = /** @class */ (function () {
         this.previousThemeProviderProperty = this.themeProviderProperty;
         this.themeProviderProperty = themeProvider;
         this.applySciChartBackground(themeProvider.sciChartBackground);
+        if (this.labelStyle.color === this.previousThemeProvider.tickTextBrush) {
+            this.labelStyle = { color: themeProvider.tickTextBrush };
+        }
         this.invalidateElement();
     };
     Object.defineProperty(SciChartPieSurface.prototype, "themeProvider", {
@@ -167,8 +248,11 @@ var SciChartPieSurface = /** @class */ (function () {
      * Call invalidateElement() to trigger a redraw of the {@link SciChartPieSurface}. SciChart's rendering
      * engine will schedule a redraw a the next time the renderer is free.
      */
-    SciChartPieSurface.prototype.invalidateElement = function () {
+    SciChartPieSurface.prototype.invalidateElement = function (propertyName) {
         if (this.isValidToDraw()) {
+            if (propertyName === constants_2.PROPERTY.VALUE) {
+                this.sweepAnimationDone = false;
+            }
             this.update();
         }
     };
@@ -185,16 +269,18 @@ var SciChartPieSurface = /** @class */ (function () {
     /**
      * @inheritDoc
      */
-    SciChartPieSurface.prototype.delete = function () {
+    SciChartPieSurface.prototype.delete = function (isAnimationProgress) {
         var _this = this;
         if (this.svg) {
             this.domSvgContainer.removeChild(this.svg);
             this.svg = undefined;
         }
-        this.titleDivs.forEach(function (divEl) {
-            _this.domDivContainer.removeChild(divEl);
-        });
-        this.titleDivs = [];
+        if (!isAnimationProgress) {
+            this.titleDivs.forEach(function (divEl) {
+                _this.domDivContainer.removeChild(divEl);
+            });
+            this.titleDivs = [];
+        }
         for (var _i = 0, _a = this.deletables; _i < _a.length; _i++) {
             var deletable = _a[_i];
             (0, Deleter_1.deleteSafe)(deletable);
@@ -211,8 +297,10 @@ var SciChartPieSurface = /** @class */ (function () {
      * @inheritDoc
      */
     SciChartPieSurface.prototype.changeViewportSize = function (width, height) {
+        var domWidth = width;
+        var domHeight = height;
         this.viewRect = new Rect_1.Rect(0, 0, width, height);
-        this.changeDomViewportSize(width, height);
+        this.changeDomViewportSize(domWidth, domHeight);
         this.invalidateElement();
     };
     Object.defineProperty(SciChartPieSurface.prototype, "pieType", {
@@ -279,6 +367,92 @@ var SciChartPieSurface = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartPieSurface.prototype, "padding", {
+        /**
+         * Gets or sets padding
+         */
+        get: function () {
+            return this.paddingProperty;
+        },
+        /**
+         * Gets or sets padding
+         */
+        set: function (value) {
+            if (this.paddingProperty !== value) {
+                this.paddingProperty = value;
+                this.updateLegendMargin();
+                this.notifyPropertyChanged(constants_1.PROPERTY.PADDING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "canvasBorder", {
+        /**
+         * Gets or sets canvas border
+         */
+        get: function () {
+            return this.canvasBorderProperty;
+        },
+        /**
+         * Gets or sets canvas border
+         */
+        set: function (value) {
+            if (this.canvasBorderProperty !== value) {
+                this.canvasBorderProperty = value;
+                this.updateLegendMargin();
+                this.notifyPropertyChanged(constants_1.PROPERTY.PADDING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "seriesSpacing", {
+        get: function () {
+            return this.seriesSpacingProperty;
+        },
+        set: function (value) {
+            if (this.seriesSpacingProperty !== value) {
+                this.seriesSpacingProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_SPACING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "valueMode", {
+        /** Whether to show labels as percentages, or raw values.  Default to percentages */
+        get: function () {
+            return this.valueModeProperty;
+        },
+        /** Whether to show labels as percentages, or raw values.  Default to percentages */
+        set: function (value) {
+            this.valueModeProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.VALUE_MODE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "labelRadiusAdjustment", {
+        /**
+         * Use this to adjust the position of the labels.  1 is the default.  Larger values will shift the labels outwards.
+         * For Pie charts, 1.7 will place the labels outside the pie
+         * If you want more detailed control you can override calcTitlePosition.
+         */
+        get: function () {
+            return this.labelRadiusProperty;
+        },
+        /**
+         * Use this to adjust the position of the labels.  1 is the default.  Larger values will shift the labels outwards.
+         * If you want more detailed control you can override calcTitlePosition.
+         */
+        set: function (value) {
+            this.labelRadiusProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.VALUE_MODE);
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Convert the surface to a {@link TSurfaceDefinition}
      * @param excludedata If false, segments will be included in the json
@@ -304,6 +478,14 @@ var SciChartPieSurface = /** @class */ (function () {
             showLegend: this.legend.showLegend,
             showLegendCheckBoxes: this.legend.showCheckboxes,
             showLegendSeriesMarkers: this.legend.showSeriesMarkers,
+            padding: this.padding,
+            canvasBorder: this.canvasBorder,
+            seriesSpacing: this.seriesSpacing,
+            // @ts-ignore
+            labelProvider: this.labelProvider.toJSON(),
+            valueMode: this.valueMode,
+            labelRadiusAdjustment: this.labelRadiusAdjustment,
+            animationFrames: this.animationFrames,
             theme: theme
         };
         var options = { surface: surface, onCreated: this.onCreatedName };
@@ -312,14 +494,14 @@ var SciChartPieSurface = /** @class */ (function () {
         }
         return { type: SciChartSurfaceType_1.ESciChartSurfaceType.Pie2D, options: options };
     };
-    // TODO do something with this
-    // public get seriesSpacing() {
-    //     return this.seriesSpacingProperty;
-    // }
-    // public set seriesSpacing(value) {
-    //     this.seriesSpacingProperty = value;
-    //     this.notifyPropertyChanged(PROPERTY.SERIES_SPACING);
-    // }
+    /** The method used to calculate the label position for each segment */
+    SciChartPieSurface.prototype.calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta, divWidth, divHeight) {
+        var centerRadius = innerRadius < outerRadius / 2 ? (outerRadius * 2) / 3 + innerRadius / 6 : (outerRadius + innerRadius) / 2;
+        var centerAngle = (a1 + a2) / 2;
+        var left = x + Math.cos(DEG_TO_RAD * centerAngle) * (centerRadius * this.labelRadiusProperty + delta) - divWidth / 2;
+        var top = y + Math.sin(DEG_TO_RAD * centerAngle) * (centerRadius * this.labelRadiusProperty + delta) - divHeight / 2;
+        return { left: left, top: top };
+    };
     /**
      * Changes the size of the DOM element where the {@link SciChartSurfaceBase} resides.
      * @param width
@@ -348,6 +530,9 @@ var SciChartPieSurface = /** @class */ (function () {
     // PRIVATE
     SciChartPieSurface.prototype.notifyPropertyChanged = function (propertyName) {
         this.invalidateElement();
+        if (propertyName === constants_1.PROPERTY.LABEL_PROVIDER && this.labelProviderProperty) {
+            this.labelProviderProperty.attachedToSurface(this);
+        }
     };
     SciChartPieSurface.prototype.isValidToDraw = function () {
         // TODO
@@ -355,20 +540,70 @@ var SciChartPieSurface = /** @class */ (function () {
     };
     SciChartPieSurface.prototype.detachPieSegment = function (pieSegment) {
         pieSegment.onDetach();
-        this.invalidateElement();
     };
     SciChartPieSurface.prototype.attachPieSegment = function (pieSegment) {
         pieSegment.onAttach(this);
-        this.invalidateElement();
+    };
+    SciChartPieSurface.prototype.updateLegendMargin = function () {
+        var _a, _b, _c;
+        var paddingTop = ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.top) || 0;
+        var canvasBorderTop = ((_b = this.canvasBorder) === null || _b === void 0 ? void 0 : _b.border) || ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.borderTop) || 0;
+        // 10 - because of default spacing
+        // only top included because of margin implementation for the legend
+        this.legend.margin = paddingTop + canvasBorderTop + 10;
+    };
+    SciChartPieSurface.prototype.calculateViewRectWidth = function (width) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.left) {
+            width -= this.padding.left;
+        }
+        if ((_b = this.padding) === null || _b === void 0 ? void 0 : _b.right) {
+            width -= this.padding.right;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.border) {
+            width -= this.canvasBorder.border * 2;
+        }
+        else {
+            if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderLeft) {
+                width -= this.canvasBorder.borderLeft;
+            }
+            if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderRight) {
+                width -= this.canvasBorder.borderRight;
+            }
+        }
+        return width;
+    };
+    SciChartPieSurface.prototype.calculateViewRectHeight = function (height) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.top) {
+            height -= this.padding.top;
+        }
+        if ((_b = this.padding) === null || _b === void 0 ? void 0 : _b.bottom) {
+            height -= this.padding.bottom;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.border) {
+            height -= this.canvasBorder.border * 2;
+        }
+        else {
+            if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderTop) {
+                height -= this.canvasBorder.borderTop;
+            }
+            if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderBottom) {
+                height -= this.canvasBorder.borderBottom;
+            }
+        }
+        return height;
     };
     SciChartPieSurface.prototype.draw = function () {
         var _this = this;
+        if (this.pieSegments.size() === 0)
+            return;
         if (this.sweepAnimationDone || !this.animate) {
             this.delete();
             this.drawChart();
         }
         else {
-            var frames_1 = 30;
+            var frames_1 = this.animationFrames;
             this.suspendUpdate = true;
             var setSuspendUpdateFalse_1 = function () { return (_this.suspendUpdate = false); };
             var setSweepAnimationDone_1 = function () { return (_this.sweepAnimationDone = true); };
@@ -378,7 +613,7 @@ var SciChartPieSurface = /** @class */ (function () {
             (function myLoop(k) {
                 setTimeout(function () {
                     var animationProgress = k / frames_1;
-                    callDelete_1();
+                    callDelete_1(true);
                     callDrawChart_1(animationProgress);
                     if (k === frames_1) {
                         setSuspendUpdateFalse_1();
@@ -400,7 +635,6 @@ var SciChartPieSurface = /** @class */ (function () {
                 }
             });
         }
-        this.drawSegmentTitles();
     };
     /**
      * @description Draws pie chart itself
@@ -413,20 +647,33 @@ var SciChartPieSurface = /** @class */ (function () {
         var strokeColor = this.themeProviderProperty.sciChartBackground;
         var segments = this.pieSegments.asArray();
         var totalValue = this.pieSegmentsTotalValue();
-        var outerRadius = (Math.min(this.viewRect.width, this.viewRect.height) * 0.8) / 2;
+        var totalOldValue = this.pieSegmentsTotalOldValue();
+        var outerRadius = (Math.min(this.calculateViewRectWidth(this.viewRect.width), this.calculateViewRectHeight(this.viewRect.height)) *
+            0.8) /
+            2;
         var innerRadius = 0;
         if (this.pieType === EPieType.Donut) {
             innerRadius =
                 this.holeRadiusSizingMode === ESizingMode.Absolute ? this.holeRadius : outerRadius * this.holeRadius;
         }
-        var xCoord = this.viewRect.width / 2;
-        var yCoord = this.viewRect.height / 2;
+        var xCoord = this.calculateViewRectWidth(this.viewRect.width) / 2;
+        var yCoord = this.calculateViewRectHeight(this.viewRect.height) / 2;
         // CREATING SVG STRING
         var gradientsBlock = "<defs>";
         var pathsBlock = "";
         var currentValue = 0;
-        segments.forEach(function (el) {
-            var newValue = el.value * animationProgress;
+        var currentOldValue = 0;
+        segments.forEach(function (el, index) {
+            var _a;
+            var oldValue = (_a = el.oldValue) !== null && _a !== void 0 ? _a : 0;
+            var newFrom = (360 * currentValue) / totalValue - START_ANGLE;
+            var newTo = (360 * (currentValue + el.value)) / totalValue - START_ANGLE;
+            var oldFrom = (360 * currentOldValue) / totalOldValue - START_ANGLE;
+            var oldTo = (360 * (currentOldValue + oldValue)) / totalOldValue - START_ANGLE;
+            currentValue += el.value;
+            currentOldValue += oldValue;
+            var angleFrom = oldFrom + (newFrom - oldFrom) * EasingFunctions_1.easing.inOutCubic(animationProgress);
+            var angleTo = oldTo + (newTo - oldTo) * EasingFunctions_1.easing.inOutCubic(animationProgress);
             var hasGradient = !!el.colorLinearGradient;
             var gradientId = "grad".concat(el.id);
             if (hasGradient) {
@@ -442,62 +689,116 @@ var SciChartPieSurface = /** @class */ (function () {
                 gradientBlock_1 += "</linearGradient>";
                 gradientsBlock += gradientBlock_1;
             }
-            var angleFrom = (360 * currentValue) / totalValue - START_ANGLE;
-            var angleTo = (360 * (currentValue + newValue)) / totalValue - START_ANGLE;
             var dAttribute = _this.pieType === EPieType.Donut
-                ? getDonutSectorPath(xCoord, yCoord, outerRadius, innerRadius, angleFrom, angleTo, el.delta)
-                : getSectorPath(xCoord, yCoord, outerRadius, angleFrom, angleTo, el.delta);
+                ? getDonutSectorPath(xCoord, yCoord, outerRadius * el.radiusAdjustment, innerRadius, angleFrom, angleTo, el.shift + _this.seriesSpacing)
+                : getSectorPath(xCoord, yCoord, outerRadius * el.radiusAdjustment, angleFrom, angleTo, el.shift + _this.seriesSpacing);
             var pathBlock = hasGradient
                 ? "<g fill=\"url(#".concat(gradientId, ")\"><path id=\"").concat(el.id, "\" stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\" d=\"").concat(dAttribute, "\" /></g>")
                 : "<path id=\"".concat(el.id, "\" stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\" d=\"").concat(dAttribute, "\" fill=\"").concat(el.color, "\" />");
             pathsBlock += pathBlock;
-            currentValue += newValue;
+            if (animationProgress === 1 || el.oldValue) {
+                _this.drawSegmentLabel(el, index, totalValue, angleFrom, angleTo, xCoord, yCoord, outerRadius * el.radiusAdjustment, innerRadius);
+            }
         });
         gradientsBlock += "</defs>";
-        var svgString = "<svg width=\"".concat(this.viewRect.width, "\" height=\"").concat(this.viewRect.height, "\">").concat(gradientsBlock).concat(pathsBlock, "</svg>");
+        this.adjustDomContainer();
+        var svgString = "<svg width=\"".concat(this.calculateViewRectWidth(this.viewRect.width), "\" height=\"").concat(this.calculateViewRectHeight(this.viewRect.height), "\">").concat(gradientsBlock).concat(pathsBlock, "</svg>");
         // CREATING AND ATTACHING SVG TO DOM
         var svgNode = document.createRange().createContextualFragment(svgString);
         this.domSvgContainer.appendChild(svgNode);
         this.svg = this.domSvgContainer.lastChild;
     };
-    SciChartPieSurface.prototype.drawSegmentTitles = function () {
-        var _this = this;
-        var totalValue = this.pieSegmentsTotalValue();
-        var currentValue = 0;
-        var xCoord = this.viewRect.width / 2;
-        var yCoord = this.viewRect.height / 2;
-        var outerRadius = (Math.min(this.viewRect.width, this.viewRect.height) * 0.8) / 2;
-        var innerRadius = 0;
-        if (this.pieType === EPieType.Donut) {
-            innerRadius =
-                this.holeRadiusSizingMode === ESizingMode.Absolute ? this.holeRadius : outerRadius * this.holeRadius;
+    SciChartPieSurface.prototype.adjustDomContainer = function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.padding && this.padding.left) {
+            this.domSvgContainer.style.paddingLeft = this.padding.left + "px";
+        }
+        if (this.padding && this.padding.right) {
+            this.domSvgContainer.style.paddingRight = this.padding.right + "px";
+        }
+        if (this.padding && this.padding.top) {
+            this.domSvgContainer.style.paddingTop = this.padding.top + "px";
+        }
+        if (this.padding && this.padding.bottom) {
+            this.domSvgContainer.style.paddingBottom = this.padding.bottom + "px";
+        }
+        if (this.canvasBorder) {
+            this.domSvgContainer.style.borderStyle = "solid";
+        }
+        if ((_a = this.canvasBorder) === null || _a === void 0 ? void 0 : _a.border) {
+            this.domSvgContainer.style.borderWidth = this.canvasBorder.border + "px";
+        }
+        if ((_b = this.canvasBorder) === null || _b === void 0 ? void 0 : _b.color) {
+            this.domSvgContainer.style.borderColor = this.canvasBorder.color;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.borderBottom) {
+            this.domSvgContainer.style.borderBottomWidth = this.canvasBorder.borderBottom + "px";
+        }
+        if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderTop) {
+            this.domSvgContainer.style.borderTopWidth = this.canvasBorder.borderTop + "px";
         }
-        this.pieSegments.asArray().forEach(function (el, index) {
-            var div = document.createElement("div");
+        if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderLeft) {
+            this.domSvgContainer.style.borderLeftWidth = this.canvasBorder.borderLeft + "px";
+        }
+        if ((_f = this.canvasBorder) === null || _f === void 0 ? void 0 : _f.borderRight) {
+            this.domSvgContainer.style.borderRightWidth = this.canvasBorder.borderRight + "px";
+        }
+    };
+    SciChartPieSurface.prototype.drawSegmentLabel = function (el, index, totalValue, angleFrom, angleTo, xCoord, yCoord, outerRadius, innerRadius) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var labelDivId = "segment" + index;
+        var div = this.titleDivs.find(function (d) { return d.id === labelDivId; });
+        if (!div) {
+            div = document.createElement("div");
+            var labelStyle = el.labelStyle;
+            div.className = "scichart-pie-text-container";
+            div.id = labelDivId;
             div.style.position = "absolute";
             div.style.pointerEvents = "none";
             div.style.padding = "5px";
             div.style.borderRadius = "3px";
-            div.style.color = "#1e323d";
-            div.style.fontWeight = "bold";
+            this.titleDivs.push(div);
+            this.domDivContainer.appendChild(div);
             div.style.display = "block";
-            div.style.fontFamily = "Arial";
-            div.innerHTML = "<div>".concat(el.getPercentage(totalValue), "</div>");
-            _this.domDivContainer.appendChild(div);
-            var divWidth = div.offsetWidth;
-            var divHeight = div.offsetHeight;
-            var angleFrom = (360 * currentValue) / totalValue - START_ANGLE;
-            var angleTo = (360 * (currentValue + el.value)) / totalValue - START_ANGLE;
-            var position = calcTitlePosition(xCoord, yCoord, outerRadius, innerRadius, angleFrom, angleTo, el.delta, divWidth, divHeight);
-            div.style.left = "".concat(position.left, "px");
-            div.style.top = "".concat(position.top, "px");
-            _this.titleDivs.push(div);
-            currentValue += el.value;
-        });
+        }
+        div.style.color = el.labelStyle.color;
+        div.style.fontWeight = el.labelStyle.fontWeight;
+        div.style.fontFamily = el.labelStyle.fontFamily;
+        div.style.fontSize = el.labelStyle.fontSize.toString() + "px";
+        div.innerHTML = el.getLabelText(totalValue);
+        var divWidth = div.offsetWidth;
+        var divHeight = div.offsetHeight;
+        var leftShift = 0;
+        var topShift = 0;
+        if ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.left) {
+            leftShift += (_b = this.padding) === null || _b === void 0 ? void 0 : _b.left;
+        }
+        if ((_c = this.padding) === null || _c === void 0 ? void 0 : _c.top) {
+            topShift += (_d = this.padding) === null || _d === void 0 ? void 0 : _d.top;
+        }
+        if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.border) {
+            leftShift += (_f = this.canvasBorder) === null || _f === void 0 ? void 0 : _f.border;
+            topShift += (_g = this.canvasBorder) === null || _g === void 0 ? void 0 : _g.border;
+        }
+        else {
+            if ((_h = this.canvasBorder) === null || _h === void 0 ? void 0 : _h.borderLeft) {
+                leftShift += (_j = this.canvasBorder) === null || _j === void 0 ? void 0 : _j.borderLeft;
+            }
+            if ((_k = this.canvasBorder) === null || _k === void 0 ? void 0 : _k.borderTop) {
+                leftShift += (_l = this.canvasBorder) === null || _l === void 0 ? void 0 : _l.borderTop;
+            }
+        }
+        var position = this.calcTitlePosition(xCoord + leftShift, yCoord + topShift, outerRadius, innerRadius, angleFrom, angleTo, el.shift + this.seriesSpacing, divWidth, divHeight);
+        div.style.left = "".concat(position.left + el.labelOffset.x, "px");
+        div.style.top = "".concat(position.top + el.labelOffset.y, "px");
     };
     SciChartPieSurface.prototype.pieSegmentsTotalValue = function () {
         return this.pieSegments.asArray().reduce(function (prev, cur) { return prev + cur.value; }, 0);
     };
+    SciChartPieSurface.prototype.pieSegmentsTotalOldValue = function () {
+        var total = this.pieSegments.asArray().reduce(function (prev, cur) { var _a; return prev + ((_a = cur.oldValue) !== null && _a !== void 0 ? _a : 0); }, 0);
+        return total > 0 ? total : 1;
+    };
     SciChartPieSurface.prototype.applySciChartBackground = function (htmlColor) {
         this.domCanvas2D.style.background = htmlColor;
     };
@@ -552,16 +853,6 @@ var getDonutSectorPath = function (x, y, outerR, innerR, a1, a2, delta) {
     return "M".concat(outerX1, " ").concat(outerY1, " A").concat(outerR, " ").concat(outerR, " 0 ").concat(bigArc, " 0 ").concat(outerX2, " ").concat(outerY2, " L").concat(innerX2, " ").concat(innerY2, " A").concat(innerR, " ").concat(innerR, " 0 ").concat(bigArc, " 1 ").concat(innerX1, " ").concat(innerY1, "Z");
 };
 /** @ignore */
-var calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta, divWidth, divHeight) {
-    var centerRadius = innerRadius < outerRadius / 2
-        ? (outerRadius * 2) / 3 + innerRadius / 6 + delta
-        : (outerRadius + innerRadius) / 2 + delta;
-    var centerAngle = (a1 + a2) / 2;
-    var left = x + Math.cos(DEG_TO_RAD * centerAngle) * centerRadius - divWidth / 2;
-    var top = y + Math.sin(DEG_TO_RAD * centerAngle) * centerRadius - divHeight / 2;
-    return { left: left, top: top };
-};
-/** @ignore */
 var isListenerBlocked = false;
 /** @ignore */
 var addEventListenerToPieSegment = function (ps, el, animate) {
@@ -574,12 +865,13 @@ var addEventListenerToPieSegment = function (ps, el, animate) {
         if (!isListenerBlocked) {
             var ROUNDS_1 = 10;
             var directionDown = ps.isSelected;
-            var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
-            var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
+            var start_1 = directionDown ? ps.delta : 0;
+            var d_1 = directionDown ? -ps.delta / ROUNDS_1 : ps.delta / ROUNDS_1;
             isListenerBlocked = true;
+            ps.isSelected = !ps.isSelected;
             (function myLoop(k) {
                 setTimeout(function () {
-                    ps.delta = start_1 + d_1 * k;
+                    ps.shift = start_1 + d_1 * k;
                     if (k === ROUNDS_1) {
                         isListenerBlocked = false;
                     }