☰

KDE Store: Graphs

Misc

当前为 2017-08-01 提交的版本，查看 最新版本。

// ==UserScript==
// @name            KDE Store: Graphs
// @namespace       https://github.com/Zren/
// @description     Misc
// @icon            https://store.kde.org/images_sys/store_logo/kde-store.ico
// @author          Zren
// @version         1
// @match           https://store.kde.org/member/*/plings/
// @grant           none
// @require         https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js
// ==/UserScript==

var el = function(html) {
    var e = document.createElement('div');
    e.innerHTML = html;
    return e.removeChild(e.firstChild);
}

function getProductDownloadsOverTime() {
    var graphData = {}
    var tabs = document.querySelectorAll('.tab-content .tab-pane')
    for (var i = 0; i < tabs.length; i++) {
        var tabPane = tabs[i]
        for (var row of tabPane.querySelectorAll('.row:not(.row-total')) {
            var productName = row.children[1].querySelector('span').textContent
            var productDownloads = row.children[2].querySelector('span').textContent
            //console.log('graphData', productName, productDownloads, parseInt(productDownloads, 10))
            productDownloads = parseInt(productDownloads, 10)

            var productData = graphData[productName]
            if (!graphData[productName]) {
                productData = new Array(tabs.length).fill(0)
                /*
                for (var j = 0; j < i; j++) {
                    productData[j] = null
                }
                */
                graphData[productName] = productData
            }

            productData[i] = productDownloads
        }
    }
    return graphData
}
function randomColor() {
    // Based on the Random Pastel code from StackOverflow
    // https://stackoverflow.com/a/43195379/947742
    return "hsl(" + 360 * Math.random() + ', ' + // Hue: Any
                 (25 + 70 * Math.random()) + '%, ' + // Saturation: 25-95
                 (40 + 30 * Math.random()) + '%)'; // Lightness: 40-70
}
function convertToDatasets(graphData) {
    var datasets = []
    for (var productName of Object.keys(graphData)) {
        var productData = graphData[productName]
        var dataset = {}
        dataset.label = productName
        dataset.data = Array.from(productData).reverse()
        dataset.fill = false
        var datasetColor = randomColor()
        dataset.backgroundColor = datasetColor
        dataset.borderColor = datasetColor
        dataset.lineTension = 0.1
        datasets.push(dataset)
    }
    return datasets
}
var graphData = window.graphData = getProductDownloadsOverTime()
var datasets = window.datasets = convertToDatasets(graphData)

var labels = document.querySelectorAll('#my-payout-list ul.nav-tabs li a')
labels = Array.prototype.map.call(labels, function(e){ return e.textContent })
labels = labels.reverse()

console.log('datasets', JSON.stringify(datasets))
console.log('labels', JSON.stringify(labels))

var tabContent = document.querySelector('.tab-content')
var graphTabPane = el('<div class="tab-pane fade" id="graphs" />')
var graphCanvas = el('<canvas id="myChart" width="100vw" height="30vh"></canvas>')
graphTabPane.appendChild(graphCanvas)
var warningAlert = tabContent.querySelector('#le-alert')

tabContent.insertBefore(graphTabPane, warningAlert)

var navTabs = document.querySelector('#my-payout-list ul.nav-tabs')
var graphTab = el('<li><a href="#graphs" data-toggle="tab">Graphs</a></li>')
navTabs.appendChild(graphTab)

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = window.myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: datasets,
    },
    options: {
        title: {
            display: true,
            text: 'Product Downloads Over Time',
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            itemSort: function (a, b, data) {
                return b.yLabel - a.yLabel // descending
            }
        },
        legend: {
            onHover: function(e, ) {
                console.log('onHover', arguments)
            }
        },
        hover: {
            mode: 'nearest',
            intersect: true,
        },
        scales: {
            yAxes: [{
                //type: 'logarithmic',
                ticks: {
                    //stepSize: 5,
                    //beginAtZero:true,
                }
            }]
        }
    }
});