Fetch and visualize user script data with Chart.js and display totals below the chart
Versão de:
// ==UserScript==
// @name GrreasyFork User Script Data Visualization
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Fetch and visualize user script data with Chart.js and display totals below the chart
// @author aspen138
// @match https://greasyfork.org/*/users/*
// @grant none
// @license MIT
// @icon https://greasyfork.org//vite/assets/blacklogo16-37ZGLlXh.png
// ==/UserScript==
(function() {
'use strict';
// Function to inject Chart.js from a CDN if the target element exists
const injectChartJs = () => {
const userHeader = document.querySelector('#about-user h2');
if (!userHeader) return;
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
script.onload = () => fetchDataAndPlot(); // Fetch data and plot chart once Chart.js is loaded
document.head.appendChild(script);
};
// Function to fetch user data
const getUserData = (userID) => {
return fetch(`https://${window.location.hostname}/users/${userID}.json`)
.then((response) => {
console.log(`${response.status}: ${response.url}`);
return response.json();
});
};
// Function to plot the chart
const plotDistribution = (labels, totalInstalls, dailyInstalls) => {
const canvasHtml = '<canvas id="installDistributionCanvas" width="100" height="50"></canvas>';
const userHeader = document.querySelector('#about-user h2');
if (userHeader) {
userHeader.insertAdjacentHTML('afterend', canvasHtml);
const ctx = document.getElementById('installDistributionCanvas').getContext('2d');
// Plot chart
new Chart(ctx, {
type: 'bar', // Change this to 'line', 'bar', etc. as needed
data: {
labels: labels, // X-axis labels
datasets: [{
label: 'Total Installs',
data: totalInstalls, // Y-axis data for Total Installs
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
yAxisID: 'y-axis-1', // Associate this dataset with the first y-axis
},
{
label: 'Daily Installs',
data: dailyInstalls, // Y-axis data for Daily Installs
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
yAxisID: 'y-axis-2', // Associate this dataset with the second y-axis
}
]
},
options: {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left', // This places the first y-axis on the left
beginAtZero: true,
},
{
id: 'y-axis-2',
type: 'linear',
position: 'right', // This places the second y-axis on the right
beginAtZero: true,
grid: {
drawOnChartArea: false, // Ensures grid lines from this axis do not overlap with the first axis
},
}
]
}
}
});
}
};
// Function to display totals
const displayTotals = (daily, total, publishedScriptsNumber) => {
const userHeader = document.querySelector('#about-user h2');
const language = document.documentElement.lang; // Get the current language of the document
let dailyInstallsText = '';
let totalInstallsText = '';
// Determine the text based on the current language
switch (language) {
case 'zh-CN':
publishedScriptsNumber = `已发布脚本总数：${publishedScriptsNumber}`;
dailyInstallsText = `该用户所有脚本的今日总安装次数：${daily}`;
totalInstallsText = `该用户所有脚本的迄今总安装次数：${total}`;
break;
case 'zh-TW':
publishedScriptsNumber = `已發布腳本總數：${publishedScriptsNumber}`;
dailyInstallsText = `該用戶所有腳本的今日總安裝次數：${daily}`;
totalInstallsText = `該用戶所有腳本的迄今總安裝次數：${total}`;
break;
case 'ja':
publishedScriptsNumber = `公開されたスクリプトの合計：${publishedScriptsNumber}`;
dailyInstallsText = `本日の全スクリプトの合計インストール回数：${daily}`;
totalInstallsText = `全スクリプトの累計インストール回数：${total}`;
break;
case 'ko':
publishedScriptsNumber = `게시된 스크립트 총 수: ${publishedScriptsNumber}`;
dailyInstallsText = `해당 사용자의 모든 스크립트에 대한 오늘의 총 설치 횟수: ${daily}`;
totalInstallsText = `해당 사용자의 모든 스크립트에 대한 총 설치 횟수: ${total}`;
break;
default:
publishedScriptsNumber = `Number of published scripts: ${publishedScriptsNumber}`;
dailyInstallsText = `Total daily installations for all scripts: ${daily}`;
totalInstallsText = `Total installations to date for all scripts: ${total}`;
}
if (userHeader) {
userHeader.insertAdjacentHTML('afterend', `
<div>${publishedScriptsNumber}</div>
<div>${dailyInstallsText}</div>
<div>${totalInstallsText}</div>
`);
}
};
// Function to fetch data and plot the chart
const fetchDataAndPlot = () => {
const userID = '1177387'; // Replace this with the desired user ID
getUserData(userID)
.then((data) => {
const filteredScripts = data.scripts.filter(script => !script.deleted);
const labels = filteredScripts.map(script => script.name);
const totalInstalls = filteredScripts.map(script => script.total_installs);
const dailyInstalls = filteredScripts.map(script => script.daily_installs);
const totalDailyInstalls = dailyInstalls.reduce((sum, value) => sum + value, 0);
const totalTotalInstalls = totalInstalls.reduce((sum, value) => sum + value, 0);
const publishedScriptsNumber = filteredScripts.length;
plotDistribution(labels, totalInstalls, dailyInstalls);
displayTotals(totalDailyInstalls, totalTotalInstalls, publishedScriptsNumber);
})
.catch((error) => console.error('Error fetching user data:', error));
};
// Inject Chart.js and initiate data fetching and plotting
injectChartJs();
})();