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