React Polar Uniform Heatmap 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

import {
    PolarMouseWheelZoomModifier,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    PolarNumericAxis,
    SciChartPolarSurface,
    EPolarAxisMode,
    NumberRange,
    EAxisAlignment,
    EPolarLabelMode,
    HeatmapColorMap,
    UniformHeatmapDataSeries,
    PolarUniformHeatmapRenderableSeries,
    HeatmapLegend,
    Thickness,
} from "scichart";
import { appTheme } from "./appTheme";
import { generateHeatmapData } from "./generateHeatmapData";

const HEATMAP_WIDTH = 300;
const HEATMAP_HEIGHT = 500;

// Define color map globally to be used in both the chart and the legend
const COLOR_MAP = new HeatmapColorMap({
    minimum: 0,
    maximum: 1,
    gradientStops: [
        { offset: 0, color: appTheme.VividPink },
        { offset: 0.1, color: appTheme.VividOrange },
        { offset: 0.2, color: appTheme.MutedRed },
        { offset: 0.5, color: appTheme.VividGreen },
        { offset: 0.8, color: appTheme.VividSkyBlue },
        { offset: 0.9, color: appTheme.Indigo },
        { offset: 1, color: appTheme.DarkIndigo },
    ],
});

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

    const radialAxisY = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Radial,
        axisAlignment: EAxisAlignment.Right,
        visibleRangeLimit: new NumberRange(0, HEATMAP_HEIGHT),
        useNativeText: true,
        drawMinorGridLines: false,

        drawMajorTickLines: false,
        drawMinorTickLines: false,
        labelPrecision: 0,
        innerRadius: 0.2,
    });
    sciChartSurface.yAxes.add(radialAxisY);

    const angularAxisX = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        axisAlignment: EAxisAlignment.Top,
        flippedCoordinates: true,
        useNativeText: true,

        drawMajorTickLines: false,
        drawMinorTickLines: false,
        polarLabelMode: EPolarLabelMode.Parallel,
        labelPrecision: 0,
        totalAngle: Math.PI / 2,
    });
    sciChartSurface.xAxes.add(angularAxisX);

    const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: new UniformHeatmapDataSeries(wasmContext, {
            zValues: generateHeatmapData(HEATMAP_WIDTH, HEATMAP_HEIGHT, 1999),
            xStart: 0,
            xStep: 1,
            yStart: 0,
            yStep: 1,
        }),
        colorMap: COLOR_MAP,
        stroke: "white",
        strokeThickness: 5,
    });
    sciChartSurface.renderableSeries.add(heatmapSeries);

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

    return { sciChartSurface, wasmContext };
};

// Draws a Heatmap legend over the <div id={divHeatmapLegend}></div>
export const drawHeatmapLegend = async (rootElement: string | HTMLDivElement) => {
    const { heatmapLegend } = await HeatmapLegend.create(rootElement, {
        theme: {
            ...appTheme.SciChartJsTheme,
            sciChartBackground: appTheme.DarkIndigo + "BB",
            loadingAnimationBackground: appTheme.DarkIndigo + "BB",
        },
        yAxisOptions: {
            isInnerAxis: true,
            labelStyle: {
                fontSize: 14,
                color: appTheme.ForegroundColor,
            },
            axisBorder: {
                borderRight: 2,
                color: appTheme.ForegroundColor,
            },
            majorTickLineStyle: {
                color: appTheme.ForegroundColor,
                tickSize: 8,
                strokeThickness: 2,
            },
            minorTickLineStyle: {
                color: appTheme.ForegroundColor,
                tickSize: 4,
                strokeThickness: 1,
            },
        },
        colorMap: COLOR_MAP,
    });

    return { sciChartSurface: heatmapLegend.innerSciChartSurface.sciChartSurface };
};