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