https://spacefarmers.io/assets/controllers/chia_index_controller-e…d3e0df86e5cd4b5bb71f458336aaaf49205948eb.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  connect() {
5    activeMenu('chia');
6    closeMenu();
7    topFunction();
8    feather.replace();
9    this.initNetspaceChart();
10    this.initXchUsdChart();
11    this.initMempoolChart();
12    this.initEarningsXchChart();
13    this.initEarningsUsdChart();
14    this.initVersionChart();
15  }
16
17  initNetspaceChart() {
18    var chart = document.getElementById('netspaceChart');
19    var lineChartColor = getChartColorsArray('netspaceChart');
20    if (lineChartColor) {
21      this.netspaceChart = new Chart(chart, {
22        type: 'line',
23        data: {
24          datasets: [{
25              label: "Chia Netspace (EiB)",
26              fill: true,
27              lineTension: 0.2,
28              backgroundColor: lineChartColor[0],
29              borderColor: lineChartColor[1],
30              pointRadius: 1,
31              pointHitRadius: 30,
32              data: [],
33              yAxisID: 'EiB'
34            }
35          ]
36        },
37        options: {
38          maintainAspectRatio: false,
39          scales: {
40            xAxis: {
41              type: 'time',
42              time: {
43                unit: 'day'
44              },
45              parsing: false
46            },
47            EiB: {
48              position: 'left',
49            }
50          },
51          interaction: {
52            intersect: false,
53            mode: 'index',
54          },
55          plugins: {
56            legend: {
57              display: false,
58            },
59          },
60        },
61      });
62    }
63    this.getNetspaceData();
64  }
65
66  getNetspaceData(period = '1m') {
67    var url = '/api/charts/chia_netspace?period=' + period;
68    var $this = this
69    axios(url).then(function (response) {
70      $this.netspaceChart.data.datasets[0].data = response.data;
71      $this.netspaceChart.update();
72    })
73  }
74
75  changeNetspacePeriod(event) {
76    var elements = document.getElementsByClassName("chia-netspace-period");
77    elements && Array.from(elements).forEach(function (el) {
78      el.classList.remove("btn-primary");
79      el.classList.add("btn-soft-dark");
80    });
81    event.target.classList.remove("btn-soft-dark");
82    event.target.classList.add("btn-primary");
83    this.getNetspaceData(event.params.period);
84  }
85
86  initXchUsdChart() {
87    var chart = document.getElementById('xchUsdChart');
88    var lineChartColor = getChartColorsArray('xchUsdChart');
89    if (lineChartColor) {
90      this.xchUsdChart = new Chart(chart, {
91        type: 'line',
92        data: {
93          datasets: [{
94              label: "XCH/USD ($)",
95              fill: true,
96              lineTension: 0.2,
97              backgroundColor: lineChartColor[0],
98              borderColor: lineChartColor[1],
99              pointRadius: 1,
100              pointHitRadius: 30,
101              data: [],
102              yAxisID: 'EiB'
103            }
104          ]
105        },
106        options: {
107          maintainAspectRatio: false,
108          scales: {
109            xAxis: {
110              type: 'time',
111              time: {
112                unit: 'day'
113              },
114              parsing: false
115            },
116            EiB: {
117              position: 'left',
118            }
119          },
120          interaction: {
121            intersect: false,
122            mode: 'index',
123          },
124          plugins: {
125            legend: {
126              display: false,
127            },
128          },
129        },
130      });
131    }
132    this.getXchUsdData();
133  }
134
135  getXchUsdData(period = '1m') {
136    var url = '/api/charts/xch_usd?period=' + period;
137    var $this = this
138    axios(url).then(function (response) {
139      $this.xchUsdChart.data.datasets[0].data = response.data;
140      $this.xchUsdChart.update();
141    })
142  }
143
144  changeXchUsdPeriod(event) {
145    var elements = document.getElementsByClassName("chia-xch-usd-period");
146    elements && Array.from(elements).forEach(function (el) {
147      el.classList.remove("btn-primary");
148      el.classList.add("btn-soft-dark");
149    });
150    event.target.classList.remove("btn-soft-dark");
151    event.target.classList.add("btn-primary");
152    this.getXchUsdData(event.params.period);
153  }
154
155  initMempoolChart() {
156    var chart = document.getElementById('mempoolChart');
157    var lineChartColor = getChartColorsArray('mempoolChart');
158    if (lineChartColor) {
159      this.mempoolChart = new Chart(chart, {
160        type: 'bar',
161        data: {
162          datasets: [{
163              label: "Mempool size",
164              backgroundColor: lineChartColor[1],
165              borderColor: lineChartColor[1],
166              pointRadius: 1,
167              pointHitRadius: 30,
168              data: [],
169              yAxisID: 'mempool'
170            }
171          ]
172        },
173        options: {
174          maintainAspectRatio: false,
175          scales: {
176            xAxis: {
177              type: 'time',
178              offset: false,
179              max: nextHour(),
180              time: {
181                unit: 'day'
182              },
183              parsing: false
184            },
185            mempool: {
186              min: 0,
187              position: 'left',
188            }
189          },
190          interaction: {
191            intersect: false,
192            mode: 'index',
193          },
194          plugins: {
195            legend: {
196              display: false,
197            },
198          },
199        },
200      });
201    }
202    this.getMempoolData();
203  }
204
205  getMempoolData(period = '1m') {
206    var url = '/api/charts/mempool_size?period=' + period;
207    var $this = this
208    axios(url).then(function (response) {
209      $this.mempoolChart.data.datasets[0].data = response.data;

210      $this.mempoolChart.update();
211    })
212  }
213
214  changeMempoolPeriod(event) {
215    var elements = document.getElementsByClassName("chia-mempool-period");
216    elements && Array.from(elements).forEach(function (el) {
217      el.classList.remove("btn-primary");
218      el.classList.add("btn-soft-dark");
219    });
220    event.target.classList.remove("btn-soft-dark");
221    event.target.classList.add("btn-primary");
222    this.getMempoolData(event.params.period);
223  }
224
225  initEarningsXchChart() {
226    var chart = document.getElementById('earningsXchChart');
227    var lineChartColor = getChartColorsArray('earningsXchChart');
228    if (lineChartColor) {
229      this.earningsXchChart = new Chart(chart, {
230        type: 'line',
231        data: {
232          datasets: [{
233              label: "Monthly Earnings (XCH per 100 TiB)",
234              fill: true,
235              lineTension: 0.2,
236              backgroundColor: lineChartColor[0],
237              borderColor: lineChartColor[1],
238              pointRadius: 1,
239              pointHitRadius: 30,
240              data: [],
241              yAxisID: 'earnings'
242            }
243          ]
244        },
245        options: {
246          maintainAspectRatio: false,
247          scales: {
248            xAxis: {
249              type: 'time',
250              time: {
251                unit: 'day'
252              },
253              parsing: false
254            },
255            earnings: {
256              position: 'left',
257            }
258          },
259          interaction: {
260            intersect: false,
261            mode: 'index',
262          },
263          plugins: {
264            legend: {
265              display: false,
266            },
267          },
268        },
269      });
270    }
271    this.getEarningsXchData();
272  }
273
274  getEarningsXchData(period = '1m') {
275    var url = '/api/charts/pool_earnings_xch?period=' + period;
276    var $this = this
277    axios(url).then(function (response) {
278      $this.earningsXchChart.data.datasets[0].data = response.data;
279      $this.earningsXchChart.update();
280    })
281  }
282
283  changeEarningsXchPeriod(event) {
284    var elements = document.getElementsByClassName("chia-earnings-xch-period");
285    elements && Array.from(elements).forEach(function (el) {
286      el.classList.remove("btn-primary");
287      el.classList.add("btn-soft-dark");
288    });
289    event.target.classList.remove("btn-soft-dark");
290    event.target.classList.add("btn-primary");
291    this.getEarningsXchData(event.params.period);
292  }
293
294  initEarningsUsdChart() {
295    var chart = document.getElementById('earningsUsdChart');
296    var lineChartColor = getChartColorsArray('earningsUsdChart');
297    if (lineChartColor) {
298      this.earningsUsdChart = new Chart(chart, {
299        type: 'line',
300        data: {
301          datasets: [{
302              label: "Monthly Earnings (USD per 100 TiB)",
303              fill: true,
304              lineTension: 0.2,
305              backgroundColor: lineChartColor[0],
306              borderColor: lineChartColor[1],
307              pointRadius: 1,
308              pointHitRadius: 30,
309              data: [],
310              yAxisID: 'earnings',
311              parsing: {
312                xAxisKey: 'x',
313                yAxisKey: 'y'
314              }
315            },
316            {
317              label: "90-Day Moving Average",
318              fill: false,
319              lineTension: 0.2,
320              backgroundColor: 'rgba(138, 43, 226, 0.1)',
321              borderColor: 'rgba(138, 43, 226, 0.8)',
322              borderWidth: 4,
323              pointRadius: 0,
324              pointHitRadius: 30,
325              data: [],
326              yAxisID: 'earnings',
327              parsing: {
328                xAxisKey: 'x',
329                yAxisKey: 'ma90'
330              }
331            }
332          ]
333        },
334        options: {
335          maintainAspectRatio: false,
336          scales: {
337            xAxis: {
338              type: 'time',
339              time: {
340                unit: 'day'
341              },
342              parsing: false
343            },
344            earnings: {
345              position: 'left',
346            }
347          },
348          interaction: {
349            intersect: false,
350            mode: 'index',
351          },
352          plugins: {
353            legend: {
354              display: true,
355              position: 'top',
356            },
357          },
358        },
359      });
360    }
361    this.getEarningsUsdData();
362  }
363
364  getEarningsUsdData(period = '1m') {
365    var url = '/api/charts/pool_earnings_usd?period=' + period;
366    var $this = this
367    axios(url).then(function (response) {
368      // Both datasets use the same data points, but parse different y-values
369      $this.earningsUsdChart.data.datasets[0].data = response.data;
370      $this.earningsUsdChart.data.datasets[1].data = response.data;

371      $this.earningsUsdChart.update();
372    })
373  }
374
375  changeEarningsUsdPeriod(event) {
376    var elements = document.getElementsByClassName("chia-earnings-usd-period");
377    elements && Array.from(elements).forEach(function (el) {
378      el.classList.remove("btn-primary");
379      el.classList.add("btn-soft-dark");
380    });
381    event.target.classList.remove("btn-soft-dark");
382    event.target.classList.add("btn-primary");
383    this.getEarningsUsdData(event.params.period);
384  }
385
386  initVersionChart() {
387    var chart = document.getElementById('versionChart');
388    var lineChartColor = getChartColorsArray('versionChart');
389    if (lineChartColor) {
390      this.versionChart = new Chart(chart, {
391        type: 'doughnut',
392        data: {
393          labels: [],
394          datasets: [{
395              label: "Versions",
396              backgroundColor: [
397                '#13C56B',
398                '#30AB89',
399                '#4D91A7',
400                '#6A77C5',
401                '#865CE2',
402                '#7E6AE4',
403                '#7677E5',
404                '#6E84E6',
405                '#6691E7',
406                '#879CC2',
407                '#A7A79D',
408                '#C8B278',
409                '#E8BC52',
410                '#EAA555',
411                '#EB8D58',
412                '#EC765B',
413                '#ED5E5E',
414                '#B24747',
415                '#772F2F',
416                '#3C1818',
417                '#000000',
418              ],
419              data: [],
420            }
421          ]
422        },
423        options: {
424          maintainAspectRatio: false,
425          plugins: {
426            htmlLegend: {
427              // ID of the container to put the legend in
428              containerID: 'versions-legend',
429            },
430            legend: {
431              display: false,
432            },
433          },
434        },
435        plugins: [htmlLegendPlugin],
436      });
437    }
438    this.getVersionsData();
439  }
440
441  getVersionsData() {
442    var url = '/api/charts/chia_versions';
443    var $this = this
444    axios(url).then(function (response) {
445      $this.versionChart.data.datasets[0].data = response.data.versions_count;
446      $this.versionChart.data.labels = response.data.versions;
447      $this.versionChart.update();
448    })
449  }
450};