scichart 2.2.2378 → 2.2.2396

package/Charting/ChartModifiers/ModifierMouseArgs.d.ts

@@ -1,5 +1,5 @@
 import { Point } from "../../Core/Point";
-import { Size } from "../../types/Size";
+import { Rect } from "../../Core/Rect";
 import { ModifierArgsBase } from "./ModifierArgsBase";
 declare type TModifierMouseArgsParams = {
     mousePoint?: Point;
@@ -40,7 +40,7 @@ export declare class ModifierMouseArgs extends ModifierArgsBase {
      * @param masterViewport the master viewport or parent chart issuing mouse events
      * @param slaveViewport the slave viewport or child chart receiving mouse events
      */
-    static copy(args: ModifierMouseArgs, modifierGroup: string, masterViewport: Size, slaveViewport: Size): ModifierMouseArgs;
+    static copy(args: ModifierMouseArgs, modifierGroup: string, masterViewport: Rect, slaveViewport: Rect): ModifierMouseArgs;
     /**
      * The MousePoint as an X,Y coordinate where the event occurred
      */

package/Charting/ChartModifiers/ModifierMouseArgs.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModifierMouseArgs = void 0;
 var Guard_1 = require("../../Core/Guard");
 var Point_1 = require("../../Core/Point");
-var ModifierArgsBase_1 = require("./ModifierArgsBase");
 var DpiHelper_1 = require("../Visuals/TextureManager/DpiHelper");
+var ModifierArgsBase_1 = require("./ModifierArgsBase");
 /**
  * Mouse arguments passed to {@link ChartModifierBase} methods
  */
@@ -119,9 +119,11 @@ var ModifierMouseArgs = /** @class */ (function (_super) {
     ModifierMouseArgs.copy = function (args, modifierGroup, masterViewport, slaveViewport) {
         var mousePoint = args.mousePoint;
         if (masterViewport && slaveViewport) {
+            var sourceX = args.mousePoint.x - masterViewport.x;
+            var sourceY = args.mousePoint.y - masterViewport.y;
             var scaleX = slaveViewport.width / masterViewport.width;
             var scaleY = slaveViewport.height / masterViewport.height;
-            mousePoint = new Point_1.Point(args.mousePoint.x * scaleX, args.mousePoint.y * scaleY);
+            mousePoint = new Point_1.Point(slaveViewport.x + sourceX * scaleX, slaveViewport.y + sourceY * scaleY);
         }
         return __assign(__assign({}, args), { isMaster: false, handled: false, modifierGroup: modifierGroup, mousePoint: mousePoint });
     };

package/Charting/Model/BaseHeatmapDataSeries.js

@@ -444,7 +444,7 @@ var BaseHeatmapDataSeries = /** @class */ (function () {
                 if (isNaN(this.zValuesProperty[y][x])) {
                     zValue = 0;
                 }
-                else if (zValue < newZMin) {
+                else if (zValue < zMin - newZMin) {
                     zValue = fillValuesOutOfRange ? zMin - newZMin : 0;
                 }
                 else if (zValue > zMax - newZMin) {

package/Charting/Services/SciChartRenderer.js

@@ -102,6 +102,7 @@ var SciChartRenderer = /** @class */ (function () {
         if (this.sciChartSurface.isDeleted) {
             return;
         }
+        // console.log("render");
         var nativeContext = renderContext.getNativeContext();
         var wasmContext = this.sciChartSurface.webAssemblyContext2D;
         var oldBlendMode = nativeContext.GetBlendMode();
@@ -110,7 +111,6 @@ var SciChartRenderer = /** @class */ (function () {
         this.validate();
         // Animation Step
         var timeElapsed = this.previousTime ? Date.now() - this.previousTime : undefined;
-        // console.log("draw ", timeElapsed);
         this.previousTime = Date.now();
         this.sciChartSurface.onAnimate(timeElapsed);
         this.sciChartSurface.updateBackground();

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

@@ -44,6 +44,7 @@ export declare class BoxAnnotation extends RenderContextAnnotationBase {
     private strokeThicknessProperty;
     private strokeProperty;
     private fillProperty;
+    private nativeDrawingProvider;
     private strokePenCache;
     private fillBrushCache;
     /**
@@ -83,6 +84,7 @@ export declare class BoxAnnotation extends RenderContextAnnotationBase {
     delete(): void;
     /** @inheritDoc */
     drawWithContext(renderContext: IRenderContext2D, xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, viewRect: Rect): void;
+    private drawWithProvider;
     /** @inheritDoc */
     onAttach(scs: SciChartSurface): void;
     onDragStarted(args: ModifierMouseArgs): boolean;

package/Charting/Visuals/Annotations/BoxAnnotation.js

@@ -16,6 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxAnnotation = void 0;
+var app_1 = require("../../../constants/app");
 var Deleter_1 = require("../../../Core/Deleter");
 var Guard_1 = require("../../../Core/Guard");
 var Point_1 = require("../../../Core/Point");
@@ -119,6 +120,7 @@ var BoxAnnotation = /** @class */ (function (_super) {
     BoxAnnotation.prototype.delete = function () {
         this.strokePenCache = (0, Deleter_1.deleteSafe)(this.strokePenCache);
         this.fillBrushCache = (0, Deleter_1.deleteSafe)(this.fillBrushCache);
+        this.nativeDrawingProvider = (0, Deleter_1.deleteSafe)(this.nativeDrawingProvider);
     };
     /** @inheritDoc */
     BoxAnnotation.prototype.drawWithContext = function (renderContext, xCalc, yCalc, viewRect) {
@@ -135,12 +137,58 @@ var BoxAnnotation = /** @class */ (function (_super) {
         var y2 = this.getY2Coordinate(xCalc, yCalc);
         this.setAnnotationBorders(x1, x2, y1, y2);
         var rect = Rect_1.Rect.createWithPoints(new Point_1.Point(x1, y1), new Point_1.Point(x2, y2));
-        renderContext.drawRect(rect, viewRect, strokePen, fillBrush);
+        // Temporary HAX! drawRect is rubbish with large strokeThickness, whereas the columnDrawingProvider does a nice
+        // outlined rectangle, but the code is ugly.  In 2.3 we will improve the native drawRect to do the outline properly.
+        if (!app_1.IS_TEST_ENV) {
+            this.drawWithProvider(renderContext, strokePen.scrtPen, fillBrush.scrtBrush, xCalc, yCalc, rect, viewRect);
+        }
+        //renderContext.drawRect(rect, viewRect, strokePen, fillBrush);
         this.updateAdornerInner();
     };
+    BoxAnnotation.prototype.drawWithProvider = function (renderContext, linesPen, fillBrush, xCalc, yCalc, rect, viewRect) {
+        var webAssemblyContext = this.parentSurface.webAssemblyContext2D;
+        var args = new webAssemblyContext.SCRTColumnDrawingParams();
+        args.forceShaderMethod = true;
+        args.verticalChart = this.isVerticalChart;
+        args.zeroLineY = this.isVerticalChart ? yCalc.getDataValue(rect.left) : yCalc.getDataValue(rect.bottom);
+        args.columnWidth = this.isVerticalChart ? rect.height : rect.width;
+        // ISSUE: If the strokeThickness property is not provided,
+        // the fill will be disappeared with large zoom (when the column width will be small or zero)
+        // if (args.columnWidth === 0 && this.strokeThickness === 0) {
+        //     strokePenCache = this.strokePenFillColoredCache;
+        // }
+        if (linesPen) {
+            args.SetLinesPen(linesPen);
+        }
+        if (fillBrush) {
+            args.SetFillBrush(fillBrush);
+        }
+        args.viewportWidth = viewRect.width;
+        args.viewportHeight = viewRect.height;
+        var xMid = this.isVerticalChart ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
+        var xVal = xCalc.getDataValue(xMid);
+        var xValues = new webAssemblyContext.SCRTDoubleVector();
+        xValues.push_back(xVal);
+        var yVal = this.isVerticalChart ? yCalc.getDataValue(rect.right) : yCalc.getDataValue(rect.top);
+        var yValues = new webAssemblyContext.SCRTDoubleVector();
+        yValues.push_back(yVal);
+        args.count = yValues.size();
+        var nativeContext = renderContext.getNativeContext();
+        nativeContext.PushMatrix();
+        nativeContext.PushState();
+        nativeContext.Translate(viewRect.x, viewRect.y);
+        nativeContext.SetClipRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
+        this.nativeDrawingProvider.DrawPointsVec(nativeContext, xValues, yValues, xCalc.nativeCalculator, yCalc.nativeCalculator, args);
+        nativeContext.PopMatrix();
+        nativeContext.PopState();
+        xValues.delete();
+        yValues.delete();
+        args.delete();
+    };
     /** @inheritDoc */
     BoxAnnotation.prototype.onAttach = function (scs) {
         _super.prototype.onAttach.call(this, scs);
+        this.nativeDrawingProvider = new scs.webAssemblyContext2D.SCRTColumnSeriesDrawingProvider();
         if (!this.strokePenCache) {
             this.strokePenCache = new Pen2DCache_1.Pen2DCache(scs.webAssemblyContext2D);
         }

package/Charting/Visuals/Legend/SciChartLegend.js

@@ -92,7 +92,7 @@ var SciChartLegend = /** @class */ (function (_super) {
      */
     SciChartLegend.prototype.addEventListenerToSeries = function (rs) {
         var _this = this;
-        var el = this.getParentDiv().querySelector("[id='".concat(rs.id, "']"));
+        var el = this.parentDiv.querySelector("[id='".concat(rs.id, "']"));
         if (el) {
             var onChangeEventListener_1 = function (e) {
                 rs.isVisible = e.target.checked;

package/Charting/Visuals/Legend/SciChartLegendBase.d.ts

@@ -44,6 +44,7 @@ export declare enum ELegendType {
 export declare abstract class SciChartLegendBase implements IDeletable {
     abstract readonly type: ELegendType;
     protected rootDiv: HTMLDivElement;
+    protected parentDiv: HTMLDivElement;
     protected div: HTMLDivElement;
     protected seriesViewRect: Rect;
     protected invalidateParentSurface: () => void;

package/Charting/Visuals/Legend/SciChartLegendBase.js

@@ -190,8 +190,9 @@ var SciChartLegendBase = /** @class */ (function () {
         var _a;
         if (this.div) {
             this.removeEventListeners();
-            (_a = this.getParentDiv()) === null || _a === void 0 ? void 0 : _a.removeChild(this.div);
+            (_a = this.parentDiv) === null || _a === void 0 ? void 0 : _a.removeChild(this.div);
             this.div = undefined;
+            this.parentDiv = undefined;
         }
     };
     /**
@@ -244,7 +245,8 @@ var SciChartLegendBase = /** @class */ (function () {
         var innerHtml = this.getInnerHTML();
         if (innerHtml) {
             var div = (0, html_1.htmlToElement)(innerHtml);
-            this.getParentDiv().appendChild(div);
+            this.parentDiv = this.getParentDiv();
+            this.parentDiv.appendChild(div);
             this.div = div;
             if (!app_1.IS_TEST_ENV) {
                 this.addEventListeners();

package/Charting/Visuals/Legend/SciChartPieLegend.js

@@ -95,7 +95,7 @@ var SciChartPieLegend = /** @class */ (function (_super) {
     SciChartPieLegend.prototype.addEventListeners = function () {
         var _this = this;
         this.pieSegmentArray.forEach(function (ps) {
-            var el = _this.getParentDiv().querySelector("#".concat(getCheckboxId(ps.id)));
+            var el = _this.parentDiv.querySelector("#".concat(getCheckboxId(ps.id)));
             if (!el) {
                 return;
             }

package/Charting/Visuals/RenderableSeries/BaseRenderableSeries.js

@@ -295,6 +295,27 @@ var BaseRenderableSeries = /** @class */ (function () {
             var _a;
             if (this.valueChanged(this.isVisibleProperty, isVisible)) {
                 this.isVisibleProperty = isVisible;
+                if (!isVisible) {
+                    if (this.rolloverModifierProps.marker && this.rolloverModifierProps.tooltip) {
+                        this.rolloverModifierProps.marker.suspendInvalidate();
+                        this.rolloverModifierProps.tooltip.suspendInvalidate();
+                        this.rolloverModifierProps.marker.isHidden = true;
+                        this.rolloverModifierProps.tooltip.isHidden = true;
+                        this.rolloverModifierProps.tooltip.x1 = undefined;
+                        this.rolloverModifierProps.tooltip.y1 = undefined;
+                    }
+                    // TODO should be more general than looking at series type
+                    if (this.type === SeriesType_1.ESeriesType.BandSeries &&
+                        this.rolloverModifierProps1.marker &&
+                        this.rolloverModifierProps1.tooltip) {
+                        this.rolloverModifierProps1.marker.suspendInvalidate();
+                        this.rolloverModifierProps1.tooltip.suspendInvalidate();
+                        this.rolloverModifierProps1.marker.isHidden = true;
+                        this.rolloverModifierProps1.tooltip.isHidden = true;
+                        this.rolloverModifierProps1.tooltip.x1 = undefined;
+                        this.rolloverModifierProps1.tooltip.y1 = undefined;
+                    }
+                }
                 (_a = this.isVisibleChanged) === null || _a === void 0 ? void 0 : _a.raiseEvent(new SeriesVisibleChangedArgs_1.SeriesVisibleChangedArgs(this, isVisible));
                 this.notifyPropertyChanged(constants_1.PROPERTY.IS_VISIBLE);
             }

package/Charting/Visuals/SciChartSurface.d.ts

@@ -259,7 +259,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     /**
      * @inheritDoc
      */
-    delete(): void;
+    delete(clearHtml?: boolean): void;
     /**
      * @inheritDoc
      */

package/Charting/Visuals/SciChartSurface.js

@@ -397,7 +397,7 @@ var SciChartSurface = /** @class */ (function (_super) {
             // Logger.log("SciChartSurface.isSuspended = true. Ignoring invalidateElement() call");
             return;
         }
-        // console.log("Invalidating ", this.domChartRoot.id);
+        // console.trace("Invalidating ", this.domChartRoot.id);
         var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
         this.renderSurface.invalidateElement(canvasId);
     };
@@ -415,7 +415,8 @@ var SciChartSurface = /** @class */ (function (_super) {
     /**
      * @inheritDoc
      */
-    SciChartSurface.prototype.delete = function () {
+    SciChartSurface.prototype.delete = function (clearHtml) {
+        if (clearHtml === void 0) { clearHtml = true; }
         _super.prototype.delete.call(this);
         this.renderableSeries.asArray().forEach(function (rs) { return rs.delete(); });
         this.renderableSeries.clear();
@@ -428,7 +429,7 @@ var SciChartSurface = /** @class */ (function (_super) {
         this.watermarkProperties = (0, Deleter_1.deleteSafe)(this.watermarkProperties);
         this.watermarkPropertyPosition = (0, Deleter_1.deleteSafe)(this.watermarkPropertyPosition);
         this.chartModifiers.asArray().forEach(function (chm) { return chm.delete(); });
-        if (this.domChartRoot) {
+        if (clearHtml && this.domChartRoot) {
             var style = this.domChartRoot.style;
             if (style) {
                 style.background = "";

package/Charting/Visuals/SciChartSurfaceBase.d.ts

@@ -259,7 +259,7 @@ export declare abstract class SciChartSurfaceBase implements ISciChartSurfaceBas
     /**
      * @inheritDoc
      */
-    delete(): void;
+    delete(clearHtml?: boolean): void;
     addDeletable(deletable: IDeletable): void;
     /**
      * Call invalidateElement() to trigger a redraw of the {@link SciChartSurfaceBase}. SciChart's WebGL WebAssembly rendering

package/Charting/Visuals/SciChartSurfaceBase.js

@@ -286,9 +286,10 @@ var SciChartSurfaceBase = /** @class */ (function () {
     /**
      * @inheritDoc
      */
-    SciChartSurfaceBase.prototype.delete = function () {
+    SciChartSurfaceBase.prototype.delete = function (clearHtml) {
         var _this = this;
         var _a;
+        if (clearHtml === void 0) { clearHtml = true; }
         this.isDeletedProperty = true;
         var currentSurfaceIndex = (_a = this.destinations) === null || _a === void 0 ? void 0 : _a.findIndex(function (dest) { return dest.sciChartSurface === _this; });
         if (currentSurfaceIndex >= 0) {

package/Charting/Visuals/createMaster.js

@@ -171,7 +171,7 @@ var createMaster = function () {
                 Guard_1.Guard.notNull(theme, "theme");
                 var canvas2dId = sciChartInitCommon_1.default.getCanvas2dId(divElementId);
                 var sameIdDestinations = exports.sciChartDestinations.filter(function (el) { return el.canvasElementId === canvas2dId; });
-                sameIdDestinations.forEach(function (el) { return el.sciChartSurface.delete(); });
+                sameIdDestinations.forEach(function (el) { return el.sciChartSurface.delete(false); });
                 var otherDestinations = exports.sciChartDestinations.filter(function (el) { return el.canvasElementId !== canvas2dId; });
                 chartInitObj.ClearDestinations();
                 while (exports.sciChartDestinations.length > 0) {

package/Charting/Visuals/licenseManager2D.js

@@ -415,6 +415,11 @@ var applyLicense = function (licenseContext) {
     var licenseKey = "";
     var lt = licenseContext.SCRTCredentials.GetLicenseType();
     debug("Initial license status is " + licensingClasses_1.LicenseType[convertLicenseType(lt, licenseContext)]);
+    if (window.location.hostname.includes(".csb.app") ||
+        window.location.hostname === "codesandbox.io" ||
+        window.location.hostname.includes(".codesandbox.io")) {
+        runtimeLicenseKey = "csb";
+    }
     // Get from global store
     var runtimelicense = getRuntimeLicenseKey();
     if ((checkStatus === licensingClasses_1.LicenseCheckStatus.NoLicense ||
@@ -441,11 +446,18 @@ var applyLicense = function (licenseContext) {
                 licenseKey = runtimelicense;
             }
             else {
-                if (window && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.hostname) && !window.location.hostname.includes("localhost")) {
-                    console.warn("Runtime license is invalid.  Call setIsDebugLicensing(true) for details.");
+                var errorMsg = licenseContext.SCRTCredentials.GetLicenseErrors();
+                if ((window && ((_a = window.location) === null || _a === void 0 ? void 0 : _a.hostname) && !window.location.hostname.includes("localhost")) ||
+                    !errorMsg.startsWith("License is not valid for this domain")) {
+                    if (isDebug) {
+                        debug("Runtime license is invalid: " + errorMsg);
+                    }
+                    else {
+                        console.warn("Runtime license is invalid.  Call setIsDebugLicensing(true) for details.");
+                    }
                 }
                 else {
-                    debug("Runtime license is invalid: " + licenseContext.SCRTCredentials.GetLicenseErrors());
+                    debug("Runtime license is invalid: " + errorMsg);
                 }
                 licenseKey = "";
             }
@@ -462,7 +474,7 @@ var applyLicense = function (licenseContext) {
         if (!(lt === licenseContext.SCRTLicenseType.LICENSE_TYPE_FULL ||
             lt === licenseContext.SCRTLicenseType.LICENSE_TYPE_TRIAL ||
             lt === licenseContext.SCRTLicenseType.LICENSE_TYPE_REQUIRES_VALIDATION)) {
-            debug("License cookie is invalid. Removing");
+            debug("License cookie is invalid. " + licenseContext.SCRTCredentials.GetLicenseErrors());
             (0, cookie_1.deleteCookie)("scLicense");
             licenseKey = "";
             lt = licenseContext.SCRTLicenseType.LICENSE_TYPE_NO_LICENSE;
@@ -741,7 +753,9 @@ var getLicenseInfo = function (licenseContext) {
         licenseManager2dState_1.licenseManager2dState.setLicenseType(licenseType);
         licenseManager2dState_1.licenseManager2dState.setDevCount(licenseContext.SCRTCredentials.GetDeveloperCount());
         // Telemetry is enabled based on a license feature
-        licenseManager2dState_1.licenseManager2dState.setTelemetry(licenseContext.SCRTCredentials.HasFeature("TE") === licenseContext.SCRTLicenseType.LICENSE_TYPE_FULL);
+        var teFeature = licenseContext.SCRTCredentials.HasFeature("TE");
+        licenseManager2dState_1.licenseManager2dState.setTelemetry(teFeature === licenseContext.SCRTLicenseType.LICENSE_TYPE_FULL ||
+            teFeature === licenseContext.SCRTLicenseType.LICENSE_TYPE_TRIAL);
     }
     if (isDebug) {
         debug(licenseContext.SCRTCredentials.Dump());
@@ -789,6 +803,8 @@ var updateLicenseDisplayInternal = function (licenseInfo, sciChartSurface, is2D,
         else if (licenseType === licensingClasses_1.LicenseType.Invalid) {
             if (error.startsWith("License is not valid for this domain"))
                 premsg = "Sorry! Your license key is invalid for this domain</br>Please ".concat(contactSupportLink, " with your OrderID if you believe this to be incorrect.");
+            else if (error.startsWith("This version of SciChart can no longer be trialed"))
+                premsg = "Sorry! This version of SciChart is too old to be trialed.  Please update to the latest version";
             else
                 premsg = "Sorry! Your license key appears to be invalid</br>Please ".concat(contactSupportLink, " with your OrderID if you believe this to be incorrect.");
             postMsg = "Instructions can be seen at ".concat(licensingLink);

package/Charting3D/Visuals/SciChart3DSurface.d.ts

@@ -66,14 +66,19 @@ export declare class SciChart3DSurface extends SciChartSurfaceBase {
      * Note if loading from CDN the version number of data/wasm Urls must match the version number of SciChart.js you are using.
      * @example
      * ```ts
-     * SciChart.SciChartSurface.configure({
-     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.data",
-     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.wasm"
+     * // 3D Charts
+     * SciChart.SciChart3DSurface.configure({
+     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.data",
+     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.wasm"
      * });
      * ```
      * @param config
      */
     static configure(config: TSciChartConfig): void;
+    /**
+     * Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
+     */
+    static useWasmFromCDN(): void;
     /**
      * Creates a {@link SciChart3DSurface} and {@link TSciChart3D | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited

package/Charting3D/Visuals/SciChart3DSurface.js

@@ -31,6 +31,7 @@ var DefaultViewportManager3D_1 = require("./DefaultViewportManager3D");
 var GizmoEntity_1 = require("./GizmoEntity");
 var RootSceneEntity_1 = require("./RootSceneEntity");
 var SciChart3DRenderer_1 = require("./SciChart3DRenderer");
+var BuildStamp_1 = require("../../Core/BuildStamp");
 exports.sciChartConfig3D = {};
 /**
  * @summary The {@link SciChart3DSurface} is the root 3D Chart control in SciChart's High Performance Real-time
@@ -124,9 +125,10 @@ var SciChart3DSurface = /** @class */ (function (_super) {
      * Note if loading from CDN the version number of data/wasm Urls must match the version number of SciChart.js you are using.
      * @example
      * ```ts
-     * SciChart.SciChartSurface.configure({
-     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.data",
-     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.wasm"
+     * // 3D Charts
+     * SciChart.SciChart3DSurface.configure({
+     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.data",
+     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.2.2378/_wasm/scichart3d.wasm"
      * });
      * ```
      * @param config
@@ -136,6 +138,13 @@ var SciChart3DSurface = /** @class */ (function (_super) {
         exports.sciChartConfig3D.dataUrl = (_a = config === null || config === void 0 ? void 0 : config.dataUrl) !== null && _a !== void 0 ? _a : undefined;
         exports.sciChartConfig3D.wasmUrl = (_b = config === null || config === void 0 ? void 0 : config.wasmUrl) !== null && _b !== void 0 ? _b : undefined;
     };
+    /**
+     * Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
+     */
+    SciChart3DSurface.useWasmFromCDN = function () {
+        exports.sciChartConfig3D.dataUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart3d.data");
+        exports.sciChartConfig3D.wasmUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart3d.wasm");
+    };
     /**
      * Creates a {@link SciChart3DSurface} and {@link TSciChart3D | WebAssembly Context} to occupy the div by element ID in your DOM.
      * @remarks This method is async and must be awaited

package/Charting3D/Visuals/createMaster3d.js

@@ -128,9 +128,9 @@ var createMaster = function () {
         exports.sciChartDestinations.push({ canvasElementId: canvasElementId, sciChartSurface: sciChartSurface, width: width, height: height });
     };
     return new Promise(function (resolve, reject) {
-        var locateFile3d = (0, SciChartSurfaceBase_1.getLocateFile)(SciChart3DSurface_1.sciChartConfig3D);
+        var locateFile = (0, SciChartSurfaceBase_1.getLocateFile)(SciChart3DSurface_1.sciChartConfig3D);
         // @ts-ignore
-        new WasmModule3D({ locateFile3d: locateFile3d, noInitialRun: true })
+        new WasmModule3D({ locateFile: locateFile, noInitialRun: true })
             .then(function (wasmContext) {
             var getChildSurfaces = function () { return exports.sciChartDestinations.map(function (el) { return el.sciChartSurface; }); };
             // Create of replace child surface

package/Charting3D/Visuals/createSingle3d.js

@@ -21,9 +21,9 @@ var createSingle3dInternal = function (divElement, options) {
         var webGLSupport = WebGlHelper_1.WebGlHelper.getWebGlSupport();
         // console.log("webGLSupport", webGLSupport);
         if (webGLSupport === WebGlHelper_1.EWebGLSupport.WebGL2 || webGLSupport === WebGlHelper_1.EWebGLSupport.WebGL1) {
-            var locateFile3d = (0, SciChartSurfaceBase_1.getLocateFile)(SciChart3DSurface_1.sciChartConfig3D);
+            var locateFile = (0, SciChartSurfaceBase_1.getLocateFile)(SciChart3DSurface_1.sciChartConfig3D);
             // @ts-ignore
-            new WasmModule3D({ locateFile3d: locateFile3d, noInitialRun: true })
+            new WasmModule3D({ locateFile: locateFile, noInitialRun: true })
                 .then(function (wasmContext) {
                 var _a;
                 loader.removeChartLoader(canvases.domDivContainer, loaderDiv);

package/Core/BuildStamp.d.ts

@@ -1,4 +1,4 @@
 import { TSciChart } from "../types/TSciChart";
 import { TSciChart3D } from "../types/TSciChart3D";
-export declare const libraryVersion = "2.2.2378";
+export declare const libraryVersion = "2.2.2396";
 export declare const checkBuildStamp: (wasmContext: TSciChart | TSciChart3D) => boolean;

package/Core/BuildStamp.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkBuildStamp = exports.libraryVersion = void 0;
-var buildStamp = "2022-05-20T00:00:00";
+var buildStamp = "2022-06-29T00:00:00";
 var result;
 // tslint:disable-next-line:no-var-requires
-exports.libraryVersion = "2.2.2378";
+exports.libraryVersion = "2.2.2396";
 var checkBuildStamp = function (wasmContext) {
     if (result !== undefined)
         return result;

package/Core/Telemetry.js

@@ -92,6 +92,9 @@ var sendTelemetry = function () {
             }
         }
     };
+    if (window.location.hostname.includes(".csb.app") || window.location.hostname.includes(".codesandbox.io")) {
+        eventData.data.baseData.properties.url = window.location.href;
+    }
     var endPointUrl = "https://dc.services.visualstudio.com/v2/track";
     var body = JSON.stringify([eventData]);
     fetch(endPointUrl, {

package/README.md

@@ -1,6 +1,6 @@
 # SciChart.js: Ultra High Performance Realtime JavaScript Chart Library
 
-[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](Sandbox/scichart-js-javascript-chart-collage-1485.jpg)](https://www.scichart.com/javascript-chart-features)
+[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](https://www.scichart.com/wp-content/uploads/2022/05/scichart-js-oil-gas-demo-release-22-1.jpg)](https://www.scichart.com/javascript-chart-features)
 
 [SciChart](https://www.scichart.com) provides a High Performance JavaScript & TypeScript Chart library which uses WebGL and WebAssembly to achieve incredible real-time and big-data performance.
 
@@ -10,11 +10,23 @@ SciChart is the _**only viable solution for mission-critical data visualization
 
 Whether you are building Dashboards for business, stock-chart or trading apps, scientific or medical apps, or building a kiosk application on custom hardware with Electron, SciChart's ultra-fast 2D/3D WebGL rendering technology codenamed _Visual Xccelerator®_ will let you build apps, services and dashboards with rich charts & graphs that will delight your users.
 
-# Getting Started
+[![SciChart.js Ultra High Performance Realtime JavaScript Chart library](Sandbox/scichart-js-javascript-chart-collage-1485.jpg)](https://www.scichart.com/javascript-chart-features)
+
+# What's New!
 
-We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+Check out what's new in SciChart.js at the below pages:
+
+-   [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
+-   [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
+-   [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
+
+See more at the Release Notes section at bottom of the page.
+
+# Getting Started
 
-[![Getting Started with SciChart.js](Sandbox/scichart-js-getting-started-1485.jpg)](https://www.scichart.com/getting-started-scichart-js)
+> We've prepared a short [Getting Started guide here](https://www.scichart.com/getting-started-scichart-js).
+>
+> This will walk you through the entire process of starting a trial and show you where tutorials and documentation are and examples.
 
 ## Quick Start with Browser Bundle
 
@@ -26,11 +38,10 @@ We've prepared a short [Getting Started guide here](https://www.scichart.com/get
 
     ```javascript
     async function initSciChart() {
-        // In order to load data file from the CDN we need to set dataUrl
-        SciChart.SciChartSurface.configure({
-            dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.data",
-            wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2261/_wasm/scichart2d.wasm"
-        });
+        // See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
+        // call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+        SciChart.SciChartSurface.useWasmFromCDN();
+
         // Create a chart using the json builder api
         await SciChart.chartBuilder.buildChart("scichart-root", {
             series: {
@@ -144,8 +155,11 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
     import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
     import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
 
-    // You may need this to configure from where wasm and data files are served
-    // SciChartSurface.configure({ dataUrl: "/custom/scichart2d.data", wasmUrl: "/other/scichart2d.wasm" });
+    // Optional:
+    // call useWasmFromCDN once before SciChart.js is initialised to load Wasm files from our CDN
+    // Alternatively, you can package wasm with webpack or load from URL
+    SciChart.SciChartSurface.useWasmFromCDN();
+    // See deployment options for WebAssembly at https://www.scichart.com/documentation/js/current/Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
 
     async function initSciChart() {
         // Create the SciChartSurface in the div 'scichart-root'
@@ -193,9 +207,9 @@ SciChart.js can be loaded as an ES6 module with Babel or TypeScript transpiler.
 
 Follow [the link](https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-simple-chart) to find source code for this example.
 
-## Documentation
+## Documentation & Tutorials
 
-We've taken the time to create hundreds of documentation pages for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
+We've taken the time to create hundreds of documentation pages and video tutorials for our JavaScript Charts, which you can find over at https://www.scichart.com/javascript-chart-documentation. Take a look here for tutorials, getting-started guides, API Docs (TypeDoc) and more.
 
 [![JavaScript Chart Documentation](Sandbox/scichart-js-javascript-chart-documentation.PNG)](https://www.scichart.com/javascript-chart-documentation)
 
@@ -205,8 +219,28 @@ An online demo version of scichart.js.examples can be seen at https://demo.scich
 
 # Release Notes
 
+## Version 2.2 with new Chart Types
+
+See [What's New in SciChart.js v2.2](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.2.html)
+
+**New Features**
+
+-   Added an Oil & gas Showcase demo
+-   Added a Lollipop (Impulse / Stem) Chart Type
+-   Added Error Bars (horizontal & vertical error bars) chart types
+-   Added multiple new enhancements to Pie / Donut Chart, including
+    -   Animated Updates on Pie chart segments
+    -   Ability to format, hide or change the HTML content of pie chart labels
+    -   Added multiple styling & configuration improvements to pie charts
+-   Added Axis configuration options
+    -   Ability to draw series behind axis (axis inside chart)
+    -   You can now set the Axis Background and Border
+-
+
 ## Version 2.1 with Major Performance Improvements
 
+See [What's New in SciChart.js v2.1](https://www.scichart.com/documentation/js/current/WhatsNewInSciChart2_1.html)
+
 We’ve used our expertise high performance computing in other platforms of SciChart to make massive improvements to chart rendering, updating and startup speed in SciChart.js v2.1.
 
 **Performance improvements**:
@@ -250,6 +284,8 @@ See all the details at [SciChart.js v2.1 release](https://www.scichart.com/scich
 
 ## Version 2.0
 
+See [What's New in SciChart.js v2.0](https://www.scichart.com/documentation/js/current/What's%20New%20in%20SciChart.js%20SDK%20v2.x.html)
+
 SciChart.js v2 is a huge release with many new features, improvements and fixes including:
 
 -   New pure-json builder api