feat(dashboard): add time-series chart

components/dashboard/DashboardTimeSeriesChart.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { GetFraKaareStatisticsChurchStatisticsSnapshot } from "@bcc-code/bmm-sdk-fetch";
+import {
+  VisAxis,
+  VisLine,
+  VisXYContainer,
+  VisCrosshair,
+  VisTooltip,
+  VisBulletLegend,
+} from "@unovis/vue";
+import { Line } from "@unovis/ts";
+
+const props = defineProps<{
+  data: GetFraKaareStatisticsChurchStatisticsSnapshot[];
+}>();
+
+const getColor = (index: number) => `var(--vis-color${index})`;
+
+const formatDate = (tick: number) => tick;
+const formatNumber = (tick: number) => `${tick * 100}%`;
+
+const crosshairTemplate = (d: GetFraKaareStatisticsChurchStatisticsSnapshot) =>
+  `<div class="flex flex-col gap-2">
+		<p class="type-title-3 leading-none mb-1 text-label-3">${d.snapshotDate?.toLocaleDateString()}</p>
+		<p class="type-title-2 leading-none pl-2 border-l-4 border-[var(--vis-color0)]">${Math.floor((d.allEpisodesPercentAverage ?? 0) * 100)}%</p>
+		<p class="type-title-2 leading-none pl-2 border-l-4 border-[var(--vis-color1)]">${Math.floor((d.oneEpisodePercentAverage ?? 0) * 100)}%</p>
+	</div>`;
+</script>
+
+<template>
+  <VisBulletLegend
+    :items="[
+      { name: 'Totale episoder hørt', color: getColor(0) },
+      { name: 'Har hørt minst én episode i 2025', color: getColor(1) },
+    ]"
+  />
+  <VisXYContainer :data="data" class="grow">
+    <VisLine
+      :x="(d: GetFraKaareStatisticsChurchStatisticsSnapshot) => d.snapshotDate"
+      :y="
+        (d: GetFraKaareStatisticsChurchStatisticsSnapshot) =>
+          d.allEpisodesPercentAverage
+      "
+      :color="getColor(0)"
+    />
+    <VisLine
+      :x="(d: GetFraKaareStatisticsChurchStatisticsSnapshot) => d.snapshotDate"
+      :y="
+        (d: GetFraKaareStatisticsChurchStatisticsSnapshot) =>
+          d.oneEpisodePercentAverage
+      "
+      :color="getColor(1)"
+    />
+    <VisAxis
+      type="x"
+      :grid-line="false"
+      :tick-line="false"
+      :tick-format="
+        (v: number, i: number) => data[i]?.snapshotDate?.toLocaleDateString()
+      "
+    />
+    <VisAxis type="y" :tick-line="false" :tick-format="formatNumber" />
+    <VisCrosshair :template="crosshairTemplate" />
+    <VisTooltip />
+  </VisXYContainer>
+</template>
+
+<style>
+:root {
+  --vis-tooltip-background-color: var(--bmm-background-1);
+  --vis-tooltip-border-color: var(--bmm-label-separator);
+  --vis-tooltip-text-color: var(--bmm-label-1);
+  --vis-tooltip-padding: 12px;
+  --vis-tooltip-border-radius: 8px;
+}
+</style>

package.json

@@ -29,6 +29,8 @@
     "@sentry/vue": "^8.27.0",
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/vue-3": "^2.9.1",
+    "@unovis/ts": "^1.5.0",
+    "@unovis/vue": "^1.5.0",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.9.0",
     "@vueuse/router": "^11.3.0",
@@ -88,5 +90,6 @@
     "vite-plugin-electron-renderer": "^0.14.5",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"
-  }
+  },
+  "packageManager": "[email protected]+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
 }

pages/dashboards/fra-kaare.vue

@@ -77,7 +77,18 @@ const columnGroupWidth = computed(() => {
   <div class="space-y-12">
     <PageHeading>Dashboard: Fra Kåre</PageHeading>
 
-    <section id="graphs"></section>
+    <section
+      id="chart"
+      class="flex min-h-[400px] flex-col rounded-2xl bg-background-2 p-8"
+    >
+      <h2 class="type-heading-3 mb-4">
+        {{ statistics?.highlightedChurchName }}
+      </h2>
+      <DashboardTimeSeriesChart
+        v-if="statistics?.timeSeries"
+        :data="statistics.timeSeries"
+      />
+    </section>
 
     <section id="table">
       <div class="mb-4">