ufs statistic graph

Author: hoang.tran12

popup/index.js

@@ -208,9 +208,10 @@ function createScriptButton(script, isFavorite = false) {
   if (script.icon && typeof script.icon === "string") {
     // image icon
     if (
-      script.icon.indexOf("http://") === 0 ||
-      script.icon.indexOf("https://") === 0 ||
-      script.icon.indexOf("data:image") === 0
+      script.icon.startsWith("/") ||
+      script.icon.startsWith("http://") ||
+      script.icon.startsWith("https://") ||
+      script.icon.startsWith("data:image")
     ) {
       const icon = document.createElement("img");
       icon.classList.add("icon-img");

popup/tabs.js

@@ -30,6 +30,7 @@ const tabs = [
     ...CATEGORY.search,
     scripts: [
       s._test,
+      s._ufs_statistic,
       {
         id: "recommend_search_userscript",
         icon: "https://www.userscript.zone/favicon.ico",

scripts/_test.js

@@ -9,31 +9,5 @@ export default {
     vi: "",
   },
 
-  onDocumentStart: async () => {
-    function blobToDataURL(blob, cb) {
-      var a = new FileReader();
-      a.readAsDataURL(blob);
-      a.onload = function (e) {
-        cb(e.target.result);
-      };
-      a.onerror = function (e) {
-        cb(null);
-      };
-    }
-
-    window.blobUrlMap = new Map();
-    const createObjectURLProxy = new Proxy(window.URL.createObjectURL, {
-      apply: function (target, thisArg, argumentsList) {
-        const blob = argumentsList[0];
-        const blobUrl = target.apply(thisArg, argumentsList);
-        window.blobUrlMap.set(blobUrl, blob);
-        console.log(blobUrl, blob);
-        blobToDataURL(blob, (dataUrl) => {
-          console.log(dataUrl);
-        });
-        return blobUrl;
-      },
-    });
-    window.URL.createObjectURL = createObjectURLProxy;
-  },
+  onDocumentEnd: async () => {},
 };

scripts/_ufs_statistic.js

@@ -0,0 +1,124 @@
+export default {
+  icon: "/assets/icon32.png",
+  name: {
+    en: "Useful-scripts statistic",
+    vi: "Useful-scripts statistic",
+  },
+  description: {
+    en: "Dev only",
+    vi: "Dev only",
+  },
+
+  whiteList: ["https://useful-script-statistic.glitch.me/log*"],
+
+  onDocumentEnd: async () => {
+    javascript: (function () {
+      UfsGlobal.DOM.injectScriptSrc(
+        "https://cdn.jsdelivr.net/npm/chart.js",
+        (success, fail) => {
+          if (fail) {
+            alert("ERROR: " + fail);
+            return;
+          }
+
+          let logData = document.body.innerText.split("\n");
+
+          // ======================== Per hours ========================
+
+          // Function to extract time from log data
+          function extractTime(log) {
+            let lastColon = log.lastIndexOf(":");
+            let time = log.substring(0, lastColon);
+            return new Date(time);
+          }
+
+          // Count logs per hour
+          const logsPerHour = Array(24).fill(0);
+          logData.forEach((log) => {
+            const hour = extractTime(log).getHours();
+            logsPerHour[hour]++;
+          });
+
+          // Chart.js code to draw the graph
+          const canvas = document.createElement("canvas");
+          canvas.style.cssText = "max-width: 900px; max-height: 300px;";
+          document.body.prepend(canvas);
+          const ctx = canvas.getContext("2d");
+          const logTimelineChart = new Chart(ctx, {
+            type: "line",
+            data: {
+              labels: Array.from({ length: 24 }, (_, i) => `${i}:00`),
+              datasets: [
+                {
+                  label: "Number of Logs",
+                  data: logsPerHour,
+                  borderColor: "rgb(75, 192, 192)",
+                  tension: 0.1,
+                  fill: false,
+                },
+              ],
+            },
+            options: {
+              responsive: true,
+              interaction: {
+                intersect: false,
+              },
+              scales: {
+                y: {
+                  beginAtZero: true,
+                },
+              },
+            },
+          });
+
+          // ======================== Per script name ========================
+          const scriptNameCount = new Map();
+          logData.forEach((log) => {
+            let lastColon = log.lastIndexOf(":");
+            let lastArrow = log.lastIndexOf("->");
+            let scriptName = log.substring(lastColon + 1, lastArrow - 1);
+            scriptNameCount.set(
+              scriptName,
+              (scriptNameCount.get(scriptName) || 0) + 1
+            );
+          });
+          const canvas2 = document.createElement("canvas");
+          canvas2.style.cssText = "max-width: 300px; max-height: 300px;";
+          document.body.prepend(canvas2);
+          const ctx2 = canvas2.getContext("2d");
+          const scriptNameChart = new Chart(ctx2, {
+            type: "doughnut",
+            data: {
+              labels: Array.from(scriptNameCount.keys()),
+              datasets: [
+                {
+                  data: Array.from(scriptNameCount.values()),
+                  backgroundColor: [
+                    "rgb(255, 99, 132)",
+                    "rgb(255, 159, 64)",
+                    "rgb(255, 205, 86)",
+                    "rgb(75, 192, 192)",
+                    "rgb(54, 162, 235)",
+                    "rgb(153, 102, 255)",
+                    "rgb(201, 203, 207)",
+                  ],
+                  hoverOffset: 4,
+                },
+              ],
+            },
+            options: {
+              plugins: {
+                legend: {
+                  display: false,
+                },
+              },
+              responsive: true,
+            },
+          });
+
+          // ======================== Per script name Per hour ========================
+        }
+      );
+    })();
+  },
+};

scripts/index.js

@@ -161,6 +161,7 @@ import auto_redirectLargestImageSrc from "./auto_redirectLargestImageSrc.js";
 import textToQrCode from "./textToQrCode.js";
 import insta_anonymousStoryViewer from "./insta_anonymousStoryViewer.js";
 import removeWebLimit from "./removeWebLimit.js";
+import _ufs_statistic from "./_ufs_statistic.js";
 
 // inject badges
 const allScripts = {
@@ -338,6 +339,7 @@ const allScripts = {
   textToQrCode: addBadge(textToQrCode, BADGES.new),
   insta_anonymousStoryViewer: addBadge(insta_anonymousStoryViewer, BADGES.new),
   removeWebLimit: addBadge(removeWebLimit, BADGES.hot),
+  _ufs_statistic: _ufs_statistic,
 };
 
 // alert(Object.keys(allScripts).length);