Angular Polar Modifiers | Polar Interactivity Modifiers Demo

1import {
2    EAxisAlignment,
3    EChart2DModifierType,
4    EPolarAxisMode,
5    EPolarLabelMode,
6    NumberRange,
7    PolarNumericAxis,
8    SciChartPolarSurface,
9    XyDataSeries,
10    PolarCursorModifier,
11    PolarDataPointSelectionModifier,
12    PolarArcZoomModifier,
13    PolarMouseWheelZoomModifier,
14    PolarPanModifier,
15    PolarLegendModifier,
16    PolarZoomExtentsModifier,
17    ECoordinateMode,
18    EVerticalAnchorPoint,
19    EHorizontalAnchorPoint,
20    NativeTextAnnotation,
21    EMultiLineAlignment,
22    PolarXyScatterRenderableSeries,
23    EPointMarkerType,
24    EActionType,
25    EPolarPanModifierPanMode,
26    DataPointSelectionPaletteProvider,
27    EllipsePointMarker,
28    TrianglePointMarker,
29} from "scichart";
30import { appTheme } from "../../../theme";
31
32export const POLAR_MODIFIER_INFO: Partial<Record<EChart2DModifierType, string>> = {
33    [EChart2DModifierType.PolarZoomExtents]:
34        "Double-click\nto reset the zoom at the original visible ranges.\n(pairs amazing with other modifiers)",
35    [EChart2DModifierType.PolarMouseWheelZoom]: "Zoom The Polar Chart\nusing the mouse wheel or touchpad",
36    [EChart2DModifierType.PolarMouseWheelZoom + " [Pan]"]: "Rotate The Polar Chart\nusing the mouse wheel or touchpad",
37    [EChart2DModifierType.PolarPan + " [Cartesian]"]: "Click and drag\nto pan the chart in Cartesian mode",
38    [EChart2DModifierType.PolarPan + " [Polar]"]: "Click and drag\nto pan the chart in Polar mode",
39    [EChart2DModifierType.PolarArcZoom]: "Click and drag\nto Cut into The Polar Chart using an Arc",
40    [EChart2DModifierType.PolarCursor]: "Hover the chart\nto see the X and Y values of the data point",
41    [EChart2DModifierType.PolarLegend]: "Appends a legend showing the data series names & colors",
42    [EChart2DModifierType.PolarDataPointSelection]: "Select data-points\nto change their state",
43};
44const STROKE = "#FFFFFF";
45
46export const drawExample = async (rootElement: string | HTMLDivElement) => {
47    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
48        theme: appTheme.SciChartJsTheme,
49    });
50
51    const radialYAxis = new PolarNumericAxis(wasmContext, {
52        polarAxisMode: EPolarAxisMode.Radial,
53        axisAlignment: EAxisAlignment.Right,
54        visibleRange: new NumberRange(0, 6),
55        zoomExtentsToInitialRange: true,
56
57        drawMinorTickLines: false,
58        drawMajorTickLines: false,
59        drawMinorGridLines: false,
60        majorGridLineStyle: {
61            strokeThickness: 1,
62        },
63        startAngle: Math.PI / 2,
64        drawLabels: false, // no radial labels
65    });
66    sciChartSurface.yAxes.add(radialYAxis);
67
68    const polarXAxis = new PolarNumericAxis(wasmContext, {
69        polarAxisMode: EPolarAxisMode.Angular,
70        axisAlignment: EAxisAlignment.Top,
71        polarLabelMode: EPolarLabelMode.Parallel,
72        visibleRange: new NumberRange(0, 9),
73        startAngle: Math.PI / 2, // start at 12 o'clock
74        flippedCoordinates: true, // go clockwise
75        zoomExtentsToInitialRange: true,
76
77        drawMinorTickLines: false,
78        drawMajorTickLines: false,
79        drawMinorGridLines: false,
80
81        useNativeText: true,
82        labelPrecision: 0,
83        majorGridLineStyle: {
84            strokeThickness: 1,
85        },
86    });
87    sciChartSurface.xAxes.add(polarXAxis);
88
89    const polarColumn = new PolarXyScatterRenderableSeries(wasmContext, {
90        dataSeries: new XyDataSeries(wasmContext, {
91            xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
92            yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5],
93        }),
94        pointMarker: new TrianglePointMarker(wasmContext, {
95            width: 14,
96            height: 12,
97            fill: "#FFFFFF00",
98            stroke: "#FFAA00",
99            strokeThickness: 2,
100        }),
101        paletteProvider: new DataPointSelectionPaletteProvider({
102            fill: "#FFFFFF",
103            stroke: "#00AA00",
104        }),
105    });
106    sciChartSurface.renderableSeries.add(polarColumn);
107
108    const detailTextAnnotation = new NativeTextAnnotation({
109        text: POLAR_MODIFIER_INFO[EChart2DModifierType.PolarMouseWheelZoom],
110        fontSize: 24,
111        xCoordinateMode: ECoordinateMode.Relative,
112        yCoordinateMode: ECoordinateMode.Relative,
113        x1: 0,
114        y1: 0,
115        verticalAnchorPoint: EVerticalAnchorPoint.Center,
116        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
117        multiLineAlignment: EMultiLineAlignment.Center,
118        lineSpacing: 5,
119        textColor: appTheme.TextColor,
120    });
121    sciChartSurface.annotations.add(detailTextAnnotation);
122
123    // define all modifiers
124    const PolarArcZoom = new PolarArcZoomModifier({
125        stroke: STROKE,
126        fill: STROKE + "20", // 15% opacity
127        strokeThickness: 3,
128    });
129    const PolarCursor = new PolarCursorModifier({
130        axisLabelStroke: STROKE,
131        axisLabelFill: appTheme.DarkIndigo,
132        tooltipTextStroke: STROKE,
133        lineColor: STROKE,
134    });
135    const PolarDataPointSelection = new PolarDataPointSelectionModifier({
136        allowDragSelect: true,
137        allowClickSelect: true,
138        selectionStroke: "#3388FF",
139        selectionFill: "#3388FF44",
140        onSelectionChanged: (args) => {
141            console.log("seriesSelectionModifier onSelectionChanged", args);
142        },
143    });
144    const PolarLegend = new PolarLegendModifier({
145        backgroundColor: appTheme.DarkIndigo,
146        textColor: STROKE,
147    });
148    const PolarMouseWheelZoom = new PolarMouseWheelZoomModifier({
149        defaultActionType: EActionType.Zoom,
150    });
151    const PolarMouseWheelZoomPAN = new PolarMouseWheelZoomModifier({
152        defaultActionType: EActionType.Pan,
153    });
154    const PolarPanCartesian = new PolarPanModifier({
155        primaryPanMode: EPolarPanModifierPanMode.Cartesian,
156    });
157    const PolarPanPolar = new PolarPanModifier({
158        primaryPanMode: EPolarPanModifierPanMode.PolarStartAngle,
159    });
160    const PolarZoomExtents = new PolarZoomExtentsModifier();
161
162    // add by default these 3 modifiers
163    sciChartSurface.chartModifiers.add(PolarZoomExtents, PolarPanCartesian, PolarMouseWheelZoom);
164
165    return {
166        sciChartSurface,
167        controls: {
168            toggleModifier: (modifier: EChart2DModifierType) => {
169                const modifierToAddOrRemove = () => {
170                    switch (modifier) {
171                        case EChart2DModifierType.PolarArcZoom:
172                            return PolarArcZoom;
173                        case EChart2DModifierType.PolarCursor:
174                            return PolarCursor;
175                        case EChart2DModifierType.PolarDataPointSelection:
176                            return PolarDataPointSelection;
177                        case EChart2DModifierType.PolarLegend:
178                            return PolarLegend;
179
180                        case EChart2DModifierType.PolarMouseWheelZoom:
181                            return PolarMouseWheelZoom;
182                        case EChart2DModifierType.PolarMouseWheelZoom + " [Pan]":
183                            return PolarMouseWheelZoomPAN;
184
185                        case EChart2DModifierType.PolarPan + " [Cartesian]":
186                            return PolarPanCartesian;
187                        case EChart2DModifierType.PolarPan + " [Polar]":
188                            return PolarPanPolar;
189
190                        case EChart2DModifierType.PolarZoomExtents:
191                            return PolarZoomExtents;
192                        default:
193                            return undefined;
194                    }
195                };
196
197                const newModifier = modifierToAddOrRemove();
198
199                if (sciChartSurface.chartModifiers.contains(newModifier)) {
200                    sciChartSurface.chartModifiers.remove(newModifier, true);
201                    detailTextAnnotation.text = "Select a modifier to see its info";
202                } else {
203                    sciChartSurface.chartModifiers.add(newModifier);
204                    detailTextAnnotation.text = POLAR_MODIFIER_INFO[modifier]; // update the text
205                }
206            },
207        },
208    };
209};
210