Add WIP user page activity chart by month

Spybot2/settings.py

@@ -75,16 +75,6 @@
     'django_bootstrap5',
 ]
 
-MIDDLEWARE = [
-    'django.middleware.security.SecurityMiddleware',
-    'django.contrib.sessions.middleware.SessionMiddleware',
-    'django.middleware.common.CommonMiddleware',
-    'django.middleware.csrf.CsrfViewMiddleware',
-    'django.contrib.auth.middleware.AuthenticationMiddleware',
-    'django.contrib.messages.middleware.MessageMiddleware',
-    'django.middleware.clickjacking.XFrameOptionsMiddleware',
-]
-
 ROOT_URLCONF = 'Spybot2.urls'
 
 TEMPLATES = [
@@ -159,6 +149,8 @@
     'spybot.auth.backend.link_backend.LinkAuthBackend',
 ]
 
+LOGIN_URL = '/login'
+
 # Passkeys
 FIDO_SERVER_NAME = "Spybot local"
 #KEY_ATTACHMENT = passkeys.Attachment.CROSS_PLATFORM

frontend/chart_utils.js

@@ -0,0 +1,23 @@
+export const onChartRenderTrigger = (now, call) => {
+    const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            if (mutation.type === "attributes" && mutation.attributeName === 'data-bs-theme') {
+                call()
+            }
+        });
+    });
+    observer.observe(document.body, {
+        attributes: true //configure it to listen to attribute changes
+    });
+
+    if (now === true) call();
+}
+
+export const onChartReady = (call) => {
+    document.addEventListener("DOMContentLoaded", call)
+};
+
+export const isDarkMode = () => {
+    return document.body.classList.contains("theme-dark");
+}
+

frontend/early.js

@@ -0,0 +1,5 @@
+// anything that needs to be loaded immediately upon page load goes here
+
+import * as chart_utils from  './chart_utils'
+
+Object.assign(window, chart_utils)

frontend/rollup.config.mjs

@@ -1,7 +1,7 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import css from "rollup-plugin-import-css";
 
-export default {
+export default [{
   context: 'window',
   input: 'main.js',
   output: {
@@ -10,4 +10,14 @@ export default {
     name: 'jsbundle',
   },
   plugins: [nodeResolve(), css({'output': 'main.css'})]
-};
+},
+{
+  context: 'window',
+  input: 'early.js',
+  output: {
+    dir: 'output',
+    format: 'iife',
+    name: 'jsbundle',
+  },
+  plugins: [nodeResolve()]
+}];

spybot/static/theme.js

@@ -31,7 +31,9 @@ function configureTheme(wantedTheme) {
         document.body.classList.remove('theme-dark', 'theme-light');
         document.body.classList.add(`theme-${realTheme}`);
         if (realTheme === 'dark') {
-            document.body.setAttribute("data-bs-theme", realTheme)
+            if (document.body.getAttribute('data-bs-theme') !== realTheme) {
+                document.body.setAttribute("data-bs-theme", realTheme)
+            }
         } else {
             document.body.removeAttribute("data-bs-theme")
         }
@@ -51,6 +53,6 @@ function configureTheme(wantedTheme) {
     applyTheme(theme);
 }
 
-window.matchMedia("(prefers-color-scheme: dark)").onchange = configureTheme
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', configureTheme)
 // configure theme now
 configureTheme()

spybot/templates/spybot/base/base.html

@@ -12,6 +12,7 @@
 
         <link rel="stylesheet" href="{% static 'main.css' %}">
         <link rel="stylesheet" href="{% static 'styles.css' %}">
+        <script src="{% static 'early.js' %}"></script>
         <script src="{% static 'main.js' %}" defer></script>
         {% block header %}
         {%  endblock %}

spybot/templates/spybot/home/activity_fragment.html

@@ -114,12 +114,9 @@ <h3 class="card-title my-2">Recent activity</h3>
             })).render();
         }
 
-        console.log("checking document loading state")
         if (document.readyState === "loading") {
-            console.log("loading");
             document.addEventListener("DOMContentLoaded", renderActivityChart);
         } else {
-            console.log("already loaded");
             renderActivityChart();
         }
     </script>

spybot/templates/spybot/home/channel_tree_map.html

@@ -11,67 +11,78 @@ <h3 class="card-title my-2">Channel popularity</h3>
 function getCSSVar(name) {
     return getComputedStyle(document.body).getPropertyValue(name)
 }
