React Polar Line Temperature Average

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    XyDataSeries,
6    PolarNumericAxis,
7    SciChartPolarSurface,
8    EPolarAxisMode, 
9    NumberRange, 
10    GradientParams, 
11    Point, 
12    PolarLegendModifier,
13    PolarCategoryAxis,
14    PaletteFactory,
15    PolarLineRenderableSeries,
16    EAnimationType,
17    ELegendPlacement
18} from "scichart";
19import { appTheme } from "../../../theme";
20
21export const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
22export const YEARS = [
23    1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 
24    2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024
25];
26export const TEMPERATURE_DATA = [
27    [12.312858, 12.794863, 13.173332, 14.242319, 15.026494, 15.8967905, 16.125097, 16.0047, 15.245733, 14.251504, 13.146228, 12.325032],
28    [12.08245, 12.507443, 13.09871, 14.017178, 14.894451, 15.667089, 16.022583, 16.000057, 15.118811, 14.006094, 13.150954, 12.41957],
29    [12.0726595, 12.415118, 13.238875, 14.033698, 15.009245, 15.902833, 16.056944, 15.977586, 15.381688, 14.393545, 13.352154, 12.617628],
30    [12.393999, 12.883712, 13.373737, 14.482489, 15.439859, 16.166082, 16.350761, 16.253042, 15.393574, 14.268745, 13.131387, 12.578128],
31    [12.214997, 12.681549, 13.018332, 14.058149, 14.964326, 15.7506695, 16.027044, 15.874023, 15.245672, 14.145028, 13.067392, 12.441928],
32    [12.052399, 12.593054, 13.190579, 14.27894, 15.041011, 15.73894, 15.99124, 15.936546, 15.207633, 14.050722, 13.023944, 12.323272],
33    [12.2122, 12.446788, 13.249987, 14.208252, 15.215851, 15.871904, 16.20851, 16.060638, 15.368203, 14.34036, 13.470086, 12.695609],
34    [12.53721, 12.721423, 13.600142, 14.29804, 15.341601, 16.006063, 16.26295, 16.064987, 15.451588, 14.365481, 13.315763, 12.543315],
35    [12.548483, 12.642036, 13.243136, 14.241573, 15.247941, 15.844065, 16.181763, 16.1575, 15.520181, 14.550451, 13.333045, 12.84282],
36    [12.400176, 12.756578, 13.39796, 14.34727, 15.051334, 15.889484, 15.953155, 15.950004, 15.406296, 14.453116, 13.441607, 12.569768],
37    [12.589498, 12.735534, 13.497629, 14.432102, 15.331207, 16.059366, 16.314322, 16.141184, 15.57603, 14.618258, 13.501898, 12.766566],
38    [12.398165, 12.818922, 13.397719, 14.291743, 15.189911, 16.064089, 16.2323, 16.182554, 15.494456, 14.584331, 13.47152, 12.860763],
39    [12.805192, 12.817515, 13.409858, 14.535373, 15.345493, 15.959107, 16.23532, 16.092844, 15.3565445, 14.432366, 13.331739, 12.576232],
40    [12.113923, 12.408767, 13.427934, 14.2349825, 15.156445, 15.784512, 16.205524, 16.032562, 15.416246, 14.483524, 13.421947, 12.621545],
41    [12.501715, 12.694814, 13.287948, 14.301582, 15.257585, 15.987313, 16.366655, 16.15678, 15.5500765, 14.526386, 13.511364, 12.733565],
42    [12.635704, 12.951749, 13.678116, 14.614076, 15.459992, 16.069487, 16.280928, 16.157698, 15.545397, 14.562755, 13.5042715, 12.563801],
43    [12.351584, 12.553582, 13.350575, 14.375279, 15.21987, 16.003353, 16.372034, 16.222324, 15.493718, 14.475969, 13.275867, 12.627507],
44    [12.276481, 12.550572, 13.272944, 14.415976, 15.43513, 16.102345, 16.269238, 16.187937, 15.559264, 14.665552, 13.56644, 12.633436],
45    [12.58878, 12.745218, 13.43308, 14.325264, 15.283069, 16.090355, 16.20393, 16.16618, 15.616046, 14.497789, 13.520184, 12.792078],
46    [12.568984, 12.633794, 13.499797, 14.471165, 15.444962, 16.055035, 16.294695, 16.247393, 15.630797, 14.609954, 13.421647, 12.853656],
47    [12.634522, 12.928324, 13.637803, 14.418158, 15.4382105, 16.169155, 16.382626, 16.353651, 15.713228, 14.8876295, 13.75632, 13.204671],
48    [12.993054, 13.417261, 14.034957, 14.891214, 15.676935, 16.244125, 16.589472, 16.512617, 15.804098, 14.787963, 13.775281, 13.000732],
49    [12.8454685, 13.228996, 13.908754, 14.689877, 15.634159, 16.184803, 16.494555, 16.407322, 15.725905, 14.80573, 13.618404, 13.037093],
50    [12.682678, 12.992087, 13.682286, 14.666776, 15.513449, 16.20794, 16.507273, 16.319836, 15.645767, 14.800986, 13.608685, 12.996236],
51    [12.726316, 13.037866, 13.917256, 14.798871, 15.618407, 16.351522, 16.62583, 16.4674, 15.82509, 14.899514, 13.775336, 13.204703],
52    [13.023134, 13.328617, 13.896722, 14.881941, 15.727563, 16.34306, 16.554218, 16.378103, 15.879856, 14.822323, 13.907555, 12.900242],
53    [12.6852045, 12.789691, 13.598597, 14.552206, 15.518996, 16.195406, 16.559742, 16.422468, 15.847732, 14.867675, 13.7164545, 12.987495],
54    [12.719246, 12.959181, 13.803046, 14.644942, 15.517449, 16.290827, 16.606314, 16.40706, 15.795761, 14.855305, 13.532649, 12.935972],
55    [12.688526, 13.022077, 13.9205885, 14.682203, 15.656947, 16.514093, 16.953165, 16.82091, 16.376972, 15.296179, 14.224238, 13.510272],
56    [13.140137, 13.539749, 14.137102, 15.031858, 15.913483, 16.657152, 16.907806, 16.822422, 16.174273, 15.245267, 14.098477, 13.423883] // 2024 Jan - Dec
57];
58
59export const drawExample = async (rootElement: string | HTMLDivElement) => {
60    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
61        theme: appTheme.SciChartJsTheme,
62        title: [
63            "Mean surface temperature by month", 
64            "(past 30 years)"
65        ],
66        titleStyle: {
67            fontSize: 24
68        }
69    });
70
71    const radialYAxis = new PolarNumericAxis(wasmContext, {
72        polarAxisMode: EPolarAxisMode.Radial,
73        drawLabels: true,
74        labelPrecision: 0,
75        labelStyle: {
76            color: "white"
77        },
78        labelPostfix: "°C",
79        autoTicks: false,
80        majorDelta: 1,
81        drawMinorGridLines: false,
82        visibleRange: new NumberRange(12, 17), // min and max temperatures
83        zoomExtentsToInitialRange: true,
84        innerRadius: 0.05, // center gap size
85        startAngle: Math.PI / 2 // make temperature labels stacked vertically
86    });
87    sciChartSurface.yAxes.add(radialYAxis);
88
89    const polarXAxis = new PolarCategoryAxis(wasmContext, {
90        polarAxisMode: EPolarAxisMode.Angular, // set this as the angular axis
91        autoTicks: false,
92        majorDelta: 1, // one tick per month
93        flippedCoordinates: true, // grow clockwise
94        startAngle: Math.PI / 2, // start "Jan" at 12 o'clock
95        visibleRange: new NumberRange(0, 12), // 12 months
96        labels: MONTHS_SHORT
97    });
98    sciChartSurface.xAxes.add(polarXAxis);
99
100    // Add series
101    const highlightedPalette = PaletteFactory.createYGradient(
102        wasmContext,
103        new GradientParams(new Point(0, 0), new Point(0, 1), [
104            { offset: 0, color: appTheme.VividBlue },
105            { offset: 1, color: appTheme.VividPink }
106        ]),
107        new NumberRange(13, 17) // the range of y-values to apply the gradient to
108    );
109
110    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
111
112    for (let i = 0; i < TEMPERATURE_DATA.length; i++) {
113        sciChartSurface.renderableSeries.add(
114            new PolarLineRenderableSeries(wasmContext, {
115                // apply a gradient stroke to the last 5 years (2019-2024)
116                ...(i >= TEMPERATURE_DATA.length - 5
117                    ? {
118                            paletteProvider: highlightedPalette,
119                            strokeThickness: 3
120                        }
121                    : {
122                            stroke: `rgba(${i*2}, ${i}, ${i*2 + 20}, 1)`,
123                            strokeThickness: 2
124                        }),
125
126                seriesName: `${YEARS[i]}`,
127                animation: {
128                    type: EAnimationType.Sweep,
129                    options: {
130                        duration: 300,
131                        delay: 100 * i
132                    }
133                },
134                clipToTotalAngle: true,
135                dataSeries: new XyDataSeries(wasmContext, {
136                    xValues: xValues,
137                    yValues: [
138                        ...TEMPERATURE_DATA[i],
139                        TEMPERATURE_DATA[i + 1] ? TEMPERATURE_DATA[i + 1][0] : TEMPERATURE_DATA[i][11]
140                    ]
141                })
142            })
143        );
144    }
145
146    // split half of the years into two legends
147    const leftLegend = new PolarLegendModifier({
148        showCheckboxes: true,
149        backgroundColor: "rgba(90, 90, 90, 0.5)",
150        placement: ELegendPlacement.TopLeft
151    });
152
153    const rightLegend = new PolarLegendModifier({
154        showCheckboxes: true,
155        backgroundColor: "rgba(90, 90, 90, 0.5)",
156        placement: ELegendPlacement.TopRight
157    });
158
159    // Map through all series and split them into the two legends
160    sciChartSurface.renderableSeries.asArray().forEach((rs, i) => {
161        if (i < TEMPERATURE_DATA.length / 2) {
162            leftLegend.includeSeries(rs, true);
163        } else {
164            rightLegend.includeSeries(rs, true);
165        }
166    });
167
168    // Add modifiers
169    sciChartSurface.chartModifiers.add(
170        new PolarPanModifier(),
171        new PolarZoomExtentsModifier(),
172        new PolarMouseWheelZoomModifier(),
173        leftLegend,
174        rightLegend
175    );
176
177    return { sciChartSurface, wasmContext };
178};