scichart 2.2.2417 → 3.0.0-beta.230

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -32,6 +32,7 @@ var Rect_1 = require("../../../Core/Rect");
 var BaseType_1 = require("../../../types/BaseType");
 var SciChartSurfaceType_1 = require("../../../types/SciChartSurfaceType");
 var SciChartJSDarkTheme_1 = require("../../Themes/SciChartJSDarkTheme");
+var annotationHelpers_1 = require("../Annotations/annotationHelpers");
 var PieLabelProvider_1 = require("../Axis/LabelProvider/PieLabelProvider");
 var createMaster_1 = require("../createMaster");
 var createSingle_1 = require("../createSingle");
@@ -82,8 +83,8 @@ var EPieValueMode;
  */
 var SciChartPieSurface = /** @class */ (function () {
     function SciChartPieSurface(canvases, options) {
-        var _this = this;
         if (canvases === void 0) { canvases = {}; }
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         this.animate = true;
         /* The number of frames for the animation. Default 30.  A frame will be trigged every 20ms. */
@@ -114,8 +115,9 @@ var SciChartPieSurface = /** @class */ (function () {
         var width = this.domCanvas2D.width;
         var height = this.domCanvas2D.height;
         this.viewRect = new Rect_1.Rect(0, 0, width, height);
+        this.resizeSubscriptionToken = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, this);
         this.drawChart = this.drawChart.bind(this);
-        this.delete = this.delete.bind(this);
+        this.deleteInternals = this.deleteInternals.bind(this);
         this.invalidateElement = this.invalidateElement.bind(this);
         this.detachPieSegment = this.detachPieSegment.bind(this);
         this.attachPieSegment = this.attachPieSegment.bind(this);
@@ -170,8 +172,6 @@ var SciChartPieSurface = /** @class */ (function () {
             options = SciChartSurfaceBase_1.SciChartSurfaceBase.resolveOptions(options);
             var scps = new SciChartPieSurface(canvases, options);
             scps.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
-            var unsub = sciChartInitCommon_1.default.subscribeToResize(canvases.domChartRoot, canvases.aspect, scps);
-            scps.addDeletable(unsub);
             // setTimeout is used to make function async like createSciChartSurface, to have a consistent API
             setTimeout(function () { return resolve(scps); }, 0);
         });
@@ -270,6 +270,13 @@ var SciChartPieSurface = /** @class */ (function () {
      * @inheritDoc
      */
     SciChartPieSurface.prototype.delete = function (isAnimationProgress) {
+        this.deleteInternals();
+        this.resizeSubscriptionToken = (0, Deleter_1.deleteSafe)(this.resizeSubscriptionToken);
+    };
+    /**
+     * Used Internally. Cleans up the chart internal parts, subscriptions, etc.
+     */
+    SciChartPieSurface.prototype.deleteInternals = function (isAnimationProgress) {
         var _this = this;
         if (this.svg) {
             this.domSvgContainer.removeChild(this.svg);
@@ -508,13 +515,6 @@ var SciChartPieSurface = /** @class */ (function () {
      * @param height
      */
     SciChartPieSurface.prototype.changeDomViewportSize = function (width, height) {
-        if (this.domChartRoot) {
-            this.domChartRoot.style.height = "".concat(height, "px");
-        }
-        if (this.domCanvas2D) {
-            this.domCanvas2D.style.width = "".concat(width, "px");
-            this.domCanvas2D.style.height = "".concat(height, "px");
-        }
         if (this.domSvgContainer) {
             this.domSvgContainer.setAttribute("width", width.toString());
             this.domSvgContainer.setAttribute("height", height.toString());
@@ -523,9 +523,6 @@ var SciChartPieSurface = /** @class */ (function () {
             this.domSvgAdornerLayer.setAttribute("width", width.toString());
             this.domSvgAdornerLayer.setAttribute("height", height.toString());
         }
-        if (this.domDivContainer) {
-            this.domDivContainer.style.height = "".concat(height, "px");
-        }
     };
     // PRIVATE
     SciChartPieSurface.prototype.notifyPropertyChanged = function (propertyName) {
@@ -599,7 +596,7 @@ var SciChartPieSurface = /** @class */ (function () {
         if (this.pieSegments.size() === 0)
             return;
         if (this.sweepAnimationDone || !this.animate) {
-            this.delete();
+            this.deleteInternals();
             this.drawChart();
         }
         else {
@@ -609,7 +606,7 @@ var SciChartPieSurface = /** @class */ (function () {
             var setSweepAnimationDone_1 = function () { return (_this.sweepAnimationDone = true); };
             var callInvalidateElement_1 = this.invalidateElement;
             var callDrawChart_1 = this.drawChart;
-            var callDelete_1 = this.delete;
+            var callDelete_1 = this.deleteInternals;
             (function myLoop(k) {
                 setTimeout(function () {
                     var animationProgress = k / frames_1;
@@ -704,9 +701,8 @@ var SciChartPieSurface = /** @class */ (function () {
         this.adjustDomContainer();
         var svgString = "<svg width=\"".concat(this.calculateViewRectWidth(this.viewRect.width), "\" height=\"").concat(this.calculateViewRectHeight(this.viewRect.height), "\">").concat(gradientsBlock).concat(pathsBlock, "</svg>");
         // CREATING AND ATTACHING SVG TO DOM
-        var svgNode = document.createRange().createContextualFragment(svgString);
-        this.domSvgContainer.appendChild(svgNode);
-        this.svg = this.domSvgContainer.lastChild;
+        var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.domSvgContainer);
+        this.svg = svgNode;
     };
     SciChartPieSurface.prototype.adjustDomContainer = function () {
         var _a, _b, _c, _d, _e, _f;
@@ -746,6 +742,8 @@ var SciChartPieSurface = /** @class */ (function () {
     };
     SciChartPieSurface.prototype.drawSegmentLabel = function (el, index, totalValue, angleFrom, angleTo, xCoord, yCoord, outerRadius, innerRadius) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (el.showLabel === false)
+            return;
         var labelDivId = "segment" + index;
         var div = this.titleDivs.find(function (d) { return d.id === labelDivId; });
         if (!div) {

package/Charting/Visuals/SciChartSurface.d.ts

@@ -1,10 +1,13 @@
-import { ISciChart2DDefinition } from "../../Builder/buildSurface";
+import { ISciChart2DDefinition, ISubChartDefinition } from "../../Builder/buildSurface";
 import { TEasingFn } from "../../Core/Animations/EasingFunctions";
 import { IGenericAnimation } from "../../Core/Animations/GenericAnimation";
 import { EventHandler } from "../../Core/EventHandler";
 import { ObservableArray } from "../../Core/ObservableArray";
 import { Rect } from "../../Core/Rect";
 import { Thickness } from "../../Core/Thickness";
+import { EAutoColorMode } from "../../types/AutoColorMode";
+import { Size } from "../../types/Size";
+import { ESvgClippingMode } from "../../types/SvgClippingMode";
 import { TBorder } from "../../types/TBorder";
 import { TSciChart } from "../../types/TSciChart";
 import { TSciChartSurfaceCanvases } from "../../types/TSciChartSurfaceCanvases";
@@ -16,12 +19,15 @@ import { WebGlRenderContext2D } from "../Drawing/WebGlRenderContext2D";
 import { LayoutManager } from "../LayoutManager/LayoutManager";
 import { IThemeProvider } from "../Themes/IThemeProvider";
 import { AdornerLayer } from "./Annotations/AdornerLayer";
+import { ECoordinateMode } from "./Annotations/AnnotationBase";
 import { IAnnotation } from "./Annotations/IAnnotation";
 import { AxisBase2D } from "./Axis/AxisBase2D";
-import { I2DSurfaceOptions } from "./I2DSurfaceOptions";
+import { I2DSubSurfaceOptions, I2DSurfaceOptions } from "./I2DSurfaceOptions";
+import { IDataLabelLayoutManager } from "./RenderableSeries/DataLabels/DataLabelLayoutManager";
 import { IRenderableSeries } from "./RenderableSeries/IRenderableSeries";
 import { ESurfaceType, SciChartSurfaceBase, TSciChartConfig } from "./SciChartSurfaceBase";
 import { TDpiChangedEventArgs } from "./TextureManager/DpiHelper";
+import { Point } from "../../Core/Point";
 export declare type TWebAssemblyChart = {
     wasmContext: TSciChart;
     sciChartSurface: SciChartSurface;
@@ -58,7 +64,9 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      */
     static create(divElement: string | HTMLDivElement, options?: I2DSurfaceOptions): Promise<TWebAssemblyChart>;
     /**
-     * USED INTERNALLY - performs a similar operation to {@link SciChartSurface.create} but used internally for testing
+     * Performs a similar operation to {@link SciChartSurface.create} but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas
+     * This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page.
+     * If you need large numbers of charts all updating at the same time, use this, together with {@link addSubChart} to create many charts on one surface.
      * @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
      * @param options - optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
      */
@@ -172,29 +180,52 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      */
     renderContext2D: RenderContext2D;
     /**
-     * An event handler which notifies its subsribers when a render operation has finished. Use this
+     * An event handler which notifies its subscribers when a render operation has finished. Use this
      * to time render performance, or to update elements of the chart or your UI on redraw.
      */
     rendered: EventHandler<void>;
+    /**
+     * An event handler which notifies its subscribers when a render operation starts. Use this
+     * to update elements of the chart for the current render.  Any updates made here will not trigger a subsequent render.
+     */
+    preRender: EventHandler<WebGlRenderContext2D>;
+    layersOffset: number;
+    stepBetweenLayers: number;
+    readonly isSubSurface: boolean;
     readonly adornerLayer: AdornerLayer;
+    /**
+     * Sets / Gets the clipping mode for SVG Annotations
+     */
+    svgClippingMode: ESvgClippingMode;
+    /**
+     * Normally, native labels are drawn all at once at the end of the render cycle to improve performance.
+     * In circumstances where you want to draw over the labels, eg with a subchart, set this true to have them drawn earlier.
+     */
+    renderNativeAxisLabelsImmediately: boolean;
     /**
      * The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
      * access to our WebGL2 Engine and WebAssembly numerical methods
      */
     readonly webAssemblyContext2D: TSciChart;
     protected animationList: IGenericAnimation[];
+    protected paddingProperty: Thickness;
     private readonly sciChartRenderer;
     private layoutManagerProperty;
+    private dataLabelLayoutManagerProperty;
     private zoomStateProperty;
     private watermarkProperties;
     private watermarkPropertyPosition;
-    private paddingProperty;
     private debugRenderingProperty;
     private solidBrushCacheViewportBorder;
     private solidBrushCacheCanvasBorder;
     private viewportBorderProperty;
     private canvasBorderProperty;
+    private subChartsProperty;
     private drawSeriesBehindAxisProperty;
+    private autoColorModeProperty;
+    private autoColorRequired;
+    private xCoordSvgTrans;
+    private yCoordSvgTrans;
     /**
      * Creates an instance of the {@link SciChartSurface}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
@@ -202,6 +233,23 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * @param options optional parameters of type {@link ISciChartSurfaceOptions} used to configure the {@link SciChartSurface}
      */
     constructor(webAssemblyContext: TSciChart, options?: ISciChartSurfaceOptions);
+    private subChartCounter;
+    /**
+     * Add another chart to an existing surface.
+     * This is a performance optimization if you need to have multiple charts all updating together, eg because they have synced axes.
+     * We suggest you use SciChartSurface.createSingle for the parent surface.  The parent surface does not have to have any chart elements defined.
+     * The position property required in the options determines the placement and size of the subchart.  Its values are interpreted differently depending on the coordinateMode
+     * Modifiers using modifierGroup will work across other subcharts on the surface, but not to any other surface.
+     */
+    addSubChart(options?: I2DSubSurfaceOptions): SciChartSubSurface;
+    /**
+     * Remove an existing subChart from a parent surface.  See {@link addSubChart}
+     */
+    removeSubChart(subChart: SciChartSubSurface): void;
+    /**
+     * The list of subCharts on this surface.  See {@link addSubChart}
+     */
+    get subCharts(): ReadonlyArray<SciChartSubSurface>;
     /**
      * @inheritDoc
      */
@@ -214,6 +262,14 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally - gets or sets the {@link LayoutManager}
      */
     set layoutManager(value: LayoutManager);
+    /**
+     * Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
+     */
+    get dataLabelLayoutManager(): IDataLabelLayoutManager;
+    /**
+     * Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
+     */
+    set dataLabelLayoutManager(value: IDataLabelLayoutManager);
     /**
      * Gets or sets the Padding between the SciChartSurface and it's inner elements, in order top, right, bottom, left
      * @remarks
@@ -243,6 +299,14 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Used internally for development purposes
      */
     set debugRendering(debugRendering: boolean);
+    /**
+     * Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
+     */
+    get autoColorMode(): EAutoColorMode;
+    /**
+     * Gets or sets the EAutoColorMode which determines when resolution of AUTO_COLOR should occur
+     */
+    set autoColorMode(autoColorMode: EAutoColorMode);
     /**
      * @inheritDoc
      */
@@ -255,7 +319,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * @inheritDoc
      */
     invalidateElement(): void;
-    doDrawingLoop(): void;
+    doDrawingLoop(context?: WebGlRenderContext2D): void;
     /**
      * @inheritDoc
      */
@@ -380,7 +444,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Multiple animations will be run in parallel, so if you want to run one after another, use the onCompleted callback
      * to add another animation after the first completes
      */
-    addAnimation(animation: IGenericAnimation): void;
+    addAnimation(...animations: IGenericAnimation[]): void;
     /**
      * Returns true if an animation is running
      */
@@ -391,6 +455,18 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * Use not scaled values for SVG annotations and the Legend
      */
     getSeriesViewRectPadding(scaled?: boolean): Thickness;
+    /** Calls resolveAutoColors on each series to resolve colors marked as auto based on the seriesColorPalette */
+    resolveAutoColors(maxSeries?: number): void;
+    /**
+     * Used internally - sets SVG Canvas Translation
+     * @param x
+     * @param y
+     */
+    setCoordSvgTranslation(x: number, y: number): void;
+    /**
+     * Gets SVG Canvas Translation, used to draw on SVG Canvas using different {@link ESvgClippingMode}
+     */
+    getCoordSvgTranslation(): Point;
     /**
      * Convert the object to a definition that can be serialized to JSON, or used directly with the builder api
      * @param excludeData if set true, data values will not be included in the json.
@@ -422,6 +498,8 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     private attachAxis;
     private detachAnnotation;
     private attachAnnotation;
+    protected onAttachSubSurface(subSurface: SciChartSubSurface): void;
+    protected onDetachSubSurface(subSurface: SciChartSubSurface): void;
     /**
      * Gets or sets the boolean flag for switching behaviour of Axises rendering
      */
@@ -431,3 +509,156 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      */
     set drawSeriesBehindAxis(value: boolean);
 }
+export interface ISciChartSubSurfaceOptions extends ISciChartSurfaceOptions {
+    subSurfaceOptions: I2DSubSurfaceOptions;
+    parentSurface: SciChartSurface;
+}
+export interface IOffsets {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/**
+ * @summary The {@link SciChartSubSurface} is the surface created within another surface
+ * @description
+ * It can be added using {@link SciChartSurface.addSubChart} method.
+ *
+ * To update the positioning of the {@link SciChartSubSurface}, use {@link SciChartSubSurface.subPosition};
+ * also you can call {@link SciChartSubSurface.updateSubLayout} to refresh the layout of the sub-surface.
+ * @remarks
+ * It is not possible to have more than one level of nested sub-surfaces.
+ */
+export declare class SciChartSubSurface extends SciChartSurface {
+    readonly isSubSurface: boolean;
+    readonly subChartContainer: HTMLDivElement;
+    topSectionClass: string;
+    leftSectionClass: string;
+    bottomSectionClass: string;
+    rightSectionClass: string;
+    protected backgroundProperty: string;
+    protected isTransparentProperty: boolean;
+    protected subPaddingProperty: Thickness;
+    private subPositionProperty;
+    private coordinateModeProperty;
+    private parentXAxisIdProperty;
+    private parentYAxisIdProperty;
+    private subChartContainerId;
+    private parentSurfaceProperty;
+    private backgroundFillBrushCache;
+    private isVisibleProperty;
+    private sectionScaleProperty;
+    /**
+     * Creates an instance of the {@link SciChartSurface}
+     * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
+     * access to our WebGL2 Engine and WebAssembly numerical methods
+     * @param options optional parameters of type {@link ISciChartSurfaceOptions} used to configure the {@link SciChart2DSurfaceBase}
+     */
+    constructor(webAssemblyContext: TSciChart, options?: ISciChartSubSurfaceOptions);
+    /**
+     * Whether other surfaces, including the parent, will be visible underneath this surface
+     */
+    get isTransparent(): boolean;
+    /**
+     * Whether other surfaces, including the parent, will be visible underneath this surface
+     */
+    set isTransparent(value: boolean);
+    /**
+     * Gets or sets additional absolute padding between the SciChartSubSurface and its parent, in order top, right, bottom, left
+     * {@link subPosition} is applied first, then this padding is added.
+     */
+    get subChartPadding(): Thickness;
+    /**
+     * Gets or sets additional absolute padding between the SciChartSubSurface and its parent, in order top, right, bottom, left
+     * {@link subPosition} is applied first, then this padding is added.
+     */
+    set subChartPadding(padding: Thickness);
+    /**
+     * Gets or sets the {@link ECoordinateMode} used when calculating the actual position based on the {@link subPosition}
+     */
+    get coordinateMode(): ECoordinateMode;
+    /**
+     * Gets or sets the {@link ECoordinateMode} used when calculating the actual position based on the {@link subPosition}
+     */
+    set coordinateMode(coordinateMode: ECoordinateMode);
+    /**
+     * Gets or sets the AxisId used to determing which X Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    get parentXAxisId(): string;
+    /**
+     * Gets or sets the AxisId used to determing which X Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    set parentXAxisId(id: string);
+    /**
+     * Gets or sets the AxisId used to determing which Y Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    get parentYAxisId(): string;
+    /**
+     * Gets or sets the AxisId used to determing which Y Axis should be used when calculating the actual position based on the {@link subPosition}
+     * if {@link coordinateMode} is DataValue
+     */
+    set parentYAxisId(id: string);
+    /**
+     * A rectangle defining the position and size of a subchart.
+     * If {@link coordinateMode} is Relative (the default) then the values give the size as a proportion of the parent div, and all properties must be between 0 and 1 inclusive.
+     * If {@link coordinateMode} is DataValue, values will be converted to coordinates using {@link parentXAxisId} and {@link parentYAxisId}. Subchart will be clpped to the parent SeriesViewRect
+     * Can only be set if this is a subChart.  See {@link addSubChart}
+     */
+    get subPosition(): Rect;
+    /**
+     * A rectangle defining the position and size of a subchart.
+     * If {@link coordinateMode} is Relative (the default) then the values give the size as a proportion of the parent div, and all properties must be between 0 and 1 inclusive.
+     * If {@link coordinateMode} is DataValue, values will be converted to coordinates using {@link parentXAxisId} and {@link parentYAxisId}. Subchart will be clpped to the parent SeriesViewRect
+     * Can only be set if this is a subChart.  See {@link addSubChart}
+     */
+    set subPosition(value: Rect);
+    /**
+     * Gets or sets if the subchart is visible, allowing you to hide a subchart without removing it from the parent surface
+     */
+    get isVisible(): boolean;
+    /**
+     * Gets or sets if the subchart is visible, allowing you to hide a subchart without removing it from the parent surface
+     */
+    set isVisible(isVisible: boolean);
+    /**
+     * Gets or sets scale property for all sections
+     * It is necessary if the scale transformation is being used for html areas around the subchart
+     * For example, style = { width: "50%", transform: scale(2), transformOrigin: 'left top' }
+     */
+    get sectionScale(): number;
+    set sectionScale(value: number);
+    /** Recalculate the position of the subChart.  Call if you update the size of html elements in the wrapper */
+    updateSubLayout(isDrawing?: boolean): void;
+    /**
+     * The parent SciChartSurface, if this is a subChart. See {@link addSubChart}
+     */
+    get parentSurface(): SciChartSurface;
+    /**
+     * @inheritDoc
+     */
+    get surfaceType(): ESurfaceType;
+    /**
+     * @inheritDoc
+     */
+    changeViewportSize(pixelWidth: number, pixelHeight: number): void;
+    /**
+     * Gets the sub-chart container
+     */
+    getSubChartContainer(): HTMLDivElement;
+    getSubChartRect(): Rect;
+    /**
+     * @inheritDoc
+     */
+    delete(clearHtml?: boolean): void;
+    toJSON(excludeData?: boolean): ISubChartDefinition;
+    protected calcPadding(viewportSize: Size, position: Rect, offsets: IOffsets, isDrawing?: boolean): Thickness;
+    /**
+     * @inheritDoc
+     */
+    protected applySciChartBackground(background: string, alphaEnabled?: boolean): void;
+    protected updateWrapper(subChartPosition: Rect): void;
+    protected getOffsets(subChartContainer: HTMLDivElement): IOffsets;
+}