React Polar Scatter Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    EAxisAlignment, 
11    EPolarLabelMode,
12    PolarXyScatterRenderableSeries,
13    SweepAnimation,
14    PolarLegendModifier,
15    EPointMarkerType,
16    ELegendOrientation,
17    TLegendItem,
18    EActionType,
19} from "scichart";
20import { appTheme } from "../../../theme";
21
22export const drawExample = async (rootElement: string | HTMLDivElement) => {
23    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
24        theme: appTheme.SciChartJsTheme,
25    });
26
27    const radialYAxis = new PolarNumericAxis(wasmContext, {
28        polarAxisMode: EPolarAxisMode.Radial,
29        axisAlignment: EAxisAlignment.Right,
30        visibleRange: new NumberRange(0, 1400),
31        zoomExtentsToInitialRange: true,
32        
33        drawMinorTickLines: false,
34        drawMajorTickLines: false,
35        drawMinorGridLines: false,
36        
37        startAngle: Math.PI / 2,
38        drawLabels: false, // no radial labels
39    });
40    sciChartSurface.yAxes.add(radialYAxis);
41
42    const polarXAxis = new PolarNumericAxis(wasmContext, {
43        polarAxisMode: EPolarAxisMode.Angular,
44        axisAlignment: EAxisAlignment.Top,
45        polarLabelMode: EPolarLabelMode.Parallel,
46        visibleRange: new NumberRange(0, 360),
47        startAngle: Math.PI / 2, // start at 12 o'clock
48        flippedCoordinates: true, // go clockwise
49        zoomExtentsToInitialRange: true,
50
51        autoTicks: false,
52        majorDelta: 30,
53
54        drawMinorTickLines: false,
55        drawMajorTickLines: false,
56        drawMinorGridLines: false,
57
58        useNativeText: true,
59        labelPrecision: 0,
60        labelPostfix: "°",
61    });
62    sciChartSurface.xAxes.add(polarXAxis);
63
64    const xValues = Array.from({ length: 540 }, (_, i) => i);
65    const SCATTER_DATA = [
66        {
67            yVals: xValues.map((x) => 2 * x + x * Math.random() * 0.5),
68            color: appTheme.VividOrange,
69            name: "Circle Series",
70            pointMarkerType: EPointMarkerType.Ellipse
71        }, 
72        {
73            yVals: xValues.map((x) => x + x * Math.random() * 0.5),
74            color: appTheme.VividSkyBlue,
75            name: "Triangular Series",
76            pointMarkerType: EPointMarkerType.Triangle,
77        }
78    ]
79
80    SCATTER_DATA.forEach(({ yVals, color, name, pointMarkerType }) => {
81        const polarScatter = new PolarXyScatterRenderableSeries(wasmContext, {
82            dataSeries: new XyDataSeries(wasmContext, {
83                xValues: xValues,
84                yValues: yVals,
85                dataSeriesName: name,
86            }),
87            opacity: 0.7,
88            stroke: color, // set stroke color for Legend modifier markers
89
90            // @ts-ignore
91            pointMarker: {
92                type: pointMarkerType,
93                options: {
94                    width: 10,
95                    height: 10,
96                    stroke: color,
97                    strokeThickness: 1,
98                    fill: color + "88",
99                }
100            },
101            animation: new SweepAnimation({ duration: 800 }),
102        });
103        sciChartSurface.renderableSeries.add(polarScatter);
104    });
105
106    // Extra feature -> Custom legend marker with SVG shapes
107    const customMarkerLegendModifier = new PolarLegendModifier({
108        showCheckboxes: true,
109        showSeriesMarkers: true,
110        backgroundColor: "#66666633"
111    });
112    // override "getLegendItemHTML" to add custom SVG shapes
113    customMarkerLegendModifier.sciChartLegend.getLegendItemHTML = (
114        orientation: ELegendOrientation,
115        showCheckboxes: boolean,
116        showSeriesMarkers: boolean,
117        item: TLegendItem
118    ): string => {
119        const display = orientation === ELegendOrientation.Vertical ? "flex" : "inline-flex";
120        let str = `<span class="scichart__legend-item" style="display: ${display}; align-items: center; margin-right: 4px; padding: 0 4px 0 5px; white-space: nowrap; gap: 5px">`;
121        
122        if (showCheckboxes) {
123            const checked = item.checked ? "checked" : "";
124            str += `<input ${checked} type="checkbox" id="${item.id}">`;
125        }
126        
127        if (showSeriesMarkers) {
128            str += `<svg 
129                xmlns="http://www.w3.org/2000/svg"
130                for="${item.id}" 
131                style="width: 15px; height: 15px;" 
132                viewBox="0 0 24 24"
133                stroke-width="2"
134            >
135                ${(() => {
136                    switch (item.name) {
137                        case SCATTER_DATA[0].name: // Circle
138                            return `<circle cx="12" cy="12" r="9" fill="${item.color + "88"}" stroke="${item.color}"/>`;
139
140                        case SCATTER_DATA[1].name: // Triangle 
141                            return `<polygon points="12,2 22,22 2,22" fill="${item.color + "88"}" stroke="${item.color}"/>`;
142
143                        default: // Others 
144                            return `<rect x="2" y="2" width="20" height="20" fill="${item.color + "88"}" stroke="${item.color}"/>`;
145                    }
146                })()}
147            </svg>`
148        }
149        str += `<label for="${item.id}">${item.name}</label>`;
150        str += `</span>`;
151        return str;
152    };
153
154    sciChartSurface.chartModifiers.add(
155        customMarkerLegendModifier,
156        new PolarPanModifier(),
157        new PolarZoomExtentsModifier(),
158        new PolarMouseWheelZoomModifier({
159            defaultActionType: EActionType.Zoom
160        }),
161    );
162
163    return { sciChartSurface, wasmContext };
164};