scichart 2.0.2194 → 2.1.0-beta.40

package/Charting/Numerics/Resamplers/ResamplingParams.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResamplingParams = void 0;
+var AutoRange_1 = require("../../../types/AutoRange");
+var ResamplingParams = /** @class */ (function () {
+    function ResamplingParams(seriesViewRect, rs, xAxis) {
+        this.zeroLineY = 0;
+        this.precision = 0;
+        this.enableExperimentalResampling = false;
+        this.dataIsFifo = false;
+        this.fifoCapacity = 0;
+        this.viewportRect = seriesViewRect;
+        if (rs) {
+            var dataSeries = rs.dataSeries;
+            this.resamplingMode = rs.resamplingMode;
+            this.precision = rs.resamplingPrecision;
+            if (xAxis) {
+                this.indexesRange = rs.getIndicesRange(xAxis.visibleRange, xAxis.isCategoryAxis);
+                // console.log("visible range", xAxis.visibleRange.min, xAxis.visibleRange.max);
+                // console.log("indexes range", this.indexesRange.min, this.indexesRange.max);
+                this.isCategoryAxis = xAxis.isCategoryAxis;
+                this.isXAxisAutoRanged = xAxis.autoRange === AutoRange_1.EAutoRange.Always;
+                this.xVisibleRange = xAxis.visibleRange;
+            }
+            if (dataSeries) {
+                this.dataHasNaN = dataSeries === null || dataSeries === void 0 ? void 0 : dataSeries.dataDistributionCalculator.containsNaN;
+                this.dataEvenlySpaced = dataSeries === null || dataSeries === void 0 ? void 0 : dataSeries.isEvenlySpaced;
+            }
+        }
+    }
+    ResamplingParams.prototype.clone = function (options) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var rp = new ResamplingParams(undefined, undefined, undefined);
+        rp.zeroLineY = (_a = options === null || options === void 0 ? void 0 : options.zeroLineY) !== null && _a !== void 0 ? _a : this.zeroLineY;
+        rp.precision = (_b = options === null || options === void 0 ? void 0 : options.precision) !== null && _b !== void 0 ? _b : this.precision;
+        rp.xVisibleRange = (_c = options === null || options === void 0 ? void 0 : options.xVisibleRange) !== null && _c !== void 0 ? _c : this.xVisibleRange;
+        rp.indexesRange = (_d = options === null || options === void 0 ? void 0 : options.indicesRange) !== null && _d !== void 0 ? _d : this.indexesRange;
+        rp.viewportRect = (_e = options === null || options === void 0 ? void 0 : options.viewportRect) !== null && _e !== void 0 ? _e : this.viewportRect;
+        rp.isCategoryAxis = (_f = options === null || options === void 0 ? void 0 : options.isCategoryAxis) !== null && _f !== void 0 ? _f : this.isCategoryAxis;
+        rp.isXAxisAutoRanged = (_g = options === null || options === void 0 ? void 0 : options.isXAxisAutoRanged) !== null && _g !== void 0 ? _g : this.isXAxisAutoRanged;
+        rp.resamplingMode = (_h = options === null || options === void 0 ? void 0 : options.resamplingMode) !== null && _h !== void 0 ? _h : this.resamplingMode;
+        rp.renderableSeriesHash = (_j = options === null || options === void 0 ? void 0 : options.renderableSeriesHash) !== null && _j !== void 0 ? _j : this.renderableSeriesHash;
+        rp.enableExperimentalResampling = (_k = options === null || options === void 0 ? void 0 : options.enableExperimentalResampling) !== null && _k !== void 0 ? _k : this.enableExperimentalResampling;
+        rp.dataHasNaN = (_l = options === null || options === void 0 ? void 0 : options.dataHasNaN) !== null && _l !== void 0 ? _l : this.dataHasNaN;
+        rp.dataIsFifo = (_m = options === null || options === void 0 ? void 0 : options.dataIsFifo) !== null && _m !== void 0 ? _m : this.dataIsFifo;
+        rp.fifoCapacity = (_o = options === null || options === void 0 ? void 0 : options.fifoCapacity) !== null && _o !== void 0 ? _o : this.fifoCapacity;
+        rp.dataEvenlySpaced = (_p = options === null || options === void 0 ? void 0 : options.dataEvenlySpaced) !== null && _p !== void 0 ? _p : this.dataEvenlySpaced;
+        return rp;
+    };
+    return ResamplingParams;
+}());
+exports.ResamplingParams = ResamplingParams;

