Custom Types with Builder API

1import {
2    SciChartSurface,
3    build2DChart,
4    buildSeries,
5    registerType,
6    registerAllTypes,
7    ESeriesType,
8    EAxisType,
9    ELineDrawMode,
10    XyDataSeries,
11    EAnimationType,
12    EAxisAlignment,
13    EPaletteProviderType,
14    EFillPaletteMode,
15    EStrokePaletteMode,
16    IFillPaletteProvider,
17    IStrokePaletteProvider,
18    IRenderableSeries,
19    EBaseType,
20    parseColorToUIntArgb,
21    NumberRange,
22    EAnnotationType,
23    ECoordinateMode,
24    EHorizontalAnchorPoint,
25    EVerticalAnchorPoint,
26} from "scichart";
27import { appTheme } from "../../theme";
28
29// The Builder API is lean by default in v6. This chart is defined with type-strings only,
30// so register the built-in types before building it
31registerAllTypes();
32
33// Define a custom PaletteProvider
34export class ExampleMountainPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
35    public static Name = "ExampleMountain";
36    public readonly strokePaletteMode = EStrokePaletteMode.SOLID;
37    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
38    private readonly palettedStroke: number;
39    private readonly palettedFill: number;
40    private readonly options: { stroke: string; fill: string };
41
42    constructor(options: { stroke: string; fill: string }) {
43        this.options = options;
44        this.palettedStroke = parseColorToUIntArgb(options.stroke);
45        this.palettedFill = parseColorToUIntArgb(options.fill);
46    }
47
48    // tslint:disable-next-line:no-empty
49    public onAttached(parentSeries: IRenderableSeries): void {}
50
51    // tslint:disable-next-line:no-empty
52    public onDetached(): void {}
53
54    public overrideFillArgb(xValue: number, yValue: number, index: number): number {
55        if (yValue > 0.5 && yValue < 0.75) {
56            return this.palettedFill;
57        } else {
58            return undefined;
59        }
60    }
61
62    public overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
63        if (yValue > 0.5 && yValue < 0.75) {
64            return this.palettedStroke;
65        } else {
66            return undefined;
67        }
68    }
69
70    // Add a toJSON method so this can be serialized.
71    // @ts-ignore
72    public toJSON() {
73        return {
74            type: EPaletteProviderType.Custom,
75            customType: ExampleMountainPaletteProvider.Name,
76            options: this.options,
77        };
78    }
79}
80
81// Register it for use by the builder api
82registerType(
83    EBaseType.PaletteProvider,
84    ExampleMountainPaletteProvider.Name,
85    (options: { stroke: string; fill: string }) => new ExampleMountainPaletteProvider(options)
86);
87
88export const drawExample = async (rootElement: string | HTMLDivElement) => {
89    // Build the surface
90    const { sciChartSurface, wasmContext } = await build2DChart(rootElement, {
91        surface: { theme: appTheme.SciChartJsTheme },
92        yAxes: {
93            type: EAxisType.NumericAxis,
94            options: { axisAlignment: EAxisAlignment.Left, visibleRange: new NumberRange(0, 1) },
95        },
96        // Add annotations
97        annotations: [
98            {
99                type: EAnnotationType.SVGTextAnnotation,
100                options: {
101                    text: "Builder API Demo",
102                    x1: 0.5,
103                    y1: 0.5,
104                    opacity: 0.33,
105                    yCoordShift: -26,
106                    xCoordinateMode: ECoordinateMode.Relative,
107                    yCoordinateMode: ECoordinateMode.Relative,
108                    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
109                    verticalAnchorPoint: EVerticalAnchorPoint.Center,
110                    fontSize: 36,
111                    fontWeight: "Bold",
112                },
113            },
114            {
115                type: EAnnotationType.SVGTextAnnotation,
116                options: {
117                    text: "Create SciChart charts with JSON Objects",
118                    x1: 0.5,
119                    y1: 0.5,
120                    yCoordShift: 26,
121                    opacity: 0.33,
122                    xCoordinateMode: ECoordinateMode.Relative,
123                    yCoordinateMode: ECoordinateMode.Relative,
124                    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
125                    verticalAnchorPoint: EVerticalAnchorPoint.Center,
126                    fontSize: 24,
127                    fontWeight: "Bold",
128                },
129            },
130        ],
131    });
132    // Build the series.
133    // By doing this separately we can easily get the reference to the series so we can add generated data to it
134    const [mountainSeries] = buildSeries(wasmContext, {
135        type: ESeriesType.MountainSeries,
136        options: {
137            paletteProvider: {
138                type: EPaletteProviderType.Custom,
139                customType: ExampleMountainPaletteProvider.Name,
140                options: { stroke: appTheme.MutedRed, fill: appTheme.VividOrange },
141            },
142            fillLinearGradient: {
143                startPoint: { x: 0, y: 0 },
144                endPoint: { x: 0, y: 1 },
145                gradientStops: [
146                    { color: appTheme.VividBlue, offset: 0 },
147                    { color: "Transparent", offset: 1 },
148                ],
149            },
150            stroke: appTheme.PaleSkyBlue,
151            strokeThickness: 3,
152            drawNaNAs: ELineDrawMode.PolyLine,
153            animation: { type: EAnimationType.Scale, options: { ease: "cubic" } },
154        },
155    });
156
157    // Create a dataSeries the normal way
158    const dataSeries = new XyDataSeries(wasmContext);
159    // Generate data
160    const POINTS = 1000;
161    const STEP = (3 * Math.PI) / POINTS;
162    for (let i = 0; i <= 1000; i++) {
163        let y = Math.abs(Math.sin(i * STEP));
164        if (y < 0.2) {
165            y = NaN;
166        }
167        dataSeries.append(i, y);
168    }
169    mountainSeries.dataSeries = dataSeries;
170    // Since we built the series separately, we have to manually add it to the surface
171    sciChartSurface.renderableSeries.add(mountainSeries);
172
173    return { sciChartSurface, wasmContext };
174};
175