Custom Types with Builder API

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