Angular Market Depth Chart

1import { appTheme } from "../../../theme";
2
3import {
4    SciChartSurface,
5    MouseWheelZoomModifier,
6    ZoomExtentsModifier,
7    XyDataSeries,
8    NumericAxis,
9    FastMountainRenderableSeries,
10    NumberRange,
11    EAutoRange,
12    EXyDirection,
13    EAxisAlignment,
14} from "scichart";
15import { DepthCursorModifier } from "./DepthCursorModifier";
16
17// SCICHART EXAMPLE
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20    // Create a SciChartSurface
21    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
22        theme: appTheme.SciChartJsTheme,
23    });
24
25    const xAxis = new NumericAxis(wasmContext, {
26        axisAlignment: EAxisAlignment.Top,
27        labelPrecision: 4,
28        rotation: 90,
29    });
30
31    sciChartSurface.xAxes.add(xAxis);
32
33    const yAxis = new NumericAxis(wasmContext, {
34        autoRange: EAutoRange.Always,
35        growBy: new NumberRange(0, 0.05),
36    });
37    sciChartSurface.yAxes.add(yAxis);
38
39    const AAPL_data = {
40        buy: [
41            { price: 132.79743, volume: 339 },
42            { price: 132.79742, volume: 713 },
43            { price: 132.79741, volume: 421 },
44            { price: 132.7974, volume: 853 },
45            { price: 132.79739, volume: 152 },
46            { price: 132.79738, volume: 243 },
47            { price: 132.79737, volume: 296 },
48            { price: 132.79736, volume: 123 },
49            { price: 132.79735, volume: 158 },
50            { price: 132.79734, volume: 238 },
51            { price: 132.79733, volume: 164 },
52            { price: 132.79732, volume: 273 },
53            { price: 132.79731, volume: 35 },
54            { price: 132.79729, volume: 30 },
55            { price: 132.79726, volume: 29 },
56            { price: 132.79722, volume: 484 },
57            { price: 132.79721, volume: 458 },
58            { price: 132.7972, volume: 244 },
59            { price: 132.79719, volume: 10 },
60            { price: 132.79698, volume: 124 },
61        ],
62        sell: [
63            { price: 132.79744, volume: 847 },
64            { price: 132.79745, volume: 2412 },
65            { price: 132.79746, volume: 635 },
66            { price: 132.79747, volume: 323 },
67            { price: 132.79748, volume: 828 },
68            { price: 132.79749, volume: 322 },
69            { price: 132.7975, volume: 268 },
70            { price: 132.79751, volume: 92 },
71            { price: 132.79752, volume: 249 },
72            { price: 132.79753, volume: 189 },
73            { price: 132.79754, volume: 179 },
74            { price: 132.79755, volume: 122 },
75            { price: 132.79756, volume: 28 },
76            { price: 132.7976, volume: 114 },
77            { price: 132.79764, volume: 27 },
78            { price: 132.79767, volume: 10 },
79            { price: 132.79772, volume: 31 },
80            { price: 132.79785, volume: 484 },
81            { price: 132.79786, volume: 364 },
82            { price: 132.79787, volume: 244 },
83        ],
84    };
85
86    const buyValues: number[] = [];
87    let totalVol = 0;
88    for (const v of AAPL_data.buy) {
89        totalVol += v.volume;
90        buyValues.push(totalVol);
91    }
92    const sellValues: number[] = [];
93    totalVol = 0;
94    for (const v of AAPL_data.sell) {
95        totalVol += v.volume;
96        sellValues.push(totalVol);
97    }
98
99    const buySeries = new FastMountainRenderableSeries(wasmContext, {
100        dataSeries: new XyDataSeries(wasmContext, { xValues: AAPL_data.buy.map((v) => v.price), yValues: buyValues }),
101        stroke: "green",
102        fill: "00890033",
103        strokeThickness: 2,
104        isDigitalLine: true,
105    });
106    const sellSeries = new FastMountainRenderableSeries(wasmContext, {
107        dataSeries: new XyDataSeries(wasmContext, { xValues: AAPL_data.sell.map((v) => v.price), yValues: sellValues }),
108        stroke: "red",
109        fill: "89000033",
110        strokeThickness: 2,
111        isDigitalLine: true,
112    });
113    sciChartSurface.renderableSeries.add(buySeries, sellSeries);
114
115    xAxis.tickProvider.getMajorTicks = (minor, major, visibleRange) => {
116        const ticks: number[] = [];
117        const threshold = 400;
118        const buyYs = buySeries.dataSeries.getNativeYValues();
119        const buyXs = buySeries.dataSeries.getNativeXValues();
120        let lastY = 0;
121        for (let i = 0; i < buySeries.dataSeries.count(); i++) {
122            const y = buyYs.get(i);
123            if (y - lastY > threshold) {
124                ticks.push(buyXs.get(i));
125            }
126            lastY = y;
127        }
128        const sellYs = sellSeries.dataSeries.getNativeYValues();
129        const sellXs = sellSeries.dataSeries.getNativeXValues();
130        lastY = 0;
131        for (let i = 0; i < sellSeries.dataSeries.count(); i++) {
132            const y = sellYs.get(i);
133            if (y - lastY > threshold) {
134                ticks.push(sellXs.get(i));
135            }
136            lastY = y;
137        }
138        return ticks.sort((a, b) => a - b);
139    };
140
141    const depthModifier = new DepthCursorModifier({
142        buySeries,
143        sellSeries,
144        crosshairStrokeDashArray: [3, 2],
145        crosshairStrokeThickness: 3,
146        axisLabelFill: "transparent",
147    });
148    depthModifier.highlightColor = appTheme.DarkIndigo;
149    // Optional: Add some interactivity to the chart
150    sciChartSurface.chartModifiers.add(
151        new ZoomExtentsModifier(),
152        new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
153        depthModifier
154    );
155
156    sciChartSurface.zoomExtents();
157    xAxis.visibleRangeLimit = xAxis.visibleRange;
158    yAxis.visibleRangeLimit = yAxis.visibleRange;
159    return { sciChartSurface };
160};
161