package/Charting/Services/RenderPassData.d.ts

@@ -1,4 +1,5 @@
 import { NumberRange } from "../../Core/NumberRange";
+import { IPointSeries } from "../Model/PointSeries/IPointSeries";
 import { CoordinateCalculatorBase } from "../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 /**
  * @summary RenderPassData contains properties which are passed to {@link BaseRenderableSeries} at the time of drawing
@@ -8,6 +9,8 @@ export declare class RenderPassData {
     readonly xCoordinateCalculator: CoordinateCalculatorBase;
     readonly yCoordinateCalculator: CoordinateCalculatorBase;
     readonly isVerticalChart: boolean;
+    readonly pointSeries?: IPointSeries;
+    readonly resamplingHash?: number;
     /**
      * Creates an instance of RenderPassData
      * @param indexRange The min and max index to data-range currently visible on the {@link SciChartSurface}
@@ -16,6 +19,8 @@ export declare class RenderPassData {
      * @param yCoordinateCalculator The YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
      * @param isVerticalChart A flag indicating if the chart is currently vertically arranged (XAxis on the left, YAxis on the top/bottom)
+     * @param pointSeries The point series
+     * @param resamplingHash The resampling hash value, used for caching
      */
-    constructor(indexRange: NumberRange, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, isVerticalChart: boolean);
+    constructor(indexRange: NumberRange, xCoordinateCalculator: CoordinateCalculatorBase, yCoordinateCalculator: CoordinateCalculatorBase, isVerticalChart: boolean, pointSeries?: IPointSeries, resamplingHash?: number);
 }

package/Charting/Services/RenderPassData.js

