scichart 2.0.2139 → 2.0.2185

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
@@ -112,10 +122,20 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      */
     keepLabelsWithinAxis?: boolean;
     /**
-     * Default (true) is to not show labels that would overlap.  When using rotation you may want to set this false,
-     * as the bounding box of ratoated text may overlap even if the text itself does not.
+     * Default (true) is to not show labels that would overlap. When using rotation you may want to set this false,
+     * as the bounding box of rotated 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;
+    /**
+     * Sets axis label area thickness, by default the value is calculated to have enough space for labels.
+     * However, this property allows to set minimal width/height for vertical/horizontal axes.
+     * Useful to align seriesViewRects for different charts
+     */
+    axisThickness?: number;
 }
 /**
  * The base class for 2D Chart Axis within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}.
@@ -128,28 +148,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 +156,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
      */
@@ -263,12 +231,9 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      */
     set isStackedAxis(value: boolean);
     /**
-     * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
+     * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
      */
     get axisLength(): number;
-    /**
-     * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
-     */
     set axisLength(value: number);
     /**
      * Gets or sets the offset of the axis position.
@@ -304,6 +269,68 @@ 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;
+    /**
+     * Called when the {@link AxisBase2D} is attached to an {@link SciChartSurface}
+     */
+    onAttach(parentSurface: SciChartSurface, isXAxis: boolean, isPrimaryAxis: boolean): void;
     /**
      * Called internally - measures the axis as part of the layout phase
      */
@@ -362,6 +389,10 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      */
     zoom(fromCoord: number, toCoord: number, duration?: number, easingFunction?: TEasingFn): void;
     scale(initialRange: NumberRange, delta: number, isMoreThanHalf: boolean): void;
+    /**
+     * @inheritDoc
+     */
+    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): import("../../../Core/Animations/GenericAnimation").IGenericAnimation;
     /**
      * @inheritDoc
      */

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -27,11 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisBase2D = exports.EClipMode = void 0;
 var classFactory_1 = require("../../../Builder/classFactory");
 var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
+var NumberRangeAnimator_1 = require("../../../Core/Animations/NumberRangeAnimator");
 var Deleter_1 = require("../../../Core/Deleter");
 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 +52,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}
  */
