scichart 2.2.2416 → 3.0.0-beta.224

package/Charting/Visuals/RenderableSeries/DrawingProviders/LineSeriesDrawingProvider.js

@@ -20,6 +20,7 @@ var Deleter_1 = require("../../../../Core/Deleter");
 var SeriesType_1 = require("../../../../types/SeriesType");
 var Pen2DCache_1 = require("../../../Drawing/Pen2DCache");
 var WebGlRenderContext2D_1 = require("../../../Drawing/WebGlRenderContext2D");
+var BaseLineRenderableSeries_1 = require("../BaseLineRenderableSeries");
 var constants_1 = require("../constants");
 var BaseSeriesDrawingProvider_1 = require("./BaseSeriesDrawingProvider");
 /**
@@ -34,8 +35,8 @@ var LineSeriesDrawingProvider = /** @class */ (function (_super) {
      * access to our WebGL2 Engine and WebAssembly numerical methods
      * @param parentSeries the parent {@link FastLineRenderableSeries} which this drawing provider is attached to
      */
-    function LineSeriesDrawingProvider(webAssemblyContext, parentSeries) {
-        var _this = _super.call(this, webAssemblyContext, parentSeries) || this;
+    function LineSeriesDrawingProvider(webAssemblyContext, parentSeries, ySelector, xSelector) {
+        var _this = _super.call(this, webAssemblyContext, parentSeries, ySelector, xSelector) || this;
         _this.linesPenCache = new Pen2DCache_1.Pen2DCache(webAssemblyContext);
         _this.args = new webAssemblyContext.SCRTLineDrawingParams();
         return _this;
@@ -60,18 +61,36 @@ var LineSeriesDrawingProvider = /** @class */ (function (_super) {
             propertyName === constants_1.PROPERTY.PALETTE_PROVIDER ||
             propertyName === constants_1.PROPERTY.OPACITY ||
             propertyName === constants_1.PROPERTY.STROKE_DASH_ARRAY) {
-            var _a = this.parentSeries, stroke = _a.stroke, strokeThickness = _a.strokeThickness, opacity = _a.opacity, strokeDashArray = _a.strokeDashArray;
-            (0, Pen2DCache_1.createPenInCache)(this.linesPenCache, stroke, strokeThickness, opacity, strokeDashArray);
+            var _a = this.getProperties(this.parentSeries), stroke = _a.stroke, strokeThickness = _a.strokeThickness, opacity = _a.opacity, strokeDashArray = _a.strokeDashArray;
+            if (stroke) {
+                (0, Pen2DCache_1.createPenInCache)(this.linesPenCache, stroke, strokeThickness, opacity !== null && opacity !== void 0 ? opacity : 1, strokeDashArray);
+            }
         }
     };
+    /** A mapping function to get the pen properties from the parent series */
+    LineSeriesDrawingProvider.prototype.getProperties = function (parentSeries) {
+        var stroke = parentSeries.stroke, strokeThickness = parentSeries.strokeThickness, opacity = parentSeries.opacity, strokeDashArray = parentSeries.strokeDashArray, isDigitalLine = parentSeries.isDigitalLine, drawNaNAs = parentSeries.drawNaNAs, lineType = parentSeries.lineType;
+        return {
+            stroke: stroke,
+            strokeThickness: strokeThickness,
+            opacity: opacity,
+            strokeDashArray: strokeDashArray,
+            isDigitalLine: isDigitalLine,
+            drawNaNAs: drawNaNAs,
+            lineType: lineType,
+            containsNaN: undefined
+        };
+    };
     /**
      * @inheritDoc
      */
     LineSeriesDrawingProvider.prototype.onAttachSeries = function () {
         _super.prototype.onAttachSeries.call(this);
         this.nativeDrawingProvider = new this.webAssemblyContext.SCRTLineSeriesDrawingProvider();
-        var _a = this.parentSeries, stroke = _a.stroke, strokeThickness = _a.strokeThickness, opacity = _a.opacity, strokeDashArray = _a.strokeDashArray;
-        (0, Pen2DCache_1.createPenInCache)(this.linesPenCache, stroke, strokeThickness, opacity, strokeDashArray);
+        var _a = this.getProperties(this.parentSeries), stroke = _a.stroke, strokeThickness = _a.strokeThickness, opacity = _a.opacity, strokeDashArray = _a.strokeDashArray;
+        if (stroke) {
+            (0, Pen2DCache_1.createPenInCache)(this.linesPenCache, stroke, strokeThickness, opacity !== null && opacity !== void 0 ? opacity : 1, strokeDashArray);
+        }
     };
     /**
      * @inheritDoc
@@ -84,27 +103,31 @@ var LineSeriesDrawingProvider = /** @class */ (function (_super) {
      * @inheritDoc
      */
     LineSeriesDrawingProvider.prototype.draw = function (renderContext, renderPassData) {
+        var _a = this.getProperties(this.parentSeries), stroke = _a.stroke, isDigitalLine = _a.isDigitalLine, lineType = _a.lineType, drawNaNAs = _a.drawNaNAs, containsNaNOverride = _a.containsNaN;
         var linesPen = (0, Pen2DCache_1.getScrtPenFromCache)(this.linesPenCache);
-        if (!linesPen) {
+        if (!linesPen || !stroke) {
             return;
         }
         var pointSeries = renderPassData.pointSeries;
         var containsNaN = this.parentSeries.dataSeries.dataDistributionCalculator.containsNaN;
+        containsNaN = containsNaNOverride !== null && containsNaNOverride !== void 0 ? containsNaNOverride : containsNaN;
         this.args.Reset();
         this.args.SetLinesPen(linesPen);
-        this.args.isDigitalLine = this.parentSeries.isDigitalLine;
+        this.args.isDigitalLine = isDigitalLine || lineType !== BaseLineRenderableSeries_1.ELineType.Normal;
+        this.args.drawDigitalVertical = lineType !== BaseLineRenderableSeries_1.ELineType.DigitalNoEdge;
+        this.args.digitalYX = lineType === BaseLineRenderableSeries_1.ELineType.DigitalYX;
         this.args.forceShaderMethod = true;
         this.args.containsNaN = containsNaN;
         this.args.lineGaps = containsNaN
-            ? this.parentSeries.drawNaNAs === WebGlRenderContext2D_1.ELineDrawMode.DiscontinuousLine
+            ? drawNaNAs === WebGlRenderContext2D_1.ELineDrawMode.DiscontinuousLine
                 ? this.webAssemblyContext.SCRTLineGapMode.DrawGaps
                 : this.webAssemblyContext.SCRTLineGapMode.CloseGaps
             : this.webAssemblyContext.SCRTLineGapMode.Default;
         this.args.verticalChart = renderPassData.isVerticalChart;
         var isCategoryAxis = renderPassData.xCoordinateCalculator.isCategoryCoordinateCalculator;
-        var xValues = pointSeries.xValues;
+        var xValues = this.xSelector(pointSeries);
         var xDrawValues = isCategoryAxis ? pointSeries.indexes : xValues;
-        var yDrawValues = pointSeries.yValues;
+        var yDrawValues = this.ySelector(pointSeries);
         var isSplineLineSeries = this.parentSeries.type === SeriesType_1.ESeriesType.SplineLineSeries && xValues.size() > 1;
         if (isSplineLineSeries) {
             var spline = this.parentSeries;

package/Charting/Visuals/RenderableSeries/DrawingProviders/NonUniformHeatmapDrawingProvider.d.ts

@@ -0,0 +1,36 @@
+import { TSciChart } from "../../../../types/TSciChart";
+import { WebGlRenderContext2D } from "../../../Drawing/WebGlRenderContext2D";
+import { RenderPassData } from "../../../Services/RenderPassData";
+import { NonUniformHeatmapRenderableSeries } from "../NonUniformHeatmapRenderableSeries";
+import { BaseSeriesDrawingProvider } from "./BaseSeriesDrawingProvider";
+/**
+ * Used internally - a drawing provider performs drawing for a {@link NonUniformHeatmapRenderableSeries} using
+ * our WebAssembly WebGL rendering engine
+ */
+export declare class NonUniformHeatmapDrawingProvider extends BaseSeriesDrawingProvider<NonUniformHeatmapRenderableSeries> {
+    private heatTextureCache;
+    private colorDataVector;
+    private colorGradientScale;
+    private getMemoizedHeatmapTexture;
+    /**
+     * Creates an instance of the {@link UniformHeatmapDrawingProvider}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param parentSeries the parent {@link UniformHeatmapRenderableSeries} which this drawing provider is attached to
+     */
+    constructor(webAssemblyContext: TSciChart, parentSeries: NonUniformHeatmapRenderableSeries);
+    /**
+     * @inheritDoc
+     */
+    delete(): void;
+    /**
+     * @inheritDoc
+     */
+    onSeriesPropertyChange(propertyName: string): void;
+    /**
+     * @inheritDoc
+     */
+    draw(renderContext: WebGlRenderContext2D, renderPassData: RenderPassData): void;
+    private drawHeatmapInTypescript;
+    private calculateHeatmapTexture;
+}

package/Charting/Visuals/RenderableSeries/DrawingProviders/NonUniformHeatmapDrawingProvider.js

@@ -0,0 +1,493 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NonUniformHeatmapDrawingProvider = void 0;
+var Deleter_1 = require("../../../../Core/Deleter");
+var NumberRange_1 = require("../../../../Core/NumberRange");
+var Rect_1 = require("../../../../Core/Rect");
+var colorUtil_1 = require("../../../../utils/colorUtil");
+var memoize_1 = require("../../../../utils/memoize");
+var parseColor_1 = require("../../../../utils/parseColor");
+var TextureCache_1 = require("../../../Drawing/TextureCache");
+var BaseHeatmapRenderableSeries_1 = require("../BaseHeatmapRenderableSeries");
+var constants_1 = require("../constants");
+var BaseSeriesDrawingProvider_1 = require("./BaseSeriesDrawingProvider");
+// TODO figure out if other value is needed
+var precision = 100;
+/**
+ * Used internally - a drawing provider performs drawing for a {@link NonUniformHeatmapRenderableSeries} using
+ * our WebAssembly WebGL rendering engine
+ */
+var NonUniformHeatmapDrawingProvider = /** @class */ (function (_super) {
+    __extends(NonUniformHeatmapDrawingProvider, _super);
+    /**
+     * Creates an instance of the {@link UniformHeatmapDrawingProvider}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param parentSeries the parent {@link UniformHeatmapRenderableSeries} which this drawing provider is attached to
+     */
+    function NonUniformHeatmapDrawingProvider(webAssemblyContext, parentSeries) {
+        var _this = _super.call(this, webAssemblyContext, parentSeries) || this;
+        _this.heatTextureCache = new TextureCache_1.TextureCache(webAssemblyContext);
+        _this.colorDataVector = new webAssemblyContext.UIntVector();
+        _this.onSeriesPropertyChange(constants_1.PROPERTY.DATA_SERIES);
+        _this.onSeriesPropertyChange(constants_1.PROPERTY.COLOR_MAP);
+        return _this;
+    }
+    /**
+     * @inheritDoc
+     */
+    NonUniformHeatmapDrawingProvider.prototype.delete = function () {
+        this.colorDataVector = (0, Deleter_1.deleteSafe)(this.colorDataVector);
+        this.heatTextureCache = (0, Deleter_1.deleteSafe)(this.heatTextureCache);
+        _super.prototype.delete.call(this);
+    };
+    /**
+     * @inheritDoc
+     */
+    NonUniformHeatmapDrawingProvider.prototype.onSeriesPropertyChange = function (propertyName) {
+        var recreateGradientColorScale = 
+        // TODO this handles data updating using setZValue, consider invalidating colorData cache instead
+        propertyName === constants_1.PROPERTY.DATA_SERIES ||
+            propertyName === constants_1.PROPERTY.COLOR_MAP ||
+            propertyName.includes(BaseHeatmapRenderableSeries_1.COLOR_MAP_PREFIX) ||
+            propertyName === constants_1.PROPERTY.OPACITY;
+        if (recreateGradientColorScale) {
+            // TODO check case when colormap is passed via setter
+            this.colorGradientScale = createColorMap(this.parentSeries.colorMap.gradientStops, precision);
+        }
+    };
+    /**
+     * @inheritDoc
+     */
+    NonUniformHeatmapDrawingProvider.prototype.draw = function (renderContext, renderPassData) {
+        var isVerticalChart = renderPassData.isVerticalChart;
+        var dataSeries = this.parentSeries.dataSeries;
+        var seriesViewRect = this.parentSeries.parentSurface.seriesViewRect;
+        var colorMap = this.parentSeries.colorMap;
+        var colorGradientScale = this.colorGradientScale;
+        var zValues = dataSeries.getZValues();
+        var xIndexRange = dataSeries.getXIndicesRange(new NumberRange_1.NumberRange(renderPassData.xCoordinateCalculator.visibleMin, renderPassData.xCoordinateCalculator.visibleMax), false);
+        var yIndexRange = dataSeries.getYIndicesRange(new NumberRange_1.NumberRange(renderPassData.yCoordinateCalculator.visibleMin, renderPassData.yCoordinateCalculator.visibleMax), false);
+        var xMinValue = dataSeries.getXValue(xIndexRange.min);
+        var xMaxValue = dataSeries.getXValue(xIndexRange.max);
+        var yMinValue = dataSeries.getYValue(yIndexRange.min);
+        var yMaxValue = dataSeries.getYValue(yIndexRange.max);
+        var isXFlipped = !renderPassData.xCoordinateCalculator.hasFlippedCoordinates;
+        var isYFlipped = renderPassData.yCoordinateCalculator.hasFlippedCoordinates;
+        var heatmapStartX = renderPassData.xCoordinateCalculator.getCoordinate(isXFlipped ? xMaxValue : xMinValue);
+        var heatmapEndX = renderPassData.xCoordinateCalculator.getCoordinate(isXFlipped ? xMinValue : xMaxValue);
+        var heatmapStartY = renderPassData.yCoordinateCalculator.getCoordinate(!isYFlipped ? yMaxValue : yMinValue);
+        var heatmapEndY = renderPassData.yCoordinateCalculator.getCoordinate(!isYFlipped ? yMinValue : yMaxValue);
+        // clipped size
+        var heatmapWidth = Math.ceil(Math.abs(heatmapStartX - heatmapEndX));
+        var heatmapHeight = Math.ceil(Math.abs(heatmapStartY - heatmapEndY));
+        var isOverflow = heatmapWidth <= 0 || heatmapHeight <= 0;
+        var isOutViewport = heatmapStartX > (isVerticalChart ? seriesViewRect.height : seriesViewRect.width) ||
+            heatmapStartY > (isVerticalChart ? seriesViewRect.width : seriesViewRect.height) ||
+            heatmapEndX < 0 ||
+            heatmapEndY < 0;
+        if (!isOutViewport && !isOverflow) {
+            var horCellRange = xIndexRange;
+            var vertCellRange = yIndexRange;
+            var horStartInd = isXFlipped ? horCellRange.max - 1 : horCellRange.min;
+            var vertStartInd = isYFlipped ? vertCellRange.min : vertCellRange.max - 1;
+            var horInc = isXFlipped ? -1 : 1;
+            var vertInc = isYFlipped ? 1 : -1;
+            if (isVerticalChart) {
+                horStartInd = !isXFlipped ? horCellRange.max - 1 : horCellRange.min;
+                horInc = !isXFlipped ? -1 : 1;
+            }
+            var horCellCount = horCellRange.diff;
+            var vertCellCount = vertCellRange.diff;
+            var nativeContext = renderContext.getNativeContext();
+            this.drawHeatmapInTypescript(nativeContext, dataSeries.xCellOffsets, dataSeries.yCellOffsets, zValues, renderPassData.xCoordinateCalculator, renderPassData.yCoordinateCalculator, {
+                horCellCount: horCellCount,
+                vertCellCount: vertCellCount,
+                arrayWidth: dataSeries.arrayWidth,
+                arrayHeight: dataSeries.arrayHeight,
+                opacity: this.parentSeries.opacity,
+                colorGradientScale: colorGradientScale,
+                colorMin: colorMap.minimum,
+                colorMax: colorMap.maximum,
+                horStartInd: horStartInd,
+                vertStartInd: vertStartInd,
+                horInc: horInc,
+                vertInc: vertInc,
+                isVerticalChart: isVerticalChart,
+                heatmapStartX: heatmapStartX,
+                heatmapStartY: heatmapStartY,
+                heatmapWidth: heatmapWidth,
+                heatmapHeight: heatmapHeight,
+                // TS specific
+                xCellSizes: dataSeries.xCellSizes,
+                yCellSizes: dataSeries.yCellSizes,
+                seriesViewRect: seriesViewRect
+            });
+            // Draft code for porting to the native drawing provider
+            // const nativeZValues = new this.webAssemblyContext.SCRTDoubleVector();
+            // const flattenedZValues = ([] as number[]).concat.apply([], zValues);
+            // appendDoubleVectorFromJsArray(this.webAssemblyContext, nativeZValues, flattenedZValues);
+            // this.drawHeatmapNative(
+            //     nativeContext,
+            //     nativeXOffsets,
+            //     nativeYOffsets,
+            //     nativeZValues,
+            //     renderPassData.xCoordinateCalculator,
+            //     renderPassData.yCoordinateCalculator,
+            //     {
+            //         _horCellCount,
+            //         _vertCellCount,
+            //         arrayWidth: dataSeries.arrayWidth,
+            //         arrayHeight: dataSeries.arrayHeight,
+            //         _horCellOffsets,
+            //         _vertCellOffsets,
+            //         opacity: this.parentSeries.opacity,
+            //         colorGradientScale,
+            //         colorMin: colorMap.minimum,
+            //         colorMax: colorMap.maximum,
+            //         _horStartInd,
+            //         _vertStartInd,
+            //         _horInc,
+            //         _vertInc,
+            //         isVerticalChart,
+            //     }
+            // );
+        }
+    };
+    NonUniformHeatmapDrawingProvider.prototype.drawHeatmapInTypescript = function (nativeContext, xSpacings, ySpacings, zValues, xCalc, yCalc, params) {
+        // create color data from zValues
+        // create texture and fill it with pixel color data based on spacings
+        var horStartInd = params.horStartInd, horInc = params.horInc, vertStartInd = params.vertStartInd, vertInc = params.vertInc, horCellCount = params.horCellCount, vertCellCount = params.vertCellCount, heatmapStartX = params.heatmapStartX, heatmapStartY = params.heatmapStartY, heatmapWidth = params.heatmapWidth, heatmapHeight = params.heatmapHeight, opacity = params.opacity, colorGradientScale = params.colorGradientScale, colorMin = params.colorMin, colorMax = params.colorMax, isVerticalChart = params.isVerticalChart, arrayWidth = params.arrayWidth, arrayHeight = params.arrayHeight, xCellSizes = params.xCellSizes, yCellSizes = params.yCellSizes, seriesViewRect = params.seriesViewRect;
+        var seriesXRangeMin = xSpacings[0];
+        var seriesXRangeMax = xSpacings[xSpacings.length - 1];
+        var seriesYRangeMin = ySpacings[0];
+        var seriesYRangeMax = ySpacings[ySpacings.length - 1];
+        var xMinValue = Math.max(seriesXRangeMin, xCalc.visibleMin);
+        var xMaxValue = Math.min(seriesXRangeMax, xCalc.visibleMax);
+        var yMinValue = Math.max(seriesYRangeMin, yCalc.visibleMin);
+        var yMaxValue = Math.min(seriesYRangeMax, yCalc.visibleMax);
+        var hasFlippedX = !xCalc.hasFlippedCoordinates;
+        var hasFlippedY = yCalc.hasFlippedCoordinates;
+        var xMinCoordinate = xCalc.getCoordinate(hasFlippedX ? xMaxValue : xMinValue);
+        var xMaxCoordinate = xCalc.getCoordinate(hasFlippedX ? xMinValue : xMaxValue);
+        var yMinCoordinate = yCalc.getCoordinate(hasFlippedY ? yMaxValue : yMinValue);
+        var yMaxCoordinate = yCalc.getCoordinate(hasFlippedY ? yMinValue : yMaxValue);
+        var visibleTextureWidth = Math.ceil(Math.abs(xMinCoordinate - xMaxCoordinate));
+        var visibleTextureHeight = Math.ceil(Math.abs(yMinCoordinate - yMaxCoordinate));
+        var heatmapRect = new Rect_1.Rect(heatmapStartX, heatmapStartY, heatmapWidth, heatmapHeight);
+        // calculates cell offsets in pixels from cell sizes
+        var _a = calculateOffsets(heatmapRect, isVerticalChart, xCellSizes, yCellSizes, horStartInd, horCellCount, horInc, vertStartInd, vertCellCount, vertInc, seriesViewRect), horCellOffsets = _a.horCellOffsets, vertCellOffsets = _a.vertCellOffsets;
+        var texture = this.calculateHeatmapTexture({
+            xStartInd: horStartInd,
+            textureWidth: visibleTextureWidth,
+            xInc: horInc,
+            yStartInd: vertStartInd,
+            textureHeight: visibleTextureHeight,
+            yInc: vertInc,
+            zValues: zValues,
+            webAssemblyContext: this.webAssemblyContext,
+            colorMap: colorGradientScale,
+            opacity: opacity,
+            horCellCount: horCellCount,
+            vertCellCount: vertCellCount,
+            horCellOffsets: horCellOffsets,
+            vertCellOffsets: vertCellOffsets,
+            colorMin: colorMin,
+            colorMax: colorMax,
+            arrayWidth: arrayWidth,
+            arrayHeight: arrayHeight,
+            fillValuesOutOfRange: this.parentSeries.fillValuesOutOfRange,
+            useInterpolation: this.parentSeries.useLinearTextureFiltering
+        });
+        if (isVerticalChart) {
+            nativeContext.PushMatrix();
+            nativeContext.PushState();
+            nativeContext.Rotate(-90);
+            var xTrans = hasFlippedX ? -xMinCoordinate : -visibleTextureWidth - xMinCoordinate;
+            nativeContext.Translate(xTrans, 0);
+            var x = hasFlippedX ? 0 : visibleTextureWidth;
+            var width = hasFlippedX ? visibleTextureWidth : 0;
+            var y = yMinCoordinate;
+            var height = yMaxCoordinate;
+            nativeContext.DrawTexture(texture, x - visibleTextureWidth, y - visibleTextureHeight, visibleTextureWidth, visibleTextureHeight);
+            // Uniform Heatmap approach
+            // nativeContext.DrawTexture(texture, x, y, width, height);
+            nativeContext.PopMatrix();
+            nativeContext.PopState();
+            return;
+        }
+        // TODO figure out why yMaxCoordinate is used here
+        nativeContext.DrawTexture(texture, xMinCoordinate, yMaxCoordinate, visibleTextureWidth, visibleTextureHeight);
+    };
+    // TODO probably this is overcomplicated
+    NonUniformHeatmapDrawingProvider.prototype.calculateHeatmapTexture = function (colorDataParams) {
+        if (!this.getMemoizedHeatmapTexture) {
+            // checks if arguments have changed by value/reference equality for each argument
+            // except horizontal and vertical offsets, where arrays are compared per value
+            var customCompare = function (_a, _b) {
+                var _c = _a, _d = _c[0], currentHorCellOffsets = _d.horCellOffsets, currVertCellOffsets = _d.vertCellOffsets, restCurrArgs = __rest(_d, ["horCellOffsets", "vertCellOffsets"]);
+                var _e = _b[0], prevHorCellOffsets = _e.horCellOffsets, prevVertCellOffsets = _e.vertCellOffsets, restPrevArgs = __rest(_e, ["horCellOffsets", "vertCellOffsets"]);
+                return (areArraysEqual(Object.values(restCurrArgs), Object.values(restPrevArgs)) &&
+                    areArraysEqual(currentHorCellOffsets, prevHorCellOffsets) &&
+                    areArraysEqual(currVertCellOffsets, prevVertCellOffsets));
+            };
+            this.getMemoizedHeatmapTexture = (0, memoize_1.memoize)(calculateHeatmapTexture, customCompare);
+        }
+        var areArraysEqual = function (arr1, arr2) {
+            return !arr1.some(function (value, index) { return value !== arr2[index]; });
+        };
+        return this.getMemoizedHeatmapTexture(colorDataParams, this.colorDataVector, this.heatTextureCache);
+    };
+    return NonUniformHeatmapDrawingProvider;
+}(BaseSeriesDrawingProvider_1.BaseSeriesDrawingProvider));
+exports.NonUniformHeatmapDrawingProvider = NonUniformHeatmapDrawingProvider;
+var getColorDataForTexture = function (params, _colorData) {
+    var xStartInd = params.xStartInd, textureWidth = params.textureWidth, xInc = params.xInc, yStartInd = params.yStartInd, textureHeight = params.textureHeight, yInc = params.yInc, zValues = params.zValues, webAssemblyContext = params.webAssemblyContext, colorMap = params.colorMap, opacity = params.opacity, horCellCount = params.horCellCount, vertCellCount = params.vertCellCount, horCellOffsets = params.horCellOffsets, vertCellOffsets = params.vertCellOffsets, colorMin = params.colorMin, colorMax = params.colorMax, arrayWidth = params.arrayWidth, arrayHeight = params.arrayHeight, fillValuesOutOfRange = params.fillValuesOutOfRange;
+    // const _colorData = new webAssemblyContext.UIntVector();
+    _colorData.resize(textureWidth * textureHeight, 0);
+    // const _colorData = Array.from(Array(textureWidth * textureHeight));
+    var yOffsetInd = 0;
+    var yCellEnd = vertCellOffsets[yOffsetInd];
+    var cachedColors = new Array(horCellCount);
+    var hasCachedColors = false;
+    var xCellIndex = xStartInd;
+    var yCellIndex = yStartInd;
+    var color;
+    for (var y = 0; y < textureHeight; y++) {
+        var xOffsetInd = 0;
+        var xCellEnd = horCellOffsets[xOffsetInd];
+        if (y > yCellEnd) {
+            // New cell - need to refill the cache
+            hasCachedColors = false;
+            // Get the end coord of the next cell and a color for it
+            yOffsetInd++;
+            yCellEnd = vertCellOffsets[yOffsetInd];
+            // If yCellEnd falls inside a pixel, reiterate and get the next color
+            var yDiff = y - yCellEnd;
+            if (yDiff > Number.EPSILON && Math.floor(yCellEnd) + 1 === y) {
+                y--;
+                continue;
+            }
+        }
+        if (hasCachedColors) {
+            // Get color cached on previous iteration
+            color = cachedColors[xOffsetInd];
+        }
+        else {
+            xCellIndex = xStartInd + xOffsetInd * xInc;
+            yCellIndex = yStartInd + yOffsetInd * yInc;
+            color = getColor(yCellIndex, xCellIndex, colorMap, opacity, zValues, webAssemblyContext, colorMin, colorMax, arrayWidth, arrayHeight, fillValuesOutOfRange);
+            // New cell - refill the cache
+            cachedColors[xOffsetInd] = color;
+        }
+        for (var x = 0; x < textureWidth; x++) {
+            if (x > xCellEnd) {
+                // Get the end coord of the next cell and a color for it
+                xOffsetInd++;
+                xCellEnd = horCellOffsets[xOffsetInd];
+                // If xCellEnd falls inside a pixel, reiterate and get the next color
+                var xDiff = x - xCellEnd;
+                if (xDiff > Number.EPSILON && Math.floor(xCellEnd) + 1 === x) {
+                    x--;
+                    continue;
+                }
+                if (hasCachedColors) {
+                    // Get color cached on previous iteration
+                    color = cachedColors[xOffsetInd];
+                }
+                else {
+                    xCellIndex = xStartInd + xOffsetInd * xInc;
+                    color = getColor(yCellIndex, xCellIndex, colorMap, opacity, zValues, webAssemblyContext, colorMin, colorMax, arrayWidth, arrayHeight, fillValuesOutOfRange);
+                    cachedColors[xOffsetInd] = color;
+                }
+            }
+            // Fill a texture pixel
+            // _colorData[y * textureWidth + x] = color;
+            _colorData.set(y * textureWidth + x, color);
+        }
+        hasCachedColors = true;
+    }
+    return _colorData;
+};
+var getColor = function (yIndex, xIndex, colorPalette, opacity, 
+// zValues: SCRTDoubleVector,
+zValues, webAssemblyContext, colorMin, colorMax, arrayWidth, arrayHeight, fillValuesOutOfRange) {
+    // TODO is this check needed?
+    if (yIndex >= arrayHeight || xIndex >= arrayWidth) {
+        // transparent
+        return 0;
+    }
+    // const zValue = zValues.get(yIndex * arrayWidth + xIndex);
+    var zValue = zValues[yIndex][xIndex];
+    var cellColor = getCellColor(zValue, colorPalette, colorMin, colorMax, fillValuesOutOfRange, webAssemblyContext);
+    return (0, colorUtil_1.uintArgbColorMultiplyOpacity)(cellColor, opacity);
+};
+/** @ignore */
+var getCellColor = function (value, _colorMap, colorMin, colorMax, fillValuesOutOfRange, webAssemblyContext) {
+    if (isNaN(value)) {
+        // transparent
+        return 0;
+    }
+    // comment from the original C# code
+    // TODO move this to DataSeries.GetZAsDoubles(min, max) to avoid it here
+    if (fillValuesOutOfRange) {
+        // Clip to ColorMap.Min, Max
+        value = value < colorMin ? colorMin : value;
+        value = value > colorMax ? colorMax : value;
+    }
+    else if (value < colorMin || value > colorMax) {
+        // transparent
+        return 0;
+    }
+    var _scaleFactor = (precision - 1) / Math.abs(colorMax - colorMin);
+    var colorMapValue = (value - colorMin) * _scaleFactor;
+    // Round to the nearest integer
+    var colorIndex = Math.floor(colorMapValue + Math.sign(value) * 0.5);
+    colorIndex = webAssemblyContext.NumberUtil.Constrain(colorIndex, 0, _colorMap.length - 1);
+    return _colorMap[colorIndex];
+};
+// TODO configure precision
+var createColorMap = function (gradientStops, precision) {
+    var colorMap = Array.from(Array(precision));
+    var count = gradientStops.length;
+    var first = gradientStops[0].offset;
+    var last = gradientStops[gradientStops.length - 1].offset;
+    var diff = last - first;
+    var change = diff / (precision - 1);
+    // let prevColor = ApplyOpacity(gradientStops[0].color, _opacity);
+    var prevColor = gradientStops[0].color;
+    var prevOffset = gradientStops[0].offset;
+    var nextColor = prevColor;
+    var nextOffset = prevOffset;
+    if (count > 1) {
+        // nextColor = ApplyOpacity(gradientStops[1].color, _opacity);
+        nextColor = gradientStops[1].color;
+        nextOffset = gradientStops[1].offset;
+    }
+    diff = nextOffset - prevOffset;
+    var offsetInd = 0;
+    for (var i = 0; i < precision; ++i) {
+        var offset = first + i * change;
+        if (offset >= nextOffset) {
+            offsetInd++;
+            prevOffset = nextOffset;
+            prevColor = nextColor;
+            if (offsetInd + 1 < count) {
+                // nextColor = ApplyOpacity(gradientStops[offsetInd + 1].color, _opacity);
+                nextColor = gradientStops[offsetInd + 1].color;
+                nextOffset = gradientStops[offsetInd + 1].offset;
+            }
+            diff = nextOffset - prevOffset;
+        }
+        var color = void 0;
+        if (prevColor === nextColor || diff <= Number.EPSILON) {
+            color = Number.parseInt((0, parseColor_1.parseColorToHexStringArgb)(nextColor), 16);
+        }
+        else {
+            var coef = (offset - prevOffset) / diff;
+            color = getInterpolatedColor(prevColor, nextColor, coef);
+        }
+        colorMap[i] = color;
+    }
+    return colorMap;
+};
+var getInterpolatedColor = function (htmlColor1, htmlColor2, coef) {
+    var color1 = (0, parseColor_1.parseColorToTArgb)(htmlColor1);
+    var color2 = (0, parseColor_1.parseColorToTArgb)(htmlColor2);
+    var a1 = color1.opacity;
+    var a2 = color2.opacity;
+    var r1 = color1.red;
+    var r2 = color2.red;
+    var g1 = color1.green;
+    var g2 = color2.green;
+    var b1 = color1.blue;
+    var b2 = color2.blue;
+    var r = r1 + Math.floor((r2 - r1) * coef);
+    var g = g1 + Math.floor((g2 - g1) * coef);
+    var b = b1 + Math.floor((b2 - b1) * coef);
+    var a = a1 + Math.floor((a2 - a1) * coef);
+    return Number.parseInt("0x" + (0, parseColor_1.toHex)(a) + (0, parseColor_1.toHex)(r) + (0, parseColor_1.toHex)(g) + (0, parseColor_1.toHex)(b), 16);
+    // return (a << 24) | (r << 16) | (g << 8) | b;
+};
+var calculateOffsets = function (heatmapRect, isVerticalChart, xCellSizes, yCellSizes, horStartInd, horCellCount, horInc, vertStartInd, vertCellCount, vertInc, seriesViewRect) {
+    // TODO can be optimized - no need to recalculate these offsets at every redraw
+    // TODO can be optimized for large heatmaps - skip cells that
+    // falls within a single pixel & count them for the iteration in ComputeColorMap()
+    // Find heatmap cells positions
+    var offsetX = heatmapRect.left < 0 ? -heatmapRect.left : 0;
+    var offsetY = heatmapRect.top < 0 ? -heatmapRect.top : 0;
+    if (isVerticalChart) {
+        // consider that heatmap texture is rotated
+        offsetX = heatmapRect.right > seriesViewRect.bottom ? heatmapRect.right - seriesViewRect.bottom : 0;
+    }
+    // Horizontal offsets == X offsets on texture, vertical offsets == Y offsets on texture
+    var horCellOffsets = calculateCellCoordinates(xCellSizes, heatmapRect.width, horStartInd, horCellCount, horInc, -offsetX);
+    var vertCellOffsets = calculateCellCoordinates(yCellSizes, heatmapRect.height, vertStartInd, vertCellCount, vertInc, -offsetY);
+    return { horCellOffsets: horCellOffsets, vertCellOffsets: vertCellOffsets };
+};
+/**
+ * Calculates absolute coordinates of the heatmap cells
+ * @param inputArr relative cell sizes
+ * @param dimension texture size
+ * @param startInd
+ * @param count
+ * @param inc
+ * @param offset
+ * @returns
+ */
+var calculateCellCoordinates = function (inputArr, dimension, startInd, count, inc, offset) {
+    // Find a stretch coef
+    var sum = 0;
+    var ind = startInd;
+    for (var i = 0; i < count; i++, ind += inc) {
+        sum += inputArr[ind];
+    }
+    var coef = 1 / sum;
+    var offsets = new Array(count);
+    var length = offset;
+    for (var i = 0; i < count - 1; i++) {
+        var index = i * inc + startInd;
+        var cellSize = inputArr[index] * coef * dimension;
+        length = length + cellSize;
+        offsets[i] = length;
+    }
+    offsets[count - 1] = dimension + offset;
+    return offsets;
+};
+var calculateHeatmapTexture = function (colorDataParams, intVector, heatTextureCache) {
+    var textureWidth = colorDataParams.textureWidth, textureHeight = colorDataParams.textureHeight, webAssemblyContext = colorDataParams.webAssemblyContext, useInterpolation = colorDataParams.useInterpolation;
+    // calculate colors from zValues
+    // per pixel colors
+    var colorArray = getColorDataForTexture(colorDataParams, intVector);
+    // create and fill texture
+    var texture = heatTextureCache.create(textureWidth, textureHeight, webAssemblyContext.eTSRTextureFormat.TSR_TEXTUREFORMAT_A8B8G8R8);
+    webAssemblyContext.SCRTSetTextureLinearSamplerEnabled(texture, useInterpolation);
+    webAssemblyContext.SCRTFillTextureAbgr(texture, textureWidth, textureHeight, colorArray);
+    return texture;
+};

package/Charting/Visuals/RenderableSeries/DrawingProviders/PointMarkerDrawingProvider.d.ts

@@ -3,6 +3,7 @@ import { WebGlRenderContext2D } from "../../../Drawing/WebGlRenderContext2D";
 import { IPointMetadata } from "../../../Model/IPointMetadata";
 import { IPointSeries } from "../../../Model/PointSeries/IPointSeries";
 import { RenderPassData } from "../../../Services/RenderPassData";
+import { IPointMarker } from "../../PointMarkers/IPointMarker";
 import { IRenderableSeries } from "../IRenderableSeries";
 import { ISpline } from "../ISpline";
 import { BaseSeriesDrawingProvider } from "./BaseSeriesDrawingProvider";
@@ -12,7 +13,6 @@ import { BaseSeriesDrawingProvider } from "./BaseSeriesDrawingProvider";
  */
 export declare class PointMarkerDrawingProvider extends BaseSeriesDrawingProvider<IRenderableSeries> {
     private nativeDrawingProvider;
-    private ySelector;
     private ySplineValuesSelector;
     private xAnimationPointMarkerValues;
     private yAnimationPointMarkerValues;
@@ -25,11 +25,14 @@ export declare class PointMarkerDrawingProvider extends BaseSeriesDrawingProvide
      * @param ySelector an optional Y-selector for choosing which y-values to use for drawing points
      * @param ySplineSelector an optional selector for choosing which y-animation values to use for drawing points
      */
-    constructor(webAssemblyContext: TSciChart, parentSeries: IRenderableSeries, ySelector?: (ps: IPointSeries) => SCRTDoubleVector, ySplineSelector?: (rs: ISpline) => SCRTDoubleVector);
+    constructor(webAssemblyContext: TSciChart, parentSeries: IRenderableSeries, ySelector?: (ps: IPointSeries) => SCRTDoubleVector, ySplineSelector?: (rs: ISpline) => SCRTDoubleVector, xSelector?: (ps: IPointSeries) => SCRTDoubleVector);
     /**
      * @inheritDoc
      */
     onSeriesPropertyChange(propertyName: string): void;
+    getProperties(parentSeries: IRenderableSeries): {
+        pointMarker?: IPointMarker;
+    };
     /**
      * @inheritDoc
      */