☰

Greasy Fork is available in English.

GrreasyFork User Script Data Visualization

Fetch and visualize user script data with Chart.js and display totals below the chart

Pada tanggal 05 Juli 2024. Lihat %(latest_version_link).

  1. // ==UserScript==
  2. // @name         GrreasyFork User Script Data Visualization
  3. // @name:en      GrreasyFork User Script Data Visualization
  4. // @name:es      Visualización de datos del script de usuario de GrreasyFork
  5. // @name:fr      Visualisation des données de script utilisateur de GrreasyFork
  6. // @name:zh      GrreasyFork 用户发布的脚本数据可视化
  7. // @name:zh-TW   GrreasyFork 用戶發佈的腳本數據視覺化
  8. // @namespace    http://tampermonkey.net/
  9. // @version      0.2
  10. // @description  Fetch and visualize user script data with Chart.js and display totals below the chart
  11. // @description:en Fetch and visualize user script data with Chart.js and display totals below the chart
  12. // @description:es Obtener y visualizar datos del script de usuario con Chart.js y mostrar totales debajo del gráfico
  13. // @description:fr Récupérer et visualiser les données du script utilisateur avec Chart.js et afficher les totaux sous le graphique
  14. // @description:zh-TW 使用 Chart.js 獲取和可視化使用者腳本數據，並在圖表下方顯示總數
  15. // @description:zh    使用Chart.js获取和可视化使用者脚本数据，并在图表下方显示总数
  16. // @locale:en    en
  17. // @locale:es    es
  18. // @locale:fr    fr
  19. // @locale:zh-TW zh-TW
  20. // @author       aspen138
  21. // @match        *://greatest.deepsurf.us/*/users/*
  22. // @grant        none
  23. // @license      MIT
  24. // @icon         https://greatest.deepsurf.us//vite/assets/blacklogo16-37ZGLlXh.png
  25. // ==/UserScript==
  26.  
  27.  
  28.  
  29. (function() {
  30.     'use strict';
  31.  
  32.     // Function to inject Chart.js from a CDN if the target element exists
  33.     const injectChartJs = () => {
  34.         const userHeader = document.querySelector('#about-user h2');
  35.         if (!userHeader) return;
  36.  
  37.         const script = document.createElement('script');
  38.         script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
  39.         script.onload = () => fetchDataAndPlot(); // Fetch data and plot chart once Chart.js is loaded
  40.         document.head.appendChild(script);
  41.     };
  42.  
  43.     // Function to fetch user data
  44.     const getUserData = (userID) => {
  45.         return fetch(`https://${window.location.hostname}/users/${userID}.json`)
  46.             .then((response) => {
  47.                 console.log(`${response.status}: ${response.url}`);
  48.                 return response.json();
  49.             });
  50.     };
  51.  
  52.     // Function to plot the chart
  53.     const plotDistribution = (labels, totalInstalls, dailyInstalls) => {
  54.         const canvasHtml = '<canvas id="installDistributionCanvas" width="100" height="50"></canvas>';
  55.         const userHeader = document.querySelector('#about-user h2');
  56.         if (userHeader) {
  57.             userHeader.insertAdjacentHTML('afterend', canvasHtml);
  58.             const ctx = document.getElementById('installDistributionCanvas').getContext('2d');
  59.  
  60.             // Plot chart
  61.             new Chart(ctx, {
  62.                 type: 'bar', // Change this to 'line', 'bar', etc. as needed
  63.                 data: {
  64.                     labels: labels, // X-axis labels
  65.                     datasets: [{
  66.                             label: 'Total Installs',
  67.                             data: totalInstalls, // Y-axis data for Total Installs
  68.                             backgroundColor: 'rgba(54, 162, 235, 0.2)',
  69.                             borderColor: 'rgba(54, 162, 235, 1)',
  70.                             borderWidth: 1,
  71.                             yAxisID: 'y-axis-1', // Associate this dataset with the first y-axis
  72.                         },
  73.                         {
  74.                             label: 'Daily Installs',
  75.                             data: dailyInstalls, // Y-axis data for Daily Installs
  76.                             backgroundColor: 'rgba(255, 99, 132, 0.2)',
  77.                             borderColor: 'rgba(255, 99, 132, 1)',
  78.                             borderWidth: 1,
  79.                             yAxisID: 'y-axis-2', // Associate this dataset with the second y-axis
  80.                         }
  81.                     ]
  82.                 },
  83.                 options: {
  84.                     scales: {
  85.                         yAxes: [{
  86.                                 id: 'y-axis-1',
  87.                                 type: 'linear',
  88.                                 position: 'left', // This places the first y-axis on the left
  89.                                 beginAtZero: true,
  90.                             },
  91.                             {
  92.                                 id: 'y-axis-2',
  93.                                 type: 'linear',
  94.                                 position: 'right', // This places the second y-axis on the right
  95.                                 beginAtZero: true,
  96.                                 grid: {
  97.                                     drawOnChartArea: false, // Ensures grid lines from this axis do not overlap with the first axis
  98.                                 },
  99.                             }
  100.                         ]
  101.                     }
  102.                 }
  103.             });
  104.         }
  105.     };
  106.  
  107.     // Function to display totals
  108.     const displayTotals = (daily, total, publishedScriptsNumber) => {
  109.         const userHeader = document.querySelector('#about-user h2');
  110.         const language = document.documentElement.lang; // Get the current language of the document
  111.  
  112.         let dailyInstallsText = '';
  113.         let totalInstallsText = '';
  114.  
  115.         // Determine the text based on the current language
  116.         switch (language) {
  117.             case 'zh-CN':
  118.                 publishedScriptsNumber = `已发布脚本总数：${publishedScriptsNumber}`;
  119.                 dailyInstallsText = `该用户所有脚本的今日总安装次数：${daily}`;
  120.                 totalInstallsText = `该用户所有脚本的迄今总安装次数：${total}`;
  121.                 break;
  122.             case 'zh-TW':
  123.                 publishedScriptsNumber = `已發布腳本總數：${publishedScriptsNumber}`;
  124.                 dailyInstallsText = `該用戶所有腳本的今日總安裝次數：${daily}`;
  125.                 totalInstallsText = `該用戶所有腳本的迄今總安裝次數：${total}`;
  126.                 break;
  127.             case 'ja':
  128.                 publishedScriptsNumber = `公開されたスクリプトの合計：${publishedScriptsNumber}`;
  129.                 dailyInstallsText = `本日の全スクリプトの合計インストール回数：${daily}`;
  130.                 totalInstallsText = `全スクリプトの累計インストール回数：${total}`;
  131.                 break;
  132.             case 'ko':
  133.                 publishedScriptsNumber = `게시된 스크립트 총 수: ${publishedScriptsNumber}`;
  134.                 dailyInstallsText = `해당 사용자의 모든 스크립트에 대한 오늘의 총 설치 횟수: ${daily}`;
  135.                 totalInstallsText = `해당 사용자의 모든 스크립트에 대한 총 설치 횟수: ${total}`;
  136.                 break;
  137.             default:
  138.                 publishedScriptsNumber = `Number of published scripts: ${publishedScriptsNumber}`;
  139.                 dailyInstallsText = `Total daily installations for all scripts: ${daily}`;
  140.                 totalInstallsText = `Total installations to date for all scripts: ${total}`;
  141.         }
  142.  
  143.         if (userHeader) {
  144.             userHeader.insertAdjacentHTML('afterend', `
  145.                 <div>${publishedScriptsNumber}</div>
  146.                 <div>${dailyInstallsText}</div>
  147.                 <div>${totalInstallsText}</div>
  148.             `);
  149.         }
  150.     };
  151.  
  152.     // Function to fetch data and plot the chart
  153.     const fetchDataAndPlot = () => {
  154.         const currentURL = window.location.href;
  155.         const userIDMatch = currentURL.match(/users\/(\d+)-/);
  156.         const userID = userIDMatch ? userIDMatch[1] : null;
  157.  
  158.         getUserData(userID)
  159.             .then((data) => {
  160.                 //console.log("data=", data);
  161.                 const scripts = data.all_listable_scripts || data.scripts || [];
  162.                 const filteredScripts = scripts.filter(script => !script.deleted);
  163.                 const labels = filteredScripts.map(script => script.name);
  164.                 const totalInstalls = filteredScripts.map(script => script.total_installs);
  165.                 const dailyInstalls = filteredScripts.map(script => script.daily_installs);
  166.                 const totalDailyInstalls = dailyInstalls.reduce((sum, value) => sum + value, 0);
  167.                 const totalTotalInstalls = totalInstalls.reduce((sum, value) => sum + value, 0);
  168.                 const publishedScriptsNumber = filteredScripts.length;
  169.  
  170.                 plotDistribution(labels, totalInstalls, dailyInstalls);
  171.                 displayTotals(totalDailyInstalls, totalTotalInstalls, publishedScriptsNumber);
  172.             })
  173.             .catch((error) => console.error('Error fetching user data:', error));
  174.     };
  175.  
  176.     // Inject Chart.js and initiate data fetching and plotting
  177.     injectChartJs();
  178. })();