React Polar Partial Arc

1import {
2    SciChartPolarSurface,
3    PolarMouseWheelZoomModifier,
4    PolarZoomExtentsModifier,
5    PolarPanModifier,
6    XyDataSeries,
7    PolarLineRenderableSeries,
8    EllipsePointMarker,
9    PolarNumericAxis, 
10    EPolarAxisMode,
11    EPolarLabelMode,
12    EAxisAlignment,
13    Thickness,
14    EXyDirection,
15    GenericAnimation,
16    easing,
17    NumberRange,
18} from "scichart";
19import { appTheme } from "../../../theme";
20
21/**
22 * Calculate inner radius for the angle to fit nicely into 3 x 2 aspect ratio canvas.
23 * Use it for fraction less than 1/4 (quarter of the circle)
24 */
25const calcRadiusFromAngleFraction = (angleFraction: number) => {
26    const totalAngle = 2 * Math.PI * angleFraction;
27    const halfAngle = totalAngle / 2;
28    return (1 - (4 / 3) * Math.sin(halfAngle)) / Math.cos(halfAngle);
29};
30
31export const drawExample = async (
32    rootElement: string | HTMLDivElement, 
33    innerRadius: number,
34    totalAngle: number,
35    onAnimationUpdate?: (values: { innerRadius: number, totalAngle: number }) => void
36) => {
37    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
38        theme: appTheme.SciChartJsTheme
39    });
40
41    // Add axes
42    const radialYAxis = new PolarNumericAxis(wasmContext, {
43        polarAxisMode: EPolarAxisMode.Radial,
44        axisAlignment: EAxisAlignment.Right,
45        drawMinorGridLines: false,
46        useNativeText: true,
47        drawLabels: true,
48        labelPrecision: 0,
49
50        majorGridLineStyle: {
51            color: "gray",
52            strokeThickness: 1,
53        },
54        isInnerAxis: true,
55        visibleRange: new NumberRange(0, 10),
56        zoomExtentsToInitialRange: true,
57
58        innerRadius: innerRadius,
59        startAngle: Math.PI / 2,
60    });
61    sciChartSurface.yAxes.add(radialYAxis);
62
63    const angularXAxis = new PolarNumericAxis(wasmContext, {
64        polarAxisMode: EPolarAxisMode.Angular,
65        polarLabelMode: EPolarLabelMode.Parallel,
66        axisAlignment: EAxisAlignment.Top,
67        labelPrecision: 0,
68
69        flippedCoordinates: true,
70        drawMinorGridLines: false,
71        useNativeText: true,
72
73        majorGridLineStyle: {
74            color: "gray",
75            strokeThickness: 1,
76        },
77
78        totalAngle,
79        startAngle: Math.PI / 2,
80    });
81    sciChartSurface.xAxes.add(angularXAxis);
82
83    // Add a basic line series to better visualize the polar chart
84    const PETAL_NUMBER = 6; 
85    const POINTS_PER_PETAL = 100; 
86
87    const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
88        dataSeries: new XyDataSeries(wasmContext, {
89            xValues: Array.from({length: PETAL_NUMBER * POINTS_PER_PETAL + 1}, (_, i) => i / POINTS_PER_PETAL ),
90            yValues: Array.from({length: PETAL_NUMBER * POINTS_PER_PETAL + 1}, (_, i) => {
91                const angleFraction = i / (PETAL_NUMBER * POINTS_PER_PETAL);
92                return 5 + 5 * Math.sin(2 * Math.PI * angleFraction * PETAL_NUMBER);
93            })
94        }),
95        stroke: appTheme.VividOrange,
96        interpolateLine: true,
97        strokeThickness: 3,
98        pointMarker: new EllipsePointMarker(wasmContext, {
99            width: 8,
100            height: 8,
101            stroke: appTheme.VividOrange,
102            fill: appTheme.DarkIndigo
103        }),
104    });
105    sciChartSurface.renderableSeries.add(polarlineSeries);
106
107    // customize `zoomExtents` modifier to update frontend sliders via Callback
108    const zoomExtentsMod = new PolarZoomExtentsModifier();
109    zoomExtentsMod.animationDuration = 200;
110    zoomExtentsMod.onZoomExtents = ((sciChartSurface) => {
111        setTimeout(() => {
112            onAnimationUpdate({
113                innerRadius: radialYAxis.innerRadius,
114                totalAngle: angularXAxis.totalAngle
115            });
116        }, 200); // wait for `zoomExtents` animation to complete
117        return true;
118    })
119
120    sciChartSurface.chartModifiers.add(
121        new PolarPanModifier({ xyDirection: EXyDirection.XDirection }),
122        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 }),
123
124        // Customise `zoomExtents` modifier to update frontend sliders via `onAnimationUpdate` Callback
125        new PolarZoomExtentsModifier({
126            animationDuration: 200,
127            onZoomExtents: ((sciChartSurface) => {
128                setTimeout(() => {
129                    onAnimationUpdate({
130                        innerRadius: radialYAxis.innerRadius,
131                        totalAngle: angularXAxis.totalAngle
132                    });
133                }, 200); // wait for animation to complete
134                return true;
135            })
136        }),
137    );
138
139    // Animation which animates a polar surface to look like a Cartesian coordinate system for better understanding
140    type polarAnimationOptions = { 
141        angleFraction: number;
142        startAngle: number; 
143        radius: number 
144    };
145
146    const animateAll = (from: polarAnimationOptions, to: polarAnimationOptions, progress: number) => {
147        const angleFractionQuarter$ = 1 / 4;
148        const totalAngleQuarter$ = 2 * Math.PI * angleFractionQuarter$;
149        const beta$ = totalAngleQuarter$ / 2;
150        const radius4quarter$ = (1 - (4 / 3) * Math.sin(beta$)) / Math.cos(beta$);
151        const startAngleQuarter$ = totalAngleQuarter$ - totalAngleQuarter$ / 2;
152
153        const curFraction$ = from.angleFraction + (to.angleFraction - from.angleFraction) * progress;
154        const curTotalAngle$ = 2 * Math.PI * curFraction$;
155        angularXAxis.totalAngle = curTotalAngle$;
156        const isAFIncreasing$ = to.angleFraction - from.angleFraction > 0;
157        if (isAFIncreasing$) {
158            if (curFraction$ < angleFractionQuarter$) {
159                const progress$ = (curFraction$ - from.angleFraction) / (angleFractionQuarter$ - from.angleFraction);
160                const radius$ = calcRadiusFromAngleFraction(curFraction$);
161                radialYAxis.innerRadius = radius$;
162                const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
163                angularXAxis.startAngle = curSA$;
164                radialYAxis.startAngle = curSA$;
165            } else {
166                const progress$ = (curFraction$ - angleFractionQuarter$) / (to.angleFraction - angleFractionQuarter$);
167                const radius$ = radius4quarter$ + (to.radius - radius4quarter$) * progress$;
168                radialYAxis.innerRadius = radius$;
169                const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
170                angularXAxis.startAngle = curSA$;
171                radialYAxis.startAngle = curSA$;
172            }
173        } else {
174            if (curFraction$ > angleFractionQuarter$) {
175                const progress$ = (from.angleFraction - curFraction$) / (from.angleFraction - angleFractionQuarter$);
176                const radius$ = from.radius + (radius4quarter$ - from.radius) * progress$;
177                radialYAxis.innerRadius = radius$;
178                const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
179                angularXAxis.startAngle = curSA$;
180                radialYAxis.startAngle = curSA$;
181            } else {
182                const progress$ = (angleFractionQuarter$ - curFraction$) / (angleFractionQuarter$ - to.angleFraction);
183                const radius$ = calcRadiusFromAngleFraction(curFraction$);
184                radialYAxis.innerRadius = radius$;
185                const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
186                angularXAxis.startAngle = curSA$;
187                radialYAxis.startAngle = curSA$;
188            }
189        }
190
191        if (onAnimationUpdate) {
192            onAnimationUpdate({
193                innerRadius: radialYAxis.innerRadius,
194                totalAngle: angularXAxis.totalAngle
195            });
196        }
197    };
198
199    const allAnimation = new GenericAnimation<polarAnimationOptions>({
200        from: { angleFraction: 0.0006, startAngle: Math.PI / 2, radius: 0.998 },
201        to: { angleFraction: 1, startAngle: 0, radius: 0 },
202        onAnimate: animateAll,
203        delay: 1000,
204        duration: 2000,
205        ease: easing.linear,
206        onCompleted: () => {
207            const tmp = allAnimation.from;
208            allAnimation.from = allAnimation.to;
209            allAnimation.to = tmp;
210            allAnimation.reset();
211        },
212    });
213
214    return { 
215        sciChartSurface, 
216        wasmContext, 
217        controls: {
218            startAnimation: () => {
219                allAnimation.reset();
220                sciChartSurface.addAnimation(allAnimation);
221            },
222            endAnimation: () => {
223                sciChartSurface.getAnimations().forEach(a => a.cancel())
224            },
225            changeInnerRadiusInternal: (value: number) => { 
226                radialYAxis.innerRadius = value; 
227            },
228            changeTotalAngleInternal: (value: number) => { 
229                angularXAxis.totalAngle = value; 
230            }
231        }
232    };
233};