Filter statistics

src/AKCore/Controllers/StatisticsController.cs

@@ -19,30 +19,42 @@ public class StatisticsController(AKContext db) : Controller
     public ActionResult Index()
     {
         ViewBag.Title = "Statistics";
-       
+
         return View();
     }
 
     [Route("Model")]
-    public async Task<ActionResult> GetModel()
+    public async Task<ActionResult> GetModel(bool loggedIn = true, bool loggedOut = true, StatisticsRange range = StatisticsRange.Day)
     {
+        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 => x.Created > GetRangeCompare(range))
+            .Where(x => all || x.LoggedIn == loggedIn)
             .OrderBy(x => x.Created)
             .ToListAsync();
 
         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) });
+            .Select(x => new { Path = x.Key, Items = NormalizeItems(x, dates) })
+            .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"))
         });
     }
 
@@ -52,12 +64,23 @@ 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)
+    {
+        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)
+        };
 
+    }
 }
 

src/AKCore/Middlewares/MetricsMiddleware.cs

@@ -68,6 +68,7 @@ private async Task SetupInterval()
                     await metricsService.SaveMetrics(loggedOutRouteRequests, false, nowTime);
                 }
                 loggedInRouteRequests = [];
+                loggedOutRouteRequests = [];
             }
             catch
             {

src/AKCore/Models/StatisticsModels.cs

@@ -2,4 +2,11 @@
 
 namespace AKCore.Models;
 
-public record StatisticsItemModel(DateTime Created, int Amount);
+public record StatisticsItemModel(DateTime Created, int Amount);
+
+public enum StatisticsRange
+{
+    Day,
+    Week,
+    Month
+}

src/AKCore/Scripts/VueComponents/Statistics/PageViewGraph.vue

@@ -0,0 +1,114 @@
+<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,
+  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: {
+    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>

src/AKCore/Scripts/VueComponents/Statistics/StatisticsApp.vue

@@ -1,92 +1,65 @@
 <template>
   <div>
-    <p>Statistik</p>
-    <Line class="line-graph" v-if="data" :data="data" :options="options" />
+    <h2>Sidladdningar</h2>
+
+    <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>
+    <PageViewGraph v-if="dataPoints" :data-points="dataPoints" />
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, computed } 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);
+const loggedOut = ref<boolean>(true);
 
-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,
-);
+watch(loggedIn, () => {
+  reloadData();
+});
 
-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",
-      },
-    },
-  },
-};
+watch(loggedOut, () => {
+  reloadData();
+});
 
-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>