React Triangle Series | Triangle Mesh Chart

1import {
2    EAxisAlignment,
3    NumberRange,
4    NumericAxis,
5    SciChartSurface,
6    XyDataSeries,
7    FastTriangleRenderableSeries,
8    ETriangleSeriesDrawMode,
9    CursorModifier,
10    IFillPaletteProvider,
11    EFillPaletteMode,
12    parseColorToUIntArgb,
13    IRenderableSeries,
14    MouseWheelZoomModifier,
15    ZoomExtentsModifier,
16    ZoomPanModifier,
17} from "scichart";
18import { appTheme } from "../../../theme";
19
20class SPaletteProvider implements IFillPaletteProvider {
21    public readonly fillPaletteMode = EFillPaletteMode.SOLID;
22    private readonly palettedRed = parseColorToUIntArgb(appTheme.VividRed);
23    private readonly palettedGreen = parseColorToUIntArgb(appTheme.MutedBlue);
24
25    // tslint:disable-next-line:no-empty
26    public onAttached(parentSeries: IRenderableSeries): void {}
27    // tslint:disable-next-line:no-empty
28    public onDetached(): void {}
29
30    public overrideFillArgb(xValue: number, yValue: number, index: number): number {
31        if (index % 3 === 0) {
32            // or index % 2 === 0 to make a nice graident
33            return this.palettedRed;
34        } else {
35            return this.palettedGreen;
36        }
37    }
38}
39
40function generateScaledAndRotatedEquilateralTriangles(centers: number[][]) {
41    const xCoordinates = [];
42    const yCoordinates = [];
43    const numTriangles = centers.length;
44
45    for (let i = 0; i < numTriangles; i++) {
46        const [centerX, centerY] = centers[i];
47        const side = 20 + (i / (numTriangles - 1)) * 20;
48        const angle = (i / (numTriangles - 1)) * 60 * (Math.PI / 180);
49        const height = (Math.sqrt(3) / 2) * side;
50        const vertices = [
51            [0, -height / 2],
52            [-side / 2, height / 2],
53            [side / 2, height / 2],
54        ];
55
56        const rotatedVertices = vertices.map(([x, y]) => {
57            const rotatedX = x * Math.cos(angle) - y * Math.sin(angle);
58            const rotatedY = x * Math.sin(angle) + y * Math.cos(angle);
59            return [rotatedX + centerX, rotatedY + centerY];
60        });
61
62        const xCoords = rotatedVertices.map((vertex) => vertex[0]);
63        const yCoords = rotatedVertices.map((vertex) => vertex[1]);
64
65        xCoordinates.push(xCoords);
66        yCoordinates.push(yCoords);
67    }
68    return { xCoordinates, yCoordinates };
69}
70
71export const drawExample = async (rootElement: string | HTMLDivElement) => {
72    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
73        theme: appTheme.SciChartJsTheme,
74    });
75
76    sciChartSurface.debugRendering = false;
77    const xAxis = new NumericAxis(wasmContext, {
78        visibleRange: new NumberRange(0, 800),
79        flippedCoordinates: false,
80        axisAlignment: EAxisAlignment.Bottom,
81        labelPrecision: 2,
82        useNativeText: true,
83        drawMajorBands: false,
84    });
85    sciChartSurface.xAxes.add(xAxis);
86
87    const yAxis = new NumericAxis(wasmContext, {
88        visibleRange: new NumberRange(0, 500),
89        axisAlignment: EAxisAlignment.Left,
90        labelPrecision: 2,
91        flippedCoordinates: false,
92        useNativeText: true,
93        drawMajorBands: false,
94    });
95    sciChartSurface.yAxes.add(yAxis);
96
97    // Series 1 - The "S"
98    const sSeries = new FastTriangleRenderableSeries(wasmContext, {
99        dataSeries: new XyDataSeries(wasmContext, {
100            xValues: [
101                329, 300, 264, 234, 195, 174, 134, 136, 87, 106, 61, 103, 74, 115, 92, 129, 116, 164, 156, 193, 208,
102                247, 242, 286, 273, 321, 286, 327, 283, 321, 282, 308, 262, 280, 239, 213, 175, 144, 111, 82, 64,
103            ],
104            yValues: [
105                426, 411, 446, 415, 446, 417, 446, 414, 426, 396, 385, 370, 338, 341, 309, 313, 275, 295, 255, 284, 232,
106                264, 225, 248, 209, 212, 190, 174, 159, 136, 134, 102, 104, 75, 99, 68, 103, 76, 111, 83, 127,
107            ],
108        }),
109        fill: appTheme.MutedBlue,
110        drawMode: ETriangleSeriesDrawMode.Strip,
111        paletteProvider: new SPaletteProvider(),
112    });
113    sciChartSurface.renderableSeries.add(sSeries);
114
115    // Series 2 - The "C"
116    const triangleCenters = [
117        [566, 279],
118        [529, 292],
119        [483, 292],
120        [445, 274],
121        [409, 250],
122        [399, 208],
123        [401, 167],
124        [412, 129],
125        [437, 91],
126        [473, 77],
127        [527, 77],
128        [574, 90],
129    ];
130    const { xCoordinates, yCoordinates } = generateScaledAndRotatedEquilateralTriangles(triangleCenters);
131
132    const cSeries = new FastTriangleRenderableSeries(wasmContext, {
133        dataSeries: new XyDataSeries(wasmContext, {
134            xValues: xCoordinates.reduce((a, b) => a.concat(b), []),
135            yValues: yCoordinates.reduce((a, b) => a.concat(b), []),
136        }),
137        fill: appTheme.MutedBlue,
138        drawMode: ETriangleSeriesDrawMode.List,
139    });
140    sciChartSurface.renderableSeries.add(cSeries);
141
142    // Series 3 - The "I"
143    const pentagonsX = [
144        [696.0, 679.82, 686.0, 706.0, 712.18],
145        [696.0, 679.82, 686.0, 706.0, 712.18],
146        [696.0, 679.82, 686.0, 706.0, 712.18],
147        [696.0, 679.82, 686.0, 706.0, 712.18],
148        [696.0, 679.82, 686.0, 706.0, 712.18],
149        [696.0, 679.82, 686.0, 706.0, 712.18],
150        [696.0, 679.82, 686.0, 706.0, 712.18],
151    ];
152    const pentagonsY = [
153        [388.01, 376.26, 357.24, 357.24, 376.26],
154        [307.01, 295.26, 276.24, 276.24, 295.26],
155        [271.01, 259.26, 240.24, 240.24, 259.26],
156        [231.01, 219.26, 200.24, 200.24, 219.26],
157        [188.01, 176.26, 157.24, 157.24, 176.26],
158        [144.01, 132.26, 113.24, 113.24, 132.26],
159        [106.01, 94.26, 75.24, 75.24, 94.26],
160    ];
161
162    const iSeries = new FastTriangleRenderableSeries(wasmContext, {
163        dataSeries: new XyDataSeries(wasmContext, {
164            xValues: pentagonsX.reduce((a, b) => a.concat(b), []),
165            yValues: pentagonsY.reduce((a, b) => a.concat(b), []),
166        }),
167        fill: appTheme.VividRed,
168        drawMode: ETriangleSeriesDrawMode.Polygon,
169        polygonVertices: 5,
170    });
171    sciChartSurface.renderableSeries.add(iSeries);
172
173    sciChartSurface.chartModifiers.add(
174        new CursorModifier({
175            showTooltip: true,
176            crosshairStroke: "white",
177            tooltipContainerBackground: appTheme.DarkIndigo,
178            tooltipTextStroke: "white",
179            tooltipShadow: "transparent",
180            crosshairStrokeThickness: 1,
181            showAxisLabels: false,
182        }),
183        new MouseWheelZoomModifier(),
184        new ZoomExtentsModifier(),
185        new ZoomPanModifier()
186    );
187    return { sciChartSurface, wasmContext };
188};
189