React Spline Band Chart

1import {
2    AxisMarkerAnnotation,
3    EAxisAlignment,
4    ECoordinateMode,
5    EDragMode,
6    EHorizontalAnchorPoint,
7    ELegendOrientation,
8    ELegendPlacement,
9    EllipsePointMarker,
10    FadeAnimation,
11    LegendModifier,
12    MouseWheelZoomModifier,
13    NativeTextAnnotation,
14    NumberRange,
15    NumericAxis,
16    ScaleAnimation,
17    SciChartSurface,
18    SplineBandRenderableSeries,
19    XyyBezierRenderDataTransform,
20    XyyDataSeries,
21    YAxisDragModifier,
22    ZoomExtentsModifier,
23    ZoomPanModifier,
24} from "scichart";
25// import { XyyBezierRenderDataTransform } from "scichart/Charting/Visuals/RenderableSeries/RenderDataTransforms/BezierRenderDataTransform";
26import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
27import { appTheme } from "../../../theme";
28//import { xValues } from "../StackedMountainChart/data/stackedMountainChartData";
29
30
31export const drawExample = async (rootElement: string | HTMLDivElement) => {
32    
33    // Create a SciChartSurface
34    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
35        theme: appTheme.SciChartJsTheme,
36    });
37
38    // Add an XAxis, YAxis
39    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top }));
40    sciChartSurface.yAxes.add(
41        new NumericAxis(wasmContext, {
42            axisAlignment: EAxisAlignment.Left,
43            visibleRange: new NumberRange(-1.75, 0.75),
44            backgroundColor: appTheme.VividSkyBlue + "33",
45            labelStyle: { color: appTheme.VividOrange },
46            majorTickLineStyle: { color: appTheme.VividOrange },
47        })
48    );
49    sciChartSurface.yAxes.add(
50        new NumericAxis(wasmContext, {
51            axisAlignment: EAxisAlignment.Right,
52            id: "y2",
53            visibleRange: new NumberRange(-0.9, 1.6),
54            backgroundColor: appTheme.VividPurple + "33",
55            labelStyle: { color: appTheme.VividRed },
56            majorTickLineStyle: { color: appTheme.VividRed },
57        })
58    );
59
60    // The spline bandseries requires a special dataseries type called XyyDataSeries
61    // This stores X, Y1, Y2 point data for the two lines in the band
62    const yData = ExampleDataProvider.getDampedSinewave(0, 0.9, 0, 0.002, 1000, 17);
63    const y1Data = ExampleDataProvider.getDampedSinewave(0, 0.9, 0, 0.002, 1000, 16);
64
65    const xValues: number[] = [];
66    const yValues: number[] = [];
67    const y1Values: number[] = [];
68
69    for (let i = 0; i < 20; i++) {
70        const index = i * 50;
71        xValues.push(yData.xValues[index]);
72        yValues.push(yData.yValues[index]);
73        y1Values.push(y1Data.yValues[index]);
74    }
75
76    // Create the band series and add to the chart
77    const rendSeries = new SplineBandRenderableSeries(wasmContext, {
78        dataSeries: new XyyDataSeries(wasmContext, { xValues, yValues, y1Values, dataSeriesName: "Default Spline" }),
79        strokeThickness: 3,
80        fill: appTheme.VividOrange + "33",
81        fillY1: appTheme.VividSkyBlue + "33",
82        stroke: appTheme.VividOrange,
83        strokeY1: appTheme.VividSkyBlue,
84        interpolationPoints: 20, // Choose the number of points to interpolate for smoothing
85        pointMarker: new EllipsePointMarker(wasmContext, {
86            width: 7,
87            height: 7,
88            fill: appTheme.PaleSkyBlue,
89            stroke: appTheme.VividSkyBlue,
90        }),
91        animation: new ScaleAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
92    });
93
94    sciChartSurface.renderableSeries.add(rendSeries);
95
96    const bezierSeries = new SplineBandRenderableSeries(wasmContext, {
97        dataSeries: new XyyDataSeries(wasmContext, {
98            xValues,
99            yValues,
100            y1Values,
101            dataSeriesName: "XyyBezier (Range Restricted)",
102        }),
103        stroke: appTheme.VividPurple,
104        strokeY1: appTheme.VividRed,
105        fill: appTheme.VividPurple + "33",
106        fillY1: appTheme.VividRed + "33",
107        pointMarker: new EllipsePointMarker(wasmContext, {
108            width: 7,
109            height: 7,
110            fill: appTheme.PaleSkyBlue,
111            stroke: appTheme.VividSkyBlue,
112        }),
113        yAxisId: "y2",
114        strokeThickness: 3,
115        interpolationPoints: 20, // Choose the number of points to interpolate for smoothing
116        animation: new ScaleAnimation({ duration: 800, zeroLine: 0, fadeEffect: true }),
117    });
118    const bezierTransform = new XyyBezierRenderDataTransform(
119        bezierSeries,
120        wasmContext,
121        [bezierSeries.drawingProviders[0]],
122        { interpolationPoints: 20, curvature: 0.5 }
123    );
124    bezierSeries.renderDataTransform = bezierTransform;
125    sciChartSurface.renderableSeries.add(bezierSeries);
126
127    const curvatureAnnotation = new AxisMarkerAnnotation({
128        yCoordinateMode: ECoordinateMode.Relative,
129        y1: 0.5,
130        yAxisId: "y2",
131        formattedValue: "Bezier Curvature 0.5",
132        backgroundColor: appTheme.VividPurple,
133        isEditable: true,
134        onDrag: (args) => {
135            bezierTransform.curvature = curvatureAnnotation.y1;
136            curvatureAnnotation.formattedValue = "Bezier Curvature " + curvatureAnnotation.y1.toFixed(2);
137        },
138    });
139    sciChartSurface.annotations.add(curvatureAnnotation);
140
141    sciChartSurface.annotations.add(
142        new NativeTextAnnotation({
143            xCoordinateMode: ECoordinateMode.Relative,
144            yCoordinateMode: ECoordinateMode.Relative,
145            x1: 0.9,
146            y1: 0.9,
147            horizontalAnchorPoint: EHorizontalAnchorPoint.Right,
148            text: "Drag the left or right y axis to overlay and compare the series",
149            fontSize: 16,
150        })
151    );
152
153    // Optional: Add some interactivity modifiers
154    sciChartSurface.chartModifiers.add(
155        new YAxisDragModifier({ dragMode: EDragMode.Panning }),
156        new MouseWheelZoomModifier(),
157        new LegendModifier({
158            orientation: ELegendOrientation.Vertical,
159            placement: ELegendPlacement.TopRight,
160            showCheckboxes: true,
161        })
162    );
163
164    return { wasmContext, sciChartSurface };
165};
166