From 1c4921c9a894421f556bb3fcb871f554a9c9f336 Mon Sep 17 00:00:00 2001
From: Ludvig Hagmar <--global>
Date: Mon, 14 Oct 2024 17:59:15 +0200
Subject: [PATCH 1/4] Fix bug in middleware and allow to filter statistics for
 logged in

---
 .../Controllers/StatisticsController.cs       | 13 ++++-
 src/AKCore/Middlewares/MetricsMiddleware.cs   |  1 +
 .../Statistics/StatisticsApp.vue              | 50 +++++++++++++++++--
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/AKCore/Controllers/StatisticsController.cs b/src/AKCore/Controllers/StatisticsController.cs
index a3c56ab9..e54f0449 100644
--- a/src/AKCore/Controllers/StatisticsController.cs
+++ b/src/AKCore/Controllers/StatisticsController.cs
@@ -24,10 +24,21 @@ public ActionResult Index()
     }
 
     [Route("Model")]
-    public async Task<ActionResult> GetModel()
+    public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut = true)
     {
+        var all = loggedIn && loggedOut;
+        if(!loggedIn && !loggedOut) {
+            return Json(new
+            {
+                items = new List<string>(),
+                dates = new List<StatisticsItemModel>()
+            });
+        }
+
+
         var dataItems = await db.RequestsDatas
             .Where(x => x.Created > DateTime.UtcNow.AddDays(-30))
+            .Where(x => all || x.LoggedIn == loggedIn)
             .OrderBy(x => x.Created)
             .ToListAsync();
 
diff --git a/src/AKCore/Middlewares/MetricsMiddleware.cs b/src/AKCore/Middlewares/MetricsMiddleware.cs
index f41b971a..31f24b54 100644
--- a/src/AKCore/Middlewares/MetricsMiddleware.cs
+++ b/src/AKCore/Middlewares/MetricsMiddleware.cs
@@ -68,6 +68,7 @@ private async Task SetupInterval()
                     await metricsService.SaveMetrics(loggedOutRouteRequests, false, nowTime);
                 }
                 loggedInRouteRequests = [];
+                loggedOutRouteRequests = [];
             }
             catch
             {
diff --git a/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue b/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
index 759d3a3f..c640f1c7 100644
--- a/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
+++ b/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
@@ -1,11 +1,33 @@
 <template>
   <div>
     <p>Statistik</p>
+    <div class="checkbox">
+      <label>
+        <input
+          name="loggedIn"
+          class="logged"
+          v-model="loggedIn"
+          type="checkbox"
+        />
+        Inloggade
+      </label>
+
+      <label>
+        <input
+          name="loggedOut"
+          class="logged"
+          v-model="loggedOut"
+          type="checkbox"
+        />
+        Utloggade
+      </label>
+    </div>
+    <div class="checkbox"></div>
     <Line class="line-graph" v-if="data" :data="data" :options="options" />
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref, computed, watch } from "vue";
 import { getFromApi } from "../../services/apiservice";
 import { RequestsResponse } from "./models";
 import {
@@ -33,6 +55,16 @@ ChartJS.register(
 );
 
 const dataPoints = ref<RequestsResponse | null>(null);
+const loggedIn = ref<boolean>(true);
+const loggedOut = ref<boolean>(true);
+
+watch(loggedIn, () => {
+  reloadData();
+});
+
+watch(loggedOut, () => {
+  reloadData();
+});
 
 const data = computed(() =>
   dataPoints.value
@@ -79,14 +111,26 @@ const options: ChartOptions<"line"> = {
   },
 };
 
-onMounted(() => {
-  getFromApi<RequestsResponse>(window.location.href + "/model").then((res) => {
+const reloadData = () => {
+  getFromApi<RequestsResponse>(
+    window.location.href +
+      `/model?loggedIn=${loggedIn.value}&loggedOut=${loggedOut.value}`,
+  ).then((res) => {
     dataPoints.value = res;
   });
+};
+
+onMounted(() => {
+  reloadData();
 });
 </script>
 <style lang="scss" scoped>
 .line-graph {
   max-height: 50vh;
 }
+
+.checkbox {
+  display: flex;
+  gap: 10px;
+}
 </style>

From 564414899136fe028406476d6e4ba243f0d2cf4d Mon Sep 17 00:00:00 2001
From: Ludvig Hagmar <--global>
Date: Mon, 14 Oct 2024 18:15:07 +0200
Subject: [PATCH 2/4] Range stuff BE

---
 .../Controllers/StatisticsController.cs       | 19 +++--
 src/AKCore/Models/StatisticsModels.cs         |  9 +-
 .../Statistics/PageViewGraph.vue              | 84 +++++++++++++++++++
 .../Statistics/StatisticsApp.vue              | 81 ++----------------
 4 files changed, 111 insertions(+), 82 deletions(-)
 create mode 100644 src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue

diff --git a/src/AKCore/Controllers/StatisticsController.cs b/src/AKCore/Controllers/StatisticsController.cs
index e54f0449..db50a816 100644
--- a/src/AKCore/Controllers/StatisticsController.cs
+++ b/src/AKCore/Controllers/StatisticsController.cs
@@ -24,7 +24,7 @@ public ActionResult Index()
     }
 
     [Route("Model")]
-    public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut = true)
+    public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut = true, StatisticsRange range = StatisticsRange.Day)
     {
         var all = loggedIn && loggedOut;
         if(!loggedIn && !loggedOut) {
@@ -35,9 +35,8 @@ public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut =
             });
         }
 
-
         var dataItems = await db.RequestsDatas
-            .Where(x => x.Created > DateTime.UtcNow.AddDays(-30))
+            .Where(x => x.Created > GetRangeCompare(range))
             .Where(x => all || x.LoggedIn == loggedIn)
             .OrderBy(x => x.Created)
             .ToListAsync();
@@ -48,7 +47,8 @@ public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut =
              .ToList();
 
         var groupedItems = dataItems.GroupBy(x => x.Path)
-            .Select(x => new { Path = x.Key, Items = NormalizeItems(x, dates) });
+            .Select(x => new { Path = x.Key, Items = NormalizeItems(x, dates) })
+            .OrderByDescending(x=> x.Items.Sum(y=>y.Amount));
 
         return Json(new
         {
@@ -69,6 +69,15 @@ private static IEnumerable<StatisticsItemModel> NormalizeItems(IEnumerable<Reque
         });
     }
 
+    private static DateTime GetRangeCompare(StatisticsRange range)
+    {
+        return range switch
+        {
+            StatisticsRange.Day => DateTime.UtcNow.AddDays(-1),
+            StatisticsRange.Week => DateTime.UtcNow.AddDays(-7),
+            StatisticsRange.Month => DateTime.UtcNow.AddDays(-30),
+            _ => DateTime.UtcNow.AddDays(-1)
+        };
 
-}
+    }
 
