React Windrose Plot | React Polar Stacked Radial Column Chart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

import {
    PolarMouseWheelZoomModifier,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    XyDataSeries,
    PolarNumericAxis,
    SciChartPolarSurface,
    EPolarAxisMode,
    NumberRange,
    EAxisAlignment,
    PolarStackedColumnCollection,
    PolarStackedColumnRenderableSeries,
    TFormatLabelFn,
    NumericLabelProvider,
    EDataPointWidthMode,
    WaveAnimation,
} from "scichart";
import { appTheme } from "./appTheme";

function getBiasedRandomWalkInBounds(min: number, max: number, count: number) {
    // Generate the base random walk
    const baseValues = [min];
    for (let i = 1; i < count; i++) {
        const next = baseValues[i - 1] + Math.random() - 0.5;
        baseValues.push(Math.min(max, Math.max(min, next)));
    }

    // Apply an angular bias so that the random walk values become
    return baseValues.map((val, i) => {
        const angle = (i * 360) / count;
        const angleRad = (angle * Math.PI) / 180;
        // bias ranges from 0.5 to 1.5: peaks at 0°/180°, dips at 90°/270°
        const bias = 1 + 0.3 * Math.sin(2 * angleRad);
        return val * bias;
    });
}

/**
 * Custom label provider that displays compass directions at 45 degree intervals,
 * if any label value is NOT from `[0, 45, 90, 135, 180, 225, 270, 315]` it will be a decimal.
 */
class CustomNESWLabelProvider extends NumericLabelProvider {
    public LABELS = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];

    public get formatLabel(): TFormatLabelFn {
        return (dataValue: number) => {
            if (dataValue % 45 === 0) {
                return this.LABELS[dataValue / 45];
            }
            return dataValue.toFixed(0) + "°";
        };
    }
}

const COLUMN_COUNT = 24;

export const drawExample = async (rootElement: string | HTMLDivElement) => {
    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
        theme: appTheme.SciChartJsTheme,
    });

    const radialYAxis = new PolarNumericAxis(wasmContext, {
        axisAlignment: EAxisAlignment.Right,
        polarAxisMode: EPolarAxisMode.Radial,
        visibleRange: new NumberRange(0, 6),
        zoomExtentsToInitialRange: true,

        drawMinorGridLines: false,
        drawMajorTickLines: false,
        drawMinorTickLines: false,
        startAngle: Math.PI / 2, // draw labels at 12 o'clock
        autoTicks: false,
        majorDelta: 1,
        labelPrecision: 0,
        innerRadius: 0.05, // center hole
    });
    sciChartSurface.yAxes.add(radialYAxis);

    const polarXAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        visibleRange: new NumberRange(0, 360),
        flippedCoordinates: true, // go clockwise
        startAngle: Math.PI / 2, // start at 12 o'clock
        axisAlignment: EAxisAlignment.Top,
        useNativeText: true,
        labelProvider: new CustomNESWLabelProvider(),
        autoTicks: false,
        majorDelta: 15,
        drawMinorGridLines: false,
        zoomExtentsToInitialRange: true,
    });
    sciChartSurface.xAxes.add(polarXAxis);

    const xValues = Array.from({ length: COLUMN_COUNT }, (_, i) => (i * 360) / COLUMN_COUNT); // [0, 10, ..., 350],
    const yValues = [
        getBiasedRandomWalkInBounds(1, 2, COLUMN_COUNT),
        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
        getBiasedRandomWalkInBounds(0.3, 1, COLUMN_COUNT),
        getBiasedRandomWalkInBounds(0.5, 2, COLUMN_COUNT),
        getBiasedRandomWalkInBounds(0.2, 0.4, COLUMN_COUNT),
    ];

    const COLORS = [
        appTheme.DarkIndigo,
        appTheme.Indigo,
        appTheme.VividGreen,
        appTheme.VividOrange,
        appTheme.VividPink,
    ];

    const collection = new PolarStackedColumnCollection(wasmContext, {
        isOneHundredPercent: false,
    });

    for (let i = 0; i < yValues.length; i++) {
        const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues: yValues[i] });
        const polarColumn = new PolarStackedColumnRenderableSeries(wasmContext, {
            dataSeries,
            fill: COLORS[i],
            stroke: appTheme.DarkIndigo,
            strokeThickness: 2,
            dataPointWidthMode: EDataPointWidthMode.Range,
            animation: new WaveAnimation({ duration: 1000 }),
        });
        collection.add(polarColumn);
    }
    sciChartSurface.renderableSeries.add(collection);

    sciChartSurface.chartModifiers.add(
        new PolarPanModifier(),
        new PolarZoomExtentsModifier(),
        new PolarMouseWheelZoomModifier()
    );

    return { sciChartSurface, wasmContext };
};