Angular Windrose Plot | Angular 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        visibleRange: new NumberRange(0, 6),
66        zoomExtentsToInitialRange: true,
67        
68        drawMinorGridLines: false,
69        drawMajorTickLines: false,
70        drawMinorTickLines: false,
71
72        startAngle: Math.PI / 2, // draw labels at 12 o'clock
73        autoTicks: false,
74        majorDelta: 1,
75        labelPrecision: 0,
76        innerRadius: 0.05 // center hole
77    });
78    sciChartSurface.yAxes.add(radialYAxis);
79
80    const polarXAxis = new PolarNumericAxis(wasmContext, {
81        polarAxisMode: EPolarAxisMode.Angular,
82        visibleRange: new NumberRange(0, 360),
83        flippedCoordinates: true, // go clockwise
84        startAngle: Math.PI / 2, // start at 12 o'clock
85        axisAlignment: EAxisAlignment.Top,
86        useNativeText: true,
87        labelProvider: new CustomNESWLabelProvider(),
88        autoTicks: false,
89        majorDelta: 15,
90        drawMinorGridLines: false,
91        zoomExtentsToInitialRange: true
92    });
93    sciChartSurface.xAxes.add(polarXAxis);
94
95    const xValues = Array.from({length: COLUMN_COUNT}, (_, i) => i * 360 / COLUMN_COUNT); // [0, 10, ..., 350],
96    const yValues = [
97        getBiasedRandomWalkInBounds(1, 2, COLUMN_COUNT),
98        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
99        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
100        getBiasedRandomWalkInBounds(0.5, 2, COLUMN_COUNT),
101        getBiasedRandomWalkInBounds(0.2, 0.4, COLUMN_COUNT),
102    ];
103
104    const COLORS = [
105        appTheme.DarkIndigo,
106        appTheme.Indigo,
107        appTheme.VividGreen,
108        appTheme.VividOrange,
109        appTheme.VividPink,
110    ]
111
112    const collection = new PolarStackedColumnCollection(wasmContext, {
113        isOneHundredPercent: false,
114    });
115    
116    for(let i = 0; i < yValues.length; i++) {
117        const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues: yValues[i] });
118        const polarColumn = new PolarStackedColumnRenderableSeries(wasmContext, {
119            dataSeries,
120            fill: COLORS[i],
121            stroke: appTheme.DarkIndigo,
122            strokeThickness: 2,
123            dataPointWidthMode: EDataPointWidthMode.Range,
124            animation: new WaveAnimation({ duration: 1000 }),
125        });
126        collection.add(polarColumn);
127    }
128    sciChartSurface.renderableSeries.add(collection);
129
130    sciChartSurface.chartModifiers.add(
131        new PolarPanModifier(),
132        new PolarZoomExtentsModifier(),
133        new PolarMouseWheelZoomModifier()
134    );
135
136    return { sciChartSurface, wasmContext };
137};
138