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