@@ -97,7 +100,7 @@ var AxisBase2D = /** @class */ (function (_super) {
      * @param options Optional parameters of type {@link IAxisBase2dOptions} used to configure the axis at instantiation time
      */
     function AxisBase2D(webAssemblyContext, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
@@ -132,23 +135,27 @@ var AxisBase2D = /** @class */ (function (_super) {
         _this.penCacheForMinorTickLines = new Pen2DCache_1.Pen2DCache(webAssemblyContext);
         _this.solidBrushCacheAxisBands = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         _this.axisRenderer = new AxisRenderer_1.AxisRenderer(webAssemblyContext);
-        _this.axisRenderer.keepLabelsWithinAxis = (_a = options === null || options === void 0 ? void 0 : options.keepLabelsWithinAxis) !== null && _a !== void 0 ? _a : _this.axisRenderer.keepLabelsWithinAxis;
-        _this.axisRenderer.hideOverlappingLabels = (_b = options === null || options === void 0 ? void 0 : options.hideOverlappingLabels) !== null && _b !== void 0 ? _b : _this.axisRenderer.hideOverlappingLabels;
+        _this.axisRenderer.keepLabelsWithinAxis =
+            (_a = options === null || options === void 0 ? void 0 : options.keepLabelsWithinAxis) !== null && _a !== void 0 ? _a : _this.axisRenderer.keepLabelsWithinAxis;
+        _this.axisRenderer.hideOverlappingLabels =
+            (_b = options === null || options === void 0 ? void 0 : options.hideOverlappingLabels) !== null && _b !== void 0 ? _b : _this.axisRenderer.hideOverlappingLabels;
+        _this.axisRenderer.axisThickness = (_c = options === null || options === void 0 ? void 0 : options.axisThickness) !== null && _c !== void 0 ? _c : _this.axisRenderer.axisThickness;
         _this.axisTitleRenderer = new AxisTitleRenderer_1.AxisTitleRenderer(webAssemblyContext);
         _this.tickCoordinatesProvider = new DefaultTickCoordinatesProvider_1.DefaultTickCoordinatesProvider();
-        _this.visibleRangeLimit = (_c = options === null || options === void 0 ? void 0 : options.visibleRangeLimit) !== null && _c !== void 0 ? _c : _this.visibleRangeLimit;
+        _this.visibleRangeLimit = (_d = options === null || options === void 0 ? void 0 : options.visibleRangeLimit) !== null && _d !== void 0 ? _d : _this.visibleRangeLimit;
         _this.zoomExtentsRange = (options === null || options === void 0 ? void 0 : options.zoomExtentsToInitialRange) ? _this.visibleRange : options === null || options === void 0 ? void 0 : options.zoomExtentsRange;
-        _this.axisAlignment = (_d = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _d !== void 0 ? _d : _this.axisAlignment;
-        _this.axisTitle = (_e = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _e !== void 0 ? _e : _this.axisTitle;
+        _this.axisAlignment = (_e = options === null || options === void 0 ? void 0 : options.axisAlignment) !== null && _e !== void 0 ? _e : _this.axisAlignment;
+        _this.axisTitle = (_f = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _f !== void 0 ? _f : _this.axisTitle;
         _this.labelStyle = __assign(__assign({}, _this.labelStyle), options === null || options === void 0 ? void 0 : options.labelStyle);
         _this.axisBorder = __assign(__assign({}, _this.axisBorder), options === null || options === void 0 ? void 0 : options.axisBorder);
-        _this.isInnerAxis = (_f = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _f !== void 0 ? _f : _this.isInnerAxis;
+        _this.isInnerAxis = (_g = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _g !== void 0 ? _g : _this.isInnerAxis;
         _this.solidBrushCacheBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
         if (options === null || options === void 0 ? void 0 : options.labelProvider) {
             if (!("getLabels" in (options === null || options === void 0 ? void 0 : options.labelProvider))) {
-                options.labelProvider = classFactory_1.createType(BaseType_1.EBaseType.LabelProvider, options.labelProvider.type, webAssemblyContext, options.labelProvider.options);
+                options.labelProvider = (0, 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 +175,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
@@ -222,7 +197,7 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets whether the axis is currently horizontal or not
          */
         get: function () {
-            return AxisAlignment_1.getIsHorizontal(this.axisAlignment);
+            return (0, AxisAlignment_1.getIsHorizontal)(this.axisAlignment);
         },
         enumerable: false,
         configurable: true
@@ -364,7 +339,7 @@ var AxisBase2D = /** @class */ (function (_super) {
     });
     Object.defineProperty(AxisBase2D.prototype, "axisLength", {
         /**
-         * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
+         * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
          */
         get: function () {
             var _a, _b;
@@ -375,9 +350,6 @@ var AxisBase2D = /** @class */ (function (_super) {
             var defaultAxisLength = this.isHorizontalAxis ? seriesViewRect.width : seriesViewRect.height;
             return (_b = this.axisLengthProperty) !== null && _b !== void 0 ? _b : defaultAxisLength;
         },
-        /**
-         * Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
-         */
         set: function (value) {
             this.axisLengthProperty = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
@@ -469,6 +441,56 @@ 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 };
+        }
+    };
+    /**
+     * Called when the {@link AxisBase2D} is attached to an {@link SciChartSurface}
+     */
+    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
      */
@@ -480,7 +502,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             var majorTickLabels = this.getTicks(true).majorTickLabels;
             var drawTicks = this.drawMinorTickLines || this.drawMajorTickLines;
             if (SciChartSurfaceBase_1.DebugForDpi) {
-                console.log("Measure. fontSize: " + this.labelStyle.fontSize + ", dpiAdjusted: " + this.dpiAdjustedLabelStyle.fontSize);
+                console.log("Measure. fontSize: ".concat(this.labelStyle.fontSize, ", dpiAdjusted: ").concat(this.dpiAdjustedLabelStyle.fontSize));
             }
             this.axisRenderer.measure(this.isHorizontalAxis, this.dpiAdjustedLabelStyle, majorTickLabels, this.getTicksMaxSize(), this.labelProvider, this.drawLabels, drawTicks);
             this.axisTitleRenderer.measure(this.dpiAdjustedAxisTitleStyle, this.isHorizontalAxis);
@@ -491,6 +513,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
@@ -505,7 +528,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         var _this = this;
         // Draw the Axis borders
         renderContext.enqueueLayeredDraw(function () {
-            return drawBorder_1.drawBorder(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
+            return (0, drawBorder_1.drawBorder)(renderContext, _this.webAssemblyContext2D, _this.solidBrushCacheBorder, _this.viewRect, _this.axisBorder.borderLeft, _this.axisBorder.borderTop, _this.axisBorder.borderRight, _this.axisBorder.borderBottom, _this.axisBorder.color);
         });
         if (!this.getIsValidForDrawing()) {
             return;
@@ -530,7 +553,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             // Draw axis labels
             if (_this.drawLabels) {
                 if (SciChartSurfaceBase_1.DebugForDpi) {
-                    console.log("Draw. fontSize: " + _this.labelStyle.fontSize + ", dpiAdjusted: " + _this.dpiAdjustedLabelStyle.fontSize);
+                    console.log("Draw. fontSize: ".concat(_this.labelStyle.fontSize, ", dpiAdjusted: ").concat(_this.dpiAdjustedLabelStyle.fontSize));
                 }
                 _this.axisRenderer.drawLabels(renderContext, _this.axisAlignment, _this.isInnerAxis, tickObject.majorTickLabels, tickObject.majorTickCoords, _this.offset, _this.dpiAdjustedLabelStyle, _this.isVerticalChart, _this.flippedCoordinates, _this.labelProvider);
             }
@@ -555,8 +578,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         var drawTickViewRects = function () {
             var viewRect = _this.axisRenderer.viewRect;
             var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
-            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush(parseColor_1.parseColorToUIntArgb("rgba(255,0,0,0.7)"), false);
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
+            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)("rgba(255,0,0,0.7)"), false);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
             vecRects.push_back(nativeRect);
             renderContext.drawRects(vecRects, brush, viewRect.left, viewRect.top);
             nativeRect.delete();
@@ -567,8 +590,8 @@ var AxisBase2D = /** @class */ (function (_super) {
         var drawTitleViewRects = function () {
             var viewRect = _this.axisTitleRenderer.viewRect;
             var vecRects = new _this.webAssemblyContext2D.VectorRectVertex();
-            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush(parseColor_1.parseColorToUIntArgb("rgba(0,255,0,0.7)"), false);
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
+            var brush = new _this.webAssemblyContext2D.SCRTSolidBrush((0, parseColor_1.parseColorToUIntArgb)("rgba(0,255,0,0.7)"), false);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, 0, 0, viewRect.width, viewRect.height);
             vecRects.push_back(nativeRect);
             renderContext.drawRects(vecRects, brush, viewRect.left, viewRect.top);
             nativeRect.delete();
@@ -618,7 +641,8 @@ var AxisBase2D = /** @class */ (function (_super) {
                 .filter(function (s) { return s.yAxisId === _this.id && s.isVisible && s.hasDataSeriesValues(); });
             visibleSeries.forEach(function (rSeries) {
                 // Get pre-calculated XRange if exists, otherwise, fetch from the axis for this series
-                var xVisibleRange = (xRanges === null || xRanges === void 0 ? void 0 : xRanges.containsKey(rSeries.xAxisId)) ? xRanges.item(rSeries.xAxisId)
+                var xVisibleRange = (xRanges === null || xRanges === void 0 ? void 0 : xRanges.containsKey(rSeries.xAxisId))
+                    ? xRanges.item(rSeries.xAxisId)
                     : _this.getXVisibleRange(rSeries.xAxisId);
                 var isXCategoryAxis = _this.getIsXCategoryAxis(rSeries.xAxisId);
                 if (xVisibleRange) {
@@ -712,19 +736,43 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         this.visibleRange = new NumberRange_1.NumberRange(newMin, newMax);
     };
+    /**
+     * @inheritDoc
+     */
+    AxisBase2D.prototype.animateVisibleRange = function (visibleRange, durationMs, easingFunction, onCompleted) {
+        var _this = this;
+        var _a;
+        if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outCubic; }
+        if (onCompleted === void 0) { onCompleted = function () { }; }
+        if (durationMs <= 0) {
+            // Don't allow setting visibleRange to undefined if there is no data
+            this.visibleRange = visibleRange || this.visibleRange;
+            onCompleted();
+            return undefined;
+        }
+        (_a = this.visibleRangeAnimationToken) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.visibleRangeAnimationToken = NumberRangeAnimator_1.NumberRangeAnimator.animate(this.visibleRange, visibleRange, durationMs, function (range) {
+            _this.visibleRange = range;
+        }, function () {
+            _this.visibleRangeAnimationToken = undefined;
+            onCompleted();
+        }, easingFunction);
+        this.parentSurface.addAnimation(this.visibleRangeAnimationToken);
+        return this.visibleRangeAnimationToken;
+    };
     /**
      * @inheritDoc
      */
     AxisBase2D.prototype.delete = function () {
         _super.prototype.delete.call(this);
-        this.penCacheForMajorGridLines = Deleter_1.deleteSafe(this.penCacheForMajorGridLines);
-        this.penCacheForMinorGridLines = Deleter_1.deleteSafe(this.penCacheForMinorGridLines);
-        this.penCacheForMajorTickLines = Deleter_1.deleteSafe(this.penCacheForMajorTickLines);
-        this.penCacheForMinorTickLines = Deleter_1.deleteSafe(this.penCacheForMinorTickLines);
-        this.solidBrushCacheBorder = Deleter_1.deleteSafe(this.solidBrushCacheBorder);
-        this.solidBrushCacheAxisBands = Deleter_1.deleteSafe(this.solidBrushCacheAxisBands);
-        this.labelProviderProperty = Deleter_1.deleteSafe(this.labelProvider);
-        this.axisRendererProperty = Deleter_1.deleteSafe(this.axisRenderer);
+        this.penCacheForMajorGridLines = (0, Deleter_1.deleteSafe)(this.penCacheForMajorGridLines);
+        this.penCacheForMinorGridLines = (0, Deleter_1.deleteSafe)(this.penCacheForMinorGridLines);
+        this.penCacheForMajorTickLines = (0, Deleter_1.deleteSafe)(this.penCacheForMajorTickLines);
+        this.penCacheForMinorTickLines = (0, Deleter_1.deleteSafe)(this.penCacheForMinorTickLines);
+        this.solidBrushCacheBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheBorder);
+        this.solidBrushCacheAxisBands = (0, Deleter_1.deleteSafe)(this.solidBrushCacheAxisBands);
+        this.labelProviderProperty = (0, Deleter_1.deleteSafe)(this.labelProvider);
+        this.axisRendererProperty = (0, Deleter_1.deleteSafe)(this.axisRenderer);
     };
     AxisBase2D.prototype.toJSON = function () {
         var options = {
@@ -839,7 +887,7 @@ var AxisBase2D = /** @class */ (function (_super) {
             if (!isThisBandEven) {
                 return;
             }
-            var nativeRect = createNativeRect_1.createNativeRect(_this.webAssemblyContext2D, direction === XyDirection_1.EXyDirection.YDirection ? 0 : coord0, direction === XyDirection_1.EXyDirection.YDirection ? coord0 : 0, direction === XyDirection_1.EXyDirection.YDirection ? seriesViewRect.width : coord1, direction === XyDirection_1.EXyDirection.YDirection ? coord1 : seriesViewRect.height);
+            var nativeRect = (0, createNativeRect_1.createNativeRect)(_this.webAssemblyContext2D, direction === XyDirection_1.EXyDirection.YDirection ? 0 : coord0, direction === XyDirection_1.EXyDirection.YDirection ? coord0 : 0, direction === XyDirection_1.EXyDirection.YDirection ? seriesViewRect.width : coord1, direction === XyDirection_1.EXyDirection.YDirection ? coord1 : seriesViewRect.height);
             vecRects.push_back(nativeRect);
             nativeRect.delete();
         };
@@ -933,12 +981,16 @@ var AxisBase2D = /** @class */ (function (_super) {
     };
     AxisBase2D.prototype.getMaxXRange = function () {
         var maximumRange = this.getXDataRange();
+        if (!maximumRange)
+            return undefined;
         // TODO: Coerce a zero range
         if (this.growBy) {
             maximumRange = maximumRange.growBy(this.growBy);
         }
         if (this.visibleRangeLimit) {
-            maximumRange = maximumRange.clip(this.visibleRangeLimit);
+            maximumRange = maximumRange
+                ? maximumRange.clip(this.visibleRangeLimit)
+                : this.visibleRange.clip(this.visibleRangeLimit);
         }
         return maximumRange;
     };
@@ -997,5 +1049,5 @@ var AxisBase2D = /** @class */ (function (_super) {
 exports.AxisBase2D = AxisBase2D;
 /** @ignore */
 var getPenForLines = function (penCache, stroke, strokeThickness, strokeDashArray) {
-    return Pen2DCache_1.createPenInCache(penCache, stroke, strokeThickness, 1, strokeDashArray);
+    return (0, Pen2DCache_1.createPenInCache)(penCache, stroke, strokeThickness, 1, strokeDashArray);
 };

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

@@ -1,16 +1,16 @@
 import { TEasingFn } from "../../../Core/Animations/EasingFunctions";
-import { AnimationToken } from "../../../Core/AnimationToken";
+import { IGenericAnimation } from "../../../Core/Animations/GenericAnimation";
 import { EventHandler } from "../../../Core/EventHandler";
 import { IDeletable } from "../../../Core/IDeletable";
 import { NumberRange } from "../../../Core/NumberRange";
 import { Thickness } from "../../../Core/Thickness";
 import { EAutoRange } from "../../../types/AutoRange";
 import { EAxisType } from "../../../types/AxisType";
+import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { TickCoordinatesProvider } from "../../Numerics/TickCoordinateProviders/TickCoordinatesProvider";
 import { TickProvider } from "../../Numerics/TickProviders/TickProvider";
 import { DeltaCalculator } from "./DeltaCalculator/DeltaCalculator";
-import { ELabelAlignment } from "../../../types/LabelAlignment";
 import { IAxisCoreOptions } from "./IAxisCoreOptions";
 import { LabelProvider } from "./LabelProvider/LabelProvider";
 import { VisibleRangeChangedArgs } from "./VisibleRangeChangedArgs";
@@ -136,6 +136,8 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @desc
      */
     visibleRangeChanged: EventHandler<VisibleRangeChangedArgs>;
+    /** A flag to indicate if measure has been called this frame.  Properties updated after measure must trigger a redraw */
+    isMeasured: boolean;
     /**
      * Internal backing property for {@link AxisCore.id}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
@@ -271,7 +273,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * Internal backing property for {@link AxisCore.maxAutoTicks}. To fire {@link AxisCore.invalidateParentCallback}, set the public property
      */
     protected maxAutoTicksProperty: number;
-    protected visibleRangeAnimationToken: AnimationToken;
+    protected visibleRangeAnimationToken: IGenericAnimation;
     protected readonly defaultVisibleRange: NumberRange;
     /**
      * Creates an instance of an {@link AxisCore}
@@ -396,6 +398,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * for {@link CategoryAxis} types.
      */
     set visibleRange(visibleRange: NumberRange);
+    get animatedVisibleRange(): NumberRange;
     /**
      * Sets and animates the visibleRange of the axis from the current value to the provided value over the duration and with
      * {@link TEasingFn | Easing Function} provided
@@ -404,7 +407,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * @param easingFunction the {@link TEasingFn | Easing Function to use}. Default value is outCubic
      * @param onCompleted the callback function
      */
-    animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction?: TEasingFn, onCompleted?: () => void): AnimationToken;
+    abstract animateVisibleRange(visibleRange: NumberRange, durationMs: number, easingFunction: TEasingFn, onCompleted: () => void): IGenericAnimation;
     /**
      * The MajorDelta is the spacing between major gridlines and axis labels.
      * @remarks