React Non Uniform Heatmap Chart

1import { appTheme } from "../../../theme";
2import {
3    HeatmapColorMap,
4    MouseWheelZoomModifier,
5    NumericAxis,
6    NonUniformHeatmapDataSeries,
7    NonUniformHeatmapRenderableSeries,
8    NumberRange,
9    PinchZoomModifier,
10    SciChartSurface,
11    ZoomExtentsModifier,
12    ZoomPanModifier,
13} from "scichart";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16    // Create a SciChartSurface with Theme
17    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
18        theme: appTheme.SciChartJsTheme,
19    });
20
21    // Create an X, Y Axis
22    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
23    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
24
25    // Create some data for the heatmap as a 2d array
26    const heatmapWidth = 7;
27    const heatmapHeight = 4;
28    const zValues = Array.from(Array(heatmapHeight));
29    zValues.forEach((row, index, collection) => {
30        collection[index] = Array.from(Array(heatmapWidth));
31    });
32    let maxValue = Number.MIN_VALUE;
33    for (let x = 0; x < heatmapWidth; x++) {
34        for (let y = 0; y < heatmapHeight; y++) {
35            zValues[y][x] = 3.5 * ((heatmapHeight - y) * (heatmapWidth - x));
36            maxValue = Math.max(maxValue, zValues[y][x]);
37        }
38    }
39
40    // arrays with cell offsets
41    const xRangeOffsetsSource = [0, 10, 20, 26, 36, 60, 72, 84];
42    const yRangeOffsetsSource = [100, 250, 390, 410, 600];
43
44    // mapping functions that will calculate cell offsets based on heatmap width and height (zValues dimension sizes)
45    const xCellOffsets = (i: number) => xRangeOffsetsSource[i];
46    const yCellOffsets = (i: number) => yRangeOffsetsSource[i];
47
48    // Create the NonUniform Heatmap Series
49    const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
50        // DataSeries defines data. This contains zValues 2D array plus the x and y cell offsets
51        dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues, xCellOffsets, yCellOffsets }),
52        // Color map defines how heatmap cells map to colours between minimum & maximum
53        colorMap: new HeatmapColorMap({
54            minimum: 0,
55            maximum: 100,
56            gradientStops: [
57                { offset: 0, color: appTheme.DarkIndigo },
58                { offset: 0.2, color: appTheme.Indigo },
59                { offset: 0.3, color: appTheme.VividSkyBlue },
60                { offset: 0.5, color: appTheme.VividGreen },
61                { offset: 0.7, color: appTheme.MutedRed },
62                { offset: 0.9, color: appTheme.VividOrange },
63                { offset: 1, color: appTheme.VividPink },
64            ],
65        }),
66        // optional settings
67        opacity: 0.77,
68        // values outside of the colorMap.min/max will be filled with the colours at edge of the colormap
69        fillValuesOutOfRange: true,
70        // add datalabels to the cells of the heatmap
71        dataLabels: {
72            style: {
73                fontFamily: "Arial",
74                fontSize: 16,
75            },
76            color: appTheme.ForegroundColor,
77        },
78    });
79
80    sciChartSurface.renderableSeries.add(heatmapSeries);
81
82    // add some interactivity
83    sciChartSurface.chartModifiers.add(
84        new ZoomPanModifier({ enableZoom: true }),
85        new ZoomExtentsModifier(),
86        new MouseWheelZoomModifier()
87    );
88
89    return { sciChartSurface };
90};
91