@@ -13,12 +13,16 @@ var RenderPassData = /** @class */ (function () {
      * @param yCoordinateCalculator The YAxis {@link CoordinateCalculatorBase | Coordinate Calculator},
      * used to transform between pixel and data-coordinates
      * @param isVerticalChart A flag indicating if the chart is currently vertically arranged (XAxis on the left, YAxis on the top/bottom)
+     * @param pointSeries The point series
+     * @param resamplingHash The resampling hash value, used for caching
      */
-    function RenderPassData(indexRange, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart) {
+    function RenderPassData(indexRange, xCoordinateCalculator, yCoordinateCalculator, isVerticalChart, pointSeries, resamplingHash) {
         this.indexRange = indexRange;
         this.xCoordinateCalculator = xCoordinateCalculator;
         this.yCoordinateCalculator = yCoordinateCalculator;
         this.isVerticalChart = isVerticalChart;
+        this.pointSeries = pointSeries;
+        this.resamplingHash = resamplingHash;
     }
     return RenderPassData;
 }());

package/Charting/Services/RenderPassInfo.d.ts

@@ -0,0 +1,18 @@
+import { NumberRange } from "../../Core/NumberRange";
+import { Rect } from "../../Core/Rect";
+import { IPointSeries } from "../Model/PointSeries/IPointSeries";
+import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
+export declare type TSeriesRenderPassInfo = {
+    pointSeries: IPointSeries;
+    renderableSeries: IRenderableSeries;
+    indicesRange: NumberRange;
+    resamplingHash: number;
+};
+export declare class RenderPassInfo {
+    pointSeriesArray: IPointSeries[];
+    renderableSeriesArray: IRenderableSeries[];
+    indicesRanges: NumberRange[];
+    resamplingHashes: number[];
+    seriesViewRect: Rect;
+    constructor(seriesCount: number, seriesViewRect: Rect);
+}

package/Charting/Services/RenderPassInfo.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderPassInfo = void 0;
+var RenderPassInfo = /** @class */ (function () {
+    function RenderPassInfo(seriesCount, seriesViewRect) {
+        this.pointSeriesArray = [];
+        this.renderableSeriesArray = [];
+        this.indicesRanges = [];
+        this.resamplingHashes = [];
+        this.seriesViewRect = seriesViewRect;
+    }
+    return RenderPassInfo;
+}());
+exports.RenderPassInfo = RenderPassInfo;

package/Charting/Services/SciChartRenderer.d.ts

@@ -1,9 +1,21 @@
+import { Rect } from "../../Core/Rect";
 import { WebGlRenderContext2D } from "../Drawing/WebGlRenderContext2D";
+import { AxisBase2D } from "../Visuals/Axis/AxisBase2D";
+import { IRenderableSeries } from "../Visuals/RenderableSeries/IRenderableSeries";
 import { SciChartSurface } from "../Visuals/SciChartSurface";
+import { TSeriesRenderPassInfo } from "./RenderPassInfo";
 /**
  * A class used internally in SciChart to perform layout, arrangement, data-preparation and rendering on the Cartesian 2D {@link SciChartSurface}
  */
 export declare class SciChartRenderer {
+    /**
+     * Used internally
+     * @param xAxis
+     * @param rs
+     * @param seriesViewRect
+     */
+    static resampleSeries(xAxis: AxisBase2D, rs: IRenderableSeries, seriesViewRect: Rect): TSeriesRenderPassInfo;
+    private static calculateResamplingHash;
     private sciChartSurface;
     private previousTime;
     /**
@@ -20,7 +32,8 @@ export declare class SciChartRenderer {
     private drawSvgAnnotations;
     private validate;
     private updateSvgCanvasSize;
-    private prepareRenderData;
+    private prepareAxesRenderData;
+    private prepareSeriesRenderData;
     private drawAxes;
     private drawSeries;
     private drawDebugAxes;

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
@@ -80,21 +143,22 @@ var SciChartRenderer = /** @class */ (function () {
                 el.type === IAnnotation_1.EAnnotationType.RenderContextVerticalLineAnnotation ||
                 el.type === IAnnotation_1.EAnnotationType.RenderContextAxisMarkerAnnotation);
         });
-        this.drawRenderContextAnnotations(renderContextAnnotations, xyAxesById[0], xyAxesById[1], IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
-        // 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);
+        renderContext.enqueueLayeredDraw(function () {
+            _this.drawRenderContextAnnotations(renderContextAnnotations, xAxesById, yAxesById, IAnnotation_1.EAnnotationLayer.BelowChart, renderContext, seriesViewRect);
+        }, 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
@@ -173,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
@@ -186,7 +250,23 @@ 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);
+            // 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) {
@@ -196,31 +276,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
@@ -228,10 +307,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/CursorTooltipSvgAnnotation.d.ts

@@ -30,6 +30,7 @@ export declare class CursorTooltipSvgAnnotation extends SvgAnnotationBase {
     private tooltipLegendOffsetXProperty;
     private tooltipLegendOffsetYProperty;
     private svgLegend;
+    private previousMousePosition;
     /**
      * Creates an instance of the {@link CursorTooltipSvgAnnotation}
      * @param options

package/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CursorTooltipSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var constants_1 = require("./constants");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
@@ -164,6 +165,11 @@ var CursorTooltipSvgAnnotation = /** @class */ (function (_super) {
      * @inheritDoc
      */
     CursorTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.cursorModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.cursorModifier.getMousePosition();
         if (this.svg) {
             this.delete();
         }

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

@@ -1,3 +1,4 @@
+import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
 import { RolloverModifierRenderableSeriesProps } from "../RenderableSeries/RolloverModifier/RolloverModifierRenderableSeriesProps";
 import { EAnnotationType } from "./IAnnotation";
 import { SvgAnnotationBase } from "./SvgAnnotationBase";
@@ -5,6 +6,10 @@ export declare class RolloverMarkerSvgAnnotation extends SvgAnnotationBase {
     /** @inheritDoc */
     readonly type = EAnnotationType.SVG;
     private tooltipProps;
+    private previousMousePosition;
     constructor(renderableSeriesProps: RolloverModifierRenderableSeriesProps);
+    /** @inheritDoc */
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
+    /** @inheritDoc */
     protected create(): void;
 }

package/Charting/Visuals/Annotations/RolloverMarkerSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverMarkerSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IAnnotation_1 = require("./IAnnotation");
 var SvgAnnotationBase_1 = require("./SvgAnnotationBase");
 var RolloverMarkerSvgAnnotation = /** @class */ (function (_super) {
@@ -25,13 +26,23 @@ 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;
         _this.yCoordShift = -4;
         return _this;
     }
+    /** @inheritDoc */
+    RolloverMarkerSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        _super.prototype.update.call(this, xCalc, yCalc);
+    };
+    /** @inheritDoc */
     RolloverMarkerSvgAnnotation.prototype.create = function () {
         if (this.svg) {
             this.delete();

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

@@ -19,6 +19,7 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
     height: number;
     private svgLegend;
     private seriesInfoProperty;
+    private previousMousePosition;
     /**
      * Creates an instance of the {@link RolloverTooltipSvgAnnotation}
      * @param renderableSeriesProps The {@link RolloverModifierRenderableSeriesProps | props} pass
@@ -33,18 +34,15 @@ export declare class RolloverTooltipSvgAnnotation extends SvgAnnotationBase {
      * Gets or sets seriesInfo {@link SeriesInfo} value on the tooltip
      */
     set seriesInfo(value: SeriesInfo);
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     delete(): void;
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
-    updateSize(width: number, height: number): void;
     /**
-     * @inheritDoc
+     * Updates size of the tooltip
      */
+    updateSize(width: number, height: number): void;
+    /** @inheritDoc */
     protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase): void;
     private updateLegendTooltip;
 }

package/Charting/Visuals/Annotations/RolloverTooltipSvgAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RolloverTooltipSvgAnnotation = void 0;
+var MousePosition_1 = require("../../../types/MousePosition");
 var IDataSeries_1 = require("../../Model/IDataSeries");
 var AnnotationBase_1 = require("./AnnotationBase");
 var constants_1 = require("./constants");
@@ -64,9 +65,7 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.delete = function () {
         var _a;
         if (!this.parentSurface || this.parentSurface.isDeleted)
@@ -76,23 +75,27 @@ var RolloverTooltipSvgAnnotation = /** @class */ (function (_super) {
             this.svgRoot.removeChild(this.svgLegend);
         }
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.update = function (xCalc, yCalc) {
+        var currentMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
+        if (this.previousMousePosition === currentMousePosition && currentMousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
+            return;
+        }
+        this.previousMousePosition = this.tooltipProps.rolloverModifier.getMousePosition();
         if (this.svg) {
             this.delete();
         }
         _super.prototype.update.call(this, xCalc, yCalc);
         this.updateLegendTooltip();
     };
+    /**
+     * Updates size of the tooltip
+     */
     RolloverTooltipSvgAnnotation.prototype.updateSize = function (width, height) {
         this.width = width;
         this.height = height;
     };
-    /**
-     * @inheritDoc
-     */
+    /** @inheritDoc */
     RolloverTooltipSvgAnnotation.prototype.create = function (xCalc, yCalc) {
         var _a;
         var svgString;

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;