Track statistics on the stats page and display the stats in charts. Stores the stats in the browser's local storage.
目前為
// ==UserScript== // @name AO3 Statistics tracker // @description Track statistics on the stats page and display the stats in charts. Stores the stats in the browser's local storage. // @author Ifky_ // @namespace https://greasyfork.org/en/scripts/518523 // @version 1.0.1 // @history 1.0.1 — Import dependency scripts in the proper way. Set CLEAN_DATA default to "day" instead of "hour" // @history 1.0.0 — Track stats, draw charts, download chart, clean stats, import/export stats, toggle view // @match https://archiveofourown.org/users/*/stats* // @match http://archiveofourown.org/users/*/stats* // @icon https://archiveofourown.org/images/logo.png // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js // @license GPL-3.0-only // @grant none // ==/UserScript== "use strict"; (function () { /** ==================================== **/ /* FLAGS MEANT TO BE EDITED: CAPITALIZED */ /* Keep in mind that these might be */ /* reset if the script is auto-updated, */ /* so create a backup somewhere safe */ /** ==================================== **/ // Clean data by removing unnecessary points. // Options: "hour" / "day" / "month" const CLEAN_DATA = "day"; // Theme mode for the chart. // Options: "light" / "dark" const THEME_MODE = "light"; // Whether to include or exclude work stats // Can be a good idea to turn off if you have many works // Options: true / false const INCLUDE_WORKS = true; // The sign used to separate values // Change it to something else if it clashes with a work name // Options: any string const DELIMITER = ";"; const getTheme = (mode) => { if (mode === "dark") { return { text: "#999", background: "#222", gridLines: "#333", userSubscriptions: "#F94144", kudos: "#F3722C", commentThreads: "#F9C74F", bookmarks: "#90BE6D", subscriptions: "#43AA8B", wordCount: "#6C8EAD", hits: "#8552BA", }; } else { // Default to light mode return { text: "#777", background: "#FFF", gridLines: "#DDD", userSubscriptions: "#F94144", kudos: "#F3722C", commentThreads: "#F9C74F", bookmarks: "#90BE6D", subscriptions: "#43AA8B", wordCount: "#577590", hits: "#663C91", }; } }; const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; const trackStats = () => { const newTotalStats = getTotalStats(); storeInLocalStorage(newTotalStats); if (INCLUDE_WORKS) { const newWorkStats = getWorkStats(); storeInLocalStorage(newWorkStats); } drawChart(chartContainer, canvasTotal, "total"); }; const exportStats = () => { let csvContent = "data:text/csv;charset=utf-8,"; // Headers csvContent += "type;workName;statName;date;value\r\n"; const keys = Object.keys(localStorage).filter((key) => isValidKey(key)); keys.forEach((key, index) => { // Add \r\n to every row but the last one csvContent += [key, localStorage.getItem(key)].join(DELIMITER) + (index !== keys.length - 1 ? "\r\n" : ""); }); var encodedUri = encodeURI(csvContent); var link = document.createElement("a"); link.href = encodedUri; link.download = `stats-${formatDate(new Date()).yyyyMMdd}.csv`; link.click(); }; const importStats = (event) => { const target = event.target; if (target instanceof HTMLInputElement) { Array.from(target.files).forEach((file) => { csvFileToStatsRow(file) .then((rows) => { storeInLocalStorage(rows); alert(`${rows.length} rows imported!`); drawChart(chartContainer, canvasTotal, "total"); }) .catch((error) => { alert(error); }); }); // Reset input target.value = ""; } }; const csvFileToStatsRow = (file) => { return new Promise((resolve, reject) => { // Check if the file is of .csv type if (file.type !== "text/csv" && !file.name.endsWith(".csv")) { reject(new Error("The file must be a .csv file.")); } const reader = new FileReader(); // Handle the file load event reader.onload = () => { if (typeof reader.result === "string") { const lines = reader.result.split("\r\n"); // Validate header const header = lines[0]; const [headerType, headerWorkName, headerStatName, headerDate, headerValue,] = header.split(DELIMITER); if (headerType !== "type" || headerWorkName !== "workName" || headerStatName !== "statName" || headerDate !== "date" || headerValue !== "value") { reject(new Error(`Header(s) could not be inferred: ${header}`)); } const rows = []; for (let i = 1; i < lines.length; i++) { const line = lines[i]; const [type, workName, statName, date, value] = line.split(DELIMITER); try { validateStatRow({ type, workName, statName, date, value, }, i); const row = { type: type, workName: workName, statName: statName, date: new Date(date), value: Number(value), }; rows.push(row); } catch (error) { reject(error); } } resolve(rows); } else { reject(new Error("File content could not be read as text.")); } }; reader.onerror = () => { reject(new Error("An error occurred while reading the file.")); }; reader.readAsText(file); }); }; let statChart = null; let statisticsMetaGroup = null; let statisticsIndexGroup = null; let canvasTotal = null; let chartWidth = 300; const chartHeight = 250; const chartContainer = document.createElement("div"); chartContainer.id = "chart-container-total"; chartContainer.style.marginBlock = "5px"; chartContainer.style.transition = "height 500ms ease-in-out"; chartContainer.style.overflow = "hidden"; const toggleChartContainer = (container, open) => { if (open === true) { container.style.height = `${chartHeight}px`; return; } else if (open === false) { container.style.height = "0px"; return; } if (container.style.height === "0px") { container.style.height = `${chartHeight}px`; } else { container.style.height = "0px"; } }; const observer = new MutationObserver(() => { statChart = document.getElementById("stat_chart"); statisticsMetaGroup = document.querySelector(".statistics.meta.group"); statisticsIndexGroup = document.querySelector(".statistics.index.group"); if (statChart && statisticsMetaGroup && statisticsIndexGroup) { observer.disconnect(); // Stop observing once the element is found chartWidth = Math.round(statChart.offsetWidth); chartContainer.style.width = `${chartWidth}px`; chartContainer.style.height = `0px`; statChart.prepend(chartContainer); canvasTotal = document.createElement("canvas"); canvasTotal.id = "tracked-stats-chart"; canvasTotal.width = chartWidth; canvasTotal.height = chartHeight; canvasTotal.style.display = "block"; canvasTotal.style.backgroundColor = "#8888"; chartContainer.append(canvasTotal); const buttonContainer = document.createElement("div"); buttonContainer.style.width = "100%"; buttonContainer.style.display = "flex"; buttonContainer.style.justifyContent = "flex-end"; buttonContainer.style.flexWrap = "wrap"; buttonContainer.style.gap = "1em"; buttonContainer.style.paddingInline = "1em"; buttonContainer.style.boxSizing = "border-box"; statisticsMetaGroup.append(buttonContainer); const chartExists = () => { // @ts-ignore // eslint-disable-next-line const chartStatus = Chart.getChart("tracked-stats-chart"); return chartStatus !== undefined; }; const downloadChart = async () => { if (!chartExists) { drawChart(chartContainer, canvasTotal, "total"); // Sleep to allow chart to be drawn await sleep(500); } const url = canvasTotal.toDataURL("image/png"); var a = document.createElement("a"); a.href = url; a.download = `stats-chart-${formatDate(new Date()).yyyyMMdd}.png`; a.click(); }; // Button to track statistics const logButton = document.createElement("button"); logButton.style.cursor = "pointer"; logButton.innerText = "Track"; logButton.onclick = trackStats; buttonContainer.append(logButton); // Button to draw chart const drawButton = document.createElement("button"); drawButton.style.cursor = "pointer"; drawButton.innerText = "Draw Chart"; drawButton.onclick = () => drawChart(chartContainer, canvasTotal, "total"); buttonContainer.append(drawButton); // Button to download chart const downloadButton = document.createElement("button"); downloadButton.style.cursor = "pointer"; downloadButton.innerText = "Download"; downloadButton.onclick = downloadChart; buttonContainer.append(downloadButton); // Button to clean stats const cleanButton = document.createElement("button"); cleanButton.style.cursor = "pointer"; cleanButton.innerText = "Clean Stats"; cleanButton.onclick = () => cleanStats(CLEAN_DATA); buttonContainer.append(cleanButton); // Button to export stats const exportButton = document.createElement("button"); exportButton.style.cursor = "pointer"; exportButton.innerText = "Export"; exportButton.onclick = exportStats; buttonContainer.append(exportButton); // Actions container (for styling purposes) const actionsContainer = document.createElement("div"); actionsContainer.classList.add("actions"); buttonContainer.append(actionsContainer); // Input to import stats const importInput = document.createElement("input"); importInput.id = "import-stats-input"; importInput.type = "file"; importInput.accept = ".csv"; importInput.multiple = true; importInput.style.height = "0"; importInput.style.width = "0"; importInput.style.overflow = "hidden !important"; importInput.style.opacity = "0"; importInput.style.position = "absolute"; importInput.style.zIndex = "-100"; importInput.onchange = importStats; actionsContainer.append(importInput); // Label to import stats const importLabel = document.createElement("label"); importLabel.htmlFor = "import-stats-input"; importLabel.style.cursor = "pointer"; importLabel.style.margin = "0"; importLabel.innerText = "Import"; importLabel.classList.add("button"); actionsContainer.append(importLabel); // Toggle to hide/show chart const toggleLabel = document.createElement("button"); toggleLabel.style.cursor = "pointer"; toggleLabel.innerText = "Toggle View"; toggleLabel.onclick = () => toggleChartContainer(chartContainer); buttonContainer.append(toggleLabel); // Buttons for each work const workElements = statisticsIndexGroup.querySelectorAll(".index.group>li:not(.group)"); workElements.forEach((item) => { const workName = item.querySelector("dt>a:link").innerHTML; const chartContainer = document.createElement("div"); chartContainer.id = `chart-container:${workName}`; chartContainer.style.marginBlock = "5px"; chartContainer.style.transition = "height 500ms ease-in-out"; chartContainer.style.overflow = "hidden"; chartContainer.style.width = `100%`; chartContainer.style.height = `0px`; chartContainer.style.position = "relative"; chartContainer.style.zIndex = "10"; item.append(chartContainer); const canvasWork = document.createElement("canvas"); canvasWork.id = `stats-chart:${workName}`; canvasWork.width = item.offsetWidth; canvasWork.height = chartHeight; canvasWork.style.display = "block"; canvasWork.style.backgroundColor = "#8888"; chartContainer.append(canvasWork); const buttonContainer = document.createElement("div"); buttonContainer.style.width = "100%"; buttonContainer.style.display = "flex"; buttonContainer.style.justifyContent = "flex-end"; buttonContainer.style.flexWrap = "wrap"; buttonContainer.style.gap = "1em"; buttonContainer.style.paddingInline = "1em"; buttonContainer.style.boxSizing = "border-box"; const drawButton = document.createElement("button"); drawButton.style.cursor = "pointer"; drawButton.innerText = "Draw"; drawButton.onclick = () => drawChart(chartContainer, canvasWork, "work", workName); buttonContainer.append(drawButton); const toggleLabel = document.createElement("button"); toggleLabel.style.cursor = "pointer"; toggleLabel.innerText = "Toggle"; toggleLabel.onclick = () => toggleChartContainer(chartContainer); buttonContainer.append(toggleLabel); const dt = item.querySelector("dt"); dt.append(buttonContainer); }); } }); observer.observe(document.body, { childList: true, subtree: true }); const drawChart = async (container, canvas, type, workName) => { // If chart is hidden, show it if (container.style.height === "0px") { toggleChartContainer(container, true); await sleep(1000); } let storageStats = getStatsFromLocalStorage().filter((item) => item.type === type); if (workName) { storageStats = storageStats.filter((item) => item.workName === workName); } const { datasets } = statRowToDataSet(storageStats, type); // Destroy existing chart // @ts-ignore // eslint-disable-next-line const chartStatus = Chart.getChart(canvas.id); if (chartStatus !== undefined) { chartStatus.destroy(); } // @ts-ignore // eslint-disable-next-line new Chart(canvas.getContext("2d"), { type: "line", data: { datasets: datasets, }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { type: "time", time: { unit: "day", }, distribution: "linear", grid: { color: getTheme(THEME_MODE).gridLines, }, ticks: { color: getTheme(THEME_MODE).text, }, }, y: { ticks: { precision: 0, color: getTheme(THEME_MODE).text, }, grid: { color: getTheme(THEME_MODE).gridLines, }, }, }, plugins: { customCanvasBackgroundColor: { color: getTheme(THEME_MODE).background, }, tooltip: { callbacks: { title: function (context) { const date = new Date(context[0].parsed.x); return date.toLocaleString("en-GB", { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, // Ensure 24-hour clock }); }, }, }, }, }, plugins: [plugin], }); }; const getStatKey = (type, workName, statName, date) => { return `${type};${workName};${statName};${date}`; }; // Element names (arbitrary) and their DOM identifier const elementsTotal = new Map([ [ "user-subscriptions", { selector: "dd.user.subscriptions", color: getTheme(THEME_MODE).userSubscriptions, hidden: true, }, ], [ "kudos", { selector: "dd.kudos", color: getTheme(THEME_MODE).kudos, hidden: true, }, ], [ "comment-threads", { selector: "dd.comment.thread", color: getTheme(THEME_MODE).commentThreads, hidden: true, }, ], [ "bookmarks", { selector: "dd.bookmarks", color: getTheme(THEME_MODE).bookmarks, hidden: true, }, ], [ "subscriptions", { selector: "dd.subscriptions:not(.user)", color: getTheme(THEME_MODE).subscriptions, hidden: true, }, ], [ "word-count", { selector: "dd.words", color: getTheme(THEME_MODE).wordCount, hidden: true, }, ], [ "hits", { selector: "dd.hits", color: getTheme(THEME_MODE).hits, hidden: false, }, ], ]); const elementsWork = new Map([ [ "kudos", { selector: "dd.kudos", color: getTheme(THEME_MODE).kudos, hidden: true, }, ], [ "comments", { selector: "dd.comments", color: getTheme(THEME_MODE).commentThreads, hidden: true, }, ], [ "bookmarks", { selector: "dd.bookmarks", color: getTheme(THEME_MODE).bookmarks, hidden: true, }, ], [ "subscriptions", { selector: "dd.subscriptions", color: getTheme(THEME_MODE).subscriptions, hidden: true, }, ], [ "words", { selector: "span.words", color: getTheme(THEME_MODE).wordCount, hidden: true, }, ], [ "hits", { selector: "dd.hits", color: getTheme(THEME_MODE).hits, hidden: false, }, ], ]); const getTotalStats = () => { const stats = []; elementsTotal.forEach((value, key) => { const valueString = statisticsMetaGroup.querySelector(value.selector).innerHTML; // Regex to remove any non-digit symbols const valueNumber = Number(valueString.replace(/\D/g, "")); stats.push({ type: "total", workName: "", statName: key, date: new Date(), value: valueNumber, }); }); return stats; }; const getWorkStats = () => { const stats = []; const workElements = statisticsIndexGroup.querySelectorAll(".index.group>li:not(.group)"); workElements.forEach((elem) => { const workName = elem.querySelector("dt>a:link").innerHTML; elementsWork.forEach((value, key) => { const valueString = elem.querySelector(value.selector); // Some stats might not exist on a work. Skip them if (valueString) { // Regex to remove any non-digit symbols const valueNumber = Number(valueString.innerHTML.replace(/\D/g, "")); stats.push({ type: "work", workName: workName, statName: key, date: new Date(), value: valueNumber, }); } }); }); return stats; }; const storeInLocalStorage = (stats) => { stats.forEach((stat, index) => { const key = getStatKey(stat.type, stat.workName, stat.statName, formatDate(stat.date).yyyyMMdd_hhmm); localStorage.setItem(key, stat.value.toString()); }); }; const isValidKey = (key) => { return key.startsWith("work") || key.startsWith("total"); }; const getStatsFromLocalStorage = () => { const rows = []; const keys = Object.keys(localStorage); let i = keys.length; while (i--) { if (isValidKey(keys[i])) { const [type, workName, statName, date] = keys[i].split(DELIMITER); rows.push({ type: type, workName: workName, statName: statName, date: new Date(date), value: Number(localStorage.getItem(keys[i])), }); } } return rows.sort((a, b) => a.date.getTime() - b.date.getTime()); }; const kebabToTitleCase = (input) => { return input .split("-") .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(" "); }; const formatDate = (date) => { // Helper to pad single digits with leading zero const pad = (num) => num.toString().padStart(2, "0"); const year = date.getFullYear(); const month = pad(date.getMonth() + 1); // Months are 0-indexed const day = pad(date.getDate()); const hours = pad(date.getHours()); const minutes = pad(date.getMinutes()); return { yyyyMMdd_hhmm: `${year}-${month}-${day} ${hours}:${minutes}`, yyyyMMdd_hh: `${year}-${month}-${day} ${hours}`, yyyyMMdd: `${year}-${month}-${day}`, yyyyMM: `${year}-${month}`, }; }; const statRowToDataSet = (stats, type) => { const dataset = new Map(); let keys = []; switch (type) { case "total": keys = Array.from(elementsTotal.keys()); break; case "work": keys = Array.from(elementsWork.keys()); break; } // Find each stat type keys.forEach((key) => { const list = []; // Get the stats for the stat type stats.forEach((stat) => { if (stat.statName === key) { list.push([stat.date, stat.value]); } }); // Convert keys from kebab-case to Title Case dataset.set(kebabToTitleCase(key), list); }); return { datasets: Array.from(dataset).map((data, index) => { const values = data[1].map((entry) => { return { x: formatDate(entry[0]).yyyyMMdd_hhmm, y: entry[1], }; }); let backgroundColor = ""; let hidden = false; switch (type) { case "total": backgroundColor = elementsTotal.get(keys[index]).color; hidden = elementsTotal.get(keys[index]).hidden; break; case "work": backgroundColor = elementsWork.get(keys[index]).color; hidden = elementsWork.get(keys[index]).hidden; break; } return { label: data[0], data: values, borderWidth: 2, // Set border color same as background except with less opacity borderColor: `${backgroundColor}88`, backgroundColor: backgroundColor, hidden: hidden, }; }), }; }; const cleanStats = (mode) => { const keys = Object.keys(localStorage).filter((key) => isValidKey(key)); const dataPoints = new Map(keys.map((key) => { const [type, workName, statName, date] = key.split(DELIMITER); return [ key, { type, workName, statName, date: new Date(date), }, ]; })); const toKeep = new Map(); const toDelete = new Set(); const findAndSortData = (value, key, shortDate) => { const shortKey = getStatKey(value.type, value.workName, value.statName, shortDate); const storedVal = toKeep.get(shortKey); // If not stored, store it if (!storedVal) { toKeep.set(shortKey, { fullDate: value.date, key, }); } else if (value.date > storedVal.fullDate) { // If current date is later than stored date // Move stored item to delete toDelete.add(storedVal.key); // Set new stored item toKeep.set(shortKey, { fullDate: value.date, key, }); } else if (value.date < storedVal.fullDate) { // If current date is before stored date // Set it to be deleted toDelete.add(key); } }; if (mode === "hour") { dataPoints.forEach((value, key) => { findAndSortData(value, key, formatDate(value.date).yyyyMMdd_hh); }); } else if (mode === "day") { dataPoints.forEach((value, key) => { findAndSortData(value, key, formatDate(value.date).yyyyMMdd); }); } else if (mode === "month") { dataPoints.forEach((value, key) => { findAndSortData(value, key, formatDate(value.date).yyyyMM); }); } toDelete.forEach((item) => { localStorage.removeItem(item); }); drawChart(chartContainer, canvasTotal, "total"); }; const validateStatRow = (row, index) => { if (row.type !== "total" && row.type !== "work") { throw new Error(`Type "${row.type}" for row ${index} not recognized.`); } if (row.type !== "work" && row.workName !== "") { throw new Error(`Work name "${row.workName}" was found for row ${index}, but the type is not "work"`); } else if (row.type === "work" && row.workName === "") { throw new Error(`Type of row ${index} is "work", but work name is empty.`); } if (!Array.from(elementsTotal.keys()).includes(row.statName) && !Array.from(elementsWork.keys()).includes(row.statName)) { throw new Error(`Stat name "${row.statName}" for row ${index} not recognized.`); } if (!new Date(row.date).getDate()) { throw new Error(`Date "${row.date}" for row ${index} is invalid.`); } if (!row.value || Number(row.value) < 0) { throw new Error(`Value "${row.value}" for row ${index} is invalid.`); } return true; }; const plugin = { id: "customCanvasBackgroundColor", beforeDraw: (chart, _, options) => { const { ctx: context } = chart; context.save(); context.globalCompositeOperation = "destination-over"; context.fillStyle = options.color || "white"; context.fillRect(0, 0, chart.width, chart.height); context.restore(); }, }; // Style buttons to match skin const sheets = document.styleSheets; for (const sheet of sheets) { try { const rules = sheet.cssRules; for (const rule of rules) { if (rule instanceof CSSStyleRule && rule.selectorText.includes("button:focus")) { const newSelector = `${rule.selectorText}, #import-stats-input:focus+label`; sheet.deleteRule([...rules].indexOf(rule)); sheet.insertRule(`${newSelector} { ${rule.style.cssText} }`, rules.length); break; } } for (const rule of rules) { if (rule instanceof CSSStyleRule && rule.selectorText.includes(".actions label:hover")) { const newSelector = `${rule.selectorText}, button:hover`; sheet.deleteRule([...rules].indexOf(rule)); sheet.insertRule(`${newSelector} { ${rule.style.cssText} }`, rules.length); break; } } } catch (e) { // } } })();
