scichart 2.0.2126 → 2.0.2144

package/Builder/buildSeries.d.ts

@@ -2,7 +2,7 @@ import { ISelectedPointOptions } from "../Charting/Model/DataPointSelectionPalet
 import { IUniformHeatmapSeriesOptions } from "../Charting/Model/UniformHeatmapDataSeries";
 import { IPointMarkerOptions } from "../Charting/Visuals/PointMarkers/BasePointMarker";
 import { ISpritePointMarkerOptions } from "../Charting/Visuals/PointMarkers/SpritePointMarker";
-import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/BaseAnimation";
+import { IBaseAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { IFadeAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/FadeAnimation";
 import { IScaleAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/ScaleAnimation";
 import { ISweepAnimationOptions } from "../Charting/Visuals/RenderableSeries/Animations/SweepAnimation";

package/Charting/ChartModifiers/LegendModifier.js

@@ -84,6 +84,7 @@ var LegendModifier = /** @class */ (function (_super) {
     /** @inheritDoc */
     LegendModifier.prototype.onDetach = function () {
         _super.prototype.onDetach.call(this);
+        this.sciChartLegend.delete();
         this.sciChartLegend.setRootDiv(undefined);
         this.sciChartLegend.setRenderableSeriesArray([]);
         this.sciChartLegend.setInvalidateParentSurface(undefined);

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.d.ts

@@ -1,4 +1,4 @@
-import { AnimationToken } from "../../Core/AnimationToken";
+import { IGenericAnimation } from "../../Core/Animations/GenericAnimation";
 import { NumberRange } from "../../Core/NumberRange";
 import { Point } from "../../Core/Point";
 import { EChart2DModifierType } from "../../types/ChartModifierType";
@@ -29,7 +29,7 @@ export interface IRangeSelectionModifierOptions extends IChartModifierBaseOption
 export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D {
     readonly type = EChart2DModifierType.OverviewRangeSelection;
     onSelectedAreaChanged: (area?: NumberRange) => void;
-    overviewPositionAnimation: AnimationToken;
+    overviewPositionAnimation: IGenericAnimation;
     animationDuration: number;
     animate: boolean;
     protected pointTo: Point;
@@ -47,6 +47,10 @@ export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D
      * @inheritDoc
      */
     onAttach(): void;
+    /**
+     * @inheritDoc
+     */
+    onDetach(): void;
     /**
      * @inheritDoc
      */
@@ -76,4 +80,5 @@ export declare class OverviewRangeSelectionModifier extends ChartModifierBase2D
      */
     set selectedArea(value: NumberRange);
     protected updateSelectionAnnotation(): void;
+    private xVisibleRangeChangeHandler;
 }

package/Charting/ChartModifiers/OverviewRangeSelectionModifier.js

@@ -64,6 +64,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         _this.onSelectedAreaChanged = options === null || options === void 0 ? void 0 : options.onSelectedAreaChanged;
         _this.xAxisId = (_a = options === null || options === void 0 ? void 0 : options.xAxisId) !== null && _a !== void 0 ? _a : _this.xAxisId;
         _this.yAxisId = (_b = options === null || options === void 0 ? void 0 : options.yAxisId) !== null && _b !== void 0 ? _b : _this.yAxisId;
+        _this.xVisibleRangeChangeHandler = _this.xVisibleRangeChangeHandler.bind(_this);
         return _this;
     }
     /**
@@ -73,6 +74,13 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         _super.prototype.onAttach.call(this);
         this.updateSelectionAnnotation();
     };
+    /**
+     * @inheritDoc
+     */
+    OverviewRangeSelectionModifier.prototype.onDetach = function () {
+        var xAxis = this.parentSurface.getXAxisById(this.xAxisId);
+        xAxis.visibleRangeChanged.unsubscribe(this.xVisibleRangeChangeHandler);
+    };
     /**
      * @inheritDoc
      */
@@ -104,7 +112,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         }
         if (this.isClicked) {
             args.handled = true;
-            (_a = this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+            (_a = this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
             var seriesViewRect = this.parentSurface.seriesViewRect;
             this.pointTo = translate_1.translateFromCanvasToSeriesViewRect(Rect_1.Rect.clipPointToRect(args.mousePoint, seriesViewRect), seriesViewRect);
             this.isClicked = false;
@@ -123,6 +131,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
             };
             if (this.animate) {
                 this.overviewPositionAnimation = NumberRangeAnimator_1.NumberRangeAnimator.animate(initialCoordinatesRange, finalCoordinatesRange, this.animationDuration, updateAnnotationCoordinates, null);
+                this.parentSurface.addAnimation(this.overviewPositionAnimation);
             }
             else {
                 updateAnnotationCoordinates(finalCoordinatesRange);
@@ -193,7 +202,7 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
         if (this.parentSurface) {
             var onDrag = function () {
                 var _a;
-                (_a = _this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancelAnimation();
+                (_a = _this.overviewPositionAnimation) === null || _a === void 0 ? void 0 : _a.cancel();
                 var selectedArea = new NumberRange_1.NumberRange(_this.rangeSelectionAnnotation.x1, _this.rangeSelectionAnnotation.x2);
                 _this.selectedAreaProperty = selectedArea;
                 _this.annotationBeforeSelectedAreaProperty.x2 = _this.rangeSelectionAnnotation.x1;
@@ -202,6 +211,8 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
             };
             var xAxis = (_a = this.parentSurface) === null || _a === void 0 ? void 0 : _a.getXAxisById(this.xAxisId);
             var commonAnnotationProperties = {
+                xAxisId: this.xAxisId,
+                yAxisId: this.yAxisId,
                 opacity: 0.5,
                 y1: 0,
                 y2: 1,
@@ -234,8 +245,13 @@ var OverviewRangeSelectionModifier = /** @class */ (function (_super) {
             this.rangeSelectionAnnotationProperty = dragBox;
             this.annotationBeforeSelectedAreaProperty = annotationBeforeSelectedArea;
             this.annotationAfterSelectedAreaProperty = annotationAfterSelectedArea;
+            xAxis.visibleRangeChanged.subscribe(this.xVisibleRangeChangeHandler);
         }
     };
+    OverviewRangeSelectionModifier.prototype.xVisibleRangeChangeHandler = function (args) {
+        this.annotationBeforeSelectedAreaProperty.x1 = args.visibleRange.min;
+        this.annotationAfterSelectedAreaProperty.x2 = args.visibleRange.max;
+    };
     return OverviewRangeSelectionModifier;
 }(ChartModifierBase2D_1.ChartModifierBase2D));
 exports.OverviewRangeSelectionModifier = OverviewRangeSelectionModifier;

package/Charting/ChartModifiers/RolloverModifier.d.ts

@@ -64,6 +64,7 @@ export interface IRolloverModifierOptions extends IChartModifierBaseOptions {
     tooltipDataTemplate?: TRolloverTooltipDataTemplate | string;
     showTooltip?: boolean;
     allowTooltipOverlapping?: boolean;
+    snapToDataPoint?: boolean;
 }
 /**
  * The RolloverModifier provides tooltip and cursor behavior on a 2D {@link SciChartSurface}
@@ -92,6 +93,11 @@ export declare class RolloverModifier extends ChartModifierBase2D implements IIn
      * Gets or sets the legend Y offset
      */
     tooltipLegendOffsetY: number;
+    /**
+     * Gets or sets the snapToDataPoint flag. If True the {@link RolloverModifier} line snaps to
+     * the nearest data-point of the first visible renderable series
+     */
+    snapToDataPoint: boolean;
     private readonly rolloverLineAnnotation;
     private readonly legendAnnotation;
     private mousePosition;

package/Charting/ChartModifiers/RolloverModifier.js

@@ -69,7 +69,7 @@ var RolloverModifier = /** @class */ (function (_super) {
      * @param options Optional parameters {@link IRolloverModifierOptions} used to configure the modifier
      */
     function RolloverModifier(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var _this = _super.call(this, options) || this;
         _this.type = ChartModifierType_1.EChart2DModifierType.Rollover;
         /**
@@ -80,6 +80,11 @@ var RolloverModifier = /** @class */ (function (_super) {
          * Gets or sets the legend Y offset
          */
         _this.tooltipLegendOffsetY = 0;
+        /**
+         * Gets or sets the snapToDataPoint flag. If True the {@link RolloverModifier} line snaps to
+         * the nearest data-point of the first visible renderable series
+         */
+        _this.snapToDataPoint = false;
         _this.mousePosition = EMousePosition.OutOfCanvas;
         _this.showRolloverLineProperty = true;
         _this.showTooltipProperty = true;
@@ -123,6 +128,7 @@ var RolloverModifier = /** @class */ (function (_super) {
             yAxisId: _this.yAxisId
         });
         _this.allowTooltipOverlappingProperty = (_j = options === null || options === void 0 ? void 0 : options.allowTooltipOverlapping) !== null && _j !== void 0 ? _j : _this.allowTooltipOverlappingProperty;
+        _this.snapToDataPoint = (_k = options === null || options === void 0 ? void 0 : options.snapToDataPoint) !== null && _k !== void 0 ? _k : _this.snapToDataPoint;
         return _this;
     }
     /**
@@ -421,22 +427,50 @@ var RolloverModifier = /** @class */ (function (_super) {
             this.rolloverLineAnnotation.isHidden = true;
             return;
         }
-        this.rolloverLineAnnotation.isHidden = !this.showRolloverLineProperty;
-        var translatedMousePoint = translate_1.translateFromCanvasToSeriesViewRect(this.mousePoint, this.parentSurface.seriesViewRect);
-        if (translatedMousePoint) {
-            var x = translate_1.translateToNotScaled(translatedMousePoint.x);
-            var y = translate_1.translateToNotScaled(translatedMousePoint.y);
-            if (this.isVerticalChart()) {
-                this.rolloverLineAnnotation.x1 = y;
-                this.rolloverLineAnnotation.x2 = y;
-                this.rolloverLineAnnotation.y1 = 0;
-                this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.right);
+        if (!this.showRolloverLineProperty) {
+            this.rolloverLineAnnotation.isHidden = true;
+            return;
+        }
+        if (this.snapToDataPoint) {
+            var firstSeries = this.getIncludedRenderableSeries()[0];
+            if (firstSeries) {
+                var hitTestInfo = this.hitTestRenderableSeries(firstSeries, this.mousePoint);
+                if (hitTestInfo && hitTestInfo.isWithinDataBounds) {
+                    this.rolloverLineAnnotation.isHidden = false;
+                    var x = translate_1.translateToNotScaled(hitTestInfo.xCoord);
+                    this.rolloverLineAnnotation.x1 = x;
+                    this.rolloverLineAnnotation.x2 = x;
+                    this.rolloverLineAnnotation.y1 = 0;
+                    this.rolloverLineAnnotation.y2 = this.isVerticalChart()
+                        ? translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.right)
+                        : translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.bottom);
+                }
+                else {
+                    this.rolloverLineAnnotation.isHidden = true;
+                }
             }
             else {
-                this.rolloverLineAnnotation.x1 = x;
-                this.rolloverLineAnnotation.x2 = x;
-                this.rolloverLineAnnotation.y1 = 0;
-                this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.bottom);
+                this.rolloverLineAnnotation.isHidden = true;
+            }
+        }
+        else {
+            this.rolloverLineAnnotation.isHidden = false;
+            var translatedMousePoint = translate_1.translateFromCanvasToSeriesViewRect(this.mousePoint, this.parentSurface.seriesViewRect);
+            if (translatedMousePoint) {
+                var x = translate_1.translateToNotScaled(translatedMousePoint.x);
+                var y = translate_1.translateToNotScaled(translatedMousePoint.y);
+                if (this.isVerticalChart()) {
+                    this.rolloverLineAnnotation.x1 = y;
+                    this.rolloverLineAnnotation.x2 = y;
+                    this.rolloverLineAnnotation.y1 = 0;
+                    this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.right);
+                }
+                else {
+                    this.rolloverLineAnnotation.x1 = x;
+                    this.rolloverLineAnnotation.x2 = x;
+                    this.rolloverLineAnnotation.y1 = 0;
+                    this.rolloverLineAnnotation.y2 = translate_1.translateToNotScaled(this.parentSurface.seriesViewRect.bottom);
+                }
             }
         }
     };

package/Charting/Model/BaseDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { EventHandler } from "../../Core/EventHandler";
 import { NumberRange } from "../../Core/NumberRange";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { EDataChangeType, EDataSeriesType, EDataSeriesValueType, IDataChangeArgs, IDataSeries } from "./IDataSeries";
 import { IMetadataGenerator, IPointMetadata } from "./IPointMetadata";
 /**
@@ -166,7 +166,7 @@ export declare abstract class BaseDataSeries implements IDataSeries {
      * @param progress The animation progress from 0 to 1
      * @param animation The animation
      */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     protected validateIndex(index: number, message?: string): void;

package/Charting/Model/OhlcDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { NumberRange } from "../../Core/NumberRange";
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType, EDataSeriesValueType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -206,7 +206,7 @@ export declare class OhlcDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getOHLCValues;

package/Charting/Model/XyyDataSeries.d.ts

@@ -1,7 +1,7 @@
 import { NumberRange } from "../../Core/NumberRange";
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType, EDataSeriesValueType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -158,7 +158,7 @@ export declare class XyyDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getYY1Values;

package/Charting/Model/XyzDataSeries.d.ts

@@ -1,6 +1,6 @@
 import { NumberArray } from "../../types/NumberArray";
 import { DoubleVector, TSciChart } from "../../types/TSciChart";
-import { BaseAnimation } from "../Visuals/RenderableSeries/Animations/BaseAnimation";
+import { SeriesAnimation } from "../Visuals/RenderableSeries/Animations/SeriesAnimation";
 import { BaseDataSeries, IBaseDataSeriesOptions } from "./BaseDataSeries";
 import { EDataSeriesType } from "./IDataSeries";
 import { IPointMetadata } from "./IPointMetadata";
@@ -155,7 +155,7 @@ export declare class XyzDataSeries extends BaseDataSeries {
     /** @inheritDoc */
     validateAnimationVectors(): void;
     /** @inheritDoc */
-    updateAnimationProperties(progress: number, animation: BaseAnimation): void;
+    updateAnimationProperties(progress: number, animation: SeriesAnimation): void;
     /** @inheritDoc */
     toJSON(excludeData?: boolean): any;
     private getYZValues;

package/Charting/Services/SciChartRenderer.js

@@ -15,6 +15,7 @@ var AutoRange_1 = require("../../types/AutoRange");
 var AxisAlignment_1 = require("../../types/AxisAlignment");
 var RenderLayer_1 = require("../../types/RenderLayer");
 var IAnnotation_1 = require("../Visuals/Annotations/IAnnotation");
+var SciChartSurfaceBase_1 = require("../Visuals/SciChartSurfaceBase");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
 var RenderPassData_1 = require("./RenderPassData");
 /**
@@ -93,7 +94,7 @@ var SciChartRenderer = /** @class */ (function () {
         this.drawSvgAnnotations(svgAnnotations, xyAxesById[0], xyAxesById[1]);
         // Update watermark
         var left = seriesViewRect.x;
-        var bottom = renderContext.viewportSize.height - (seriesViewRect.top + seriesViewRect.height);
+        var bottom = SciChartSurfaceBase_1.SciChartSurfaceBase.domMasterCanvas.height - (seriesViewRect.top + seriesViewRect.height);
         this.sciChartSurface.updateWatermark(left, bottom);
         // Step 10 Call OnParentSurfaceRendered
         this.onParentSurfaceRendered();
@@ -145,6 +146,8 @@ var SciChartRenderer = /** @class */ (function () {
         });
     };
     SciChartRenderer.prototype.validate = function () {
+        this.sciChartSurface.xAxes.asArray().forEach(function (axis) { return (axis.isMeasured = false); });
+        this.sciChartSurface.yAxes.asArray().forEach(function (axis) { return (axis.isMeasured = false); });
         // TODO: Check the surface is valid and output error codes to console
         // Checks would include
         // Is XAxes and YAxes collection null or empty
@@ -238,13 +241,20 @@ var SciChartRenderer = /** @class */ (function () {
         });
     };
     SciChartRenderer.prototype.tryPerformAutoRangeOn = function (axis, sciChartSurface) {
-        var shouldAutoRange = axis.autoRange === AutoRange_1.EAutoRange.Always ||
-            (axis.autoRange === AutoRange_1.EAutoRange.Once && (!axis.hasValidVisibleRange() || axis.hasDefaultVisibleRange()));
+        var firstRange = !axis.hasValidVisibleRange() || axis.hasDefaultVisibleRange();
+        var shouldAutoRange = axis.autoRange === AutoRange_1.EAutoRange.Always || (axis.autoRange === AutoRange_1.EAutoRange.Once && firstRange);
         if (shouldAutoRange) {
             // Different implementation for YAxis and XAxis because of windowing
             var newRange = axis.getMaximumRange();
             if (!newRange.equals(axis.visibleRange)) {
-                axis.visibleRange = newRange;
+                if (!axis.autoRangeAnimation ||
+                    (firstRange && !axis.autoRangeAnimation.animateInitialRanging) ||
+                    (!firstRange && !axis.autoRangeAnimation.animateSubsequentRanging)) {
+                    axis.visibleRange = newRange;
+                }
+                else if (!newRange.equals(axis.animatedVisibleRange)) {
+                    sciChartSurface.addAnimation(axis.animateVisibleRange(newRange, axis.autoRangeAnimation.duration, axis.autoRangeAnimation.easing));
+                }
             }
         }
     };

package/Charting/Visuals/Axis/AxisBase2D.d.ts

@@ -70,6 +70,16 @@ export declare type TTickObject = {
      */
     minorTickCoords: number[];
 };
+export interface IAutoRangeAnimationOptions {
+    /** Whether to animate the first autorange  Default false */
+    animateInitialRanging: boolean;
+    /** Whether to animate all other autoRanges */
+    animateSubsequentRanging: boolean;
+    /** The length of the animation */
+    duration: number;
+    /** The easing function to use */
+    easing?: TEasingFn;
+}
 export interface IAxisBase2dOptions extends IAxisCoreOptions {
     /**
      * Limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
@@ -116,6 +126,10 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * as the bounding box of ratoated text may overlap even if the text itself does not.
      */
     hideOverlappingLabels?: boolean;
+    /**
+     * Options to configure if and how the axis should animate when autoRanging
+     */
+    autoRangeAnimation?: IAutoRangeAnimationOptions;
 }
 /**
  * The base class for 2D Chart Axis within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}.
@@ -128,28 +142,6 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
  *  Set axis on the {@link SciChartSurface.xAxes} or {@link SciChartSurface.yAxes} collections in 2D Charts.
  */
 export declare abstract class AxisBase2D extends AxisCore implements IThemeable {
-    abstract type: EAxisType.CategoryAxis | EAxisType.LogarithmicAxis | EAxisType.NumericAxis;
-    /**
-     * Gets the parent {@link SciChartSurface} that this axis is attached to
-     */
-    parentSurface: SciChartSurface;
-    /**
-     * Gets the {@link AxisTitleRenderer} instance responsible for drawing the axis title
-     */
-    readonly axisTitleRenderer: AxisTitleRenderer;
-    /**
-     * Gets the {@link AxisLayoutState} class which manages layout
-     */
-    readonly axisLayoutState: AxisLayoutState;
-    /**
-     * Gets the {@link Rect | ViewRect} - a rectangle defining the location of the axis within the parent {@link SciChartSurface}
-     */
-    viewRect: Rect;
-    /**
-     * The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
-     * access to our WebGL2 Engine and WebAssembly numerical methods
-     */
-    protected axisRendererProperty: AxisRenderer;
     /**
      * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -158,36 +150,6 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
     set labelProvider(labelProvider: LabelProviderBase2D);
-    protected readonly webAssemblyContext2D: TSciChart;
-    private labelStyleProperty;
-    private axisAlignmentProperty;
-    private isInnerAxisProperty;
-    private visibleRangeLimitProperty;
-    private zoomExtentsRangeProperty;
-    private isPrimaryAxisProperty;
-    private isStackedAxisProperty;
-    private penCacheForMajorGridLines;
-    private penCacheForMinorGridLines;
-    private penCacheForMajorTickLines;
-    private penCacheForMinorTickLines;
-    private solidBrushCacheAxisBands;
-    private axisBorderProperty;
-    private solidBrushCacheBorder;
-    private axisLengthProperty;
-    private offsetProperty;
-    private tickCache;
-    /**
-     * Creates an instance of the {@link AxisBase2D}
-     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
-     * access to our WebGL2 Engine and WebAssembly numerical methods
-     * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
-     */
-    protected constructor(webAssemblyContext: TSciChart, options?: IAxisBase2dOptions);
-    /**
-     * @inheritDoc
-     */
-    applyTheme(themeProvider: IThemeProvider): void;
-    onAttach(parentSurface: SciChartSurface, isXAxis: boolean, isPrimaryAxis: boolean): void;
     /**
      * Gets the {@link AxisRenderer} instance responsible for drawing the axis
      */
@@ -304,6 +266,67 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * Gets or sets the Axis Border properties
      */
     set axisBorder(border: TBorder);
+    /**
+     * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+     */
+    get autoRangeAnimation(): IAutoRangeAnimationOptions;
+    /**
+     * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+     */
+    set autoRangeAnimation(autoRangeAnimation: IAutoRangeAnimationOptions);
+    abstract type: EAxisType.CategoryAxis | EAxisType.LogarithmicAxis | EAxisType.NumericAxis;
+    /**
+     * Gets the parent {@link SciChartSurface} that this axis is attached to
+     */
+    parentSurface: SciChartSurface;
+    /**
+     * Gets the {@link AxisTitleRenderer} instance responsible for drawing the axis title
+     */
+    readonly axisTitleRenderer: AxisTitleRenderer;
+    /**
+     * Gets the {@link AxisLayoutState} class which manages layout
+     */
+    readonly axisLayoutState: AxisLayoutState;
+    /**
+     * Gets the {@link Rect | ViewRect} - a rectangle defining the location of the axis within the parent {@link SciChartSurface}
+     */
+    viewRect: Rect;
+    protected axisRendererProperty: AxisRenderer;
+    protected autoRangeAnimationProperty: IAutoRangeAnimationOptions;
+    /**
+     * The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     */
+    protected readonly webAssemblyContext2D: TSciChart;
+    private labelStyleProperty;
+    private axisAlignmentProperty;
+    private isInnerAxisProperty;
+    private visibleRangeLimitProperty;
+    private zoomExtentsRangeProperty;
+    private isPrimaryAxisProperty;
+    private isStackedAxisProperty;
+    private penCacheForMajorGridLines;
+    private penCacheForMinorGridLines;
+    private penCacheForMajorTickLines;
+    private penCacheForMinorTickLines;
+    private solidBrushCacheAxisBands;
+    private axisBorderProperty;
+    private solidBrushCacheBorder;
+    private axisLengthProperty;
+    private offsetProperty;
+    private tickCache;
+    /**
+     * Creates an instance of the {@link AxisBase2D}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
+     */
+    protected constructor(webAssemblyContext: TSciChart, options?: IAxisBase2dOptions);
+    /**
+     * @inheritDoc
+     */
+    applyTheme(themeProvider: IThemeProvider): void;
+    onAttach(parentSurface: SciChartSurface, isXAxis: boolean, isPrimaryAxis: boolean): void;
     /**
      * Called internally - measures the axis as part of the layout phase
      */

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -32,6 +32,7 @@ var NumberRange_1 = require("../../../Core/NumberRange");
 var Thickness_1 = require("../../../Core/Thickness");
 var AxisAlignment_1 = require("../../../types/AxisAlignment");
 var BaseType_1 = require("../../../types/BaseType");
+var LabelAlignment_1 = require("../../../types/LabelAlignment");
 var RenderLayer_1 = require("../../../types/RenderLayer");
 var XyDirection_1 = require("../../../types/XyDirection");
 var parseColor_1 = require("../../../utils/parseColor");
@@ -48,7 +49,6 @@ var AxisLayoutState_1 = require("./AxisLayoutState");
 var AxisRenderer_1 = require("./AxisRenderer");
 var AxisTitleRenderer_1 = require("./AxisTitleRenderer");
 var constants_1 = require("./constants");
-var LabelAlignment_1 = require("../../../types/LabelAlignment");
 /**
  * Defines the clipping mode for scrolling operations found on {@link AxisBase2D.scroll}
  */
@@ -149,6 +149,7 @@ var AxisBase2D = /** @class */ (function (_super) {
                 options.labelProvider = classFactory_1.createType(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, webAssemblyContext, options.labelProvider.options);
             }
         }
+        _this.autoRangeAnimationProperty = options === null || options === void 0 ? void 0 : options.autoRangeAnimation;
         return _this;
     }
     Object.defineProperty(AxisBase2D.prototype, "labelProvider", {
@@ -168,38 +169,6 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
-    AxisBase2D.prototype.applyTheme = function (themeProvider) {
-        var previousThemeProvider = this.parentSurface.previousThemeProvider;
-        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
-            this.axisBandsFill = themeProvider.axisBandsFill;
-        }
-        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
-            this.labelStyle = { color: themeProvider.tickTextBrush };
-        }
-        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
-            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
-        }
-        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
-            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
-        }
-        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
-            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
-        }
-    };
-    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
-        this.parentSurface = parentSurface;
-        this.setIsXAxis(isXAxis);
-        this.isPrimaryAxisProperty = isPrimaryAxis;
-    };
     Object.defineProperty(AxisBase2D.prototype, "axisRenderer", {
         /**
          * Gets the {@link AxisRenderer} instance responsible for drawing the axis
@@ -469,6 +438,55 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "autoRangeAnimation", {
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        get: function () {
+            return this.autoRangeAnimationProperty;
+        },
+        /**
+         * Gets or sets a {@link IAutoRangeAnimationOptions} object that controls if and how the visible range is animated during autoRanging
+         */
+        set: function (autoRangeAnimation) {
+            this.autoRangeAnimationProperty = __assign(__assign({}, this.autoRangeAnimation), autoRangeAnimation);
+            // No need to trigger a redraw.  This will take effect anyway if the chart redraws.
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @inheritDoc
+     */
+    AxisBase2D.prototype.applyTheme = function (themeProvider) {
+        var previousThemeProvider = this.parentSurface.previousThemeProvider;
+        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
+            this.axisBandsFill = themeProvider.axisBandsFill;
+        }
+        if (this.labelStyle.color === previousThemeProvider.tickTextBrush) {
+            this.labelStyle = { color: themeProvider.tickTextBrush };
+        }
+        if (this.minorGridLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorGridLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.minorTickLineStyle.color === previousThemeProvider.minorGridLineBrush) {
+            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (this.majorTickLineStyle.color === previousThemeProvider.majorGridLineBrush) {
+            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (this.axisTitleStyle.color === previousThemeProvider.axisTitleColor) {
+            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
+        }
+    };
+    AxisBase2D.prototype.onAttach = function (parentSurface, isXAxis, isPrimaryAxis) {
+        this.parentSurface = parentSurface;
+        this.setIsXAxis(isXAxis);
+        this.isPrimaryAxisProperty = isPrimaryAxis;
+    };
     /**
      * Called internally - measures the axis as part of the layout phase
      */
@@ -491,6 +509,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             this.axisTitleRenderer.desiredHeight = 0;
             this.axisTitleRenderer.desiredWidth = 0;
         }
+        this.isMeasured = true;
     };
     /**
      * Called internally - prepares render data before a draw operation
@@ -694,7 +713,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         var toValue = coordCalc.getDataValue(toCoord);
         var min = fromValue < toValue ? fromValue : toValue;
         var max = fromValue < toValue ? toValue : fromValue;
-        this.animateVisibleRange(new NumberRange_1.NumberRange(min, max), duration, easingFunction);
+        this.parentSurface.addAnimation(this.animateVisibleRange(new NumberRange_1.NumberRange(min, max), duration, easingFunction));
     };
     AxisBase2D.prototype.scale = function (initialRange, delta, isMoreThanHalf) {
         var deltaRange = initialRange.max - initialRange.min;