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            strokeThickness: 1,
61        },
62        startAngle: Math.PI / 2,
63        drawLabels: false, // no radial labels
64    });
65    sciChartSurface.yAxes.add(radialYAxis);
66
67    const polarXAxis = new PolarNumericAxis(wasmContext, {
68        polarAxisMode: EPolarAxisMode.Angular,
69        axisAlignment: EAxisAlignment.Top,
70        polarLabelMode: EPolarLabelMode.Parallel,
71        visibleRange: new NumberRange(0, 9),
72        startAngle: Math.PI / 2, // start at 12 o'clock
73        flippedCoordinates: true, // go clockwise
74        zoomExtentsToInitialRange: true,
75
76        drawMinorTickLines: false,
77        drawMajorTickLines: false,
78        drawMinorGridLines: false,
79
80        useNativeText: true,
81        labelPrecision: 0,
82        majorGridLineStyle: {
83            strokeThickness: 1,
84        },
85    });
86    sciChartSurface.xAxes.add(polarXAxis);
87
88    const polarColumn = new PolarXyScatterRenderableSeries(wasmContext, {
89        dataSeries: new XyDataSeries(wasmContext, {
90            xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
91            yValues: [2.6, 5.3, 3.5, 2.7, 4.8, 3.8, 5, 4.5, 3.5],
92        }),
93        pointMarker: new TrianglePointMarker(wasmContext, {
94            width: 14,
95            height: 12,
96            fill: "#FFFFFF00",
97            stroke: "#FFAA00",
98            strokeThickness: 2,
99        }),
100        paletteProvider: new DataPointSelectionPaletteProvider({
101            fill: "#FFFFFF",
102            stroke: "#00AA00",
103        })
104    });
105    sciChartSurface.renderableSeries.add(polarColumn);
106
107    const detailTextAnnotation = new NativeTextAnnotation({
108        text: POLAR_MODIFIER_INFO[EChart2DModifierType.PolarMouseWheelZoom],
109        fontSize: 24,
110        xCoordinateMode: ECoordinateMode.Relative,
111        yCoordinateMode: ECoordinateMode.Relative,
112        x1: 0,
113        y1: 0,
114        verticalAnchorPoint: EVerticalAnchorPoint.Center,
115        horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
116        multiLineAlignment: EMultiLineAlignment.Center,
117        lineSpacing: 5,
118        textColor: appTheme.TextColor
119    });
120    sciChartSurface.annotations.add(detailTextAnnotation);
121
122    // define all modifiers
123    const PolarArcZoom = new PolarArcZoomModifier({
124        stroke: STROKE,
125        fill: STROKE + "20", // 15% opacity
126        strokeThickness: 3,
127    });
128    const PolarCursor = new PolarCursorModifier({
129        axisLabelStroke: STROKE,
130        axisLabelFill: appTheme.DarkIndigo,
131        tooltipTextStroke: STROKE,
132        lineColor: STROKE,
133    });
134    const PolarDataPointSelection = new PolarDataPointSelectionModifier({
135        allowDragSelect: true,
136        allowClickSelect: true,
137        selectionStroke: "#3388FF",
138        selectionFill: "#3388FF44",
139        onSelectionChanged: (args) => {
140            console.log("seriesSelectionModifier onSelectionChanged", args);
141        },
142    });
143    const PolarLegend = new PolarLegendModifier({
144        backgroundColor: appTheme.DarkIndigo,
145        textColor: STROKE,
146    });
147    const PolarMouseWheelZoom = new PolarMouseWheelZoomModifier({ 
148        defaultActionType: EActionType.Zoom 
149    });
150    const PolarMouseWheelZoomPAN = new PolarMouseWheelZoomModifier({ 
151        defaultActionType: EActionType.Pan 
152    });
153    const PolarPanCartesian = new PolarPanModifier({
154        primaryPanMode: EPolarPanModifierPanMode.Cartesian,
155    });
156    const PolarPanPolar = new PolarPanModifier({
157        primaryPanMode: EPolarPanModifierPanMode.PolarStartAngle,
158    });
159    const PolarZoomExtents = new PolarZoomExtentsModifier();
160
161    // add by default these 3 modifiers
162    sciChartSurface.chartModifiers.add(PolarZoomExtents, PolarPanCartesian, PolarMouseWheelZoom);
163
164    return {
165        sciChartSurface,
166        controls: {
167            toggleModifier: (modifier: EChart2DModifierType) => {
168                const modifierToAddOrRemove = () => {
169                    switch (modifier) {
170                        case EChart2DModifierType.PolarArcZoom:
171                            return PolarArcZoom;
172                        case EChart2DModifierType.PolarCursor:
173                            return PolarCursor;
174                        case EChart2DModifierType.PolarDataPointSelection:
175                            return PolarDataPointSelection;
176                        case EChart2DModifierType.PolarLegend:
177                            return PolarLegend;
178
179                        case EChart2DModifierType.PolarMouseWheelZoom:
180                            return PolarMouseWheelZoom;
181                        case EChart2DModifierType.PolarMouseWheelZoom + " [Pan]":
182                            return PolarMouseWheelZoomPAN;
183
184                        case EChart2DModifierType.PolarPan + " [Cartesian]":
185                            return PolarPanCartesian;
186                        case EChart2DModifierType.PolarPan + " [Polar]":
187                            return PolarPanPolar;
188                        
189                        case EChart2DModifierType.PolarZoomExtents:
190                            return PolarZoomExtents;
191                        default:
192                            return undefined;
193                    }
194                };
195
196                const newModifier = modifierToAddOrRemove();
197
198                if (sciChartSurface.chartModifiers.contains(newModifier)) {
199                    sciChartSurface.chartModifiers.remove(newModifier, true);
200                    detailTextAnnotation.text = "Select a modifier to see its info";
201                } else {
202                    sciChartSurface.chartModifiers.add(newModifier);
203                    detailTextAnnotation.text = POLAR_MODIFIER_INFO[modifier]; // update the text
204                }
205            },
206        },
207    };
208};
209