diff --git a/src/AKCore/Models/StatisticsModels.cs b/src/AKCore/Models/StatisticsModels.cs
index aa1e673e..9e5f0486 100644
--- a/src/AKCore/Models/StatisticsModels.cs
+++ b/src/AKCore/Models/StatisticsModels.cs
@@ -2,4 +2,11 @@
 
 namespace AKCore.Models;
 
-public record StatisticsItemModel(DateTime Created, int Amount);
\ No newline at end of file
+public record StatisticsItemModel(DateTime Created, int Amount);
+
+public enum StatisticsRange
+{
+    Day,
+    Week,
+    Month
+}
\ No newline at end of file
diff --git a/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue b/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue
new file mode 100644
index 00000000..a0ceab8c
--- /dev/null
+++ b/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue
@@ -0,0 +1,84 @@
+<template>
+  <Line class="line-graph" v-if="data" :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+import { RequestsResponse } from "./models";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions,
+} from "chart.js";
+import { Line } from "vue-chartjs";
+import { getRandomColor } from "./utils";
+import { computed } from "vue";
+
+const { dataPoints } = defineProps<{
+  dataPoints: RequestsResponse;
+}>();
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+const data = computed(() =>
+  dataPoints
+    ? {
+        labels: dataPoints.dates,
+        datasets: dataPoints.items.map((item) => {
+          return {
+            label: item.path,
+            backgroundColor: getRandomColor(item.path),
+            borderColor: getRandomColor(item.path),
+            data: item.items.map((i) => i.amount),
+          };
+        }),
+      }
+    : null,
+);
+
+const options: ChartOptions<"line"> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: "bottom",
+      labels: { color: "#fff" },
+    },
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: "#fff",
+      },
+      grid: {
+        color: "#6d6d6d",
+      },
+    },
+    y: {
+      ticks: {
+        color: "#fff",
+      },
+      grid: {
+        color: "#6d6d6d",
+      },
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.line-graph {
+  max-height: 50vh;
+}
+</style>
diff --git a/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue b/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
index c640f1c7..45416393 100644
--- a/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
+++ b/src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p>Statistik</p>
+    <h2>Sidladdningar</h2>
+
     <div class="checkbox">
       <label>
         <input
@@ -22,37 +23,14 @@
         Utloggade
       </label>
     </div>
-    <div class="checkbox"></div>
-    <Line class="line-graph" v-if="data" :data="data" :options="options" />
+    <PageViewGraph v-if="dataPoints" :data-points="dataPoints" />
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, computed, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { getFromApi } from "../../services/apiservice";
+import PageViewGraph from "./PageViewGraph.vue";
 import { RequestsResponse } from "./models";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from "chart.js";
-import { Line } from "vue-chartjs";
-import { getRandomColor } from "./utils";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-);
 
 const dataPoints = ref<RequestsResponse | null>(null);
 const loggedIn = ref<boolean>(true);
@@ -66,51 +44,6 @@ watch(loggedOut, () => {
   reloadData();
 });
 
