Using VerticalSliceModifier

1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3import {
4    EllipsePointMarker,
5    ENumericFormat,
6    FastLineRenderableSeries,
7    MouseWheelZoomModifier,
8    NumberRange,
9    NumericAxis,
10    RolloverLegendSvgAnnotation,
11    VerticalSliceModifier,
12    SciChartSurface,
13    XyDataSeries,
14    ZoomExtentsModifier,
15    ZoomPanModifier,
16    SeriesInfo,
17    TWebAssemblyChart,
18    ECoordinateMode,
19    NativeTextAnnotation,
20    EWrapTo,
21    EHorizontalAnchorPoint,
22} from "scichart";
23
24export const drawExample = async (rootElement: string | HTMLDivElement) => {
25    // Create a SciChartSurface with X,Y Axis
26    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
27        theme: appTheme.SciChartJsTheme,
28    });
29
30    sciChartSurface.xAxes.add(
31        new NumericAxis(wasmContext, {
32            growBy: new NumberRange(0.05, 0.05),
33            labelFormat: ENumericFormat.Decimal,
34            labelPrecision: 4,
35        })
36    );
37
38    sciChartSurface.yAxes.add(
39        new NumericAxis(wasmContext, {
40            growBy: new NumberRange(0.1, 0.1),
41            labelFormat: ENumericFormat.Decimal,
42            labelPrecision: 4,
43        })
44    );
45
46    // Add some data
47    const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
48    const lineSeries0 = new FastLineRenderableSeries(wasmContext, {
49        dataSeries: new XyDataSeries(wasmContext, {
50            xValues: data1.xValues,
51            yValues: data1.yValues,
52            dataSeriesName: "First Line Series",
53        }),
54        strokeThickness: 3,
55        stroke: appTheme.VividSkyBlue,
56        pointMarker: new EllipsePointMarker(wasmContext, {
57            width: 7,
58            height: 7,
59            strokeThickness: 0,
60            fill: appTheme.VividSkyBlue,
61        }),
62    });
63    sciChartSurface.renderableSeries.add(lineSeries0);
64
65    const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
66    const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
67        dataSeries: new XyDataSeries(wasmContext, {
68            xValues: data2.xValues,
69            yValues: data2.yValues,
70            dataSeriesName: "Second Line Series",
71        }),
72        strokeThickness: 3,
73        stroke: appTheme.VividOrange,
74        pointMarker: new EllipsePointMarker(wasmContext, {
75            width: 7,
76            height: 7,
77            strokeThickness: 0,
78            fill: appTheme.VividOrange,
79        }),
80    });
81    sciChartSurface.renderableSeries.add(lineSeries1);
82
83    const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
84    const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
85        dataSeries: new XyDataSeries(wasmContext, {
86            xValues: data3.xValues,
87            yValues: data3.yValues,
88            dataSeriesName: "Third Line Series",
89        }),
90        strokeThickness: 3,
91        stroke: appTheme.MutedPink,
92        pointMarker: new EllipsePointMarker(wasmContext, {
93            width: 7,
94            height: 7,
95            strokeThickness: 0,
96            fill: appTheme.MutedPink,
97        }),
98    });
99    sciChartSurface.renderableSeries.add(lineSeries2);
100
101    // Here is where we add rollover tooltip behaviour
102    //
103    const vSlice1 = new VerticalSliceModifier({
104        x1: 5.06,
105        xCoordinateMode: ECoordinateMode.DataValue,
106        isDraggable: true,
107        // Defines if rollover vertical line is shown
108        showRolloverLine: true,
109        rolloverLineStrokeThickness: 1,
110        rolloverLineStroke: appTheme.VividGreen,
111        lineSelectionColor: appTheme.VividGreen,
112        // Shows the default tooltip
113        showTooltip: true,
114        // Optional: Overrides the legend template to display additional info top-left of the chart
115        tooltipLegendTemplate: getTooltipLegendTemplate,
116        // Optional: Overrides the content of the tooltip
117        tooltipDataTemplate: getTooltipDataTemplate,
118    });
119    const vSlice2 = new VerticalSliceModifier({
120        x1: 0.75,
121        xCoordinateMode: ECoordinateMode.Relative,
122        isDraggable: true,
123        // Defines if rollover vertical line is shown
124        showRolloverLine: true,
125        rolloverLineStrokeThickness: 1,
126        rolloverLineStroke: appTheme.VividOrange,
127        lineSelectionColor: appTheme.VividOrange,
128        // Shows the default tooltip
129        showTooltip: true,
130        // Optional: Overrides the content of the tooltip
131        tooltipDataTemplate: getTooltipDataTemplate,
132    });
133    sciChartSurface.chartModifiers.add(vSlice1, vSlice2);
134
135    // Optional: Additional customisation may be done per-series, e.g.
136    //
137    lineSeries0.rolloverModifierProps.tooltipTextColor = appTheme.DarkIndigo;
138    lineSeries2.rolloverModifierProps.tooltipColor = appTheme.VividPink;
139
140    const textAnn1 = new NativeTextAnnotation({
141        text: "xCoordinateMode: DataValue\nMoves with data\nLinked to Legend\nDraggable",
142        textColor: appTheme.ForegroundColor,
143        y1: 0.9,
144        xCoordinateMode: ECoordinateMode.Pixel,
145        yCoordinateMode: ECoordinateMode.Relative,
146        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
147    });
148    // Link the annotation position with the verticalSlice
149    sciChartSurface.preRender.subscribe((data) => {
150        textAnn1.x1 = vSlice1.verticalLine.x1;
151    });
152    sciChartSurface.annotations.add(textAnn1);
153
154    const textAnn2 = new NativeTextAnnotation({
155        text: "xCoordinateMode: Relative\nFixed position\nDraggable ",
156        textColor: appTheme.ForegroundColor,
157        y1: 0.9,
158        xCoordinateMode: ECoordinateMode.Pixel,
159        yCoordinateMode: ECoordinateMode.Relative,
160        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
161    });
162    sciChartSurface.preRender.subscribe((data) => {
163        textAnn2.x1 = vSlice2.verticalLine.x1;
164    });
165    sciChartSurface.annotations.add(textAnn2);
166
167    // Add further zooming and panning behaviours
168    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
169    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
170    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
171
172    sciChartSurface.zoomExtents();
173    return { sciChartSurface, wasmContext };
174};
175
176const getTooltipDataTemplate = (
177    seriesInfo: SeriesInfo,
178    tooltipTitle: string,
179    tooltipLabelX: string,
180    tooltipLabelY: string
181) => {
182    // Lines here are returned to the tooltip and displayed as text-line per tooltip
183    const lines: string[] = [];
184    lines.push(tooltipTitle);
185    lines.push(`x: ${seriesInfo.formattedXValue}`);
186    lines.push(`y: ${seriesInfo.formattedYValue}`);
187    return lines;
188};
189
190// Override the standard tooltip displayed by CursorModifier
191const getTooltipLegendTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: RolloverLegendSvgAnnotation) => {
192    let outputSvgString = "";
193
194    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
195    seriesInfos.forEach((seriesInfo, index) => {
196        if (seriesInfo.isWithinDataBounds) {
197            const lineHeight = 30;
198            const y = 50 + index * lineHeight;
199            // Use the series stroke for legend text colour
200            const textColor = seriesInfo.stroke;
201            // Use the seriesInfo formattedX/YValue for text on the
202            outputSvgString += `<text x="8" y="${y}" font-size="16" font-family="Verdana" fill="${textColor}">
203                                    ${seriesInfo.seriesName}: X=${seriesInfo.formattedXValue}, Y=${seriesInfo.formattedYValue}
204                                </text>`;
205        }
206    });
207
208    // Content here is returned for the custom legend placed in top-left of the chart
209    return `<svg width="100%" height="100%">
210                <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Custom Rollover Legend</text>
211                ${outputSvgString}
212            </svg>`;
213};
214