Zoom and Pan with React Chart multiple Modifiers

1import { appTheme } from "../../../theme";
2import { ExampleDataProvider } from "../../../ExampleData/ExampleDataProvider";
3
4import {
5    easing,
6    EHorizontalAnchorPoint,
7    EllipsePointMarker,
8    ENumericFormat,
9    EVerticalAnchorPoint,
10    FastLineRenderableSeries,
11    MouseWheelZoomModifier,
12    NumberRange,
13    NumericAxis,
14    PinchZoomModifier,
15    RubberBandXyZoomModifier,
16    SciChartSurface,
17    XyDataSeries,
18    ZoomExtentsModifier,
19    ZoomPanModifier,
20    EExecuteOn,
21    TextAnnotation,
22    ECoordinateMode,
23    NativeTextAnnotation,
24    EWrapTo,
25} from "scichart";
26
27export const drawExample = async (rootElement: string | HTMLDivElement) => {
28    // Create a SciChartSurface with X,Y Axis
29    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
30        theme: appTheme.SciChartJsTheme,
31    });
32
33    sciChartSurface.xAxes.add(
34        new NumericAxis(wasmContext, {
35            growBy: new NumberRange(0.05, 0.05),
36            labelFormat: ENumericFormat.Decimal,
37            labelPrecision: 4,
38        })
39    );
40
41    sciChartSurface.yAxes.add(
42        new NumericAxis(wasmContext, {
43            growBy: new NumberRange(0.1, 0.1),
44            labelFormat: ENumericFormat.Decimal,
45            labelPrecision: 4,
46        })
47    );
48
49    // Add some data
50    const data1 = ExampleDataProvider.getFourierSeriesZoomed(0.6, 0.13, 5.0, 5.15);
51    const lineSeries0 = new FastLineRenderableSeries(wasmContext, {
52        dataSeries: new XyDataSeries(wasmContext, {
53            xValues: data1.xValues,
54            yValues: data1.yValues,
55            dataSeriesName: "First Line Series",
56        }),
57        strokeThickness: 3,
58        stroke: appTheme.VividSkyBlue,
59        pointMarker: new EllipsePointMarker(wasmContext, {
60            width: 7,
61            height: 7,
62            strokeThickness: 0,
63            fill: appTheme.VividSkyBlue,
64        }),
65    });
66    sciChartSurface.renderableSeries.add(lineSeries0);
67
68    const data2 = ExampleDataProvider.getFourierSeriesZoomed(0.5, 0.12, 5.0, 5.15);
69    const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
70        dataSeries: new XyDataSeries(wasmContext, {
71            xValues: data2.xValues,
72            yValues: data2.yValues,
73            dataSeriesName: "Second Line Series",
74        }),
75        strokeThickness: 3,
76        stroke: appTheme.VividOrange,
77        pointMarker: new EllipsePointMarker(wasmContext, {
78            width: 7,
79            height: 7,
80            strokeThickness: 0,
81            fill: appTheme.VividOrange,
82        }),
83    });
84    sciChartSurface.renderableSeries.add(lineSeries1);
85
86    const data3 = ExampleDataProvider.getFourierSeriesZoomed(0.4, 0.11, 5.0, 5.15);
87    const lineSeries2 = new FastLineRenderableSeries(wasmContext, {
88        dataSeries: new XyDataSeries(wasmContext, {
89            xValues: data3.xValues,
90            yValues: data3.yValues,
91            dataSeriesName: "Third Line Series",
92        }),
93        strokeThickness: 3,
94        stroke: appTheme.MutedPink,
95        pointMarker: new EllipsePointMarker(wasmContext, {
96            width: 7,
97            height: 7,
98            strokeThickness: 0,
99            fill: appTheme.MutedPink,
100        }),
101    });
102    sciChartSurface.renderableSeries.add(lineSeries2);
103
104    // Here is where we add the zoom, pan behaviour
105    sciChartSurface.chartModifiers.add(
106        // use RubberBandXyZoomModifier with Right Mouse Button
107        // use easingFunction to animate zoom
108        new RubberBandXyZoomModifier({
109            executeCondition: { button: EExecuteOn.MouseRightButton },
110            easingFunction: easing.elastic,
111        }),
112        // enable pan withZoomPanModifier, and additionally e PinchZoom to allow zooming with pinch gesture on touch devices by setting enableZoom
113        new ZoomPanModifier({ enableZoom: true }),
114        new MouseWheelZoomModifier(),
115        // remark: PinchZoom functionality was included into ZoomPanModifier.
116        // if having any conflicts, check the value of modifier.enableZoom
117        // new PinchZoomModifier(),
118        // Zoom extents on double click
119        new ZoomExtentsModifier({ easingFunction: easing.elastic })
120    );
121
122    // Add annotations to tell the user what to do
123    sciChartSurface.annotations.add(
124        new TextAnnotation({
125            text: "Zoom Pan Modifiers Demo",
126            x1: 0.5,
127            y1: 0.5,
128            yCoordShift: -50,
129            xCoordinateMode: ECoordinateMode.Relative,
130            yCoordinateMode: ECoordinateMode.Relative,
131            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
132            verticalAnchorPoint: EVerticalAnchorPoint.Center,
133            opacity: 0.33,
134            fontSize: 48,
135            fontWeight: "Bold",
136        })
137    );
138    sciChartSurface.annotations.add(
139        new TextAnnotation({
140            text: "Multiple zoom, pan behaviours enabled on a single chart",
141            x1: 0.5,
142            y1: 0.5,
143            yCoordShift: 0,
144            xCoordinateMode: ECoordinateMode.Relative,
145            yCoordinateMode: ECoordinateMode.Relative,
146            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
147            verticalAnchorPoint: EVerticalAnchorPoint.Center,
148            opacity: 0.38,
149            fontSize: 20,
150        })
151    );
152    sciChartSurface.annotations.add(
153        new NativeTextAnnotation({
154            text: "Try mouse-wheel, left/right mouse drag, mousewheel on axis, pinch zoom, double-click to zoom to fit etc...",
155            x1: 0.5,
156            y1: 0.6,
157            xCoordinateMode: ECoordinateMode.Relative,
158            yCoordinateMode: ECoordinateMode.Relative,
159            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
160            verticalAnchorPoint: EVerticalAnchorPoint.Center,
161            opacity: 0.45,
162            fontSize: 17,
163            wrapTo: EWrapTo.ViewRect,
164        })
165    );
166    return { wasmContext, sciChartSurface };
167};
168