React Polar Radar Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EColor, 
9    EPolarAxisMode, 
10    EPolarGridlineMode, 
11    PolarCategoryAxis,
12    ENumericFormat,
13    EPolarLabelMode,
14    PolarMountainRenderableSeries,
15    FadeAnimation,
16    PolarLegendModifier,
17    BezierRenderDataTransform,
18    EllipsePointMarker,
19    PolarLineRenderableSeries,
20} from "scichart";
21import { appTheme } from "../../../theme";
22
23const LABELS = [
24    "Complexity",
25    "Memory Usage",
26    "Stability",
27    "Adaptability",
28    "Scalability",
29    "Cache Efficiency"
30];
31
32const DATA_SET = [
33    {
34        name: "Quick Sort",
35        color: appTheme.VividSkyBlue,
36        values: [7, 8, 2, 8, 9, 9]
37    },
38    {   
39        name: "Bubble Sort",
40        color: appTheme.VividOrange,
41        values: [2, 9, 10, 5, 1, 2], 
42    },
43]
44
45// this chart expresses the complexity, memory usage, stability, adaptability, scalability, and cache efficiency of two sorting algorithms
46
47export const drawExample = async (rootElement: string | HTMLDivElement) => {
48    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
49        theme: appTheme.SciChartJsTheme
50    });
51
52    const radialYAxis = new PolarNumericAxis(wasmContext, {
53        polarAxisMode: EPolarAxisMode.Radial,
54        gridlineMode: EPolarGridlineMode.Polygons,
55        useNativeText: true,
56        labelPrecision: 0,
57        zoomExtentsToInitialRange: true,
58
59        majorGridLineStyle: {
60            color: EColor.BackgroundColor,
61            strokeThickness: 1,
62            strokeDashArray: [5, 5]
63        },
64        labelStyle: {
65            color: EColor.White,
66            fontSize: 16,
67        },
68        drawLabels: false,
69        drawMinorGridLines: false,
70        drawMajorTickLines: false,
71        drawMinorTickLines: false,
72        startAngle: Math.PI / 2, // start at 12 o'clock
73        innerRadius: 0, 
74    });
75    sciChartSurface.yAxes.add(radialYAxis); 
76
77    const angularXAxis = new PolarCategoryAxis(wasmContext, {
78        polarAxisMode: EPolarAxisMode.Angular,
79        labels: LABELS,
80        labelStyle: {
81            fontSize: 16,
82            color: EColor.White,
83        },
84        majorGridLineStyle: {
85            color: EColor.BackgroundColor,
86            strokeThickness: 1,
87            strokeDashArray: [5, 5]
88        },
89        flippedCoordinates: true, // go clockwise
90        drawMinorGridLines: false,
91        useNativeText: true,
92        polarLabelMode: EPolarLabelMode.Horizontal,
93        labelFormat: ENumericFormat.NoFormat,
94        startAngle: Math.PI / 2, // start at 12 o'clock
95    });
96    sciChartSurface.xAxes.add(angularXAxis);
97
98    const xValues = Array.from({ length: LABELS.length + 1 }, (_, i) => i); 
99    // +1 to complete the radar chart without overlap of first and last labels
100    
101    const polarMountain = new PolarMountainRenderableSeries(wasmContext, {
102        dataSeries: new XyDataSeries(wasmContext, {
103            xValues: xValues,
104            yValues: [...DATA_SET[0].values, DATA_SET[0].values[0]], // +1 append first value to complete the radar chart
105            dataSeriesName: DATA_SET[0].name
106        }),
107        stroke: DATA_SET[0].color,
108        fill: DATA_SET[0].color + "30",
109        strokeThickness: 4,
110        animation: new FadeAnimation({ duration: 1000 })
111    });
112    sciChartSurface.renderableSeries.add(polarMountain);
113
114    // You can just as well use a PolarLineRenderableSeries
115    const polarLine = new PolarLineRenderableSeries(wasmContext, {
116        dataSeries: new XyDataSeries(wasmContext, {
117            xValues: xValues,
118            yValues: [...DATA_SET[1].values, DATA_SET[1].values[0]], // +1 append first value to complete the radar chart
119            dataSeriesName: DATA_SET[1].name
120        }),
121        stroke: DATA_SET[1].color,
122        strokeThickness: 4,
123        pointMarker: new EllipsePointMarker(wasmContext, {
124            width: 10,
125            height: 10,
126            strokeThickness: 2,
127            fill: DATA_SET[1].color,
128            stroke: EColor.White,
129        }),
130        animation: new FadeAnimation({ duration: 1000 })
131    });
132    sciChartSurface.renderableSeries.add(polarLine);
133
134    sciChartSurface.chartModifiers.add(
135        new PolarPanModifier(),
136        new PolarZoomExtentsModifier(),
137        new PolarMouseWheelZoomModifier({ growFactor: 0.0002 }),
138        new PolarLegendModifier({ showSeriesMarkers: true, showCheckboxes: true }),
139    );
140
141    return { sciChartSurface, wasmContext };
142};
143