AO3: Stat Graphs+

New and improved statistics page for AO3
安裝腳本 ?
換行
// ==UserScript==
// @name        AO3: Stat Graphs+
// @version     1.0.1
// @description New and improved statistics page for AO3
// @author      sharkcat
// @namespace   https://github.com/sharkcatshark/Userscripts
// @match       https://archiveofourown.org/users/*/stats*
// @icon        https://www.google.com/s2/favicons?sz=64&domain=archiveofourown.org
// @require     https://code.jquery.com/jquery-3.7.0.min.js
// @require     https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js
// @require     https://cdn.jsdelivr.net/npm/[email protected]
// @license     GNU GPLv3
// ==/UserScript==

// -- START Settings -- //

const maxFicsPerGraph = 10; // how many fics per graph you want to be displayed

const coloursArray = ["#f77078","#eda278","#faff66","#92d86e","#6e92d8","#9679e1","#dd75a6","#363636"]; // colours for graphs // doesnt affect categories, ratings, warnings pie charts
const bordersArray = ["#ff696f","#ffa068","#f7fe68","#88f354","#5587f2","#9063f8","#f75ea1","#4b2827"];

const maxTitleCharacters = 15; // cuts off titles if they get too long for labels (includes spaces)

// Metric Graph Only
const displayZeroMetrics = false; // show a fic in the graph if the value is 0

// these two set the default display for the metric graph on page load
const defaultMetric = "kudos";  // can be 'hits', 'kudos', 'bookmarks', 'comments', 'subs', 'words'
const defaultOrder = "Dsc"; // "Asc" for ascending

// Overview Graph Only
const removeHitsFromOverview = true; // hits can overwhelm the graph and make the other metrics hard to see but you can turn them back on here

// -- END Settings -- //

Chart.register(ChartDataLabels);

class Fic {
    constructor(title, fandoms, words, hits, kudos, comments, subs, bookmarks) {
        this.title = title;
        this.fandom = fandoms;
        this.words = words;
        this.hits = hits;
        this.kudos = kudos;
        this.comments = comments;
        this.subs = subs;
        this.bookmarks = bookmarks;
    }
}

// redirect to flat view
const username = window.location.href.split("/")[4];
if (!window.location.href.endsWith("/stats?flat_view=true")) {
    window.location = "https://archiveofourown.org/users/" + username + "/stats?flat_view=true";
}

// adding in divs for graph placement
$('<div id="charts"></div>').insertAfter('#main > ul.navigation.actions');
$('#charts').append('<div id="mainSection">');
$('#mainSection').append('<div id="summary"></div><div id="metric"></div><div id="overall"></div>');
$('#metric').append('<div id="toggleButtonsDiv"></div><div id="metricGraph" class="graph"></div>');
$("#toggleButtonsDiv").append('<ul id="toggleButtons"><li><button id="hitsToggle" class="metricButton">Hits</button></li><li><button id="kudosToggle" class="metricButton">Kudos</button></li><li><button id="bookmarksToggle" class="metricButton">Bookmarks</button></li><li><button id="commentsToggle" class="metricButton">Comments</button></li><li><button id="subsToggle" class="metricButton">Subs</button></li><li><button id="wordsToggle" class="metricButton">Words</button></li></ul>');
$("#overall").append('<canvas id="overviewGraph"></canvas>');
$('#charts').append('<div id="sidePie"></div>');
$('#sidePie').append('<div id="fandom" class="pie"><canvas id="fandomGraph"></canvas></div>');
$("#sidePie").append('<div id="category" class="pie"><canvas id="categoryGraph"></canvas></div>');
$("#sidePie").append('<div id="rating" class="pie"><canvas id="ratingGraph"></canvas></div>');
$("#sidePie").append('<div id="warning" class="pie"><canvas id="warningGraph"></canvas></div>');

// getting main data
var ficList = [];

