Add monthly views chart

2025-10-08 16:52:40 +02:00
parent 2880547f3e
commit fffa320c08
8 changed files with 144 additions and 30 deletions
--- a/resources/js/stats.js
+++ b/resources/js/stats.js
@@ -0,0 +1,73 @@
+import Chart from 'chart.js/auto';
+
+// Theming
+if (localStorage.theme !== 'light') {
+    Chart.defaults.color = "#ADBABD";
+    Chart.defaults.borderColor = "rgba(255,255,255,0.1)";
+    Chart.defaults.backgroundColor = "rgba(255,255,0,0.1)";
+    Chart.defaults.elements.line.borderColor = "rgba(255,255,0,0.4)";
+}
+
+// Get Tags from API
+window.axios.get('/v1/monthly-views').then(function (response) {
+    if (response.status != 200) {
+        return;
+    }
+
+    const data = {
+        labels: response.data.map((entry) => { return entry.date }),
+        datasets: [{
+            label: 'Views',
+            fill: false,
+            backgroundColor: 'rgba(190, 18, 60, 0.3)',
+            borderColor: 'rgba(190, 18, 60, 1.0)',
+            cubicInterpolationMode: 'monotone',
+            data: response.data.map((entry) => { return entry.count }),
+        }]
+    }
+
+    const config = {
+        type: 'line',
+        data: data,
+        options: {
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Views the last 30 days',
+                    font: {
+                        size: 18
+                    }
+                },
+            },
+            interaction: {
+                intersect: false,
+            },
+            scales: {
+                x: {
+                    display: true,
+                    title: {
+                        display: true
+                    }
+                },
+                y: {
+                    display: true,
+                    title: {
+                        display: true,
+                        text: 'Views'
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 40000
+                }
+            }
+        },
+        };
+
+    const monthlyViewChart = new Chart(
+        document.getElementById('monthlyChart'),
+        config
+    );
+}).catch(function (error) {
+    console.log(error);
+});
+