scichart 2.1.2261 → 2.1.2290

package/Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries.js

@@ -0,0 +1,179 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastImpulseRenderableSeries = void 0;
+var NumberRange_1 = require("../../../Core/NumberRange");
+var SeriesType_1 = require("../../../types/SeriesType");
+var EllipsePointMarker_1 = require("../PointMarkers/EllipsePointMarker");
+var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
+var DpiHelper_1 = require("../TextureManager/DpiHelper");
+var constants_1 = require("./constants");
+var FastColumnRenderableSeries_1 = require("./FastColumnRenderableSeries");
+var ImpulseSeriesHitTestProvider_1 = require("./HitTest/ImpulseSeriesHitTestProvider");
+/**
+ * Defines a impulse-series or JavaScript impulse chart type in the SciChart's High Performance Real-time
+ * {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}
+ * @remarks
+ * To add a impulse series to a {@link SciChartSurface} you need to declare both the {@link FastImpulseRenderableSeries | RenderableSeries}
+ * and a {@link XyDataSeries | DataSeries}. Simplified code sample below:
+ *
+ * ```ts
+ * const sciChartSurface: SciChartSurface;
+ * const wasmContext: TSciChart;
+ * // Create and fill the dataseries
+ * const dataSeries = new XyDataSeries(wasmContext);
+ * dataSeries.append(1,2);
+ * dataSeries.append(1,2);
+ * // Create the renderableSeries
+ * const impulseSeries = new FastImpulseRenderableSeries(wasmContext);
+ * impulseSeries.dataSeries = dataSeries;
+ * // append to the SciChartSurface
+ * sciChartSurface.renderableSeries.add(impulseSeries);
+ * ```
+ */
+var FastImpulseRenderableSeries = /** @class */ (function (_super) {
+    __extends(FastImpulseRenderableSeries, _super);
+    /**
+     * Creates an instance of the {@link FastImpulseRenderableSeries}
+     * @param webAssemblyContext The {@link TSciChart | SciChart WebAssembly Context} containing
+     * native methods and access to our WebGL2 WebAssembly Drawing Engine
+     * @param options optional parameters of type {@link IImpulseRenderableSeries} applied when constructing the series type
+     */
+    function FastImpulseRenderableSeries(webAssemblyContext, options) {
+        var _a, _b, _c, _d;
+        var _this = _super.call(this, webAssemblyContext, options) || this;
+        /** @inheritDoc */
+        _this.type = SeriesType_1.ESeriesType.ImpulseSeries;
+        _this.impulseFillProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.impulseFillBrush;
+        _this.impulseSizeProperty = 10;
+        _this.impulseDataPointWidthProperty = 0;
+        _this.impulseStrokeThicknessProperty = 1;
+        _this.strokeThickness = (_a = options === null || options === void 0 ? void 0 : options.strokeThickness) !== null && _a !== void 0 ? _a : _this.impulseStrokeThicknessProperty;
+        _this.fill = (_b = options === null || options === void 0 ? void 0 : options.fill) !== null && _b !== void 0 ? _b : _this.impulseFillProperty;
+        _this.size = (_c = options === null || options === void 0 ? void 0 : options.size) !== null && _c !== void 0 ? _c : _this.impulseSizeProperty;
+        _this.stroke = (_d = options === null || options === void 0 ? void 0 : options.fill) !== null && _d !== void 0 ? _d : _this.impulseFillProperty;
+        _this.dataPointWidth = _this.impulseDataPointWidthProperty;
+        if (!(options === null || options === void 0 ? void 0 : options.pointMarker)) {
+            _this.pointMarker = new EllipsePointMarker_1.EllipsePointMarker(webAssemblyContext, {
+                width: _this.impulseSizeProperty,
+                height: _this.impulseSizeProperty,
+                fill: _this.fill,
+                stroke: _this.fill
+            });
+        }
+        return _this;
+    }
+    Object.defineProperty(FastImpulseRenderableSeries.prototype, "fill", {
+        /**
+         * Gets or sets the color of each impulse
+         */
+        get: function () {
+            return this.impulseFillProperty;
+        },
+        set: function (htmlColorCode) {
+            this.impulseFillProperty = htmlColorCode;
+            this.stroke = htmlColorCode;
+            if (this.pointMarker) {
+                this.pointMarker.fill = htmlColorCode;
+                this.pointMarker.stroke = htmlColorCode;
+            }
+            if (this.impulseFillProperty !== htmlColorCode) {
+                this.notifyPropertyChanged(constants_1.PROPERTY.STROKE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(FastImpulseRenderableSeries.prototype, "size", {
+        /**
+         * Gets or sets the size of each impulse point
+         */
+        get: function () {
+            return this.impulseSizeProperty;
+        },
+        set: function (sizeParam) {
+            this.impulseSizeProperty = sizeParam;
+            if (this.pointMarker) {
+                this.pointMarker.width = sizeParam;
+                this.pointMarker.height = sizeParam;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @inheritDoc
+     */
+    FastImpulseRenderableSeries.prototype.getXRange = function () {
+        var range = _super.prototype.getXRange.call(this);
+        var delta = getDelta({
+            pointSize: this.size,
+            areaSize: this.parentSurface.seriesViewRect.width,
+            range: range
+        });
+        return new NumberRange_1.NumberRange(range.min - delta, range.max + delta);
+    };
+    /**
+     * @inheritDoc
+     */
+    FastImpulseRenderableSeries.prototype.getYRange = function (xVisibleRange, isXCategoryAxis) {
+        if (isXCategoryAxis === void 0) { isXCategoryAxis = false; }
+        var yRange = _super.prototype.getYRange.call(this, xVisibleRange, isXCategoryAxis);
+        if (!yRange) {
+            return undefined;
+        }
+        var delta = getDelta({
+            pointSize: this.size,
+            areaSize: this.parentSurface.seriesViewRect.height,
+            range: yRange
+        });
+        return new NumberRange_1.NumberRange(yRange.min - delta, yRange.max + delta);
+    };
+    /** @inheritDoc */
+    FastImpulseRenderableSeries.prototype.toJSON = function (excludeData) {
+        if (excludeData === void 0) { excludeData = false; }
+        var json = _super.prototype.toJSON.call(this, excludeData);
+        var options = {
+            fill: this.fill,
+            size: this.size,
+            zeroLineY: this.zeroLineY
+        };
+        Object.assign(json.options, options);
+        return json;
+    };
+    /** @inheritDoc */
+    FastImpulseRenderableSeries.prototype.applyTheme = function (themeProvider) {
+        _super.prototype.applyTheme.call(this, themeProvider);
+        var previousThemeProvider = this.parentSurface.previousThemeProvider;
+        if (this.fill === previousThemeProvider.impulseFillBrush) {
+            this.fill = themeProvider.impulseFillBrush;
+        }
+    };
+    /** @inheritDoc */
+    FastImpulseRenderableSeries.prototype.newHitTestProvider = function () {
+        return new ImpulseSeriesHitTestProvider_1.ImpulseSeriesHitTestProvider(this, this.webAssemblyContext);
+    };
+    return FastImpulseRenderableSeries;
+}(FastColumnRenderableSeries_1.FastColumnRenderableSeries));
+exports.FastImpulseRenderableSeries = FastImpulseRenderableSeries;
+/** @ignore */
+var getDelta = function (_a) {
+    var pointSize = _a.pointSize, areaSize = _a.areaSize, range = _a.range;
+    var pointScaled = pointSize * DpiHelper_1.DpiHelper.PIXEL_RATIO;
+    var k = areaSize / (areaSize - pointScaled);
+    return (Math.abs(range.max - range.min) * (k - 1)) / 2;
+};

package/Charting/Visuals/RenderableSeries/HitTest/ImpulseSeriesHitTestProvider.d.ts

@@ -0,0 +1,20 @@
+import { FastImpulseRenderableSeries } from "../FastImpulseRenderableSeries";
+import { BaseHitTestProvider } from "./BaseHitTestProvider";
+import { HitTestInfo } from "./HitTestInfo";
+/**
+ * Hit-test provider for {@link FastColumnRenderableSeries}. See base class {@link BaseHitTestProvider} for further info
+ */
+export declare class ImpulseSeriesHitTestProvider extends BaseHitTestProvider<FastImpulseRenderableSeries> {
+    /**
+     * @inheritDoc
+     */
+    hitTest(x: number, y: number, hitTestRadius?: number): HitTestInfo;
+    /**
+     * @inheritDoc
+     */
+    hitTestForDataPointSelectionModifier(x: number, y: number, hitTestRadius?: number): HitTestInfo;
+    /**
+     * @inheritDoc
+     */
+    hitTestXSlice(x: number, y: number): HitTestInfo;
+}

package/Charting/Visuals/RenderableSeries/HitTest/ImpulseSeriesHitTestProvider.js

@@ -0,0 +1,100 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImpulseSeriesHitTestProvider = void 0;
+var pointUtil_1 = require("../../../../utils/pointUtil");
+var DpiHelper_1 = require("../../TextureManager/DpiHelper");
+var BaseHitTestProvider_1 = require("./BaseHitTestProvider");
+var hitTestHelpers_1 = require("./hitTestHelpers");
+var HitTestInfo_1 = require("./HitTestInfo");
+/**
+ * Hit-test provider for {@link FastColumnRenderableSeries}. See base class {@link BaseHitTestProvider} for further info
+ */
+var ImpulseSeriesHitTestProvider = /** @class */ (function (_super) {
+    __extends(ImpulseSeriesHitTestProvider, _super);
+    function ImpulseSeriesHitTestProvider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @inheritDoc
+     */
+    ImpulseSeriesHitTestProvider.prototype.hitTest = function (x, y, hitTestRadius) {
+        if (hitTestRadius === void 0) { hitTestRadius = BaseHitTestProvider_1.BaseHitTestProvider.DEFAULT_HIT_TEST_RADIUS; }
+        var hitTestPoint = this.getTranslatedHitTestPoint(x, y);
+        if (!hitTestPoint) {
+            return HitTestInfo_1.HitTestInfo.empty();
+        }
+        var _a = this.currentRenderPassData, xCoordinateCalculator = _a.xCoordinateCalculator, yCoordinateCalculator = _a.yCoordinateCalculator, isVerticalChart = _a.isVerticalChart;
+        var xHitCoord = isVerticalChart ? hitTestPoint.y : hitTestPoint.x;
+        var yHitCoord = isVerticalChart ? hitTestPoint.x : hitTestPoint.y;
+        var dataSeries = this.parentSeries.dataSeries;
+        var nearestXyPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXyPoint(xCoordinateCalculator, yCoordinateCalculator, dataSeries, xHitCoord, yHitCoord);
+        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXPoint(this.webAssemblyContext, xCoordinateCalculator, dataSeries, xHitCoord, dataSeries.dataDistributionCalculator.isSortedAscending);
+        var xNativeValues = dataSeries.getNativeXValues();
+        var yNativeValues = dataSeries.getNativeYValues();
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, 0);
+        if (nearestPointIndex >= 0 || nearestXyPointIndex >= 0) {
+            hitTestInfo.isHit =
+                hitTestHelpers_1.hitTestHelpers.testIsHitForImpulse(xCoordinateCalculator, yCoordinateCalculator, this.parentSeries, xNativeValues, yNativeValues, nearestPointIndex, xHitCoord, yHitCoord, hitTestRadius) ||
+                    hitTestHelpers_1.hitTestHelpers.testIsHitForPoint(xCoordinateCalculator, yCoordinateCalculator, xNativeValues, yNativeValues, nearestXyPointIndex, xHitCoord, yHitCoord, this.parentSeries.size);
+        }
+        else {
+            hitTestInfo.isHit = false;
+        }
+        return hitTestInfo;
+    };
+    /**
+     * @inheritDoc
+     */
+    ImpulseSeriesHitTestProvider.prototype.hitTestForDataPointSelectionModifier = function (x, y, hitTestRadius) {
+        if (hitTestRadius === void 0) { hitTestRadius = BaseHitTestProvider_1.BaseHitTestProvider.DEFAULT_HIT_TEST_RADIUS; }
+        return this.hitTest(x, y, hitTestRadius);
+    };
+    /**
+     * @inheritDoc
+     */
+    ImpulseSeriesHitTestProvider.prototype.hitTestXSlice = function (x, y) {
+        var _a;
+        var hitTestPoint = this.getTranslatedHitTestPoint(x, y);
+        if (!hitTestPoint) {
+            return HitTestInfo_1.HitTestInfo.empty();
+        }
+        var _b = this.currentRenderPassData, xCoordinateCalculator = _b.xCoordinateCalculator, yCoordinateCalculator = _b.yCoordinateCalculator, isVerticalChart = _b.isVerticalChart;
+        var xHitCoord = isVerticalChart ? hitTestPoint.y : hitTestPoint.x;
+        var yHitCoord = isVerticalChart ? hitTestPoint.x : hitTestPoint.y;
+        var dataSeries = this.parentSeries.dataSeries;
+        var xNativeValues = dataSeries.getNativeXValues();
+        var yNativeValues = dataSeries.getNativeYValues();
+        var nearestPointIndex = hitTestHelpers_1.hitTestHelpers.getNearestXPoint(this.webAssemblyContext, xCoordinateCalculator, dataSeries, xHitCoord, dataSeries.dataDistributionCalculator.isSortedAscending);
+        var hitTestInfo = hitTestHelpers_1.hitTestHelpers.createHitTestInfo(this.parentSeries, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, dataSeries, xNativeValues, yNativeValues, xHitCoord, yHitCoord, nearestPointIndex, 0);
+        var isCategoryAxis = xCoordinateCalculator.isCategoryCoordinateCalculator;
+        var markerWidth = ((_a = this.parentSeries.size) !== null && _a !== void 0 ? _a : 0) * DpiHelper_1.DpiHelper.PIXEL_RATIO;
+        var markerDataWidth = Math.abs(xCoordinateCalculator.getDataValue(markerWidth) - xCoordinateCalculator.getDataValue(0));
+        if (nearestPointIndex >= 0) {
+            var xFirstValue = isCategoryAxis ? 0 : xNativeValues.get(0);
+            var xLastValue = isCategoryAxis ? xNativeValues.size() - 1 : xNativeValues.get(xNativeValues.size() - 1);
+            hitTestInfo.isWithinDataBounds = (0, pointUtil_1.testIsInInterval)(hitTestInfo.hitTestPointValues.x, xFirstValue, xLastValue, markerDataWidth / 2);
+            hitTestInfo.isHit = hitTestInfo.isWithinDataBounds;
+        }
+        else {
+            hitTestInfo.isHit = false;
+        }
+        return hitTestInfo;
+    };
+    return ImpulseSeriesHitTestProvider;
+}(BaseHitTestProvider_1.BaseHitTestProvider));
+exports.ImpulseSeriesHitTestProvider = ImpulseSeriesHitTestProvider;

package/Charting/Visuals/RenderableSeries/HitTest/hitTestHelpers.d.ts

@@ -8,6 +8,7 @@ import { XyyDataSeries } from "../../../Model/XyyDataSeries";
 import { CoordinateCalculatorBase } from "../../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { BaseOhlcRenderableSeries } from "../BaseOhlcRenderableSeries";
 import { FastColumnRenderableSeries } from "../FastColumnRenderableSeries";
+import { FastImpulseRenderableSeries } from "../FastImpulseRenderableSeries";
 import { IRenderableSeries } from "../IRenderableSeries";
 import { HitTestInfo } from "./HitTestInfo";
 export declare const hitTestHelpers: {
@@ -41,4 +42,5 @@ export declare const hitTestHelpers: {
         isHit: boolean;
         secondPointIndex: number;
     };
+    testIsHitForImpulse: (xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, renderableSeries: FastImpulseRenderableSeries, xValues: SCRTDoubleVector, yValues: SCRTDoubleVector, pointIndex: number, xHitCoord: number, yHitCoord: number, hitTestRadius: number) => boolean;
 };

package/Charting/Visuals/RenderableSeries/HitTest/hitTestHelpers.js

@@ -268,6 +268,18 @@ var testIsHitForColumn = function (xCoordinateCalculator, yCoordinateCalculator,
     var bottomColumnSide = zeroLineYCoord > yCoord ? yCoord : zeroLineYCoord;
     return (0, pointUtil_1.testIsInBounds)(xHitCoord, yHitCoord, xCoord - halfWidth, topColumnSide, xCoord + halfWidth, bottomColumnSide);
 };
+var testIsHitForImpulse = function (xCoordinateCalculator, yCoordinateCalculator, renderableSeries, xValues, yValues, pointIndex, xHitCoord, yHitCoord, hitTestRadius) {
+    var zeroLineY = renderableSeries.zeroLineY;
+    var isCategoryAxis = xCoordinateCalculator.isCategoryCoordinateCalculator;
+    var xValue = isCategoryAxis ? pointIndex : xValues.get(pointIndex);
+    var yValue = yValues.get(pointIndex);
+    var xCoord = xCoordinateCalculator.getCoordinate(xValue);
+    var yCoord = yCoordinateCalculator.getCoordinate(yValue);
+    var zeroLineYCoord = yCoordinateCalculator.getCoordinate(zeroLineY);
+    var topColumnSide = zeroLineYCoord > yCoord ? zeroLineYCoord : yCoord;
+    var bottomColumnSide = zeroLineYCoord > yCoord ? yCoord : zeroLineYCoord;
+    return (0, pointUtil_1.testIsInBounds)(xHitCoord, yHitCoord, xCoord, topColumnSide, xCoord, bottomColumnSide, hitTestRadius);
+};
 var testIsHitForOHLC = function (xCoordinateCalculator, yCoordinateCalculator, renderableSeries, dataSeries, pointIndex, xHitCoord, yHitCoord, hitTestRadius) {
     var getDataPointWidth = renderableSeries.getDataPointWidth, dataPointWidth = renderableSeries.dataPointWidth;
     var isCategoryAxis = xCoordinateCalculator.isCategoryCoordinateCalculator;
@@ -344,5 +356,6 @@ exports.hitTestHelpers = {
     testIsHitForBand: testIsHitForBand,
     testIsHitForColumn: testIsHitForColumn,
     testIsHitForOHLC: testIsHitForOHLC,
-    testIsHitForMountain: testIsHitForMountain
+    testIsHitForMountain: testIsHitForMountain,
+    testIsHitForImpulse: testIsHitForImpulse
 };

package/Charting/Visuals/RenderableSeries/StackedColumnCollection.js

@@ -275,7 +275,8 @@ var StackedColumnCollection = /** @class */ (function (_super) {
     StackedColumnCollection.prototype.checkXValuesCorrect = function () {
         var length = this.getDataSeriesValuesCount();
         this.getVisibleSeries().forEach(function (el) {
-            if (!(el.dataSeries.count() === length)) {
+            var _a;
+            if (!(((_a = el.dataSeries) === null || _a === void 0 ? void 0 : _a.count()) === length)) {
                 throw Error("All stacked series in on collection should have the same amount of X Values");
             }
         });

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.d.ts

@@ -4,6 +4,7 @@ import { ObservableArray } from "../../../Core/ObservableArray";
 import { ESciChartSurfaceType } from "../../../types/SciChartSurfaceType";
 import { TSciChartSurfaceCanvases } from "../../../types/TSciChartSurfaceCanvases";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
+import { IEventSubscriptionItem } from "../Legend/SciChartLegendBase";
 import { SciChartPieLegend } from "../Legend/SciChartPieLegend";
 import { ISciChartSurfaceBase } from "../SciChartSurfaceBase";
 import { IPieSurfaceOptions } from "./IPieSurfaceOptions";
@@ -45,7 +46,7 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    static create(divElementId: string, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
+    static create(divElement: string | HTMLDivElement, options?: IPieSurfaceOptions): Promise<SciChartPieSurface>;
     /**
      * @summary Gets the collection of {@link IPieSegment} - the pie segments or slices on this {@link SciChartPieSurface}
      * @description A {@link SciChartPieSurface} can have one to many {@link IPieSegment | Pie Segments}.     *
@@ -178,4 +179,4 @@ export declare class SciChartPieSurface implements ISciChartSurfaceBase {
     private applySciChartBackground;
 }
 /** @ignore */
-export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => void;
+export declare const addEventListenerToPieSegment: (ps: IPieSegment, el: HTMLElement, animate: boolean) => IEventSubscriptionItem;

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -118,10 +118,10 @@ var SciChartPieSurface = /** @class */ (function () {
      * @param width Optional - the width of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      * @param height Optional - the height of the {@link SciChartPieSurface} in pixels. By default SciChart will scale to fit the parent Div
      */
-    SciChartPieSurface.create = function (divElementId, options) {
+    SciChartPieSurface.create = function (divElement, options) {
         var _a, _b;
         (0, chartBuilder_1.ensureRegistrations)();
-        var canvases = sciChartInitCommon_1.default.initCanvas(divElementId, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
+        var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.svg);
         return new Promise(function (resolve) {
             var conflictingRenderContextDestinations = __spreadArray(__spreadArray(__spreadArray([], createMaster_1.sciChartDestinations, true), createMaster3d_1.sciChartDestinations, true), createSingle_1.sciChartSingleDestinations, true).filter(function (destination) { return destination.sciChartSurface.domChartRoot.id === canvases.domChartRoot.id; });
             conflictingRenderContextDestinations.forEach(function (destination) { return destination.sciChartSurface.delete(); });
@@ -129,6 +129,7 @@ var SciChartPieSurface = /** @class */ (function () {
             var scps = new SciChartPieSurface(canvases, options);
             scps.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
             var unsub = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, scps);
+            scps.addDeletable(unsub);
             // setTimeout is used to make function async like createSciChartSurface, to have a consistent API
             setTimeout(function () { return resolve(scps); }, 0);
         });
@@ -392,8 +393,11 @@ var SciChartPieSurface = /** @class */ (function () {
         // ADD EVENT LISTENERS
         if (!app_1.IS_TEST_ENV) {
             this.pieSegments.asArray().forEach(function (ps) {
-                var el = document.getElementById(ps.id);
-                (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                var el = _this.domChartRoot.querySelector("[id='".concat(ps.id, "']"));
+                if (el) {
+                    var subscriptionToken = (0, exports.addEventListenerToPieSegment)(ps, el, _this.animate);
+                    _this.addDeletable(subscriptionToken);
+                }
             });
         }
         this.drawSegmentTitles();
@@ -561,31 +565,36 @@ var calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta,
 var isListenerBlocked = false;
 /** @ignore */
 var addEventListenerToPieSegment = function (ps, el, animate) {
-    if (el) {
-        el.addEventListener("click", function (e) {
-            if (!animate) {
-                ps.isSelected = !ps.isSelected;
-                return;
-            }
-            // 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;
-                isListenerBlocked = true;
-                (function myLoop(k) {
-                    setTimeout(function () {
-                        ps.delta = start_1 + d_1 * k;
-                        if (k === ROUNDS_1) {
-                            isListenerBlocked = false;
-                        }
-                        if (++k <= ROUNDS_1)
-                            myLoop(k);
-                    }, 20);
-                })(1);
-            }
-        });
-    }
+    var eventListener = function (e) {
+        if (!animate) {
+            ps.isSelected = !ps.isSelected;
+            return;
+        }
+        // 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;
+            isListenerBlocked = true;
+            (function myLoop(k) {
+                setTimeout(function () {
+                    ps.delta = start_1 + d_1 * k;
+                    if (k === ROUNDS_1) {
+                        isListenerBlocked = false;
+                    }
+                    if (++k <= ROUNDS_1)
+                        myLoop(k);
+                }, 20);
+            })(1);
+        }
+    };
+    el.addEventListener("click", eventListener);
+    return {
+        eventListener: eventListener,
+        eventType: "click",
+        element: el,
+        delete: function () { return el.removeEventListener("click", eventListener); }
+    };
 };
 exports.addEventListenerToPieSegment = addEventListenerToPieSegment;

package/Core/BuildStamp.d.ts

@@ -1,4 +1,4 @@
 import { TSciChart } from "../types/TSciChart";
 import { TSciChart3D } from "../types/TSciChart3D";
-export declare const libraryVersion = "2.1.2261";
+export declare const libraryVersion = "2.1.2290";
 export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;

package/Core/BuildStamp.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkBuildStamp = exports.libraryVersion = void 0;
-var buildStamp = "2022-01-31T00:00:00";
+var buildStamp = "2022-03-08T00:00:00";
 var result;
 // tslint:disable-next-line:no-var-requires
-exports.libraryVersion = "2.1.2261";
+exports.libraryVersion = "2.1.2290";
 var checkBuildStamp = function (wasmContext) {
     if (result !== undefined)
         return result;