const fics = document.querySelectorAll(".statistics.index.group > li > ul > li");
for (let i = 0; i < fics.length; i++) {
    let title = document.querySelectorAll(".index.group a")[i].innerHTML;
    let fandoms = document.querySelectorAll(".index.group span.fandom")[i].innerHTML.slice(1, -1).split(", ");
    let words = Number(document.querySelectorAll("span.words")[i].innerHTML.replace(/\(|,|\swords?\)/g, "")); // why is this Number not parseInt
    let hits = parseInt(document.querySelectorAll(".index.group dd.hits")[i].innerHTML.replace(",", ""));
    let kudos = parseInt(document.querySelectorAll(".index.group dd.kudos")[i].innerHTML.replace(",", ""));
    let comments = parseInt(document.querySelectorAll(".index.group dd.comments")[i].innerHTML.replace(",", ""));
    try {
        var subs = parseInt(document.querySelectorAll(".index.group dd.subscriptions")[i].innerHTML.replace(",", ""));
    }
    catch (error) {
        var subs = 0;
    }
    try {
        var bookmarks = parseInt(document.querySelectorAll(".index.group dd.bookmarks")[i].innerHTML.replace(",", ""));
    }
    catch (error) {
        var bookmarks = 0;
    }
    var newFic = new Fic(title, fandoms, words, hits, kudos, comments, subs, bookmarks); // create instance of class
    ficList.push(newFic); // add instance to ficList array
}

// get list of fic urls to get data from (reading from other pages)
const ficURLS = document.querySelectorAll('ul.statistics > li.fandom > ul > li a');
const urls = [];

for (let i = 0; i < ficURLS.length; i++) {
    let url = ficURLS[i].href;
    urls.push(url);
}

// organising fandom data
var fandomOutput = [];

for (let i = 0; i < ficList.length; i++) {
    for (let j = 0; j < ficList[i].fandom.length; j++) {
        let foundIndex = fandomOutput.map(a => a.fandom).indexOf(ficList[i].fandom[j]);
        if (foundIndex > -1) {
            fandomOutput[foundIndex].count++;
        }
        else {
            var newFandom = {fandom: ficList[i].fandom[j], count: 1};
            fandomOutput.push(newFandom);
        }
    }
}

// sort big to small
fandomOutput.sort(function(a, b) {
    return ((b.count < a.count) ? -1 : ((b.count == a.count) ? 0 : 1));
});

// make summary box
var totalWords = 0;
var totalHits = 0;
var totalKudos = 0;
var totalComments = 0;
var totalSubs = 0;
var totalBookmarks = 0;
var userSubs = $("dd.user.subscriptions").html(); // this is the only one you cant calculate

// calculating values as opposed to reading off chart because reasons
for (let i = 0; i < ficList.length; i++) {
    totalWords += ficList[i].words;
    totalHits += ficList[i].hits;
    totalKudos += ficList[i].kudos;
    totalComments += ficList[i].comments;
    totalSubs += ficList[i].subs;
    totalBookmarks += ficList[i].bookmarks;
}

const averageWords = Math.round(totalWords / 3);
const hkRatio = Math.round(totalHits / totalKudos);

// removing old content
$("#stat_chart").remove(); // default graph
$("ul.view.actions").remove(); // view switch options
$("ol.year.actions").remove(); // year nav
$("h3.heading").remove(); // totals heading
$("dl.statistics.meta.group").unwrap(); // wrapper parent for general cleanup
$("dl.statistics.meta.group").remove(); // total summary box
$("div.actions.module").remove(); // default sort by direction

