pixiv-ranking-scatter-plot.js

// ==UserScript==
// @name         Pixiv ranking scatter plot
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Show a scatter plot of date versus rank
// @author       cro
// @match        https://www.pixiv.net/dashboard/report/ranking*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pixiv.net
// @grant        none
// @license      MIT
// @require      https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js
// @require      https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js
// ==/UserScript==
/* jshint esversion: 6 */

(function() {
    'use strict';
    let zipwith = (a, b, f) => a.map((k, i) => f(k, b[i]));
    let jpcn_regex = /(\d+)\D(\d+)\D(\d+)\D/;
    let rank_regex = /\d+/;
    let date_parse = function(str)
    {
        let match = str.match(jpcn_regex);
        if (match)
        {
            str = `${match[1]} ${match[2]} ${match[3]}`;
        }
        return new Date(str);
    };

    let menubar = document.querySelector('section.analytics-menu-unit');
    let div = document.createElement('div');
    let canvas = document.createElement('canvas');
    canvas.style.backgroundColor = 'white';
    div.appendChild(canvas);
    menubar.insertAdjacentElement('beforeBegin', div);
    let dates = Array.from(document.querySelectorAll('h1.date')).map(x => date_parse(x.textContent));
    let top_rank = function(n)
    {
        let crown = document.querySelector(`.crown${n}`);
        return crown ? Array.from(crown.nextSibling.querySelectorAll('h1.date')).map(x => n) : [];
    }
    let top_ranks = [1,2,3].map(top_rank).flat();
    let ranks = top_ranks.concat(Array.from(document.querySelectorAll('h1.rank')).map(x => parseInt(x.textContent.match(rank_regex))));
    let data = {
        datasets: [{
            label: 'Date vs Rank',
            data: zipwith(dates, ranks, (date, rank) => ({ x: date, y: rank })),
            backgroundColor: 'black'
        }]
    };
    let config = {
        type: 'scatter',
        data: data,
        options: {
            animation: false,
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: 'Rank'
                    },
                    reverse: true,
                    min: 0,
                    suggestedMax: 100,
                }
            }
        }
    };
    let chart = new Chart(canvas, config);
})();