JavaScript 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.36, 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    // Negative growBy shrinks the autorange, cropping the sparse outer arrows so the field fills the viewport
121    const growBy = new NumberRange(-0.12, -0.12);
122
123    const xAxis = new NumericAxis(wasmContext, {
124        axisBorder: { color: "white", borderBottom: 1 },
125        drawMajorBands: false,
126        drawMajorGridLines: false,
127        drawMinorGridLines: false,
128        growBy,
129    });
130    sciChartSurface.xAxes.add(xAxis);
131
132    const yAxis = new NumericAxis(wasmContext, {
133        axisBorder: { color: "white", borderRight: 1 },
134        drawMajorBands: false,
135        drawMajorGridLines: false,
136        drawMinorGridLines: false,
137        growBy,
138    });
139    sciChartSurface.yAxes.add(yAxis);
140
141    const multiplier = 0.01;
142
143    const linesXValues: number[] = [];
144    const linesYValues: number[] = [];
145
146    for (let x = xMin; x <= xMax; x++) {
147        for (let y = yMin; y <= yMax; y++) {
148            // start point
149            // dataSeries.append(x, y);
150            linesXValues.push(x);
151            linesYValues.push(y);
152            // end point
153            const xEnd = x + (x * x - y * y - 4) * multiplier;
154            const yEnd = y + 2 * x * y * multiplier;
155
156            linesXValues.push(xEnd);
157            linesYValues.push(yEnd);
158        }
159    }
160
161    const lineSegmentSeries = new FastLineSegmentRenderableSeries(wasmContext, {
162        dataSeries: new XyDataSeries(wasmContext, {
163            xValues: linesXValues,
164            yValues: linesYValues,
165        }),
166        strokeThickness: 3,
167        paletteProvider: new LineSegmentPaletteProvider(),
168    });
169
170    const arrowheads = addArrowheads(linesXValues, linesYValues);
171
172    //console.log(arrowheads.flat());
173
174    const arrowheadsXvalues = arrowheads.flat().map((d) => d[0]);
175    const arrowheadsYvalues = arrowheads.flat().map((d) => d[1]);
176
177    const polygonSeries = new FastTriangleRenderableSeries(wasmContext, {
178        dataSeries: new XyDataSeries(wasmContext, {
179            xValues: arrowheadsXvalues,
180            yValues: arrowheadsYvalues,
181        }),
182        isDigitalLine: false,
183        opacity: 1,
184        fill: lineEndColor,
185        drawMode: ETriangleSeriesDrawMode.List, // Polygon / List / Strip
186    });
187
188    sciChartSurface.renderableSeries.add(lineSegmentSeries);
189
190    sciChartSurface.renderableSeries.add(polygonSeries);
191
192    sciChartSurface.chartModifiers.add(new ZoomPanModifier());
193    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
194    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
195    sciChartSurface.chartModifiers.add(new CursorModifier({ showTooltip: true, tooltipDataTemplate }));
196
197    return { sciChartSurface, wasmContext };
198};
199