scichart 2.0.2204 → 2.1.2267

package/Charting/Services/SciChartRenderer.js

@@ -11,15 +11,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SciChartRenderer = void 0;
 var Dictionary_1 = require("../../Core/Dictionary");
-var NumberRange_1 = require("../../Core/NumberRange");
 var Rect_1 = require("../../Core/Rect");
 var AutoRange_1 = require("../../types/AutoRange");
 var AxisAlignment_1 = require("../../types/AxisAlignment");
 var RenderLayer_1 = require("../../types/RenderLayer");
+var hash_1 = require("../../utils/hash");
+var ResamplingParams_1 = require("../Numerics/Resamplers/ResamplingParams");
 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");
+var RenderPassInfo_1 = require("./RenderPassInfo");
 /**
  * A class used internally in SciChart to perform layout, arrangement, data-preparation and rendering on the Cartesian 2D {@link SciChartSurface}
  */
@@ -31,6 +33,66 @@ var SciChartRenderer = /** @class */ (function () {
     function SciChartRenderer(sciChartSurface) {
         this.sciChartSurface = sciChartSurface;
     }
+    /**
+     * Used internally
+     * @param xAxis
+     * @param rs
+     * @param seriesViewRect
+     */
+    SciChartRenderer.resampleSeries = function (xAxis, rs, seriesViewRect) {
+        /**
+         * Stacked series and Heatmap do not support resampling
+         * If a series does not support resampling, the pointSeries is not used in the drawing provider.
+         * For example, UniformHeatmapDrawingProvider does not use renderPassData.pointSeries,
+         * but LineSeriesDrawingProvider use renderPassData.pointSeries in the draw() method!
+         */
+        if (!rs.supportsResampling)
+            return {
+                pointSeries: rs.toPointSeries(),
+                renderableSeries: rs,
+                indicesRange: undefined,
+                resamplingHash: undefined
+            };
+        var rp = new ResamplingParams_1.ResamplingParams(seriesViewRect, rs, xAxis);
+        if (!rs.needsResampling(rp))
+            return {
+                pointSeries: rs.toPointSeries(),
+                renderableSeries: rs,
+                indicesRange: undefined,
+                resamplingHash: undefined
+            };
+        var resamplingHash = SciChartRenderer.calculateResamplingHash(rs, rp);
+        var prevRPD = rs.getCurrentRenderPassData();
+        var useFromCache = Boolean(prevRPD && prevRPD.resamplingHash === resamplingHash);
+        // console.log("resampling ...");
+        // console.log("useFromCache", useFromCache);
+        var pointSeries = useFromCache ? prevRPD.pointSeries : rs.toPointSeries(rp);
+        return {
+            pointSeries: pointSeries,
+            renderableSeries: rs,
+            indicesRange: rp.indexesRange,
+            resamplingHash: resamplingHash
+        };
+    };
+    SciChartRenderer.calculateResamplingHash = function (rs, rp) {
+        var hashes = [];
+        var enableDrawingOptimizationsHash = hash_1.hashUtils.generateBooleanHash(rs.enableDrawingOptimisations);
+        hashes.push(enableDrawingOptimizationsHash);
+        var dataSeries = rs.dataSeries;
+        if (dataSeries) {
+            var dataSeriesHash = hash_1.hashUtils.generateHash(dataSeries.id);
+            hashes.push(dataSeriesHash);
+            var dataSeriesCountHash = hash_1.hashUtils.generateNumberHash(dataSeries.count());
+            hashes.push(dataSeriesCountHash);
+            var dataSeriesSortedHash = hash_1.hashUtils.generateBooleanHash(dataSeries.dataDistributionCalculator.isSortedAscending);
+            hashes.push(dataSeriesSortedHash);
+            var dataSeriesChangeCountHash = hash_1.hashUtils.generateNumberHash(dataSeries.changeCount);
+            hashes.push(dataSeriesChangeCountHash);
+        }
+        var resamplingParamsHash = hash_1.hashUtils.generateObjectHash(rp);
+        hashes.push(resamplingParamsHash);
+        return hash_1.hashUtils.generateCombinedHash(hashes);
+    };
     /**
      * Render loop for the current {@SciChartSurface}
      * @param renderContext the {@WebGLRenderContext2D} used for drawing
@@ -61,7 +123,8 @@ var SciChartRenderer = /** @class */ (function () {
         var seriesViewRect = this.sciChartSurface.layoutManager.layoutChart(renderContext.viewportSize);
         this.updateSvgCanvasSize(seriesViewRect);
         // Step 4 prepare render data
-        var xyAxesById = this.prepareRenderData();
+        var _a = this.prepareAxesRenderData(), xAxesById = _a.xAxesById, yAxesById = _a.yAxesById;
+        var renderPassInfo = this.prepareSeriesRenderData(seriesViewRect, xAxesById);
         // Draw seriesViewRect border
         this.sciChartSurface.drawBorder(renderContext);
         // Step 5 Draw X, Y axis and gridlines
@@ -81,22 +144,21 @@ var SciChartRenderer = /** @class */ (function () {
                 el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation);
         });
         renderContext.enqueueLayeredDraw(function () {
-            _this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
         }, RenderLayer_1.ERenderLayer.Third);
-        // queue series rendering after grid lines and bands, but before the axes
-        renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, _this.sciChartSurface.renderableSeries.asArray(), renderContext); }, RenderLayer_1.ERenderLayer.Third);
+        // Step 7 Draw series. Queue series rendering after grid lines and bands, but before the axes
+        renderContext.enqueueLayeredDraw(function () { return _this.drawSeries(_this.sciChartSurface, renderPassInfo, renderContext); }, RenderLayer_1.ERenderLayer.Third);
         // Execute rendering of queued elements
         renderContext.drawLayers();
