KDE Store: Graphs

Misc
当前为 2017-12-25 提交的版本，查看最新版本。
换行
// ==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         2
// @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
}

// https://stackoverflow.com/a/44134328/947742
function hslToHex(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;
  var r, g, b;
  if (s === 0) {
    r = g = b = l; // achromatic
  } else {
    function hue2rgb(p, q, t) {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    }
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }
  function toHex(x) {
    const hex = Math.round(x * 255).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }
  return '#' + toHex(r) + toHex(g) + toHex(b)
}
function getPastelColor(i, n) {
    return hslToHex(i / n * 360, 55, 70)
}

function convertToDatasets(graphData) {
    var datasets = []
    var products = Object.keys(graphData)
    products.sort()

    for (var i = 0; i < products.length; i++) {
        var productName = products[i]
        var productData = graphData[productName]
        var dataset = {}
        dataset.label = productName
        dataset.data = Array.from(productData).reverse()
        dataset.fill = false
        var datasetColor = getPastelColor(i, products.length)
        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,
                }
            }]
        }
    }
});