// placing summary box
const summaryCode = "<dl><p>Totals:</p><dt>Words</dt><dd>" + totalWords.toLocaleString("en") + "</dd><dt>Hits</dt><dd>" + totalHits.toLocaleString("en") + "</dd><dt>Kudos</dt><dd>" + totalKudos.toLocaleString("en") + "</dd><dt>Bookmarks</dt><dd>" + totalBookmarks.toLocaleString("en") + "</dd><dt>Comment Threads</dt><dd>" + totalComments.toLocaleString("en") + "</dd><dt>User Subs</dt><dd>" + userSubs.toLocaleString("en") + "</dd><dt>Fic Subs</dt><dd>" + totalSubs.toLocaleString("en") + "</dd><dt>Fandoms Written For</dt><dd>" + fandomOutput.length.toLocaleString("en") + "</dd><p>Averages:</p><dt>Word Count</dt><dd>" + averageWords.toLocaleString("en") + "</dd><dt>Hits/Kudos Ratio</dt><dd>" + hkRatio + ":1</dd></dl>";
$("#summary").append(summaryCode);

// graphs
const overviewData = [
    {
      label: "Hits",
      backgroundColor: coloursArray[0],
      borderColor: bordersArray[0],
      borderWidth: 2,
      data: ficList.map(a => a.hits)
    },
    {
      label: "Kudos",
      backgroundColor: coloursArray[1],
      borderColor: bordersArray[1],
      borderWidth: 2,
      data: ficList.map(a => a.kudos)
    },
    {
      label: "Bookmarks",
      backgroundColor: coloursArray[2],
      borderColor: bordersArray[2],
      borderWidth: 2,
      data: ficList.map(a => a.bookmarks)
    },
    {
      label: "Comments",
      backgroundColor: coloursArray[3],
      borderColor: bordersArray[3],
      borderWidth: 2,
      data: ficList.map(a => a.comments)
    },
    {
      label: "Subscriptions",
      backgroundColor: coloursArray[4],
      borderColor: bordersArray[4],
      borderWidth: 2,
      data: ficList.map(a => a.subs)
    }
];

if (removeHitsFromOverview){
    overviewData.splice(0, 1);
}

ficList.splice(maxFicsPerGraph);
displayGraph("overviewGraph", "bar", ficList.map(a => shortenTitle(a.title)), overviewData, "Stats Overview", true); // overview
generateGraph(defaultMetric, defaultOrder); // metric
makePieChart("fandomGraph", fandomOutput.map(a => a.fandom), coloursArray, fandomOutput.map(a => a.count), "Fics Per Fandom"); // pie chart

async function fetchData(url) {
    const response = await fetch(url);
    const html = await response.text();

    const domParser = new DOMParser();
    const page = domParser.parseFromString(html, "text/html");

    // get elements from fic page
    const rating = page.querySelector("dd.rating > ul.commas > li").innerText;
    const warningArray = Array.from(page.querySelectorAll("dd.warning.tags ul.commas > li"));
    let categoryArray = [];
    try {
        categoryArray = Array.from(page.querySelectorAll("dd.category.tags ul.commas > li"));
    }
    catch {
        categoryArray = ["No Category Given"];
    }
    const warnings = [];
    const category = [];
    for (let i = 0; i < warningArray.length; i++) {
        warnings.push(warningArray[i].innerText);
    }

    for (let i = 0; i < categoryArray.length; i++) {
        category.push(categoryArray[i].innerText);
    }
    const chapters = page.querySelector("dd.chapters").innerText;

    return { rating, warnings, category, chapters };
}

// bonus pie charts and stats
async function getDataFromMultipleURLs(urls) {
  const ficList = [];

  for (let i = 0; i < urls.length; i++) {
    const fic = await fetchData(urls[i], i);
    ficList.push(fic);
  }
  return ficList;
}

