Angular Polar Heatmap Kinetic Tomography Chart

1import {
2    PolarMouseWheelZoomModifier,
3    PolarZoomExtentsModifier,
4    PolarPanModifier,
5    PolarNumericAxis,
6    SciChartPolarSurface,
7    EPolarAxisMode, 
8    NumberRange, 
9    EAxisAlignment, 
10    EPolarLabelMode,
11    HeatmapColorMap,
12    UniformHeatmapDataSeries,
13    PolarUniformHeatmapRenderableSeries,
14    HeatmapLegend,
15    Thickness,
16} from "scichart";
17import { appTheme } from "../../../theme";
18import { generateKineticTomographyData } from "./generateHeatmapData";
19
20const HEATMAP_WIDTH = 72;
21const HEATMAP_HEIGHT = 25;
22
23// Define color map globally to be used in both the chart and the legend
24const COLOR_MAP = new HeatmapColorMap({
25    minimum: -1,
26    maximum: 1,
27    gradientStops: [
28        { offset: 0.4, color: appTheme.VividOrange },
29        { offset: 0.5, color: "white" },
30        { offset: 0.6, color: appTheme.VividTeal },
31    ]
32})
33
34export const drawExample = async (rootElement: string | HTMLDivElement) => {
35    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
36        theme: appTheme.SciChartJsTheme,
37        padding: new Thickness(0, 60, 0, 0),
38    });
39
40    const radialAxisY = new PolarNumericAxis(wasmContext, {
41        polarAxisMode: EPolarAxisMode.Radial,
42        axisAlignment: EAxisAlignment.Right,
43        useNativeText: true,
44        labelPrecision: 0,
45        labelStyle: {
46            color: "white"
47        },
48
49        autoTicks: false,
50        majorDelta: 5,
51
52        drawMinorGridLines: false,
53        drawMinorTickLines: false,
54        drawMajorTickLines: false,
55        majorGridLineStyle: {
56            color: appTheme.DarkIndigo,
57            strokeThickness: 1,
58        },
59        innerRadius: 0.1,
60    });
61    sciChartSurface.yAxes.add(radialAxisY);
62
63    const angularAxisX = new PolarNumericAxis(wasmContext, {
64        polarAxisMode: EPolarAxisMode.Angular,
65        axisAlignment: EAxisAlignment.Top,
66        visibleRange: new NumberRange(0, HEATMAP_WIDTH),
67        zoomExtentsToInitialRange: true,
68
69        useNativeText: true,
70        totalAngleDegrees: 360,
71        
72        autoTicks: false,
73        majorDelta: 45,
74        labelPostfix: "°",
75        labelPrecision: 0,
76        labelStyle: {
77            color: "white"
78        },
79        polarLabelMode: EPolarLabelMode.Parallel,
80
81        drawMinorGridLines: false,
82        drawMinorTickLines: false,
83        drawMajorTickLines: false,
84        majorGridLineStyle: {
85            color: appTheme.DarkIndigo,
86            strokeThickness: 1,
87        },
88    });
89    sciChartSurface.xAxes.add(angularAxisX);
90
91    const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, {
92        dataSeries: new UniformHeatmapDataSeries(wasmContext, {
93            zValues: generateKineticTomographyData(HEATMAP_HEIGHT, HEATMAP_WIDTH),
94            xStart: 0,
95            xStep: 1,
96            yStart: 0,
97            yStep: 1,
98            containsNaN: true
99        }),
100        colorMap: COLOR_MAP,
101        stroke: "white",
102        strokeThickness: 5,
103        opacity: 0.8
104    });
105    sciChartSurface.renderableSeries.add(heatmapSeries);
106
107    sciChartSurface.chartModifiers.add(
108        new PolarPanModifier(),
109        new PolarZoomExtentsModifier(),
110        new PolarMouseWheelZoomModifier()
111    );
112
113    return { sciChartSurface, wasmContext };
114};
115
116// Draws a Heatmap legend over the <div id={divHeatmapLegend}></div>
117export const drawHeatmapLegend = async (rootElement: string | HTMLDivElement) => {
118    const { heatmapLegend } = await HeatmapLegend.create(rootElement, {
119        theme: {
120            ...appTheme.SciChartJsTheme,
121            sciChartBackground: appTheme.DarkIndigo + "BB",
122            loadingAnimationBackground: appTheme.DarkIndigo + "BB",
123        },
124        yAxisOptions: {
125            isInnerAxis: true,
126            labelStyle: {
127                fontSize: 14,
128                color: appTheme.ForegroundColor,
129            },
130            axisBorder: {
131                borderRight: 2,
132                color: appTheme.ForegroundColor,
133            },
134            majorTickLineStyle: {
135                color: appTheme.ForegroundColor,
136                tickSize: 8,
137                strokeThickness: 2,
138            },
139            minorTickLineStyle: {
140                color: appTheme.ForegroundColor,
141                tickSize: 4,
142                strokeThickness: 1,
143            },
144        },
145        colorMap: COLOR_MAP
146    });
147
148    return { sciChartSurface: heatmapLegend.innerSciChartSurface.sciChartSurface };
149};