-document.addEventListener("DOMContentLoaded", function () {
-    if (!window.ApexCharts) return
+onChartReady(() => {
     const raw_data = JSON.parse(document.querySelector('#channel-data').textContent)
-    new ApexCharts(document.querySelector("#chart-channel-tree-map"), {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
+
+    const chartOptions = () => {
+        return {
+            chart: {
+                type: 'treemap',
+                toolbar: {
+                    show: false,
+                },
+                zoom: {enabled: false},
+                height: '100%',
+                parentHeightOffset: 0,
+            },
+            series: [
+                {
+                    name: 'Talking',
+                    data: raw_data.filter(o => o.name !== "AFK" && o.name !== "bei Bedarf anstupsen")
+                        .map(o => { return {x: o.name, y: o.percentage}})
+                },
+                {
+                    name: 'Inactive',
+                    data: raw_data.filter(o => o.name === "AFK" || o.name === "bei Bedarf anstupsen")
+                        .map(o => { return {x: o.name, y: o.percentage}})
+                }
+            ],
+            plotOptions: {
+                treemap: {
+                    enableShades: true,
+                    shadeIntensity: 0.3,
+                }
             },
-            zoom: {enabled: false},
-            height: '100%',
-            parentHeightOffset: 0,
-        },
-        series: [
-            {
-                name: 'Talking',
-                data: raw_data.filter(o => o.name !== "AFK" && o.name !== "bei Bedarf anstupsen")
-                    .map(o => { return {x: o.name, y: o.percentage}})
+            stroke:{
+                width: 5,
+                colors: [getCSSVar('--tblr-bg-surface')],
             },
-            {
-                name: 'Inactive',
-                data: raw_data.filter(o => o.name === "AFK" || o.name === "bei Bedarf anstupsen")
-                    .map(o => { return {x: o.name, y: o.percentage}})
-            }
-        ],
-        plotOptions: {
-            treemap: {
-                enableShades: true,
-                shadeIntensity: 0.3,
-            }
-        },
-        stroke:{
-            width: 5,
-            colors: [getCSSVar('--tblr-bg-surface')],
-        },
-        colors: [tabler.getColor("primary"), tabler.getColor("red")],
-        dataLabels: {
-            enabled: true,
-            offsetY: -5,
-            formatter: function(text, op) {
-                return [text, op.value.toFixed(1) + "%"]
+            colors: [tabler.getColor("primary"), tabler.getColor("red")],
+            dataLabels: {
+                enabled: true,
+                offsetY: -5,
+                formatter: function(text, op) {
+                    return [text, op.value.toFixed(1) + "%"]
+                },
             },
-        },
-        grid: {
-            padding: {
-                top: -20,
-                right: 0,
-                left: 0,
-                bottom: 0
+            grid: {
+                padding: {
+                    top: -20,
+                    right: 0,
+                    left: 0,
+                    bottom: 0
+                },
             },
-        },
-        tooltip:{
-            theme: 'dark',
-            marker: {show: false},
-            y: {
-                formatter: y => { return y.toFixed(1) + "%" },
+            tooltip:{
+                theme: 'dark',
+                marker: {show: false},
+                y: {
+                    formatter: y => { return y.toFixed(1) + "%" },
+                },
+            },
+            legend: {
+                show: false,
             },
-        },
-        legend: {
-            show: false,
-        },
-    }).render()
+        };
+    }
+    let chart = null;
+
+    onChartRenderTrigger(true, () => {
+        if (chart !== null) {
+            chart.destroy();
+        }
+        chart = new ApexCharts(document.querySelector("#chart-channel-tree-map"), chartOptions())
+        chart.render();
+    });
 });
 </script>

spybot/templates/spybot/home/tod_histogram.html

@@ -72,8 +72,8 @@ <h3 class="card-title my-2">Time of day histogram</h3>
             type: "numeric",
             min: 0,
             max: 24,
-            tickAmount: 12,
-            labels: {formatter: x => x /*Math.round(x)*/},
+            tickAmount: 11,
+            labels: {formatter: x => `${x <= 12 ? x : x-12}${x < 12 ? 'am' : 'pm'}`},
             title: {
                 text: "Hours",
                 offsetY: 68,

spybot/templates/spybot/timeline.html

@@ -84,7 +84,7 @@
             x: {
                 format: 'HH:mm:ss'
             },
-            theme: document.body.classList.contains("theme-dark") ? 'dark' : 'light'
+            theme: isDarkMode() ? 'dark' : 'light'
         },
         theme: {
             palette: 'palette2'