React Heatmap Chart With Contours

1import {
2    HeatmapColorMap,
3    HeatmapLegend,
4    MouseWheelZoomModifier,
5    NumericAxis,
6    SciChartSurface,
7    UniformContoursRenderableSeries,
8    UniformHeatmapDataSeries,
9    UniformHeatmapRenderableSeries,
10    zeroArray2D,
11    ZoomExtentsModifier,
12    ZoomPanModifier,
13} from "scichart";
14import { appTheme } from "../../../theme";
15
16export const drawExample = async (rootElement: string | HTMLDivElement) => {
17    // Create a SciChartSurface
18    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
19        theme: appTheme.SciChartJsTheme,
20    });
21
22    // Create an X & Y Axis
23    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
24    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
25
26    const heatmapWidth = 300;
27    const heatmapHeight = 200;
28
29    const colorPaletteMin = 0;
30    const colorPaletteMax = 200;
31
32    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
33    const initialZValues = generateExampleData(3, heatmapWidth, heatmapHeight, colorPaletteMax);
34    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, {
35        zValues: initialZValues,
36        xStart: 0,
37        xStep: 1,
38        yStart: 0,
39        yStep: 1,
40    });
41
42    // Add the contours series and add to the chart
43    sciChartSurface.renderableSeries.add(
44        new UniformContoursRenderableSeries(wasmContext, {
45            dataSeries: heatmapDataSeries,
46            zMin: 20,
47            zMax: colorPaletteMax,
48            zStep: 20,
49            strokeThickness: 1,
50            stroke: appTheme.PaleSkyBlue,
51        })
52    );
53
54    // Create a background heatmap series with the same data and add to the chart
55    sciChartSurface.renderableSeries.add(
56        new UniformHeatmapRenderableSeries(wasmContext, {
57            dataSeries: heatmapDataSeries,
58            useLinearTextureFiltering: false,
59            opacity: 0.5,
60            colorMap: new HeatmapColorMap({
61                minimum: colorPaletteMin,
62                maximum: colorPaletteMax,
63                gradientStops: [
64                    { offset: 1, color: appTheme.VividPink },
65                    { offset: 0.9, color: appTheme.VividOrange },
66                    { offset: 0.7, color: appTheme.MutedRed },
67                    { offset: 0.5, color: appTheme.VividGreen },
68                    { offset: 0.3, color: appTheme.VividSkyBlue },
69                    { offset: 0.2, color: appTheme.Indigo },
70                    { offset: 0, color: appTheme.DarkIndigo },
71                ],
72            }),
73        })
74    );
75
76    // Add interaction
77    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
78    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
79    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
80
81    return { sciChartSurface };
82};
83
84export const drawHeatmapLegend = async (rootElement: string | HTMLDivElement) => {
85    const { heatmapLegend, wasmContext } = await HeatmapLegend.create(rootElement, {
86        theme: {
87            ...appTheme.SciChartJsTheme,
88            sciChartBackground: appTheme.DarkIndigo + "BB",
89            loadingAnimationBackground: appTheme.DarkIndigo + "BB",
90        },
91        yAxisOptions: {
92            isInnerAxis: true,
93            labelStyle: {
94                fontSize: 12,
95                color: appTheme.ForegroundColor,
96            },
97            axisBorder: {
98                borderRight: 1,
99                color: appTheme.ForegroundColor + "77",
100            },
101            majorTickLineStyle: {
102                color: appTheme.ForegroundColor,
103                tickSize: 6,
104                strokeThickness: 1,
105            },
106            minorTickLineStyle: {
107                color: appTheme.ForegroundColor,
108                tickSize: 3,
109                strokeThickness: 1,
110            },
111        },
112        colorMap: {
113            minimum: 0,
114            maximum: 200,
115            gradientStops: [
116                { offset: 1, color: appTheme.VividPink },
117                { offset: 0.9, color: appTheme.VividOrange },
118                { offset: 0.7, color: appTheme.MutedRed },
119                { offset: 0.5, color: appTheme.VividGreen },
120                { offset: 0.3, color: appTheme.VividSkyBlue },
121                { offset: 0.2, color: appTheme.Indigo },
122                { offset: 0, color: appTheme.DarkIndigo },
123            ],
124        },
125    });
126
127    return { sciChartSurface: heatmapLegend.innerSciChartSurface.sciChartSurface };
128};
129
130// This function generates data for the heatmap with contours series example
131function generateExampleData(index: number, heatmapWidth: number, heatmapHeight: number, colorPaletteMax: number) {
132    const zValues = zeroArray2D([heatmapHeight, heatmapWidth]);
133
134    const angle = (Math.PI * 2 * index) / 30;
135    let smallValue = 0;
136    for (let x = 0; x < heatmapWidth; x++) {
137        for (let y = 0; y < heatmapHeight; y++) {
138            const v =
139                (1 + Math.sin(x * 0.04 + angle)) * 50 +
140                (1 + Math.sin(y * 0.1 + angle)) * 50 * (1 + Math.sin(angle * 2));
141            const cx = heatmapWidth / 2;
142            const cy = heatmapHeight / 2;
143            const r = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
144            const exp = Math.max(0, 1 - r * 0.008);
145            const zValue = v * exp;
146            zValues[y][x] = zValue > colorPaletteMax ? colorPaletteMax : zValue;
147            zValues[y][x] += smallValue;
148        }
149
150        smallValue += 0.001;
151    }
152
153    return zValues;
154}
155