React Order of Rendering Example

1import {
2    MouseWheelZoomModifier,
3    ZoomExtentsModifier,
4    ZoomPanModifier,
5    XyyDataSeries,
6    NumericAxis,
7    FastBandRenderableSeries,
8    SciChartSurface,
9    NumberRange,
10    SweepAnimation,
11    NativeTextAnnotation,
12    EWrapTo,
13    GenericAnimation,
14    EDefaultRenderLayer,
15    DoubleAnimator,
16    BoxAnnotation,
17    ECoordinateMode,
18} from "scichart";
19
20import { appTheme } from "../../../theme";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    // Create a SciChartSurface
24    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
25        theme: appTheme.SciChartJsTheme,
26    });
27
28    // Add an XAxis, YAxis
29    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
30    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
31
32    // Create some data for the example. We need X, Y and Y1 values
33    const xValues = [];
34    const yValues = [];
35    const y1Values = [];
36    const POINTS = 1000;
37    const STEP = (3 * Math.PI) / POINTS;
38    for (let i = 0; i <= 1000; i++) {
39        const k = 1 - i / 2000;
40        xValues.push(i / 100);
41        yValues.push(Math.sin(i * STEP) * k * 0.7);
42        y1Values.push(Math.cos(i * STEP) * k);
43    }
44
45    // Create the band series and add to the chart
46    // The bandseries requires a special dataseries type called XyyDataSeries with X,Y and Y1 values
47
48    const band1 = new FastBandRenderableSeries(wasmContext, {
49        dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values }),
50        strokeThickness: 3,
51        fill: appTheme.MutedOrange,
52        fillY1: appTheme.MutedBlue,
53        opacity: 0.7,
54        stroke: appTheme.MutedOrange,
55        strokeY1: appTheme.MutedBlue,
56        animation: new SweepAnimation({ duration: 800 }),
57        renderLayer: EDefaultRenderLayer.SeriesLayer, // default layer for series, not actually needed here
58    });
59
60    const band2 = new FastBandRenderableSeries(wasmContext, {
61        dataSeries: new XyyDataSeries(wasmContext, {
62            xValues,
63            yValues: yValues.map((y) => y - 0.5),
64            y1Values: y1Values.map((y) => y - 0.5),
65        }),
66        strokeThickness: 3,
67        fill: appTheme.MutedSkyBlue,
68        fillY1: appTheme.MutedPink,
69        opacity: 0.7,
70        stroke: appTheme.MutedSkyBlue,
71        strokeY1: appTheme.MutedPink,
72        animation: new SweepAnimation({ duration: 800 }),
73        renderLayer: EDefaultRenderLayer.SeriesLayer, // default layer for series, not actually needed here
74    });
75
76    const band3 = new FastBandRenderableSeries(wasmContext, {
77        dataSeries: new XyyDataSeries(wasmContext, {
78            xValues,
79            yValues: yValues.map((y) => y - 1),
80            y1Values: y1Values.map((y) => y - 1),
81        }),
82        strokeThickness: 3,
83        fill: appTheme.MutedTeal,
84        fillY1: appTheme.MutedPurple,
85        opacity: 0.7,
86        stroke: appTheme.MutedTeal,
87        strokeY1: appTheme.MutedPurple,
88        animation: new SweepAnimation({ duration: 800 }),
89        renderLayer: EDefaultRenderLayer.SeriesLayer, // default layer for series, not actually needed here
90    });
91
92    const label1 = new NativeTextAnnotation({
93        renderNextTo: { renderable: band1, offset: 0 },
94        text: "1.",
95        fontSize: 20,
96        x1: 0.05,
97        xCoordinateMode: ECoordinateMode.Relative,
98        y1: 0.65,
99        textColor: appTheme.VividBlue,
100        wrapTo: EWrapTo.Annotation,
101        renderLayer: EDefaultRenderLayer.SeriesLayer,
102        // drawImmediate: true,
103        renderOrder: 0,
104    });
105
106    const label2 = new NativeTextAnnotation({
107        renderNextTo: { renderable: band2, offset: 0 },
108        text: "2.",
109        fontSize: 20,
110        x1: 0.05,
111        xCoordinateMode: ECoordinateMode.Relative,
112        y1: 0.14,
113        textColor: appTheme.VividBlue,
114        wrapTo: EWrapTo.Annotation,
115        renderLayer: EDefaultRenderLayer.SeriesLayer,
116        // drawImmediate: true,
117        renderOrder: 0,
118    });
119
120    const label3 = new NativeTextAnnotation({
121        renderNextTo: { renderable: band3, offset: 0 },
122        text: "3.",
123        fontSize: 20,
124        x1: 0.05,
125        xCoordinateMode: ECoordinateMode.Relative,
126        y1: -0.37,
127        textColor: appTheme.VividBlue,
128        wrapTo: EWrapTo.Annotation,
129        renderLayer: EDefaultRenderLayer.SeriesLayer,
130        // drawImmediate: true,
131        renderOrder: 0,
132    });
133
134    const nativeText = new NativeTextAnnotation({
135        text: "These Annotations are rendered on the series layer so they can render between series",
136        fontSize: 18,
137        x1: 4,
138        x2: 7,
139        y1: 0.2,
140        textColor: appTheme.ForegroundColor,
141        wrapTo: EWrapTo.Annotation,
142        renderLayer: EDefaultRenderLayer.SeriesLayer,
143        // drawImmediate: true,
144        renderOrder: 0,
145    });
146
147    const box = new BoxAnnotation({
148        x1: 3.9,
149        x2: 7.3,
150        y1: 0.23,
151        y2: -0.5,
152        stroke: appTheme.ForegroundColor,
153        fill: appTheme.MutedBlue,
154        opacity: 0.8,
155        renderNextTo: { renderable: nativeText, offset: -0.1 },
156    });
157
158    const annotationAnimation = new GenericAnimation<number>({
159        from: 0.5,
160        to: 4,
161        onAnimate: (from: number, to: number, progress: number) => {
162            const annotationRO = DoubleAnimator.interpolate(from, to, progress);
163            nativeText.text = `Render Order ${annotationRO.toFixed(
164                1
165            )}\n\nThese Annotations are rendered on the series layer so they can render between series`;
166            //nativeText.x1 += annotationRO;
167            //nativeText.x2 += annotationRO;
168            //box.x1 = nativeText.x1;
169            //box.x2 = nativeText.x2;
170            nativeText.setRenderOrder(annotationRO);
171        },
172        duration: 4000,
173        delay: 0,
174        onCompleted: () => {
175            let temp = annotationAnimation.from;
176            annotationAnimation.from = annotationAnimation.to;
177            annotationAnimation.to = temp;
178            annotationAnimation.reset();
179        },
180    });
181
182    sciChartSurface.addAnimation(annotationAnimation);
183
184    sciChartSurface.annotations.add(nativeText, box, label1, label2, label3);
185
186    sciChartSurface.renderableSeries.add(band1, band2, band3);
187
188    // Optional: Add some interactivity modifiers
189    sciChartSurface.chartModifiers.add(
190        new ZoomExtentsModifier(),
191        new ZoomPanModifier({ enableZoom: true }),
192        new MouseWheelZoomModifier()
193    );
194
195    const changeOrder = (order: boolean) => {
196        if (order) {
197            // band1.setRenderLayer(EDefaultRenderLayer.AnnotationsBelowSeriesLayer);
198            // band2.setRenderLayer(EDefaultRenderLayer.Foreground);
199            band1.setRenderOrder(1);
200            band2.setRenderOrder(2);
201            band3.setRenderOrder(3);
202            label1.text = "1.";
203            label2.text = "2.";
204            label3.text = "3.";
205        } else {
206            band1.setRenderOrder(3);
207            band2.setRenderOrder(2);
208            band3.setRenderOrder(1);
209            label1.text = "3.";
210            label2.text = "2.";
211            label3.text = "1.";
212        }
213    };
214
215    sciChartSurface.zoomExtents();
216    return { wasmContext, sciChartSurface, changeOrder };
217};
218