nimiq-watch/script-chart-hashing-distribution.js at master · styppo/nimiq-watch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
template.hashingDistributionChart = tmpl('template-hashing-distribution-chart');

async function _hashingDistribution(range, skipRender) {
    range      = range || 24;
    skipRender = skipRender || false;

    if(!skipRender) {
        // Only replace infobox contents when not coming from the range toggle
        $infobox.innerHTML = template.hashingDistributionChart();
        window.scrollTo(0, $infobox.offsetTop - 100);
    }

    // Collect data
    fetch(apiUrl + '/statistics/miners/' + range).then(function(response) {
        response.json().then(function(data) { // { a: miner_address, c: blocks_mined }

            // Converting into label and data arrays
            var addresses        = data.map(function(obj) { return obj.a; });
            var labels           = data.map(function(obj) { return _labelAddress(obj.a, true); });
            var blocksMined      = data.map(function(obj) { return obj.c; });
            var totalBlocksMined = blocksMined.reduce(function(acc, val) { return acc + val; });

            // Filter out the little guys
            var minBlocksMined = 1;

            if(range === 2)       minBlocksMined = 2;
            else if(range === 12) minBlocksMined = 5;
            else if(range === 24) minBlocksMined = 8;

            var otherBlocks = 0;
            var otherMiners = 0;
            blocksMined = blocksMined.filter(function(count) {
                if(count < minBlocksMined) {
                    otherBlocks += count;
                    otherMiners++;
                    return false;
                }
                return true;
            });

            // Adapt labels
            if(otherMiners > 0) {
                labels = labels.slice(0, blocksMined.length);
                labels.push(otherMiners + ' others');

                blocksMined.push(otherBlocks);
            }

            // Convert into percentages
            const blocksMinedPerc = blocksMined.map(function(count) { return Math.round(count / totalBlocksMined * 10000) / 100; });

            var _renderHashingDistributionChart = function() {
                try {
                    $infobox.querySelector('.hashing-distribution-chart-wrapper').removeChild($infobox.getElementsByClassName('blocklist-loader')[0]);
                }
                catch(e) {}

                $infobox.getElementsByClassName('chart-valid-info')[0].innerHTML = "Created " + (new Date()).toLocaleString();

                if(window.chart) window.chart.destroy();

                var ctxs = $infobox.getElementsByTagName('canvas')

                var ctx  = ctxs[0].getContext('2d');

                window.chart = new Chart(ctx, {
                    // The type of chart we want to create
                    type: 'doughnut',

                    // The data for our dataset
                    data: {
                        labels: labels,
                        datasets: [
                        {
                            label: "Blocks mined",
                            data: blocksMined,
                            backgroundColor: (function() {
                                if(otherMiners > 0) {
                                    var colors = default_colors.slice();
                                    colors[blocksMined.length - 1] = Chart.defaults.global.defaultColor;
                                    return colors;
                                }
                                else return default_colors;
                            })()
                        }]
                    },

                    // Configuration options go here
                    options: {
                        legend: {
                            display: false
                        },
                        tooltips: {
                            callbacks: {
                                label: function(item, chart) {
                                    return chart.labels[item.index] + ': ' + blocksMined[item.index] + ' (' + blocksMinedPerc[item.index].toFixed(2) + '%)';
                                }
                            }
                        },
                        animation: {
                            duration: 0,
                        },
                    }
                });
            };

            if(document.getElementById('chart-js-script')) {
                _renderHashingDistributionChart();
            }
            else {
                var scriptTag = document.createElement('script');
                scriptTag.id = "chart-js-script";
                scriptTag.src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js";
                scriptTag.onload = _renderHashingDistributionChart;
                document.body.appendChild(scriptTag);
            }

            const table = $infobox.querySelector('.miners-table');
            let html = '<tr><th>Miner</th><th>Blocks</th><th>%</th></tr>';

            for (let i = 0; i < labels.length; i++) {
                let label = labels[i];
                if (!labels[i].includes('others')) {
                    label = `<hash><a href="#${addresses[i].replace(/ /g, '+')}" onclick="_linkClicked(this)">${label}</a></hash>`;
                }
                html += `<tr><td>${label}</td><td>${blocksMined[i]}</td><td>${blocksMinedPerc[i].toFixed(2)}</td>`;
            }

            table.innerHTML = html;
        });
    });
}

function switchHashingDistributionRange(range) {
    _hashingDistribution(range, true);
}