DiscontinuousDateAxis Comparison with Angular

1import {
2    CategoryAxis,
3    DiscontinuousDateAxis,
4    ENumericFormat,
5    EXyDirection,
6    EllipsePointMarker,
7    FastCandlestickRenderableSeries,
8    FastLineRenderableSeries,
9    MouseWheelZoomModifier,
10    NumberRange,
11    NumericAxis,
12    NumericLabelProvider,
13    OhlcDataSeries,
14    RolloverModifier,
15    SciChartSurface,
16    XyDataSeries,
17    XyScatterRenderableSeries,
18    ZoomExtentsModifier,
19    ZoomPanModifier,
20} from "scichart";
21import { appTheme } from "../../../theme";
22
23// Custom label provider for days of the week
24class DayOfWeekLabelProvider extends NumericLabelProvider {
25    private dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
26
27    public get formatLabel() {
28        return (dataValue: number): string => {
29            if (dataValue > 100) {
30                const date = new Date(dataValue * 1000);
31                const day = date.getUTCDay();
32
33                return `${this.dayNames[day]} ${date.getUTCDate()}`;
34            } else {
35                return `${this.dayNames[dataValue % 7]} ${dataValue}`;
36            }
37        };
38    }
39}
40
41// Helper function to create data series
42const createDataSeries = (wasmContext: any, isCategoryAxis: boolean) => {
43    // X values from the first series are used as baseXValues for the DiscontinuousDate axis, unless you specify them explicitly.
44    const startDate = new Date(Date.UTC(2024, 0, 6, 0, 0, 0, 0));
45    const startTime = startDate.getTime() / 1000;
46    const ohlcSeries = new OhlcDataSeries(wasmContext, {
47        containsNaN: false,
48        isSorted: true,
49        xValues: [1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 15, 16].map((x) => startTime + x * 24 * 60 * 60),
50        openValues: [2, 5, 4, 6.2, 3, 3, 2.3, 3, 4, 5, 3, 3],
51        highValues: [4.2, 7.5, 6.8, 8.5, 5.5, 5.2, 4.8, 5.7, 6.9, 7.5, 5.8, 6.2],
52        lowValues: [0.8, 3.0, 2.0, 4.5, 1.0, 1.2, 0.5, 1.5, 2.5, 3.5, 1.5, 1.0],
53        closeValues: [3.5, 3.8, 6.0, 8.0, 2.0, 4.5, 1.2, 5.0, 6.2, 4.0, 5.0, 2.5],
54    });
55
56    // DiscontinuousDate axis supports data with values at the same x coordinate, and data in between baseValues
57    const dataSeries1 = new XyDataSeries(wasmContext, {
58        containsNaN: false,
59        isSorted: true,
60        xValues: [1, 2, 2, 5, 5.5, 8, 9, 9.5, 9.8, 11, 15, 16].map((x) => startTime + x * 24 * 60 * 60),
61        yValues: [2, 5, 4, 6.2, 3, 3, 2.3, 3, 4, 5, 3, 3],
62    });
63    if (!isCategoryAxis) {
64        dataSeries1.appendRange(
65            [5, 5, 9, 9, 15, 15].map((x) => startTime + x * 24 * 60 * 60),
66            [3, 4, 4, 5.5, 4.5, 1]
67        );
68    }
69
70    // DiscontinuousDate axis supports data with more or less x values than the baseValues
71    const dataSeries2 = new XyDataSeries(wasmContext, {
72        containsNaN: false,
73        isSorted: true,
74        xValues: [1, 3, 5, 8, 11, 16].map((x) => startTime + x * 24 * 60 * 60),
75        yValues: [3, 6, 5, 7.21, 4, 4],
76    });
77
78    return { ohlcSeries, dataSeries1, dataSeries2 };
79};
80
81// Helper function to add series to a chart
82const addSeriesToChart = (sciChartSurface: SciChartSurface, wasmContext: any, dataSeries: any) => {
83    sciChartSurface.renderableSeries.add(
84        new FastCandlestickRenderableSeries(wasmContext, {
85            dataSeries: dataSeries.ohlcSeries,
86            strokeThickness: 1,
87            brushUp: appTheme.VividGreen + "77",
88            brushDown: appTheme.MutedRed + "77",
89            strokeUp: appTheme.VividGreen,
90            strokeDown: appTheme.MutedRed,
91        })
92    );
93
94    sciChartSurface.renderableSeries.add(
95        new XyScatterRenderableSeries(wasmContext, {
96            dataSeries: dataSeries.dataSeries1,
97            stroke: appTheme.VividRed,
98            pointMarker: new EllipsePointMarker(wasmContext, {
99                width: 10,
100                height: 10,
101                fill: appTheme.VividRed,
102                strokeThickness: 0,
103                opacity: 0.8,
104            }),
105        })
106    );
107
108    sciChartSurface.renderableSeries.add(
109        new FastLineRenderableSeries(wasmContext, {
110            dataSeries: dataSeries.dataSeries2,
111            stroke: appTheme.VividSkyBlue,
112            opacity: 0.7,
113            strokeThickness: 4,
114            pointMarker: new EllipsePointMarker(wasmContext, {
115                width: 8,
116                height: 8,
117                fill: appTheme.VividSkyBlue,
118                strokeThickness: 0,
119                opacity: 0.7,
120            }),
121        })
122    );
123};
124
125// Create Discontinuous Date Axis Chart
126export const createDiscontinuousDateChart =
127    (customSettings: boolean) => async (rootElement: string | HTMLDivElement) => {
128        const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
129            theme: {
130                ...appTheme.SciChartJsTheme,
131                majorGridLineBrush: appTheme.MutedSkyBlue + "55",
132                minorGridLineBrush: appTheme.MutedSkyBlue + "22",
133            },
134        });
135
136        const xAxisDiscontinuous = new DiscontinuousDateAxis(wasmContext, {
137            growBy: new NumberRange(0.05, 0.05),
138            dataGap: 24 * 60 * 60, // This is auto-calculated using the minimum gap between baseXValues, but should be set where possible to avoid that calculation.
139            cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
140            axisTitle: "Discontinuous Date X Axis - Fixed gap between baseValues.  Ideal for financial data.",
141            axisTitleStyle: {
142                fontSize: 16,
143            },
144        });
145        if (customSettings) {
146            xAxisDiscontinuous.labelProvider = new DayOfWeekLabelProvider({
147                cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
148            });
149            xAxisDiscontinuous.autoTicks = false;
150            xAxisDiscontinuous.majorDelta = 24 * 60 * 60;
151            xAxisDiscontinuous.minorDelta = 4 * 60 * 60;
152        }
153
154        const yAxisLinear = new NumericAxis(wasmContext, {
155            labelFormat: ENumericFormat.Decimal,
156            labelPrecision: 2,
157            drawMinorGridLines: false,
158            growBy: new NumberRange(0.1, 0.1),
159        });
160
161        sciChartSurface.xAxes.add(xAxisDiscontinuous);
162        sciChartSurface.yAxes.add(yAxisLinear);
163
164        const dataSeries = createDataSeries(wasmContext, false);
165        addSeriesToChart(sciChartSurface, wasmContext, dataSeries);
166
167        sciChartSurface.chartModifiers.add(
168            new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
169            new ZoomExtentsModifier(),
170            new ZoomPanModifier(),
171            new RolloverModifier({ showTooltip: false, showAxisLabel: true, modifierGroup: "Group1" })
172        );
173
174        sciChartSurface.zoomExtents();
175        return { sciChartSurface, wasmContext };
176    };
177
178// Create Numeric Axis Chart
179export const createNumericChart = (customSettings: boolean) => async (rootElement: string | HTMLDivElement) => {
180    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
181        theme: {
182            ...appTheme.SciChartJsTheme,
183            majorGridLineBrush: appTheme.MutedSkyBlue + "55",
184            minorGridLineBrush: appTheme.MutedSkyBlue + "22",
185        },
186    });
187
188    const xAxisNumeric = new NumericAxis(wasmContext, {
189        labelFormat: ENumericFormat.Date_DDMM,
190        axisTitle: "Numeric X Axis - Cannot hide gaps",
191        axisTitleStyle: {
192            fontSize: 16,
193        },
194    });
195    if (customSettings) {
196        xAxisNumeric.labelProvider = new DayOfWeekLabelProvider({ cursorLabelFormat: ENumericFormat.Date_DDMMHHMM });
197        xAxisNumeric.autoTicks = false;
198        xAxisNumeric.majorDelta = 24 * 60 * 60;
199        xAxisNumeric.minorDelta = 4 * 60 * 60;
200    }
201
202    const yAxisLinear = new NumericAxis(wasmContext, {
203        labelFormat: ENumericFormat.Decimal,
204        labelPrecision: 2,
205        drawMinorGridLines: false,
206        growBy: new NumberRange(0.1, 0.1),
207    });
208
209    sciChartSurface.xAxes.add(xAxisNumeric);
210    sciChartSurface.yAxes.add(yAxisLinear);
211
212    const dataSeries = createDataSeries(wasmContext, false);
213    addSeriesToChart(sciChartSurface, wasmContext, dataSeries);
214
215    sciChartSurface.chartModifiers.add(
216        new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
217        new ZoomExtentsModifier(),
218        new ZoomPanModifier(),
219        new RolloverModifier({ showTooltip: false, showAxisLabel: true, modifierGroup: "Group1" })
220    );
221    sciChartSurface.zoomExtents();
222    return { sciChartSurface, wasmContext };
223};
224
225// Create Category Axis Chart
226export const createCategoryChart = (customSettings: boolean) => async (rootElement: string | HTMLDivElement) => {
227    const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
228        theme: {
229            ...appTheme.SciChartJsTheme,
230            majorGridLineBrush: appTheme.MutedSkyBlue + "55",
231            minorGridLineBrush: appTheme.MutedSkyBlue + "22",
232        },
233    });
234
235    const xAxisCategory = new CategoryAxis(wasmContext, {
236        autoTicks: false,
237        majorDelta: 1,
238        minorDelta: 0.2,
239        axisTitle: "Category X Axis.  Hides gaps, but plots by index only",
240        axisTitleStyle: {
241            fontSize: 16,
242        },
243    });
244    if (customSettings) {
245        xAxisCategory.labelProvider = new DayOfWeekLabelProvider({ cursorLabelFormat: ENumericFormat.Date_DDMMHHMM });
246    }
247
248    const yAxisLinear = new NumericAxis(wasmContext, {
249        labelFormat: ENumericFormat.Decimal,
250        labelPrecision: 2,
251        drawMinorGridLines: false,
252        growBy: new NumberRange(0.1, 0.1),
253    });
254
255    sciChartSurface.xAxes.add(xAxisCategory);
256    sciChartSurface.yAxes.add(yAxisLinear);
257
258    const categoryDataSeries = createDataSeries(wasmContext, true);
259
260    addSeriesToChart(sciChartSurface, wasmContext, categoryDataSeries);
261
262    sciChartSurface.chartModifiers.add(
263        new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
264        new ZoomExtentsModifier(),
265        new ZoomPanModifier(),
266        new RolloverModifier({ showTooltip: false, showAxisLabel: true, modifierGroup: "Group1" })
267    );
268
269    sciChartSurface.zoomExtents();
270    return { sciChartSurface, wasmContext };
271};
272