getDataFromMultipleURLs(urls).then(ficList => {
    var ratingOutput = [];
    for (let i = 0; i < ficList.length; i++) { // for each fic in ficlist
        let foundIndex = ratingOutput.map(a => a.rating).indexOf(ficList[i].rating);
        if (foundIndex > -1) {
            ratingOutput[foundIndex].count++;
        }
        else {
            var newRating = {rating: ficList[i].rating, count: 1};
            ratingOutput.push(newRating);
        }
    }

    ratingOutput.sort(function(a, b) {
        return ((b.count < a.count) ? -1 : ((b.count == a.count) ? 0 : 1));
    });

    var ratingColourArray = getPieMetricColour(ratingOutput);

    makePieChart("ratingGraph", ratingOutput.map(a => a.rating), ratingColourArray, ratingOutput.map(a => a.count), "Ratings");

    var warningOutput = [];
    for (let i = 0; i < ficList.length; i++) { // for each fic in ficlist
        for (let j = 0; j < ficList[i].warnings.length; j++) { // for each warning in array
            let foundIndex = warningOutput.map(a => a.warning).indexOf(ficList[i].warnings[j]); // does the output have warning already?
            if (foundIndex > -1) { // if yes (found will give an index of where it is so above -1 means it exists)
                warningOutput[foundIndex].count++;
            }
            else {
                var newWarning = {warning: ficList[i].warnings[j], count: 1};
                warningOutput.push(newWarning);
            }
        }
    }

    warningOutput.sort(function(a, b) {
        return ((b.count < a.count) ? -1 : ((b.count == a.count) ? 0 : 1));
    });

    var warningColourArray = getPieMetricColour(warningOutput);
    makePieChart("warningGraph", warningOutput.map(a => a.warning), warningColourArray, warningOutput.map(a => a.count), "Warnings");

    var categoryOutput = [];
    for (let i = 0; i < ficList.length; i++) {
        for (let j = 0; j < ficList[i].category.length; j++) {
            let foundIndex = categoryOutput.map(a => a.category).indexOf(ficList[i].category[j]);
            if (foundIndex > -1) {
                categoryOutput[foundIndex].count++;
            }
            else {
                var newCategory = {category: ficList[i].category[j], count: 1};
                categoryOutput.push(newCategory);
            }
        }
    }

    // sort big to small
    categoryOutput.sort(function(a, b) {
        return ((b.count < a.count) ? -1 : ((b.count == a.count) ? 0 : 1));
    });

    var completeFics = 0;
    var incompleteFics = 0;
    var chapterCount = 0;

    for (let i = 0; i < ficList.length; i++) {
        if (ficList[i].chapters.match(/\S+(?=\/)/g)[0] == ficList[i].chapters.match(/(?<=\/)\S+/g)[0]) {
            completeFics++;
        }
        else {
            incompleteFics++;
        }

        chapterCount += parseInt(ficList[i].chapters); // will parse as a number until it gets to the / (ie only gets '45' from '45/56')
    }

    var categoryColourArray = getPieMetricColour(categoryOutput);
    makePieChart("categoryGraph", categoryOutput.map(a => a.category), categoryColourArray, categoryOutput.map(a => a.count), "Categories");

    var completeRate = (completeFics/(completeFics+incompleteFics)) * 100;
    var avgChapterCount = chapterCount / ficList.length;
    const summaryCode = "<dt>Fic Completion Rate</dt><dd>" + completeRate + "%</dd><dt>Chapter Count</dt><dd>" + avgChapterCount + "</dd>";
    $("#summary dl").append(summaryCode);
});

// event listeners for buttons
const hitsBtn = document.getElementById("hitsToggle");
hitsBtn.addEventListener("click", function() {
    removeAndFlipGraph("hits");
});

const kudosBtn = document.getElementById("kudosToggle");
kudosBtn.addEventListener("click", function() {
    removeAndFlipGraph("kudos");
});

const subsBtn = document.getElementById("subsToggle");
subsBtn.addEventListener("click", function() {
    removeAndFlipGraph("subs");
});

const wordsBtn = document.getElementById("wordsToggle");
wordsBtn.addEventListener("click", function() {
    removeAndFlipGraph("words");
});

const commentsBtn = document.getElementById("commentsToggle");
commentsBtn.addEventListener("click", function() {
    removeAndFlipGraph("comments");
});

const bookmarksBtn = document.getElementById("bookmarksToggle");
bookmarksBtn.addEventListener("click", function() {
    removeAndFlipGraph("bookmarks");
});

