vict0rsch · vict0rsch · May 4, 2022 · May 4, 2022
diff --git a/src/content_scripts/content_script.css b/src/content_scripts/content_script.css
@@ -1,15 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Mukta:700");
 
-* {
-    box-sizing: border-box;
-}
-
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
 .leftcolumn {
     width: calc(100% - 25em) !important;
 }
@@ -217,17 +208,3 @@
     stroke-dashoffset: 174;
     transition-delay: 0.4s;
 }
-
-@keyframes drop {
-    20% {
-        transform: translate(0, -3px);
-    }
-
-    80% {
-        transform: translate(0, 2px);
-    }
-
-    95% {
-        transform: translate(0, 0);
-    }
-}
diff --git a/src/popup/js/popup.js b/src/popup/js/popup.js
@@ -157,6 +157,12 @@ const popupMain = async (url, is, manualTrigger = false) => {
             url: chrome.extension.getURL("src/fullMemory/fullMemory.html"),
         });
     });
+    // Open stats page
+    addListener("stats-page", "click", () => {
+        chrome.tabs.create({
+            url: chrome.extension.getURL("src/stats/stats.html"),
+        });
+    });
 
     // Set PDF title function
     // setAndHandleCustomPDFFunction(menu);

diff --git a/src/popup/min/popup.min.html b/src/popup/min/popup.min.html
diff --git a/src/popup/min/popup.min.js b/src/popup/min/popup.min.js
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -190,6 +190,8 @@ <h3 class="mt-4">⋗ Advanced</h3>
 		<p>Open your <a href="#" id="full-memory">full-page memory</a> to explore papers more easily, in a dedicated
 			tab.</p>
 
+		<p>Check out some <a href="#" id="stats-page">stats</a> about your PaperMemory usage.</p>
+
 		<p>Open the <a href="#" id="advanced-configuration">options page</a> to access advanced customization features:
 		</p>
 

diff --git a/src/stats/chart.min.js b/src/stats/chart.min.js
diff --git a/src/stats/stats.css b/src/stats/stats.css
@@ -0,0 +1,95 @@
+body {
+    margin: 0;
+    font-family: "Yantramanav";
+}
+
+svg {
+    stroke-width: 1.15;
+    stroke: #7c7f8b;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+code {
+    font-family: "Fira Code", monospace !important;
+    color: inherit !important;
+    padding: 1px 4px;
+    vertical-align: text-top;
+    border-radius: var(--round);
+    background-color: rgb(238, 238, 238);
+}
+
+.tabler-icon {
+    height: 32px;
+    width: 32px;
+    color: var(--red);
+    stroke-width: 1px;
+}
+
+/*
+--------------------
+-----  Header  -----
+--------------------
+*/
+#header {
+    background-color: var(--red);
+    padding: 12px;
+    color: white;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    border-radius: 0 0 75% 0/50%;
+    box-shadow: 14px 30px 122px -30px rgba(0, 0, 0, 0.75);
+    margin-bottom: 4rem;
+}
+#header-wrapper {
+    max-width: var(--maxWidth);
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#header-wrapper h1 {
+    font-weight: 300;
+}
+#header-icon {
+    stroke: white;
+    margin-left: 1rem;
+}
+
+/*
+--------------------
+-----  Footer  -----
+--------------------
+*/
+
+#footer {
+    border-top: 1px solid gray;
+    padding-top: 4rem;
+    margin-top: 4rem;
+}
+
+.flex-center-evenly {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+#footer a {
+    font-weight: 800;
+}
+
+/*
+------------------
+-----  Main  -----
+------------------
+*/
+
+#main-container {
+    max-width: 1000px;
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    padding-bottom: 4rem;
+}
diff --git a/src/stats/stats.html b/src/stats/stats.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>PaperMemory Stats</title>
+    <script src="../shared/min/theme.min.js"></script>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=Yantramanav:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,600&display=swap");
+        @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
+    </style>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="../shared/css/vars.css">
+    <link rel="stylesheet" type="text/css" href="stats.css">
+</head>
+
+<body>
+
+    <div id="header">
+        <div id="header-wrapper">
+            <h1>PaperMemory Stats</h1>
+            <svg viewBox="0 0 24 24" class="tabler-icon ml-3" id="header-icon">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
+            </svg>
+        </div>
+    </div>
+
+    <div id="main-container" class="row">
+
+        <div class="row">
+            <canvas id="sources-count"></canvas>
+        </div>
+        <div class="row">
+            <canvas id="visits-count"></canvas>
+        </div>
+
+
+
+
+
+
+
+        <div class="section" id="footer">
+
+            <p style="color: gray;"><em>If you like PaperMemory please consider sharing, starring on Github and rating
+                    on the Chrome/Firefox
+                    webstores</em></p>
+
+            <div class="flex-center-evenly">
+                <a href="https://github.com/vict0rsch">Author</a>
+                <a href="https://github.com/vict0rsch/PaperMemory">Code</a>
+                <a href="https://github.com/vict0rsch/PaperMemory/issues">Issues</a>
+                <a href="https://chrome.google.com/webstore/detail/arxivtools/hmebhknlgddhfbbdhgplnillngljgmdi">
+                    Chrome Webstore
+                </a>
+                <a href="https://addons.mozilla.org/en-US/firefox/addon/paper-memory/">
+                    Firefox Add-ons
+                </a>
+            </div>
+        </div>
+
+    </div>
+
+
+    <script src="../shared/min/utils.min.js"></script>
+    <script src="chart.min.js"></script>
+    <script src="stats.js"></script>
+</body>
+
+</html>
diff --git a/src/stats/stats.js b/src/stats/stats.js
@@ -0,0 +1,74 @@
+const makeBarChart = (data, labels, label, rgbColors, id, noXlabel = false) => {
+    const config = {
+        type: "bar",
+        data: {
+            datasets: [
+                {
+                    label,
+                    data,
+                    backgroundColor: `rgba(${rgbColors}, 0.6)`,
+                    borderColor: `rgba(${rgbColors}, 1)`,
+                    borderWidth: 1,
+                },
+            ],
+            labels,
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true,
+                },
+                x: {
+                    display: !noXlabel,
+                },
+            },
+        },
+    };
+    const ctx = document.getElementById(id).getContext("2d");
+    const chart = new Chart(ctx, config);
+};
+
+const makeSourcesChart = async () => {
+    let sources = {};
+
+    for (const paper of global.state.sortedPapers) {
+        if (!sources.hasOwnProperty(paper.source)) {
+            sources[paper.source] = 0;
+        }
+        sources[paper.source] += 1;
+    }
+
+    const entries = Object.entries(sources).sort((a, b) => b[1] - a[1]);
+    console.log("entries: ", entries);
+
+    makeBarChart(
+        entries.map(([source, count]) => count),
+        entries.map(([source, count]) => source),
+        "Number of papers for each source",
+        "163, 23, 23",
+        "sources-count"
+    );
+};
+const makeVisitsChart = async () => {
+    let counts = global.state.sortedPapers.map((paper) => paper.count);
+    let titles = global.state.sortedPapers.map((paper) => paper.title);
+
+    let entries = counts
+        .map((count, i) => [titles[i], count])
+        .sort((a, b) => b[1] - a[1]);
+
+    makeBarChart(
+        entries.map(([source, count]) => count),
+        entries.map(([source, count]) => source),
+        "Number of visits per paper",
+        "75, 192, 192",
+        "visits-count",
+        true
+    );
+};
+
+(async () => {
+    await initState();
+    makeSourcesChart();
+    makeVisitsChart();
+})();