-        // Step 7 Draw series
         // Step 8 Draw annotations above the series
-        this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
+        this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.AboveChart, renderContext, seriesViewRect);
         // Step 9 Draw SVG or Html Overlays
         var svgAnnotations = annotations.filter(function (el) {
             return el.type === IAnnotation_1.EAnnotationType.SVG ||
                 el.type === IAnnotation_1.EAnnotationType.SVGTextAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.SVGCustomAnnotation;
         });
-        this.drawSvgAnnotations(svgAnnotations, xyAxesById[0], xyAxesById[1]);
+        this.drawSvgAnnotations(svgAnnotations, xAxesById, yAxesById);
         // Update watermark
         this.updateWatermark(renderContext, seriesViewRect);
         // Step 10 Call OnParentSurfaceRendered
@@ -175,7 +237,7 @@ var SciChartRenderer = /** @class */ (function () {
             svgRootElement.currentScale = 1;
         }
     };
-    SciChartRenderer.prototype.prepareRenderData = function () {
+    SciChartRenderer.prototype.prepareAxesRenderData = function () {
         var xAxesById = new Dictionary_1.Dictionary();
         var yAxesById = new Dictionary_1.Dictionary();
         // Prepare XAxes
@@ -188,7 +250,26 @@ var SciChartRenderer = /** @class */ (function () {
             yAxesById.add(yAxis.id, yAxis);
             yAxis.prepareRenderData();
         });
-        return [xAxesById, yAxesById];
+        return { xAxesById: xAxesById, yAxesById: yAxesById };
+    };
+    SciChartRenderer.prototype.prepareSeriesRenderData = function (seriesViewRect, xAxesById) {
+        var seriesCount = this.sciChartSurface.renderableSeries.size();
+        var renderPassInfo = new RenderPassInfo_1.RenderPassInfo(seriesCount, seriesViewRect);
+        // TODO: Calculate XRange before resample but YRange after resample for faster autorange on large datasets
+        for (var i = 0; i < this.sciChartSurface.renderableSeries.size(); i++) {
+            var series = this.sciChartSurface.renderableSeries.get(i);
+            // don't try and draw series with no data
+            if (!series.isStacked && !series.dataSeries)
+                continue;
+            // TODO: Do resampling, store result for use in drawing
+            var xAxis = xAxesById.item(series.xAxisId);
+            var seriesRenderPassInfo = SciChartRenderer.resampleSeries(xAxis, series, seriesViewRect);
+            renderPassInfo.renderableSeriesArray.push(seriesRenderPassInfo.renderableSeries);
+            renderPassInfo.pointSeriesArray.push(seriesRenderPassInfo.pointSeries);
+            renderPassInfo.indicesRanges.push(seriesRenderPassInfo.indicesRange);
+            renderPassInfo.resamplingHashes.push(seriesRenderPassInfo.resamplingHash);
+        }
+        return renderPassInfo;
     };
     SciChartRenderer.prototype.drawAxes = function (scs, renderContext) {
         scs.xAxes.asArray().forEach(function (xAxis) {
@@ -198,31 +279,30 @@ var SciChartRenderer = /** @class */ (function () {
             yAxis.draw(renderContext);
         });
     };
-    SciChartRenderer.prototype.drawSeries = function (scs, renderableSeries, renderContext) {
-        var drawSeriesImpl = function (series) {
-            var indexRange = new NumberRange_1.NumberRange(0, 0);
-            var xAxis = scs.xAxes.asArray().find(function (a) { return a.id === series.xAxisId; });
-            if (!xAxis) {
-                throw Error("Cannot find an X Axis with ID = " + series.xAxisId);
-            }
-            var yAxis = scs.yAxes.asArray().find(function (a) { return a.id === series.yAxisId; });
-            if (!yAxis) {
-                throw Error("Cannot find a Y Axis with ID = " + series.yAxisId);
-            }
-            if (xAxis.isVerticalChart && ![AxisAlignment_1.EAxisAlignment.Top, AxisAlignment_1.EAxisAlignment.Bottom].includes(yAxis.axisAlignment)) {
+    SciChartRenderer.prototype.drawSeries = function (scs, renderPassInfo, renderContext) {
+        var renderableSeriesArray = renderPassInfo.renderableSeriesArray, pointSeriesArray = renderPassInfo.pointSeriesArray, resamplingHashes = renderPassInfo.resamplingHashes, indicesRanges = renderPassInfo.indicesRanges;
+        var drawSeriesImpl = function (index) {
+            var renderableSeries = renderableSeriesArray[index];
+            var pointSeries = pointSeriesArray[index];
+            var resamplingHash = resamplingHashes[index];
+            var indexRange = indicesRanges[index];
+            var xAxis = scs.xAxes.asArray().find(function (a) { return a.id === renderableSeries.xAxisId; });
+            if (!xAxis)
+                throw Error("Cannot find an X Axis with ID = " + renderableSeries.xAxisId);
+            var yAxis = scs.yAxes.asArray().find(function (a) { return a.id === renderableSeries.yAxisId; });
+            if (!yAxis)
+                throw Error("Cannot find a Y Axis with ID = " + renderableSeries.yAxisId);
+            if (xAxis.isVerticalChart && ![AxisAlignment_1.EAxisAlignment.Top, AxisAlignment_1.EAxisAlignment.Bottom].includes(yAxis.axisAlignment))
                 throw Error("For vertical chart (chart with X Axis alignment Left or Right) Y Axis alignment should be Top or Bottom, X Axis ID = ".concat(xAxis.id));
-            }
-            if ((0, AxisAlignment_1.getIsVertical)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsVertical)(yAxis.axisAlignment)) {
+            if ((0, AxisAlignment_1.getIsVertical)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsVertical)(yAxis.axisAlignment))
                 throw Error("Both x and y axes can't have vertical alignment");
-            }
-            if ((0, AxisAlignment_1.getIsHorizontal)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsHorizontal)(yAxis.axisAlignment)) {
+            if ((0, AxisAlignment_1.getIsHorizontal)(xAxis.axisAlignment) && (0, AxisAlignment_1.getIsHorizontal)(yAxis.axisAlignment))
                 throw Error("Both x and y axes can't have horizontal alignment");
-            }
             var xCalc = xAxis.getCurrentCoordinateCalculator();
             var yCalc = yAxis.getCurrentCoordinateCalculator();
             try {
-                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xCalc, yCalc, xAxis.isVerticalChart);
-                series.draw(renderContext, renderPassData);
+                var renderPassData = new RenderPassData_1.RenderPassData(indexRange, xCalc, yCalc, xAxis.isVerticalChart, pointSeries, resamplingHash);
+                renderableSeries.draw(renderContext, renderPassData);
             }
             finally {
                 // We can not delete calculators because we use them in Hit Test
@@ -230,10 +310,24 @@ var SciChartRenderer = /** @class */ (function () {
                 // yCalc.delete();
             }
         };
+        var nativeContext = renderContext.getNativeContext();
+        var viewRect = this.sciChartSurface.seriesViewRect;
+        nativeContext.PushMatrix();
+        nativeContext.PushState();
+        nativeContext.Translate(viewRect.x, viewRect.y);
+        nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
         // Draw unselected series first
-        renderableSeries.filter(function (rs) { return rs.isVisible && !rs.isSelected; }).forEach(drawSeriesImpl);
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && !rs.isSelected)
+                drawSeriesImpl(index);
+        });
         // Draw selected series at higher z-index
-        renderableSeries.filter(function (rs) { return rs.isVisible && rs.isSelected; }).forEach(drawSeriesImpl);
+        renderableSeriesArray.forEach(function (rs, index) {
+            if (rs.isVisible && rs.isSelected)
+                drawSeriesImpl(index);
+        });
+        nativeContext.PopMatrix();
+        nativeContext.PopState();
     };
     SciChartRenderer.prototype.drawDebugAxes = function (scs, renderContext) {
         scs.xAxes.asArray().forEach(function (xAxis) {

package/Charting/Visuals/Annotations/AnnotationBase.d.ts

@@ -227,7 +227,7 @@ export declare abstract class AnnotationBase implements IAnnotation, IAdornerPro
     private opacityProperty;
     private annotationLayerProperty;
     private isEditableProperty;
-    private isHiddenProperty;
+    protected isHiddenProperty: boolean;
     private parentSurfaceProperty;
     private x1Property;
     private x2Property;

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -26,7 +26,7 @@ var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
         /** @inheritDoc */
         _this.type = IAnnotation_1.EAnnotationType.SVG;
         _this.tooltipProps = renderableSeriesProps;
-        _this.isHidden = true;
+        _this.isHiddenProperty = true;
         _this.x1 = 0;
         _this.y1 = 0;
         _this.xCoordShift = -4;

package/Charting/Visuals/Annotations/SvgAnnotationBase.js

@@ -38,6 +38,11 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
         var _this = _super.call(this, options) || this;
         /** @inheritDoc */
         _this.isSvgAnnotation = true;
+        /**
+         * The {@link SVGElement} which will be added to the chart
+         */
+        _this.xCoordShiftProperty = 0;
+        _this.yCoordShiftProperty = 0;
         _this.verticalAnchorPointProperty = AnchorPoint_1.EVerticalAnchorPoint.Top;
         _this.horizontalAnchorPointProperty = AnchorPoint_1.EHorizontalAnchorPoint.Left;
         _this.prevX1Coordinate = 0;
@@ -292,8 +297,8 @@ var SvgAnnotationBase = /** @class */ (function (_super) {
     SvgAnnotationBase.prototype.calcAndSetAnnotationBorders = function (xCalc, yCalc) {
         if (!this.svg)
             return;
-        var borderX1 = this.getX1Coordinate(xCalc, yCalc);
-        var borderY1 = this.getY1Coordinate(xCalc, yCalc);
+        var borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
+        var borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
         this.svgDOMRect = this.svg.getBoundingClientRect();
         var borderX2 = borderX1 + this.svgDOMRect.width;
         var borderY2 = borderY1 + this.svgDOMRect.height;

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

@@ -7,6 +7,7 @@ import { EAxisAlignment } from "../../../types/AxisAlignment";
 import { EAxisType } from "../../../types/AxisType";
 import { TBorder } from "../../../types/TBorder";
 import { SCRTPen, SCRTSolidBrush, TSciChart } from "../../../types/TSciChart";
+import { TStackedAxisLength } from "../../../types/TStackedAxisLength";
 import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
 import { IThemeable } from "../../Themes/IThemeable";
 import { IThemeProvider } from "../../Themes/IThemeProvider";
@@ -112,6 +113,13 @@ export interface IAxisBase2dOptions extends IAxisCoreOptions {
      * @remarks Center axis uses inner layout strategy
      */
     isInnerAxis?: boolean;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    stackedAxisLength?: TStackedAxisLength;
     /**
      * Sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
      */
@@ -230,6 +238,20 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
      * This is only used to allow multiple primary axes, so that all stacked axes can draw gridlines
      */
     set isStackedAxis(value: boolean);
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    get stackedAxisLength(): TStackedAxisLength;
+    /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+     * A plain number will be interpreted as a number of pixels.
+     * A number with % will take that percentage of the total length.
+     * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+     * @remarks The axis length doesn't include border sizes
+     */
+    set stackedAxisLength(value: TStackedAxisLength);
     /**
      * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
      */
@@ -308,6 +330,7 @@ export declare abstract class AxisBase2D extends AxisCore implements IThemeable
     private zoomExtentsRangeProperty;
     private isPrimaryAxisProperty;
     private isStackedAxisProperty;
+    private stackedAxisLengthProperty;
     private penCacheForMajorGridLines;
     private penCacheForMinorGridLines;
     private penCacheForMajorTickLines;

package/Charting/Visuals/Axis/AxisBase2D.js

@@ -100,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, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var _this = _super.call(this, options) || this;
         /**
          * Gets the {@link AxisLayoutState} class which manages layout
@@ -149,6 +149,7 @@ var AxisBase2D = /** @class */ (function (_super) {
         _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 = (_g = options === null || options === void 0 ? void 0 : options.isInnerAxis) !== null && _g !== void 0 ? _g : _this.isInnerAxis;
+        _this.stackedAxisLength = (_h = options === null || options === void 0 ? void 0 : options.stackedAxisLength) !== null && _h !== void 0 ? _h : _this.stackedAxisLength;
         _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))) {
@@ -232,8 +233,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * SciChart also supports XAxis on the left and YAxis on the top to rotate / create vertical charts.
          */
         set: function (axisAlignment) {
-            this.axisAlignmentProperty = axisAlignment;
-            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_ALIGNMENT);
+            if (this.axisAlignmentProperty !== axisAlignment) {
+                this.axisAlignmentProperty = axisAlignment;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_ALIGNMENT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -249,8 +252,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets a property which limits {@link AxisCore.visibleRange}, meaning the chart cannot autorange outside that range
          */
         set: function (visibleRangeLimit) {
-            this.visibleRangeLimitProperty = visibleRangeLimit;
-            this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE_LIMIT);
+            if (!NumberRange_1.NumberRange.areEqual(this.visibleRangeLimitProperty, visibleRangeLimit)) {
+                this.visibleRangeLimitProperty = visibleRangeLimit;
+                this.notifyPropertyChanged(constants_1.PROPERTY.VISIBLE_RANGE_LIMIT);
+            }
         },
         enumerable: false,
         configurable: true
@@ -266,8 +271,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets a property which, if it is set, will be used as the range when zooming extents, rather than the data max range
          */
         set: function (zoomExtentsRange) {
-            this.zoomExtentsRangeProperty = zoomExtentsRange;
-            this.notifyPropertyChanged(constants_1.PROPERTY.ZOOMEXTENTS_RANGE);
+            if (!NumberRange_1.NumberRange.areEqual(this.zoomExtentsRangeProperty, zoomExtentsRange)) {
+                this.zoomExtentsRangeProperty = zoomExtentsRange;
+                this.notifyPropertyChanged(constants_1.PROPERTY.ZOOMEXTENTS_RANGE);
+            }
         },
         enumerable: false,
         configurable: true
@@ -285,8 +292,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * @remarks Center axis uses inner layout strategy
          */
         set: function (value) {
-            this.isInnerAxisProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_INNER_AXIS);
+            if (this.isInnerAxisProperty !== value) {
+                this.isInnerAxisProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_INNER_AXIS);
+            }
         },
         enumerable: false,
         configurable: true
@@ -307,15 +316,17 @@ var AxisBase2D = /** @class */ (function (_super) {
          */
         set: function (value) {
             var _this = this;
-            this.isPrimaryAxisProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.IS_PRIMARY_AXIS);
-            if (value && !this.isStackedAxis) {
-                var axes = this.isXAxis ? this.parentSurface.xAxes : this.parentSurface.yAxes;
-                axes.asArray().forEach(function (a) {
-                    if (a !== _this && !a.isStackedAxis) {
-                        a.isPrimaryAxis = false;
-                    }
-                });
+            if (this.isPrimaryAxisProperty !== value) {
+                this.isPrimaryAxisProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.IS_PRIMARY_AXIS);
+                if (value && !this.isStackedAxis) {
+                    var axes = this.isXAxis ? this.parentSurface.xAxes : this.parentSurface.yAxes;
+                    axes.asArray().forEach(function (a) {
+                        if (a !== _this && !a.isStackedAxis) {
+                            a.isPrimaryAxis = false;
+                        }
+                    });
+                }
             }
         },
         enumerable: false,
@@ -337,6 +348,31 @@ var AxisBase2D = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisBase2D.prototype, "stackedAxisLength", {
+        /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+         * A plain number will be interpreted as a number of pixels.
+         * A number with % will take that percentage of the total length.
+         * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+         * @remarks The axis length doesn't include border sizes
+         */
+        get: function () {
+            return this.stackedAxisLengthProperty;
+        },
+        /** Gets or sets the length of a stacked axis as an absolute number or percentage, e.g. 100, or "30%".
+         * A plain number will be interpreted as a number of pixels.
+         * A number with % will take that percentage of the total length.
+         * Stacked axes without a defined length will have the remaining unreserved spaced split between them.
+         * @remarks The axis length doesn't include border sizes
+         */
+        set: function (value) {
+            if (this.stackedAxisLengthProperty !== value) {
+                this.stackedAxisLengthProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(AxisBase2D.prototype, "axisLength", {
         /**
          * Called internally - Gets or sets the length the current Axis. E.g. width of horizontal axis or height of vertical axis.
@@ -351,8 +387,10 @@ var AxisBase2D = /** @class */ (function (_super) {
             return (_b = this.axisLengthProperty) !== null && _b !== void 0 ? _b : defaultAxisLength;
         },
         set: function (value) {
-            this.axisLengthProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            if (this.axisLengthProperty !== value) {
+                this.axisLengthProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LENGTH);
+            }
         },
         enumerable: false,
         configurable: true
@@ -369,8 +407,10 @@ var AxisBase2D = /** @class */ (function (_super) {
          * Gets or sets the offset of the axis position
          */
         set: function (value) {
-            this.offsetProperty = value;
-            this.notifyPropertyChanged(constants_1.PROPERTY.OFFSET);
+            if (this.offsetProperty !== value) {
+                this.offsetProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.OFFSET);
+            }
         },
         enumerable: false,
         configurable: true
@@ -676,8 +716,15 @@ var AxisBase2D = /** @class */ (function (_super) {
         }
         var translatedRange = this.getCurrentCoordinateCalculator().translateBy(pixelsToScroll, startVisibleRange);
         if (this.visibleRangeLimit) {
-            if (translatedRange.min < this.visibleRangeLimit.min || translatedRange.max > this.visibleRangeLimit.max) {
-                return false;
+            var limitDelta = 0;
+            if (translatedRange.min < this.visibleRangeLimit.min) {
+                limitDelta = this.visibleRangeLimit.min - translatedRange.min;
+            }
+            else if (this.visibleRangeLimit.max < translatedRange.max) {
+                limitDelta = this.visibleRangeLimit.max - translatedRange.max;
+            }
+            if (limitDelta) {
+                translatedRange = new NumberRange_1.NumberRange(translatedRange.min + limitDelta, translatedRange.max + limitDelta);
             }
         }
         this.visibleRange = translatedRange;

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

@@ -275,6 +275,7 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
     protected maxAutoTicksProperty: number;
     protected visibleRangeAnimationToken: IGenericAnimation;
     protected readonly defaultVisibleRange: NumberRange;
+    protected allowFastMathProperty: boolean;
     /**
      * Creates an instance of an {@link AxisCore}
      * @param options Optional parameters of type {@link IAxisCoreOptions} used to define properties at instantiation time
@@ -290,6 +291,16 @@ export declare abstract class AxisCore implements IAxisParams, IDeletable {
      * See {@link AxisBase2D.axisAlignment} if you want to set a 2D Axis alignment to the left, right, top or bottom
      */
     get isXAxis(): boolean;
+    /**
+     * When true, 32-bit faster paths for coordinate calculation maths are used. This improves performance in
+     * edge-cases where every CPU cycle counts.
+     */
+    get allowFastMath(): boolean;
+    /**
+     * When true, 32-bit faster paths for coordinate calculation maths are used. This improves performance in
+     * edge-cases where every CPU cycle counts.
+     */
+    set allowFastMath(allowFastMath: boolean);
     /**
      * When true, the axis has a valid {@link AxisCore.visibleRange} which can be drawn
      * @remarks

package/Charting/Visuals/Axis/AxisCore.js

@@ -44,7 +44,7 @@ var AxisCore = /** @class */ (function () {
      * @param options Optional parameters of type {@link IAxisCoreOptions} used to define properties at instantiation time
      */
     function AxisCore(options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         /**
          * An {@link EventHandler} which fires a callback when the {@link AxisCore.visibleRange} property changes.
          * @desc
@@ -161,6 +161,7 @@ var AxisCore = /** @class */ (function () {
          */
         this.maxAutoTicksProperty = 10;
         this.defaultVisibleRange = new NumberRange_1.NumberRange(0, 10);
+        this.allowFastMathProperty = false;
         this.visibleRange = (options === null || options === void 0 ? void 0 : options.visibleRange) || this.defaultVisibleRange;
         this.id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : this.id;
         this.growBy = (_b = options === null || options === void 0 ? void 0 : options.growBy) !== null && _b !== void 0 ? _b : this.growBy;
@@ -168,23 +169,24 @@ var AxisCore = /** @class */ (function () {
         this.isVisible = (_d = options === null || options === void 0 ? void 0 : options.isVisible) !== null && _d !== void 0 ? _d : this.isVisible;
         this.axisTitle = (_e = options === null || options === void 0 ? void 0 : options.axisTitle) !== null && _e !== void 0 ? _e : this.axisTitle;
         this.axisTitleStyle = (_f = options === null || options === void 0 ? void 0 : options.axisTitleStyle) !== null && _f !== void 0 ? _f : this.axisTitleStyle;
-        this.autoTicksProperty = (_g = options === null || options === void 0 ? void 0 : options.autoTicks) !== null && _g !== void 0 ? _g : this.autoTicksProperty;
-        this.maxAutoTicksProperty = (_h = options === null || options === void 0 ? void 0 : options.maxAutoTicks) !== null && _h !== void 0 ? _h : this.maxAutoTicksProperty;
-        this.minorsPerMajorProperty = (_j = options === null || options === void 0 ? void 0 : options.minorsPerMajor) !== null && _j !== void 0 ? _j : this.minorsPerMajorProperty;
-        this.majorDeltaProperty = (_k = options === null || options === void 0 ? void 0 : options.majorDelta) !== null && _k !== void 0 ? _k : this.majorDeltaProperty;
-        this.minorDeltaProperty = (_l = options === null || options === void 0 ? void 0 : options.minorDelta) !== null && _l !== void 0 ? _l : this.minorDeltaProperty;
-        this.drawLabelsProperty = (_m = options === null || options === void 0 ? void 0 : options.drawLabels) !== null && _m !== void 0 ? _m : this.drawLabelsProperty;
-        this.drawMajorTickLinesProperty = (_o = options === null || options === void 0 ? void 0 : options.drawMajorTickLines) !== null && _o !== void 0 ? _o : this.drawMajorTickLinesProperty;
-        this.drawMinorTickLinesProperty = (_p = options === null || options === void 0 ? void 0 : options.drawMinorTickLines) !== null && _p !== void 0 ? _p : this.drawMinorTickLinesProperty;
-        this.drawMinorGridLinesProperty = (_q = options === null || options === void 0 ? void 0 : options.drawMinorGridLines) !== null && _q !== void 0 ? _q : this.drawMinorGridLinesProperty;
-        this.drawMajorGridLinesProperty = (_r = options === null || options === void 0 ? void 0 : options.drawMajorGridLines) !== null && _r !== void 0 ? _r : this.drawMajorGridLinesProperty;
-        this.majorGridLineStyleProperty = (_s = options === null || options === void 0 ? void 0 : options.majorGridLineStyle) !== null && _s !== void 0 ? _s : this.majorGridLineStyleProperty;
-        this.minorGridLineStyleProperty = (_t = options === null || options === void 0 ? void 0 : options.minorGridLineStyle) !== null && _t !== void 0 ? _t : this.minorGridLineStyleProperty;
-        this.majorTickLineStyleProperty = (_u = options === null || options === void 0 ? void 0 : options.majorTickLineStyle) !== null && _u !== void 0 ? _u : this.majorTickLineStyleProperty;
-        this.minorTickLineStyleProperty = (_v = options === null || options === void 0 ? void 0 : options.minorTickLineStyle) !== null && _v !== void 0 ? _v : this.minorTickLineStyleProperty;
-        this.drawMajorBandsProperty = (_w = options === null || options === void 0 ? void 0 : options.drawMajorBands) !== null && _w !== void 0 ? _w : this.drawMajorBandsProperty;
-        this.axisBandsFillProperty = (_x = options === null || options === void 0 ? void 0 : options.axisBandsFill) !== null && _x !== void 0 ? _x : this.axisBandsFillProperty;
-        this.flippedCoordinatesProperty = (_y = options === null || options === void 0 ? void 0 : options.flippedCoordinates) !== null && _y !== void 0 ? _y : this.flippedCoordinatesProperty;
+        this.allowFastMath = (_g = options === null || options === void 0 ? void 0 : options.allowFastMath) !== null && _g !== void 0 ? _g : this.allowFastMathProperty;
+        this.autoTicksProperty = (_h = options === null || options === void 0 ? void 0 : options.autoTicks) !== null && _h !== void 0 ? _h : this.autoTicksProperty;
+        this.maxAutoTicksProperty = (_j = options === null || options === void 0 ? void 0 : options.maxAutoTicks) !== null && _j !== void 0 ? _j : this.maxAutoTicksProperty;
+        this.minorsPerMajorProperty = (_k = options === null || options === void 0 ? void 0 : options.minorsPerMajor) !== null && _k !== void 0 ? _k : this.minorsPerMajorProperty;
+        this.majorDeltaProperty = (_l = options === null || options === void 0 ? void 0 : options.majorDelta) !== null && _l !== void 0 ? _l : this.majorDeltaProperty;
+        this.minorDeltaProperty = (_m = options === null || options === void 0 ? void 0 : options.minorDelta) !== null && _m !== void 0 ? _m : this.minorDeltaProperty;
+        this.drawLabelsProperty = (_o = options === null || options === void 0 ? void 0 : options.drawLabels) !== null && _o !== void 0 ? _o : this.drawLabelsProperty;
+        this.drawMajorTickLinesProperty = (_p = options === null || options === void 0 ? void 0 : options.drawMajorTickLines) !== null && _p !== void 0 ? _p : this.drawMajorTickLinesProperty;
+        this.drawMinorTickLinesProperty = (_q = options === null || options === void 0 ? void 0 : options.drawMinorTickLines) !== null && _q !== void 0 ? _q : this.drawMinorTickLinesProperty;
+        this.drawMinorGridLinesProperty = (_r = options === null || options === void 0 ? void 0 : options.drawMinorGridLines) !== null && _r !== void 0 ? _r : this.drawMinorGridLinesProperty;
+        this.drawMajorGridLinesProperty = (_s = options === null || options === void 0 ? void 0 : options.drawMajorGridLines) !== null && _s !== void 0 ? _s : this.drawMajorGridLinesProperty;
+        this.majorGridLineStyleProperty = (_t = options === null || options === void 0 ? void 0 : options.majorGridLineStyle) !== null && _t !== void 0 ? _t : this.majorGridLineStyleProperty;
+        this.minorGridLineStyleProperty = (_u = options === null || options === void 0 ? void 0 : options.minorGridLineStyle) !== null && _u !== void 0 ? _u : this.minorGridLineStyleProperty;
+        this.majorTickLineStyleProperty = (_v = options === null || options === void 0 ? void 0 : options.majorTickLineStyle) !== null && _v !== void 0 ? _v : this.majorTickLineStyleProperty;
+        this.minorTickLineStyleProperty = (_w = options === null || options === void 0 ? void 0 : options.minorTickLineStyle) !== null && _w !== void 0 ? _w : this.minorTickLineStyleProperty;
+        this.drawMajorBandsProperty = (_x = options === null || options === void 0 ? void 0 : options.drawMajorBands) !== null && _x !== void 0 ? _x : this.drawMajorBandsProperty;
+        this.axisBandsFillProperty = (_y = options === null || options === void 0 ? void 0 : options.axisBandsFill) !== null && _y !== void 0 ? _y : this.axisBandsFillProperty;
+        this.flippedCoordinatesProperty = (_z = options === null || options === void 0 ? void 0 : options.flippedCoordinates) !== null && _z !== void 0 ? _z : this.flippedCoordinatesProperty;
     }
     Object.defineProperty(AxisCore.prototype, "isCategoryAxis", {
         /**
@@ -208,6 +210,25 @@ var AxisCore = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(AxisCore.prototype, "allowFastMath", {
+        /**
+         * When true, 32-bit faster paths for coordinate calculation maths are used. This improves performance in
+         * edge-cases where every CPU cycle counts.
+         */
+        get: function () {
+            return this.allowFastMathProperty;
+        },
+        /**
+         * When true, 32-bit faster paths for coordinate calculation maths are used. This improves performance in
+         * edge-cases where every CPU cycle counts.
+         */
+        set: function (allowFastMath) {
+            this.allowFastMathProperty = allowFastMath;
+            this.notifyPropertyChanged(constants_1.PROPERTY.ALLOW_FAST_MATH);
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * When true, the axis has a valid {@link AxisCore.visibleRange} which can be drawn
      * @remarks

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

@@ -25,6 +25,7 @@ export declare class AxisRenderer implements IDeletable {
     private measureTextCanvas;
     private keepLabelsWithinAxisProperty;
     private hideOverlappingLabelsProperty;
+    private vertices;
     /**
      * Creates an instance of a {@link AxisRenderer}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and