// functions
function makePieChart(elementID, pieLabels, bgColours, pieData, pieTitle) {
    new Chart(document.getElementById(elementID), {
        type: "pie",
        data: {
            labels: pieLabels,
            datasets: [{
                backgroundColor: bgColours,
                borderColor: bgColours,
                data: pieData
            }]
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: pieTitle
                },
                datalabels: {
                    color: "#fff",
                    textStrokeColor: '#000',
                    textStrokeWidth: 4,
                    font: {
                        size: 12,
                        weight: "normal"
                    },
                    anchor: "center"
                },
                legend: {
                    display: false
                }
            }
        }
    });
}

function displayGraph(elementID, type, xLabels, dataset, graphTitle, legendDisplayTF) {
    new Chart(document.getElementById(elementID), {
        type: type,
        data: {
            labels: xLabels,
            datasets: dataset
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: graphTitle
                },

                legend: {
                    display: legendDisplayTF,
                    position: "top"
                },
                datalabels: {
                    color: "#fff",
                    textStrokeColor: '#000',
                    textStrokeWidth: 4,
                    font: {
                        size: 12,
                        weight: "normal"
                    },
                    anchor: "end",
                    align: "end",
                    offset: 1
                }
            }
        }
    });
}

function generateGraph(metric, order) {
    // clear for next metric
    const titleArray = [];
    const valueArray = [];
    var sortedArray = [];

    var metricColour = getMetricColour(metric);
    var metricBorder = getBorderColour(metric);

    if (order == "Asc") {
        sortedArray = ficList.toSorted((a, b) => parseFloat(a[metric]) - parseFloat(b[metric]));
    }
    else { // "dsc"
        sortedArray = ficList.toSorted((a, b) => parseFloat(b[metric]) - parseFloat(a[metric]));
    }

    if (displayZeroMetrics) { // display fics with 0 values
        for (let i = 0; i < maxFicsPerGraph; i++) {
            if (sortedArray[i] != null) {
                titleArray.push(shortenTitle(sortedArray[i].title));
                valueArray.push(sortedArray[i][metric]);
            }
            else {
                break;
            }
        }
    }
    else {
        for (let i = 0; i < maxFicsPerGraph; i++) {
            if (sortedArray[i] != null && sortedArray[i][metric] != 0) {
                titleArray.push(shortenTitle(sortedArray[i].title));
                valueArray.push(sortedArray[i][metric]);
            }
            else if (sortedArray[i] == null) {
                break;
            }
        }
    }

    const graphID = metric + order; // hitsDsc
    const insertCode = '<canvas id="' + graphID + '"></canvas>'; // hitsDsc
    $("#metricGraph").append(insertCode); // CHANGED FROM #metric to #metricGraph

    var data = [{
        label: metric,
        backgroundColor: metricColour,
        borderColor: metricBorder,
        borderWidth: 2,
        data: valueArray
    }];
    displayGraph(graphID, "bar", titleArray, data, metric, false);
}


function getMetricColour(metric) {
    switch(metric) {
        case "hits": return coloursArray[0];
        case "kudos": return coloursArray[1];
        case "bookmarks": return coloursArray[2];
        case "comments": return coloursArray[3];
        case "subs": return coloursArray[4];
        case "words": return coloursArray[5];
    }
}

function getBorderColour(metric) {
    switch(metric) {
        case "hits": return bordersArray[0];
        case "kudos": return bordersArray[1];
        case "bookmarks": return bordersArray[2];
        case "comments": return bordersArray[3];
        case "subs": return bordersArray[4];
        case "words": return bordersArray[5];
    }
}

function shortenTitle(title) {
    if (title.length > maxTitleCharacters) {
        return title.slice(0, maxTitleCharacters) + "...";
    }
    return title;
}

