React Vector Field Plot

1import {
2    NumberRange,
3    SciChartSurface,
4    NumericAxis,
5    CentralAxesLayoutManager,
6    FastLineSegmentRenderableSeries,
7    IStrokePaletteProvider,
8    EStrokePaletteMode,
9    parseColorToUIntArgb,
10    IRenderableSeries,
11    TPaletteProviderDefinition,
12    EPaletteProviderType,
13    XyDataSeries,
14    ZoomPanModifier,
15    ZoomExtentsModifier,
16    MouseWheelZoomModifier,
17    FastTriangleRenderableSeries,
18    ETriangleSeriesDrawMode,
19    CursorModifier,
20    TCursorTooltipDataTemplate,
21    SeriesInfo,
22    XySeriesInfo,
23} from "scichart";
24
25import { appTheme } from "../../../theme";
26
27const lineStartColor = appTheme.VividBlue; //"red";
28const lineEndColor = appTheme.VividOrange; //"blue";
29
30class LineSegmentPaletteProvider implements IStrokePaletteProvider {
31    public readonly strokePaletteMode = EStrokePaletteMode.GRADIENT;
32    private readonly palettedStart = parseColorToUIntArgb(lineStartColor);
33    private readonly palettedEnd = parseColorToUIntArgb(lineEndColor);
34
35    public onAttached(parentSeries: IRenderableSeries): void {}
36
37    public onDetached(): void {}
38
39    public overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
40        return index % 2 === 0 ? this.palettedStart : this.palettedEnd;
41    }
42
43    public toJSON(): TPaletteProviderDefinition {
44        return { type: EPaletteProviderType.Custom, customType: "MyPaletteProvider" };
45    }
46}
47
48/**
49 * Format function
50 */
51const fFn = (v: number) => v.toFixed(1);
52
53// Tooltip Data Template
54const tooltipDataTemplate: TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[]) => {
55    const valuesWithLabels: string[] = [];
56    seriesInfos.forEach((si) => {
57        const xySI = si as XySeriesInfo;
58        if (xySI.isWithinDataBounds) {
59            if (!isNaN(xySI.yValue) && xySI.isHit) {
60                valuesWithLabels.push(
61                    `start (${fFn(xySI.xValue)},${fFn(xySI.yValue)}) end (${fFn(xySI.point2xValue)},${fFn(xySI.point2yValue)})`
62                );
63            }
64        }
65    });
66    return valuesWithLabels;
67};
68
69function addArrowheads(xValues: number[], yValues: number[], arrowLength = 0.2, arrowAngle = Math.PI / 12) {
70    function distance(x1: number, y1: number, x2: number, y2: number) {
71        return Math.hypot(x2 - x1, y2 - y1);
72    }
73
74    const arrows = [];
75    for (let i = 0; i < xValues.length; i += 2) {
76        // Line start and end
77        const x1 = xValues[i];
78        const y1 = yValues[i];
79        const x2 = xValues[i + 1];
80        const y2 = yValues[i + 1];
81
82        // Direction of the line
83        const dx = x2 - x1;
84        const dy = y2 - y1;
85        const lineAngle = Math.atan2(dy, dx);
86
87        // Arrowhead points
88        const angle1 = lineAngle + Math.PI - arrowAngle;
89        const angle2 = lineAngle + Math.PI + arrowAngle;
90
91        const arrowPoint1 = [x2 + arrowLength * Math.cos(angle1), y2 + arrowLength * Math.sin(angle1)];
92        const arrowPoint2 = [x2 + arrowLength * Math.cos(angle2), y2 + arrowLength * Math.sin(angle2)];
93
94        // Arrowhead: [tip, base1, base2]
95        arrows.push([
96            [x2, y2], // Tip of the arrow
97            arrowPoint1, // First base point
98            arrowPoint2, // Second base point
99        ]);
100    }
101    return arrows;
102}
103
104export const drawExample = async (rootElement: string | HTMLDivElement) => {
105    // Create a SciChartSurface
106    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
107        theme: appTheme.SciChartJsTheme,
108    });
109
110    // configure central axes
111    const layoutManager = new CentralAxesLayoutManager();
112
113    sciChartSurface.layoutManager = layoutManager;
114
115    const xMin = -15;
116    const xMax = 15;
117    const yMin = -10;
118    const yMax = 10;
119
120    const growBy = new NumberRange(0.1, 0.1);
121
122    const xAxis = new NumericAxis(wasmContext, {
123        axisBorder: { color: "white", borderBottom: 1 },
124        drawMajorBands: false,
125        drawMajorGridLines: false,
126        drawMinorGridLines: false,
127        growBy,
128    });
129    sciChartSurface.xAxes.add(xAxis);
130
131    const yAxis = new NumericAxis(wasmContext, {
132        axisBorder: { color: "white", borderRight: 1 },
133        drawMajorBands: false,
134        drawMajorGridLines: false,
135        drawMinorGridLines: false,
136        growBy,
137    });
138    sciChartSurface.yAxes.add(yAxis);
139
140    const multiplier = 0.01;
141
142    const linesXValues: number[] = [];
143    const linesYValues: number[] = [];
144
145    for (let x = xMin; x <= xMax; x++) {
146        for (let y = yMin; y <= yMax; y++) {
147            // start point
148            // dataSeries.append(x, y);
149            linesXValues.push(x);
150            linesYValues.push(y);
151            // end point
152            const xEnd = x + (x * x - y * y - 4) * multiplier;
153            const yEnd = y + 2 * x * y * multiplier;
154
155            linesXValues.push(xEnd);
156            linesYValues.push(yEnd);
157        }
158    }
159
160    const lineSegmentSeries = new FastLineSegmentRenderableSeries(wasmContext, {
161        dataSeries: new XyDataSeries(wasmContext, {
162            xValues: linesXValues,
163            yValues: linesYValues,
164        }),
165        strokeThickness: 2,
166        paletteProvider: new LineSegmentPaletteProvider(),
167    });
168
169    const arrowheads = addArrowheads(linesXValues, linesYValues);
170
171    //console.log(arrowheads.flat());
172
173    const arrowheadsXvalues = arrowheads.flat().map((d) => d[0]);
174    const arrowheadsYvalues = arrowheads.flat().map((d) => d[1]);
175
176    const polygonSeries = new FastTriangleRenderableSeries(wasmContext, {
177        dataSeries: new XyDataSeries(wasmContext, {
178            xValues: arrowheadsXvalues,
179            yValues: arrowheadsYvalues,
180        }),
181        isDigitalLine: false,
182        opacity: 1,
183        fill: lineEndColor,
184        drawMode: ETriangleSeriesDrawMode.List, // Polygon / List / Strip
185    });
186
187    sciChartSurface.renderableSeries.add(lineSegmentSeries);
188
189    sciChartSurface.renderableSeries.add(polygonSeries);
190
191    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
192    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
193    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
194    sciChartSurface.chartModifiers.add(new CursorModifier({ showTooltip: true, tooltipDataTemplate }));
195
196    return { sciChartSurface, wasmContext };
197};
198