-const data = computed(() =>
-  dataPoints.value
-    ? {
-        labels: dataPoints.value.dates,
-        datasets: dataPoints.value.items.map((item) => {
-          return {
-            label: item.path,
-            backgroundColor: getRandomColor(item.path),
-            borderColor: getRandomColor(item.path),
-            data: item.items.map((i) => i.amount),
-          };
-        }),
-      }
-    : null,
-);
-
-const options: ChartOptions<"line"> = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      position: "bottom",
-      labels: { color: "#fff" },
-    },
-  },
-  scales: {
-    x: {
-      ticks: {
-        color: "#fff",
-      },
-      grid: {
-        color: "#6d6d6d",
-      },
-    },
-    y: {
-      ticks: {
-        color: "#fff",
-      },
-      grid: {
-        color: "#6d6d6d",
-      },
-    },
-  },
-};
-
 const reloadData = () => {
   getFromApi<RequestsResponse>(
     window.location.href +
@@ -125,10 +58,6 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.line-graph {
-  max-height: 50vh;
-}
-
 .checkbox {
   display: flex;
   gap: 10px;

From 5549a4dc538dcd00550dfd0ee2b7b0a9304123ff Mon Sep 17 00:00:00 2001
From: Ludvig Hagmar <--global>
Date: Mon, 14 Oct 2024 18:15:33 +0200
Subject: [PATCH 3/4] Fix

---
 .../Controllers/StatisticsController.cs       | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/AKCore/Controllers/StatisticsController.cs b/src/AKCore/Controllers/StatisticsController.cs
index db50a816..01fab822 100644
--- a/src/AKCore/Controllers/StatisticsController.cs
+++ b/src/AKCore/Controllers/StatisticsController.cs
@@ -19,7 +19,7 @@ public class StatisticsController(AKContext db) : Controller
     public ActionResult Index()
     {
         ViewBag.Title = "Statistics";
-       
+
         return View();
     }
 
@@ -27,7 +27,8 @@ public ActionResult Index()
     public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut = true, StatisticsRange range = StatisticsRange.Day)
     {
         var all = loggedIn && loggedOut;
-        if(!loggedIn && !loggedOut) {
+        if (!loggedIn && !loggedOut)
+        {
             return Json(new
             {
                 items = new List<string>(),
@@ -43,17 +44,17 @@ public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut =
 
         var dates = dataItems
              .Select(x => x.Created)
-             .Distinct()              
+             .Distinct()
              .ToList();
 
         var groupedItems = dataItems.GroupBy(x => x.Path)
             .Select(x => new { Path = x.Key, Items = NormalizeItems(x, dates) })
-            .OrderByDescending(x=> x.Items.Sum(y=>y.Amount));
+            .OrderByDescending(x => x.Items.Sum(y => y.Amount));
 
         return Json(new
         {
             items = groupedItems,
-            dates = dates.Select(x=> x.ToString("HH"))
+            dates = dates.Select(x => x.ToString("HH"))
         });
     }
 
@@ -63,10 +64,11 @@ private static IEnumerable<StatisticsItemModel> NormalizeItems(IEnumerable<Reque
             .Select(group => new StatisticsItemModel(group.Key, group.Sum(item => item.Amount)));
 
         return dates
-            .Select(date => {
-            var item = distinctItems.FirstOrDefault(x => x.Created == date);
-            return new StatisticsItemModel(date, item == null ? 0 : item.Amount);
-        });
+            .Select(date =>
+            {
+                var item = distinctItems.FirstOrDefault(x => x.Created == date);
+                return new StatisticsItemModel(date, item == null ? 0 : item.Amount);
+            });
     }
 
     private static DateTime GetRangeCompare(StatisticsRange range)
@@ -80,4 +82,5 @@ private static DateTime GetRangeCompare(StatisticsRange range)
         };
 
     }
+}
 

From 7328b5d0903e9ece82230747c7081d9426d66bb9 Mon Sep 17 00:00:00 2001
From: Ludvig Hagmar <--global>
Date: Mon, 14 Oct 2024 18:34:15 +0200
Subject: [PATCH 4/4] cubic lines

---
 .../Statistics/PageViewGraph.vue              | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue b/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue
index a0ceab8c..b5384687 100644
--- a/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue
+++ b/src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue
@@ -51,10 +51,40 @@ const data = computed(() =>
 const options: ChartOptions<"line"> = {
   responsive: true,
   maintainAspectRatio: false,
+  elements: {
+    line: {
+      cubicInterpolationMode: "monotone", // Enables cubic curves
+    },
+  },
   plugins: {
     legend: {
       position: "bottom",
       labels: { color: "#fff" },
+      onClick: function (e, legendItem, legend) {
+        const index = legendItem.datasetIndex;
+        const ci = legend.chart;
+
+        if (index === undefined) {
+          return;
+        }
+
+        const someHidden = ci.data.datasets.some((dataset) => dataset.hidden);
+
+        if (someHidden) {
+          ci.data.datasets.forEach((dataset) => {
+            dataset.hidden = false;
+          });
+        } else {
+          ci.data.datasets.forEach((dataset, i) => {
+            if (i === index) {
+              dataset.hidden = false;
+            } else {
+              dataset.hidden = true;
+            }
+          });
+        }
+        ci.update();
+      },
     },
   },
   scales: {