Merge branch 'feature/dashboard' into develop

Author: drorganvidez

app/modules/public/templates/public/index.html

@@ -283,6 +283,12 @@ <h2 class="fs-2 fw-bold text-body mb-6">
                           <div class="text-muted">Model downloads</div>
                         </div>
                       </div>
+                      <div class="text-end mt-4">
+                        <a href="{{ url_for('statistics.index') }}" class="btn btn-sm btn-light text-muted">
+                          <i data-feather="bar-chart-2" class="me-1" style="width:14px;height:14px;"></i>
+                          View full dashboard
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>

app/modules/statistics/assets/js/scripts.js

@@ -1 +1,93 @@
-console.log("Hi, I am a script loaded from statistics module");
+// Dashboard chart bootstrap. The server renders the series as JSON inside
+// `<script id="dashboard-data">` so this module has a single parse step and
+// no template-interpolation inside JS (safer, easier to cache, no CSP hacks).
+
+import Chart from "chart.js/auto";
+
+function readData() {
+    const el = document.getElementById("dashboard-data");
+    if (!el) return null;
+    try {
+        return JSON.parse(el.textContent || "{}");
+    } catch (e) {
+        console.error("dashboard: bad JSON payload", e);
+        return null;
+    }
+}
+
+function renderUploads(data) {
+    const canvas = document.getElementById("uploadsChart");
+    if (!canvas || !data.months?.length) return;
+    new Chart(canvas.getContext("2d"), {
+        type: "bar",
+        data: {
+            labels: data.months,
+            datasets: [
+                {
+                    label: "Datasets uploaded",
+                    data: data.uploads || [],
+                    backgroundColor: "rgba(54, 153, 255, 0.2)",
+                    borderColor: "rgba(54, 153, 255, 1)",
+                    borderWidth: 2,
+                    borderRadius: 4,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            plugins: { legend: { display: false } },
+            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
+        },
+    });
+}
+
+function renderActivity(data) {
+    const canvas = document.getElementById("activityChart");
+    if (!canvas || !data.months?.length) return;
+    new Chart(canvas.getContext("2d"), {
+        type: "line",
+        data: {
+            labels: data.months,
+            datasets: [
+                {
+                    label: "Downloads",
+                    data: data.downloads || [],
+                    backgroundColor: "rgba(246, 78, 96, 0.1)",
+                    borderColor: "rgba(246, 78, 96, 1)",
+                    borderWidth: 2,
+                    tension: 0.3,
+                    fill: true,
+                    pointRadius: 4,
+                },
+                {
+                    label: "Views",
+                    data: data.views || [],
+                    backgroundColor: "rgba(80, 205, 137, 0.1)",
+                    borderColor: "rgba(80, 205, 137, 1)",
+                    borderWidth: 2,
+                    tension: 0.3,
+                    fill: true,
+                    pointRadius: 4,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            plugins: { legend: { display: true, position: "top" } },
+            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
+        },
+    });
+}
+
+function init() {
+    const data = readData();
+    if (!data) return;
+    renderUploads(data);
+    renderActivity(data);
+}
+
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init, { once: true });
+} else {
+    init();
+}

app/modules/statistics/assets/js/webpack.config.js

@@ -1,15 +1,18 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  entry: path.resolve(__dirname, './scripts.js'),
-  output: {
-    filename: 'statistics.bundle.js',
-    path: path.resolve(__dirname, '../dist'),
-  },
-  resolve: {
-    fallback: {
-      "fs": false 
-    }
-  },
-  mode: 'development',
+    entry: path.resolve(__dirname, "./scripts.js"),
+    output: {
+        filename: "statistics.bundle.js",
+        path: path.resolve(__dirname, "../dist"),
+        module: true,
+    },
+    experiments: {
+        outputModule: true,
+    },
+    resolve: {
+        fallback: { fs: false },
+    },
+    mode: "development",
+    devtool: "source-map",
 };

app/modules/statistics/routes.py

@@ -1,8 +1,10 @@
 from flask import render_template
 
 from app.modules.statistics import statistics_bp
+from app.modules.statistics.services import DashboardService
 
 
 @statistics_bp.route("/statistics", methods=["GET"])
 def index():
-    return render_template("statistics/index.html")
+    dashboard = DashboardService().build_dashboard()
+    return render_template("statistics/index.html", dashboard=dashboard)