React Polar Sunburst Chart

1import {
2    PolarColumnRenderableSeries,
3    PolarNumericAxis,
4    SciChartPolarSurface,
5    EPolarAxisMode,
6    NumberRange,
7    EAxisAlignment,
8    EPolarLabelMode,
9    PolarCursorModifier,
10    TCursorTooltipDataTemplate,
11    SeriesInfo,
12    PolarDataPointSelectionModifier,
13    TSciChart,
14    EColumnMode,
15    XyxDataSeries,
16    EMultiLineAlignment,
17    EColumnDataLabelPosition,
18    EDataPointWidthMode,
19    GenericAnimation,
20    easing,
21    DoubleAnimator,
22} from "scichart";
23import { appTheme } from "../../../theme";
24import { SunburstMetadata } from "./SunburstMetadata";
25import { SunburstPaletteProvider } from "./SunburstPaletteProvider";
26import { getDataById, getElementById, TLevelDataForChart } from "./sunburstData";
27
28const drawSeriesFn = (
29    wasmContext: TSciChart,
30    xAxis: PolarNumericAxis,
31    yAxis: PolarNumericAxis,
32    sciChartSurface: SciChartPolarSurface,
33    polarLabelMode: EPolarLabelMode,
34    dataPointSelectionModifier: PolarDataPointSelectionModifier,
35    nodeId: number[],
36    selectedElStartX: number,
37    prevNodeId: number[]
38) => {
39    const startAngleDefault = -Math.PI / 2;
40
41    const clearSeriesFn = () => {
42        dataPointSelectionModifier.selectionChanged.unsubscribeAll();
43        sciChartSurface.renderableSeries.asArray().forEach((rs) => rs.delete());
44        sciChartSurface.renderableSeries.clear();
45    };
46
47    const level = nodeId.length - 1;
48    const prevLevel = prevNodeId.length - 1;
49    const prevXVisRangeDiff = xAxis.visibleRange.diff;
50
51    const polarColumnMode = EColumnMode.StartEnd;
52    const dataPointWidth = 0.5;
53    const paletteProvider = new SunburstPaletteProvider();
54
55    const createDataFn = (input$: TLevelDataForChart) => {
56        const [xValues$, yValues$, x1Values$] = input$.data;
57        return new XyxDataSeries(wasmContext, {
58            xValues: xValues$,
59            yValues: yValues$,
60            x1Values: x1Values$,
61            metadata: input$.metadata,
62        });
63    };
64
65    const levelData = getDataById(nodeId);
66    const rootNode = getElementById(nodeId);
67
68    const redrawSeriesFn = () => {
69        clearSeriesFn();
70        for (let i = 0; i < levelData.length; i++) {
71            const rs$ = new PolarColumnRenderableSeries(wasmContext, {
72                stroke: "black",
73                // Without an explicit fill the series inherits the theme's fillPalette entry, whose alpha
74                // (0x77 in the light theme) scales the colours the SunburstPaletteProvider returns and
75                // washes the sectors out. Any opaque fill works - the palette provider replaces it per point.
76                fill: "#FFFFFFFF",
77                columnXMode: polarColumnMode,
78                dataLabels: {
79                    style: {
80                        fontSize: 16,
81                        multiLineAlignment: EMultiLineAlignment.Center,
82                        lineSpacing: 8,
83                    },
84                    color: "black",
85                    precision: 2,
86                    pointGapThreshold: 0,
87                    skipNumber: 0,
88                    polarLabelMode,
89                    labelYPositionMode: EColumnDataLabelPosition.Position,
90                    labelYPositionMultiplier: 0.5,
91                    metaDataSelector: (metadata) => {
92                        const md = metadata as SunburstMetadata;
93                        return `${md.title} \n ${md.value}`;
94                    },
95                },
96                dataSeries: createDataFn(levelData[i]),
97                strokeThickness: 2,
98                dataPointWidth,
99                dataPointWidthMode: EDataPointWidthMode.Range,
100                defaultY1: i,
101                paletteProvider: paletteProvider,
102            });
103            dataPointSelectionModifier.includeSeries(rs$, true);
104            sciChartSurface.renderableSeries.add(rs$);
105        }
106    };
107
108    const drillDownAnimationFn = (isReverse$: boolean, onCompleteFn$: () => void = () => undefined) => {
109        const xMin$ = 0; // always zero
110        const xMax0$ = prevXVisRangeDiff;
111        const xMax1$ = rootNode.value;
112
113        const startAngle0$ = isReverse$
114            ? startAngleDefault
115            : startAngleDefault + (2 * Math.PI * selectedElStartX) / xAxis.visibleRange.diff;
116        let startAngle1$: number;
117        if (isReverse$) {
118            const levelDiff$ = prevLevel - level;
119            const element$ = levelData[levelDiff$].metadata.find((a) => a.id.toString() === prevNodeId.toString());
120            startAngle1$ = startAngleDefault + (2 * Math.PI * element$.start) / rootNode.value;
121        } else {
122            startAngle1$ = startAngleDefault;
123        }
124
125        const yMin0$ = isReverse$ ? 0 : prevLevel - level;
126        const yMin1$ = isReverse$ ? level - prevLevel : 0;
127
128        const from$ = { x1: xMax0$, x2: startAngle0$, y1: yMin0$, y2: 0 };
129        const to$ = { x1: xMax1$, x2: startAngle1$, y1: yMin1$, y2: 0 };
130
131        const sweepAnimation = new GenericAnimation({
132            from: from$,
133            to: to$,
134            duration: 1000,
135            ease: easing.inOutSine,
136            onAnimate: (from, to, progress) => {
137                const xMaxCur = DoubleAnimator.interpolate(from.x1, to.x1, progress);
138                const startAngleCur = DoubleAnimator.interpolate(from.x2, to.x2, progress);
139                const yMinCur = DoubleAnimator.interpolate(from.y1, to.y1, progress);
140                const yMaxCur = yMinCur + 4;
141                xAxis.visibleRange = new NumberRange(xMin$, xMaxCur);
142                xAxis.startAngle = startAngleCur;
143                yAxis.visibleRange = new NumberRange(yMinCur, yMaxCur);
144            },
145            onCompleted: () => {
146                onCompleteFn$();
147            },
148        });
149        sciChartSurface.addAnimation(sweepAnimation);
150    };
151
152    const subscribeFn = () => {
153        dataPointSelectionModifier.selectionChanged.subscribe((args) => {
154            const selectedDataPoint = args.selectedDataPoints[0];
155            if (selectedDataPoint) {
156                const { yValue } = selectedDataPoint;
157                const md = selectedDataPoint?.metadata as SunburstMetadata;
158                const { id } = md;
159                const newId = [...id];
160                if (yValue === 1 && id.length > 1) {
161                    newId.pop();
162                }
163                drawSeriesFn(
164                    wasmContext,
165                    xAxis,
166                    yAxis,
167                    sciChartSurface,
168                    polarLabelMode,
169                    dataPointSelectionModifier,
170                    newId,
171                    md.start,
172                    nodeId
173                );
174            }
175        });
176    };
177
178    if (level < prevLevel) {
179        drillDownAnimationFn(true, () => {
180            redrawSeriesFn();
181            xAxis.startAngle = startAngleDefault;
182            yAxis.visibleRange = new NumberRange(0, 4);
183            subscribeFn();
184        });
185    } else if (level > prevLevel) {
186        redrawSeriesFn();
187        drillDownAnimationFn(false);
188        subscribeFn();
189    } else {
190        xAxis.startAngle = startAngleDefault;
191        xAxis.visibleRange = new NumberRange(0, rootNode.value);
192        yAxis.visibleRange = new NumberRange(0, 4);
193        redrawSeriesFn();
194        subscribeFn();
195    }
196};
197
198export const drawExample = async (rootElement: string | HTMLDivElement) => {
199    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
200        theme: appTheme.SciChartJsTheme,
201    });
202
203    const startAngle = -Math.PI / 2;
204    const totalAngle = 2 * Math.PI;
205
206    const xAxis = new PolarNumericAxis(wasmContext, {
207        isVisible: false,
208        polarAxisMode: EPolarAxisMode.Angular,
209        axisAlignment: EAxisAlignment.Top,
210        visibleRange: new NumberRange(0, 65),
211        startAngle,
212        totalAngle,
213    });
214    xAxis.polarLabelMode = EPolarLabelMode.Parallel;
215    sciChartSurface.xAxes.add(xAxis);
216
217    const yAxis = new PolarNumericAxis(wasmContext, {
218        isVisible: false,
219        polarAxisMode: EPolarAxisMode.Radial,
220        axisAlignment: EAxisAlignment.Right,
221        visibleRange: new NumberRange(0, 6),
222        flippedCoordinates: false,
223        startAngle,
224        totalAngle,
225    });
226    sciChartSurface.yAxes.add(yAxis);
227
228    const dataPointSelectionModifier = new PolarDataPointSelectionModifier({
229        allowClickSelect: true,
230        allowDragSelect: false,
231        selectionStroke: "red",
232        selectionFill: "#ff879f33",
233    });
234
235    drawSeriesFn(
236        wasmContext,
237        xAxis,
238        yAxis,
239        sciChartSurface,
240        EPolarLabelMode.Parallel,
241        dataPointSelectionModifier,
242        [0],
243        0,
244        [0]
245    );
246
247    const tooltipDataTemplate: TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[], tooltipTitle: string) => {
248        const res: string[] = [];
249        seriesInfos.forEach((si) => {
250            if (si.isHit) {
251                const md = si.pointMetadata as SunburstMetadata;
252                res.push(`Name: ${md.title}`);
253                res.push(`Value: ${md.value}`);
254            }
255        });
256        return res;
257    };
258
259    sciChartSurface.chartModifiers.add(
260        dataPointSelectionModifier,
261        new PolarCursorModifier({
262            showTooltip: true,
263            showCircularLine: false,
264            showRadialLine: false,
265            tooltipDataTemplate,
266        })
267    );
268
269    return { sciChartSurface, wasmContext };
270};
271