Angular 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    EXyDirection,
14    GenericAnimation,
15    easing,
16    NumberRange,
17    EActionType,
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        isInnerAxis: true,
51        visibleRange: new NumberRange(0, 10),
52        zoomExtentsToInitialRange: true,
53
54        innerRadius: innerRadius,
55        startAngle: Math.PI / 2,
56    });
57    sciChartSurface.yAxes.add(radialYAxis);
58
59    const angularXAxis = new PolarNumericAxis(wasmContext, {
60        polarAxisMode: EPolarAxisMode.Angular,
61        polarLabelMode: EPolarLabelMode.Parallel,
62        axisAlignment: EAxisAlignment.Top,
63        labelPrecision: 0,
64
65        flippedCoordinates: true,
66        drawMinorGridLines: false,
67        useNativeText: true,
68
69        totalAngle,
70        startAngle: Math.PI / 2,
71    });
72    sciChartSurface.xAxes.add(angularXAxis);
73
74    // Add a basic line series to better visualize the polar chart
75    const PETAL_NUMBER = 6;
76    const POINTS_PER_PETAL = 100;
77
78    const polarlineSeries = new PolarLineRenderableSeries(wasmContext, {
79        dataSeries: new XyDataSeries(wasmContext, {
80            xValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => i / POINTS_PER_PETAL),
81            yValues: Array.from({ length: PETAL_NUMBER * POINTS_PER_PETAL + 1 }, (_, i) => {
82                const angleFraction = i / (PETAL_NUMBER * POINTS_PER_PETAL);
83                return 5 + 5 * Math.sin(2 * Math.PI * angleFraction * PETAL_NUMBER);
84            }),
85        }),
86        stroke: appTheme.VividOrange,
87        interpolateLine: true,
88        strokeThickness: 3,
89        pointMarker: new EllipsePointMarker(wasmContext, {
90            width: 8,
91            height: 8,
92            stroke: appTheme.VividOrange,
93            fill: appTheme.Background,
94        }),
95    });
96    sciChartSurface.renderableSeries.add(polarlineSeries);
97
98    // customize `zoomExtents` modifier to update frontend sliders via Callback
99    const zoomExtentsMod = new PolarZoomExtentsModifier();
100    zoomExtentsMod.animationDuration = 200;
101    zoomExtentsMod.onZoomExtents = (sciChartSurface) => {
102        setTimeout(() => {
103            onAnimationUpdate({
104                innerRadius: radialYAxis.innerRadius,
105                totalAngle: angularXAxis.totalAngle,
106            });
107        }, 200); // wait for `zoomExtents` animation to complete
108        return true;
109    };
110
111    sciChartSurface.chartModifiers.add(
112        new PolarPanModifier({ xyDirection: EXyDirection.XDirection }),
113        new PolarMouseWheelZoomModifier({ defaultActionType: EActionType.Pan }),
114
115        // Customise `zoomExtents` modifier to update frontend sliders via `onAnimationUpdate` Callback
116        new PolarZoomExtentsModifier({
117            animationDuration: 200,
118            onZoomExtents: (sciChartSurface) => {
119                setTimeout(() => {
120                    onAnimationUpdate({
121                        innerRadius: radialYAxis.innerRadius,
122                        totalAngle: angularXAxis.totalAngle,
123                    });
124                }, 200); // wait for animation to complete
125                return true;
126            },
127        })
128    );
129
130    // Animation which animates a polar surface to look like a Cartesian coordinate system for better understanding
131    type polarAnimationOptions = {
132        angleFraction: number;
133        startAngle: number;
134        radius: number;
135    };
136
137    const animateAll = (from: polarAnimationOptions, to: polarAnimationOptions, progress: number) => {
138        const angleFractionQuarter$ = 1 / 4;
139        const totalAngleQuarter$ = 2 * Math.PI * angleFractionQuarter$;
140        const beta$ = totalAngleQuarter$ / 2;
141        const radius4quarter$ = (1 - (4 / 3) * Math.sin(beta$)) / Math.cos(beta$);
142        const startAngleQuarter$ = totalAngleQuarter$ - totalAngleQuarter$ / 2;
143
144        const curFraction$ = from.angleFraction + (to.angleFraction - from.angleFraction) * progress;
145        const curTotalAngle$ = 2 * Math.PI * curFraction$;
146        angularXAxis.totalAngle = curTotalAngle$;
147        const isAFIncreasing$ = to.angleFraction - from.angleFraction > 0;
148        if (isAFIncreasing$) {
149            if (curFraction$ < angleFractionQuarter$) {
150                const progress$ = (curFraction$ - from.angleFraction) / (angleFractionQuarter$ - from.angleFraction);
151                const radius$ = calcRadiusFromAngleFraction(curFraction$);
152                radialYAxis.innerRadius = radius$;
153                const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
154                angularXAxis.startAngle = curSA$;
155                radialYAxis.startAngle = curSA$;
156            } else {
157                const progress$ = (curFraction$ - angleFractionQuarter$) / (to.angleFraction - angleFractionQuarter$);
158                const radius$ = radius4quarter$ + (to.radius - radius4quarter$) * progress$;
159                radialYAxis.innerRadius = radius$;
160                const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
161                angularXAxis.startAngle = curSA$;
162                radialYAxis.startAngle = curSA$;
163            }
164        } else {
165            if (curFraction$ > angleFractionQuarter$) {
166                const progress$ = (from.angleFraction - curFraction$) / (from.angleFraction - angleFractionQuarter$);
167                const radius$ = from.radius + (radius4quarter$ - from.radius) * progress$;
168                radialYAxis.innerRadius = radius$;
169                const curSA$ = from.startAngle + (startAngleQuarter$ - from.startAngle) * progress$;
170                angularXAxis.startAngle = curSA$;
171                radialYAxis.startAngle = curSA$;
172            } else {
173                const progress$ = (angleFractionQuarter$ - curFraction$) / (angleFractionQuarter$ - to.angleFraction);
174                const radius$ = calcRadiusFromAngleFraction(curFraction$);
175                radialYAxis.innerRadius = radius$;
176                const curSA$ = startAngleQuarter$ + (to.startAngle - startAngleQuarter$) * progress$;
177                angularXAxis.startAngle = curSA$;
178                radialYAxis.startAngle = curSA$;
179            }
180        }
181
182        if (onAnimationUpdate) {
183            onAnimationUpdate({
184                innerRadius: radialYAxis.innerRadius,
185                totalAngle: angularXAxis.totalAngle,
186            });
187        }
188    };
189
190    const allAnimation = new GenericAnimation<polarAnimationOptions>({
191        from: { angleFraction: 0.0006, startAngle: Math.PI / 2, radius: 0.998 },
192        to: { angleFraction: 1, startAngle: 0, radius: 0 },
193        onAnimate: animateAll,
194        delay: 1000,
195        duration: 2000,
196        ease: easing.linear,
197        onCompleted: () => {
198            const tmp = allAnimation.from;
199            allAnimation.from = allAnimation.to;
200            allAnimation.to = tmp;
201            allAnimation.reset();
202        },
203    });
204
205    return {
206        sciChartSurface,
207        wasmContext,
208        controls: {
209            startAnimation: () => {
210                allAnimation.reset();
211                sciChartSurface.addAnimation(allAnimation);
212            },
213            endAnimation: () => {
214                sciChartSurface.getAnimations().forEach((a) => a.cancel());
215            },
216            changeInnerRadiusInternal: (value: number) => {
217                radialYAxis.innerRadius = value;
218            },
219            changeTotalAngleInternal: (value: number) => {
220                angularXAxis.totalAngle = value;
221            },
222        },
223    };
224};
225