React Windrose Plot | React Polar Stacked Radial Column Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    EAxisAlignment, 
11    PolarStackedColumnCollection,
12    PolarStackedColumnRenderableSeries,
13    TFormatLabelFn,
14    NumericLabelProvider,
15    EDataPointWidthMode,
16    WaveAnimation
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20function getBiasedRandomWalkInBounds(min: number, max: number, count: number) {
21    // Generate the base random walk
22    const baseValues = [min];
23    for (let i = 1; i < count; i++) {
24        const next = baseValues[i - 1] + Math.random() - 0.5;
25        baseValues.push(Math.min(max, Math.max(min, next)));
26    }
27
28    // Apply an angular bias so that the random walk values become
29    return baseValues.map((val, i) => {
30        const angle = (i * 360) / count;
31        const angleRad = (angle * Math.PI) / 180;
32        // bias ranges from 0.5 to 1.5: peaks at 0°/180°, dips at 90°/270°
33        const bias = 1 + 0.3 * Math.sin(2 * angleRad);
34        return val * bias;
35    });
36}
37
38/**
39 * Custom label provider that displays compass directions at 45 degree intervals,  
40 * if any label value is NOT from `[0, 45, 90, 135, 180, 225, 270, 315]` it will be a decimal.
41 */
42class CustomNESWLabelProvider extends NumericLabelProvider {
43    public LABELS = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
44
45    public get formatLabel(): TFormatLabelFn {
46        return (dataValue: number) => {
47            if (dataValue % 45 === 0) {
48                return this.LABELS[dataValue / 45];
49            }
50            return dataValue.toFixed(0) + "°";
51        };
52    }
53}
54
55const COLUMN_COUNT = 24;
56
57export const drawExample = async (rootElement: string | HTMLDivElement) => {
58    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
59        theme: appTheme.SciChartJsTheme,
60    });
61
62    const radialYAxis = new PolarNumericAxis(wasmContext, {
63        axisAlignment: EAxisAlignment.Right,
64        polarAxisMode: EPolarAxisMode.Radial,
65        drawMinorGridLines: false,
66        drawMajorTickLines: false,
67        drawMinorTickLines: false,
68        majorGridLineStyle: {
69            color: appTheme.DarkIndigo,
70            strokeThickness: 1
71        },
72        labelStyle: {
73            color: "white"
74        },
75        startAngle: Math.PI / 2, // draw labels at 12 o'clock
76        autoTicks: false,
77        majorDelta: 1,
78        labelPrecision: 0,
79        innerRadius: 0.05 // center hole
80    });
81    sciChartSurface.yAxes.add(radialYAxis);
82
83    const polarXAxis = new PolarNumericAxis(wasmContext, {
84        polarAxisMode: EPolarAxisMode.Angular,
85        visibleRange: new NumberRange(0, 360),
86        flippedCoordinates: true, // go clockwise
87        startAngle: Math.PI / 2, // start at 12 o'clock
88        axisAlignment: EAxisAlignment.Top,
89        useNativeText: true,
90        labelProvider: new CustomNESWLabelProvider(),
91        autoTicks: false,
92        majorDelta: 15,
93        drawMinorGridLines: false,
94        zoomExtentsToInitialRange: true
95    });
96    sciChartSurface.xAxes.add(polarXAxis);
97
98    const xValues = Array.from({length: COLUMN_COUNT}, (_, i) => i * 360 / COLUMN_COUNT); // [0, 10, ..., 350],
99    const yValues = [
100        getBiasedRandomWalkInBounds(1, 2, COLUMN_COUNT),
101        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
102        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
103        getBiasedRandomWalkInBounds(0.5, 2, COLUMN_COUNT),
104        getBiasedRandomWalkInBounds(0.2, 0.4, COLUMN_COUNT),
105    ];
106
107    const COLORS = [
108        appTheme.DarkIndigo,
109        appTheme.Indigo,
110        appTheme.VividGreen,
111        appTheme.VividOrange,
112        appTheme.VividPink,
113    ]
114
115    const collection = new PolarStackedColumnCollection(wasmContext, {
116        isOneHundredPercent: false,
117    });
118    collection.animation = new WaveAnimation({ duration: 1000, fadeEffect: true });
119    
120    for(let i = 0; i < yValues.length; i++) {
121        const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues: yValues[i] });
122        const polarColumn = new PolarStackedColumnRenderableSeries(wasmContext, {
123            dataSeries,
124            fill: COLORS[i],
125            stroke: appTheme.DarkIndigo,
126            strokeThickness: 2,
127            dataPointWidthMode: EDataPointWidthMode.Range,
128        });
129        collection.add(polarColumn);
130    }
131    sciChartSurface.renderableSeries.add(collection);
132
133    sciChartSurface.chartModifiers.add(
134        new PolarPanModifier(),
135        new PolarZoomExtentsModifier(),
136        new PolarMouseWheelZoomModifier()
137    );
138
139    return { sciChartSurface, wasmContext };
140};