React Polar Spline Line 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

import {
    PolarMouseWheelZoomModifier,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    PolarNumericAxis,
    SciChartPolarSurface,
    EPolarAxisMode,
    NumberRange,
    EAxisAlignment,
    EPolarLabelMode,
    PolarLegendModifier,
    PolarLineRenderableSeries,
    XyDataSeries,
    SplineRenderDataTransform,
    WaveAnimation,
} from "scichart";
import { appTheme } from "./appTheme";

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

    const radialYAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Radial,
        axisAlignment: EAxisAlignment.Right,
        visibleRange: new NumberRange(0, 6),
        drawMinorTickLines: false,
        drawMajorTickLines: false,
        useNativeText: true,
        drawMinorGridLines: false,
        zoomExtentsToInitialRange: true,
        labelPrecision: 0,
        innerRadius: 0.1, // donut hole
    });
    sciChartSurface.yAxes.add(radialYAxis);

    const polarXAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        axisAlignment: EAxisAlignment.Top,

        polarLabelMode: EPolarLabelMode.Parallel,

        autoTicks: false,
        majorDelta: 1,

        useNativeText: true,
        flippedCoordinates: true, // go clockwise
        totalAngle: Math.PI,
        labelPrecision: 0,
    });
    sciChartSurface.xAxes.add(polarXAxis);

    const ANIMATION_DURATION = 500;
    const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    const yValues = [3, 4, 2, 4, 5, 5, 3, 2, 4];

    // 1. regular polar line
    const regularPolarLine = new PolarLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues,
            yValues,
            dataSeriesName: "Original Data",
        }),
        stroke: "#CCCCCC",
        strokeThickness: 3,
    });

    // 2. cubic polar line
    const cubicPolarLine = new PolarLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues,
            yValues,
            dataSeriesName: "Cubic",
        }),
        stroke: appTheme.VividOrange,
        strokeThickness: 5,
        animation: new WaveAnimation({ duration: ANIMATION_DURATION, delay: ANIMATION_DURATION }),
    });
    // Add cubic bezier transform
    const cubicTransform = new SplineRenderDataTransform(cubicPolarLine, wasmContext, [
        cubicPolarLine.drawingProviders[0],
    ]);
    cubicTransform.interpolationPoints = 30;
    cubicPolarLine.renderDataTransform = cubicTransform;

    // 3. interpolated polar line
    const interpolatedPolarLine = new PolarLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues,
            yValues,
            dataSeriesName: "Interpolated",
        }),
        interpolateLine: true, //
        stroke: appTheme.VividPurple,
        strokeThickness: 5,
        animation: new WaveAnimation({ duration: ANIMATION_DURATION, delay: 2 * ANIMATION_DURATION }),
    });

    sciChartSurface.renderableSeries.add(regularPolarLine, cubicPolarLine, interpolatedPolarLine);

    sciChartSurface.chartModifiers.add(
        new PolarPanModifier(),
        new PolarZoomExtentsModifier(),
        new PolarMouseWheelZoomModifier(),
        new PolarLegendModifier({
            showCheckboxes: true,
        })
    );

    return { sciChartSurface, wasmContext };
};