// gotta be a way for this to be shorter
function getPieMetricColour(array) {
    var pieArrayMetric = [];

    // get key
    const obj = array[0];
    const entries = Object.entries(obj);
    const [firstKey, firstValue] = entries[0];

    let red = "#f77078";
    let orange = "#eda278";
    let yellow = "#faff66";
    let green = "#92d86e";
    let blue = "#6e92d8";
    let purple = "#9679e1";
    let pink = "#dd75a6";
    let black = "#363636";
    let white = "#dedede";

    if (firstKey == "rating") {
        for (let i = 0; i < array.length; i++) {
            switch(array[i].rating) { // array[i] refers to the object // get first object in array and look at first value
                case "General Audiences": pieArrayMetric.push(green); break;
                case "Teen And Up Audiences": pieArrayMetric.push(yellow); break;
                case "Mature": pieArrayMetric.push(orange);break;
                case "Explicit": pieArrayMetric.push(red);break;
                case "Not Rated": pieArrayMetric.push(white); break;
            }
        }
    }
    else if (firstKey == "category") {
        for (let i = 0; i < array.length; i++) {
            switch(array[i].category) {
                case "M/M": pieArrayMetric.push(blue); break;
                case "F/M": pieArrayMetric.push(purple); break;
                case "F/F": pieArrayMetric.push(pink); break;
                case "Multi": pieArrayMetric.push(yellow); break;
                case "Other": pieArrayMetric.push(black); break;
                case "Gen": pieArrayMetric.push(green); break;
                case "No Category Given": pieArrayMetric.push(white); break; // might break, might not, who knows
            }
        }
    }
    else if (firstKey == "warning") {
        for (let i = 0; i < array.length; i++) {
            switch(array[i].warning) {
                case "No Archive Warnings Apply": pieArrayMetric.push(green); break;
                case "Graphic Depictions Of Violence": pieArrayMetric.push(red); break;
                case "Creator Chose Not To Use Archive Warnings": pieArrayMetric.push(orange); break;
                case "Rape/Non-Con": pieArrayMetric.push(purple); break;
                case "Underage": pieArrayMetric.push(blue); break;
                case "Major Character Death": pieArrayMetric.push(black); break;
            }
        }
    }
    else {
        console.log("invalid key idk how you got here man");
    }

    return pieArrayMetric;
}

function removeAndFlipGraph(newMetric) {
    var graph = document.querySelector("#metricGraph canvas");
    var includesMetric = graph.id.includes(newMetric);
    var includesAsc = graph.id.includes("Asc");

    if ((includesMetric && includesAsc) || (!includesMetric && !includesAsc)) {
        graph.remove();
        generateGraph(newMetric, "Dsc");
    }
    else if ((includesMetric && !includesAsc) || !includesMetric && includesAsc) {
        graph.remove();
        generateGraph(newMetric, "Asc");
    }
}

const styles =
`#summary {
    border: 3px solid;
    margin-bottom: 1em;
    margin-right: 1em;
    display: inline-block;
}

#summary dl {
    display: grid;
    padding: 0.5em;
    padding-right: 2em;
}

#summary p, #summary dd {
    margin: 0;
}

#summary dd {
    grid-column-start: 2;
    margin-left: 2em;
}

#summary dt {
    grid-column-start: 1;
}

#summary dl p {
    text-decoration-line: underline;
}

#toggleButtons li {
    padding: 0px 5px;
    display: inline;
}

#metric {
    padding: 0px 5px;
    display: inline-block;
}

#metricGraph {
  max-width: 35em;
}

#charts {
    margin-top: 1.5em;
}

#mainSection, #sidePie {
    float: left;
}

#sidePie {
    display: inline-block;
    max-width: 12em;
}

#overall {
    max-width: 60em;
}

@media screen and (min-width: 670px) and (max-width: 1290px) {
    #mainSection {
        float: none;
    }
    #sidePie {
        display: inline;
        float: none;
        max-width: none;
    }
    .pie {
        float: left;
        width: 12em;
    }
}

@media screen and (max-width: 670px) {
    #mainSection {
        float: none;
    }
    #sidePie {
        display: inline-block;
        float: none;
        max-width: none;
    }
    .pie {
        float: left;
        width: 10em;
    }
}`;

const styleSheet = document.createElement("style");
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);