Add stats

2025-09-07 03:09:37 +02:00
parent 69f03170a6
commit 12635511af
5 changed files with 228 additions and 5 deletions
@@ -1,7 +1,69 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import StatsBlock from '@/components/StatsBlock.vue';
+import { type, useTramStore } from '@/stores/tram.ts';
+import { groupBy } from '@/utils/array.ts';
+import { idsOf } from '@/utils/typeGroup.ts';
+import { VaCard, VaCardContent, VaCardTitle } from 'vuestic-ui';
+
+const tramStore = useTramStore();
+</script>

 <template>
-  <h1>Stats</h1>
+  <article class="p-4">
+    <h1 class="mb-4 text-3xl">Statistiken</h1>
+
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <VaCard stripe-color="success" stripe>
+        <VaCardTitle>Nach Typ</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col justify-around gap-4">
+            <div v-for="(group, i) in groupBy(type, (t) => t[3])" :key="i">
+              <p>{{ idsOf(group.elements) }}:</p>
+              <StatsBlock
+                :total="group.elements.reduce((acc, t) => acc + (t[1] - t[0]) + 1, 0)"
+                :found="
+                  tramStore.trams.bsag.filter((id) =>
+                    group.elements.some((t) => id >= t[0] && id <= t[1])
+                  ).length
+                "
+                :icon="group.elements[0][2] ? 'tram' : 'directions_bus'"
+                :color="group.elements[0][2] ? 'danger' : 'warning'"
+                :name="group.key"
+              />
+            </div>
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaCard class="mb-auto" stripe-color="success" stripe>
+        <VaCardTitle>Quick stats</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col justify-around sm:flex-row">
+            <StatsBlock
+              :total="tramStore.shortStats.totalCount"
+              :found="tramStore.shortStats.found"
+              name="Fahrzeuge"
+              color="success"
+              icon="train"
+            />
+            <StatsBlock
+              :total="tramStore.shortStats.tramCount"
+              :found="tramStore.shortStats.trams"
+              name="Trams"
+              color="danger"
+              icon="tram"
+            />
+            <StatsBlock
+              :total="tramStore.shortStats.busCount"
+              :found="tramStore.shortStats.busses"
+              name="Busse"
+              color="warning"
+              icon="directions_bus"
+            />
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </article>
 </template>

 <style scoped></style>