add a chart on pkt.world explorer

pktworld_chart.user.js

// ==UserScript==
// @name         pktworld chart
// @namespace    https://github.com/m0n4
// @version      1.3
// @description  add a chart on pkt.world's explorer
// @author       m0n4
// @match        http://pkt.world/explorer?wallet=*
// @match        https://www.pkt.world/explorer?wallet=*
// @require      https://cdn.jsdelivr.net/npm/chart.js@2.8.0
// @downloadURL  https://gist.github.com/m0n4/e8f291faf53f1f4286a87dac790b4aec/raw/c4f05a10412ba214610e23057f1798db8acda0c8/pktworld_chart.user.js
// @updateURL    https://gist.github.com/m0n4/e8f291faf53f1f4286a87dac790b4aec/raw/c4f05a10412ba214610e23057f1798db8acda0c8/pktworld_chart.user.js
// @icon         data:image/png;base64,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
// @grant        none
// ==/UserScript==
(function() {
    'use strict';

    var head = document.querySelector('.table.table-hover:not(#blocks) thead tr');
    var newTh = document.createElement("th");
    newTh.innerText = "Average";
    head.appendChild(newTh);

    var body = document.querySelectorAll('.table.table-hover:not(#blocks) *:not(thead) tr');
    for (var tr of body) {
        try {
            tr.querySelectorAll('td')[0].childNodes[0].style.color = "black"
        } catch {}
        var newTd = document.createElement("td");
        var b = tr.querySelectorAll('td')[1].innerText;
        var p = parseFloat(tr.querySelectorAll('td')[5].innerText.replace(" PKT", "").replace(",", ""));
        if (p != 0) { newTd.innerHTML = (p/b).toFixed(2)+' PKT'}
        tr.appendChild(newTd);
    }

    var chart = document.createElement('div');
    var canvas = document.createElement('canvas');
    canvas.setAttribute("id", "graphique");
    canvas.setAttribute("height", "90");
    chart.appendChild(canvas);
    var form = document.querySelector('table');
    form.after(chart);
    var meta = document.createElement('meta');
    meta.httpEquiv = "refresh";
    meta.content = "60";
    document.getElementsByTagName('head')[0].appendChild(meta);

    const colorStock = ['rgb(201, 38, 255)', 'rgb(139, 50, 168)', 'rgb(179, 119, 0)', 'rgb(255, 204, 255)', 'rgb(66, 135, 245)', 'rgb(246, 255, 117)'];

    var poolList = document.querySelectorAll(".table.table-hover:not(#blocks) tbody tr td:first-child");
    poolList = [].slice.call(poolList);
    poolList = poolList.map(function(e) { return e.innerText; });

    const regExp = /\(([^)]+)\)/;
    var poolColor = new Map();
    poolColor.set('Pkteer', "rgb(54, 162, 235)");
    poolColor.set('Pkt.world', "rgb(179, 204, 87)");
    poolColor.set('Pktpool.io', "rgb(255, 99, 132)");
    poolColor.set('Zetahash', "rgb(255, 191, 0)");
    for (p of poolList) {
        if (p.includes("Unknown")) { p = regExp.exec(p)[1]; }
        if (!(poolColor.has(p))) { poolColor.set(p, colorStock.pop()); }
    }

    var summary = document.querySelectorAll('.table.table-hover:not(#blocks) tbody tr');
    var name;
    for (tr of summary) {
        name = tr.querySelector('td:first-child').innerText;
        if (name.includes("Unknown")) { name = regExp.exec(name)[1]; }
        tr.style.background = poolColor.get(name);
    }

    var blocks = document.querySelectorAll("#blocks tbody tr");
    blocks = [].slice.call(blocks).reverse();
    var winner = blocks.map(function(e) {
        e.childNodes[9].style.color = poolColor.get(e.childNodes[9].innerText);
        return e.childNodes[9].innerText;
    });
    var pkt = blocks.map(function(e) {
        return parseFloat(e.childNodes[11].innerText.replace(" PKT", ""));
    });
    var blockNumber = blocks.map(function(e) {
        return parseInt(e.childNodes[1].innerText);
    });

    var tmp = 0;
    var mean = [];
    const len = pkt.length;
    for(let i = 0 ; i < len; i++) {
        tmp += pkt[i];
        mean.push(tmp/(i+1));
    }

    document.title = '[Avg '+ mean[len-1].toFixed(2) +'] ' + document.title;

    var ctx = document.getElementById('graphique').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            datasets: [{
                type: 'bar',
                data: pkt,
                backgroundColor: []
            }, {
                type: 'line',
                borderColor: 'rgb(0, 0, 0)',
                fill: false,
                pointRadius: 0,
                borderWidth: 0.7,
                data: mean
            }],
            labels: blockNumber
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    },
                    categoryPercentage: 1.0,
                    barPercentage: 1.0
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var dataset = myChart.data.datasets[0];
    for (var i = 0; i < len; i++) {
        dataset.backgroundColor[i] = poolColor.get(winner[i]);
    }
    myChart.update();

})();