https://freixlite.com/assets/js/charts/depth.js?v=1772819096

1const balloon = (item, graph) => {
2  let txt;
3  if (graph.id == "asks") {
4    if (item && item.dataContext && item.dataContext.asksVolume) {
5      txt = `
6        Ask: <strong>${item.dataContext.price.toFixed(8)}</strong><br />
7        Volume: <strong>${item.dataContext.volume.toLocaleString(
8          "en-US"
9        )}</strong><br />
10        Total volume: <strong>${item.dataContext.asksVolume.toLocaleString(
11          "en-US"
12        )}</strong><br />
13      `;
14    }
15  } else {
16    if (item && item.dataContext && item.dataContext.bidsVolume) {
17      txt = `
18        Ask: <strong>${item.dataContext.price.toFixed(8)}</strong><br />
19        Volume: <strong>${item.dataContext.volume.toLocaleString(
20          "en-US"
21        )}</strong><br />
22        Total volume: <strong>${item.dataContext.bidsVolume.toLocaleString(
23          "en-US"
24        )}</strong><br />
25      `;
26    }
27  }
28  return txt;
29};
30
31// Process raw buy/sell arrays into depth chart data
32const processDepthData = (buyData, sellData) => {
33  const processData = (rawList = [], type) => {
34    const list = rawList.map(item => ({
35      price: Number(item.price),
36      volume: Number(item.amount)
37    }));
38
39    list.sort(function(a, b) {
40      const bids = type === "bids";
41      if (a.price > b.price) {
42        return bids ? -1 : 1;
43      } else if (a.price < b.price) {
44        return bids ? 1 : -1;
45      } else {
46        return 0;
47      }
48    });
49
50    const processList = (li, t) => {
51      const tmp = [...li];
52      tmp.forEach((it, i) => {
53        const v = `${t}Volume`;
54        const l = tmp[i - 1] || { [v]: 0 };
55        tmp[i] = { ...it, [v]: it.volume + l[v] };
56      });
57      return t === "bids" ? tmp.reverse() : tmp;
58    };
59
60    return processList(list, type);
61  };
62
63  return [
64    ...processData(buyData, "bids"),
65    ...processData(sellData, "asks")
66  ];
67};
68
69var _depthChart = null;
70
71const initDepthChart = (elemId) => {
72  const chartConfig = {
73    balloon: {
74      textAlign: "left"
75    },
76    categoryAxis: {
77      gridColor: "#555",
78      labelFunction: value => Number(value).toFixed(8),
79      minHorizontalGap: 100,
80      showFirstLabel: true,
81      showLastLabel: false,
82      startOnAxis: true
83    },
84    categoryField: "price",
85    chartCursor: {
86      categoryBalloonColor: "#2C3440",
87      categoryBalloonFunction: value => Number(value).toFixed(8),
88      pan: false,
89      valueLineBalloonEnabled: true,
90      valueLineEnabled: true,
91      zoomable: false
92    },
93    dataProvider: [],
94    graphs: [
95      {
96        id: "bids",
97        fillAlphas: 0.1,
98        lineAlpha: 1,
99        lineThickness: 2,
100        lineColor: "#5AA681",
101        type: "step",
102        valueField: "bidsVolume",
103        balloonFunction: balloon
104      },
105      {
106        id: "asks",
107        fillAlphas: 0.1,
108        lineAlpha: 1,
109        lineThickness: 2,
110        lineColor: "#E6493E",
111        type: "step",
112        valueField: "asksVolume",
113        balloonFunction: balloon
114      }
115    ],
116    plotAreaFillAlphas: 1,
117    plotAreaFillColors: "#2C3440",
118    type: "serial",
119    "color": "#FFF"
120  };
121
122  _depthChart = AmCharts.makeChart(elemId, chartConfig);
123};
124
125const updateDepthChart = (buyData, sellData) => {
126  if (!_depthChart) return;
127  _depthChart.dataProvider = processDepthData(buyData, sellData);
128  _depthChart.validateData();
129};