From 94d4c94b11ac30236d8c77c35d7dbb4f27f97718 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 6 Oct 2026 08:51:26 +0200
Subject: [PATCH 1/3] fix(lab): wrap base component in CLientOnly

---
 app/components/Chart/HourlyLinesChanged.vue |  68 +++++-----
 app/components/Chart/LinesDiff.vue          | 135 +++++++++++---------
 2 files changed, 106 insertions(+), 97 deletions(-)

diff --git a/app/components/Chart/HourlyLinesChanged.vue b/app/components/Chart/HourlyLinesChanged.vue
index e8919c97..9963c4ca 100644
--- a/app/components/Chart/HourlyLinesChanged.vue
+++ b/app/components/Chart/HourlyLinesChanged.vue
@@ -93,40 +93,38 @@ function getPrLabel(count: number) {
 
 <template>
   <div class="w-full">
-    <ClientOnly>
-      <!-- The window-wide comparison first, the hour by hour detail below -->
-      <dl class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <div
-          v-for="stats in windowStats"
-          :key="stats.category"
-          class="rounded-2 border-1 border-solid border-ui-border/60 px-3 py-2.5"
-        >
-          <dt class="flex items-center gap-2 text-xs text-ui-muted">
-            <span
-              aria-hidden="true"
-              class="h-2.5 w-2.5 shrink-0 rounded-full"
-              :class="SWATCH[stats.category]"
-            />
-            {{ stats.name }}
-          </dt>
-          <dd class="mt-0.5 text-xl font-semibold tabular-nums text-ui-text">
-            {{ formatLines(stats.added, '+') }}
-            <span class="text-ui-muted"
-              >/ {{ formatLines(stats.deleted, '−') }}</span
-            >
-          </dd>
-          <dd class="text-xs text-ui-muted">
-            median lines per PR · {{ getPrLabel(stats.prs) }}
-          </dd>
-        </div>
-      </dl>
-
-      <p class="mt-8 text-sm text-ui-muted mb-6">
-        Median lines added (above the line) and deleted (below it) per pull
-        request, for each hour and classification.
-      </p>
-
-      <LinesDiff type="hourly" :data="hours" />
-    </ClientOnly>
+    <!-- The window-wide comparison first, the hour by hour detail below -->
+    <dl class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+      <div
+        v-for="stats in windowStats"
+        :key="stats.category"
+        class="rounded-2 border-1 border-solid border-ui-border/60 px-3 py-2.5"
+      >
+        <dt class="flex items-center gap-2 text-xs text-ui-muted">
+          <span
+            aria-hidden="true"
+            class="h-2.5 w-2.5 shrink-0 rounded-full"
+            :class="SWATCH[stats.category]"
+          />
+          {{ stats.name }}
+        </dt>
+        <dd class="mt-0.5 text-xl font-semibold tabular-nums text-ui-text">
+          {{ formatLines(stats.added, '+') }}
+          <span class="text-ui-muted"
+            >/ {{ formatLines(stats.deleted, '−') }}</span
+          >
+        </dd>
+        <dd class="text-xs text-ui-muted">
+          median lines per PR · {{ getPrLabel(stats.prs) }}
+        </dd>
+      </div>
+    </dl>
+
+    <p class="mt-8 text-sm text-ui-muted mb-6">
+      Median lines added (above the line) and deleted (below it) per pull
+      request, for each hour and classification.
+    </p>
+
+    <LinesDiff type="hourly" :data="hours" />
   </div>
 </template>
diff --git a/app/components/Chart/LinesDiff.vue b/app/components/Chart/LinesDiff.vue
index aa4a71e4..c986081f 100644
--- a/app/components/Chart/LinesDiff.vue
+++ b/app/components/Chart/LinesDiff.vue
@@ -202,75 +202,86 @@ function getZeroY(svg: VueUiXySvgSlotProps['svg']) {
         />
         {{ classification.label }}
       </dt>
-      <VueUiXy
-        :selected-x-index="selectedXIndex"
-        :dataset="classification.data"
-        :config="config"
-      >
-        <template
-          #time-label="{
-            x,
-            y,
-            fontSize,
-            fill,
-            content,
-            textAnchor,
-            absoluteIndex,
-          }"
+      <ClientOnly>
+        <VueUiXy
+          :selected-x-index="selectedXIndex"
+          :dataset="classification.data"
+          :config="config"
         >
-          <text
-            v-if="
-              absoluteIndex % XAXIS_LABELS_MOD_THRESHOLD === 1 ||
-              absoluteIndex === selectedXIndex
-            "
-            :x="x"
-            :y="y + 48"
-            :font-size="fontSize"
-            :fill="fill"
-            :text-anchor="textAnchor"
-            :style="{
-              transition: 'opacity 0.2s',
-              opacity:
-                selectedXIndex === undefined || selectedXIndex === absoluteIndex
-                  ? 1
-                  : 0.3,
+          <template
+            #time-label="{
+              x,
+              y,
+              fontSize,
+              fill,
+              content,
+              textAnchor,
+              absoluteIndex,
             }"
           >
-            {{ content }}
-          </text>
-        </template>
+            <text
+              v-if="
+                absoluteIndex % XAXIS_LABELS_MOD_THRESHOLD === 1 ||
+                absoluteIndex === selectedXIndex
+              "
+              :x="x"
+              :y="y + 48"
+              :font-size="fontSize"
+              :fill="fill"
+              :text-anchor="textAnchor"
+              :style="{
+                transition: 'opacity 0.2s',
+                opacity:
+                  selectedXIndex === undefined ||
+                  selectedXIndex === absoluteIndex
+                    ? 1
+                    : 0.3,
+              }"
+            >
+              {{ content }}
+            </text>
+          </template>
 
-        <template #area-gradient="{ series, id }">
-          <linearGradient
-            v-if="series.isPositive"
-            :id
-            x1="0"
-            x2="0"
-            y1="0"
-            y2="1"
-          >
-            <stop offset="0%" :stop-color="series.color" stop-opacity="0.5" />
-            <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
-          </linearGradient>
+          <template #area-gradient="{ series, id }">
+            <linearGradient
+              v-if="series.isPositive"
+              :id
+              x1="0"
+              x2="0"
+              y1="0"
+              y2="1"
+            >
+              <stop offset="0%" :stop-color="series.color" stop-opacity="0.5" />
+              <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+            </linearGradient>
 
-          <linearGradient v-else :id x1="0" x2="0" y1="0" y2="1">
-            <stop offset="0%" :stop-color="colors.bg" stop-opacity="0" />
-            <stop offset="100%" :stop-color="series.color" stop-opacity="0.5" />
-          </linearGradient>
-        </template>
+            <linearGradient v-else :id x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0%" :stop-color="colors.bg" stop-opacity="0" />
+              <stop
+                offset="100%"
+                :stop-color="series.color"
+                stop-opacity="0.5"
+              />
+            </linearGradient>
+          </template>
+
+          <template #svg="{ svg }">
+            <!-- Zero baseline axis -->
+            <line
+              :x1="svg.drawingArea.left + 18"
+              :x2="svg.drawingArea.right - 18"
+              :y1="getZeroY(svg)"
+              :y2="getZeroY(svg)"
+              :stroke="colors.border"
+              stroke-dasharray="0.5 4"
+            />
+          </template>
+        </VueUiXy>
 
-        <template #svg="{ svg }">
-          <!-- Zero baseline axis -->
-          <line
-            :x1="svg.drawingArea.left + 18"
-            :x2="svg.drawingArea.right - 18"
-            :y1="getZeroY(svg)"
-            :y2="getZeroY(svg)"
-            :stroke="colors.border"
-            stroke-dasharray="0.5 4"
-          />
+        <template #fallback>
+          <Skeleton height="h-36" />
         </template>
-      </VueUiXy>
+      </ClientOnly>
     </div>
   </div>
 </template>

From 2dd9ed3a1d4f1f3bf37b94545f7141b1feb6910e Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 6 Oct 2026 08:59:13 +0200
Subject: [PATCH 2/3] fix: add vue-data-ui css import

---
 app/components/Chart/LinesDiff.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/Chart/LinesDiff.vue b/app/components/Chart/LinesDiff.vue
index c986081f..6e819560 100644
--- a/app/components/Chart/LinesDiff.vue
+++ b/app/components/Chart/LinesDiff.vue
@@ -13,6 +13,8 @@ import {
 } from '~~/shared/utils/charts'
 import { formatCompactNumber } from '~~/shared/utils/numbers'
 
+import('vue-data-ui/style.css')
+
 interface Props {
   data: {
     iso: string

From 239148e535441491814adb21e64a5d8111f1a9a8 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 6 Oct 2026 09:02:37 +0200
Subject: [PATCH 3/3] fix: revert previous changes and just add missing css
 import

---
 app/components/Chart/HourlyLinesChanged.vue |  68 +++++-----
 app/components/Chart/LinesDiff.vue          | 135 +++++++++-----------
 2 files changed, 97 insertions(+), 106 deletions(-)

diff --git a/app/components/Chart/HourlyLinesChanged.vue b/app/components/Chart/HourlyLinesChanged.vue
index 9963c4ca..e8919c97 100644
--- a/app/components/Chart/HourlyLinesChanged.vue
+++ b/app/components/Chart/HourlyLinesChanged.vue
@@ -93,38 +93,40 @@ function getPrLabel(count: number) {
 
 <template>
   <div class="w-full">
-    <!-- The window-wide comparison first, the hour by hour detail below -->
-    <dl class="grid grid-cols-1 gap-3 sm:grid-cols-3">
-      <div
-        v-for="stats in windowStats"
-        :key="stats.category"
-        class="rounded-2 border-1 border-solid border-ui-border/60 px-3 py-2.5"
-      >
-        <dt class="flex items-center gap-2 text-xs text-ui-muted">
-          <span
-            aria-hidden="true"
-            class="h-2.5 w-2.5 shrink-0 rounded-full"
-            :class="SWATCH[stats.category]"
-          />
-          {{ stats.name }}
-        </dt>
-        <dd class="mt-0.5 text-xl font-semibold tabular-nums text-ui-text">
-          {{ formatLines(stats.added, '+') }}
-          <span class="text-ui-muted"
-            >/ {{ formatLines(stats.deleted, '−') }}</span
-          >
-        </dd>
-        <dd class="text-xs text-ui-muted">
-          median lines per PR · {{ getPrLabel(stats.prs) }}
-        </dd>
-      </div>
-    </dl>
-
-    <p class="mt-8 text-sm text-ui-muted mb-6">
-      Median lines added (above the line) and deleted (below it) per pull
-      request, for each hour and classification.
-    </p>
-
-    <LinesDiff type="hourly" :data="hours" />
+    <ClientOnly>
+      <!-- The window-wide comparison first, the hour by hour detail below -->
+      <dl class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div
+          v-for="stats in windowStats"
+          :key="stats.category"
+          class="rounded-2 border-1 border-solid border-ui-border/60 px-3 py-2.5"
+        >
+          <dt class="flex items-center gap-2 text-xs text-ui-muted">
+            <span
+              aria-hidden="true"
+              class="h-2.5 w-2.5 shrink-0 rounded-full"
+              :class="SWATCH[stats.category]"
+            />
+            {{ stats.name }}
+          </dt>
+          <dd class="mt-0.5 text-xl font-semibold tabular-nums text-ui-text">
+            {{ formatLines(stats.added, '+') }}
+            <span class="text-ui-muted"
+              >/ {{ formatLines(stats.deleted, '−') }}</span
+            >
+          </dd>
+          <dd class="text-xs text-ui-muted">
+            median lines per PR · {{ getPrLabel(stats.prs) }}
+          </dd>
+        </div>
+      </dl>
+
+      <p class="mt-8 text-sm text-ui-muted mb-6">
+        Median lines added (above the line) and deleted (below it) per pull
+        request, for each hour and classification.
+      </p>
+
+      <LinesDiff type="hourly" :data="hours" />
+    </ClientOnly>
   </div>
 </template>
diff --git a/app/components/Chart/LinesDiff.vue b/app/components/Chart/LinesDiff.vue
index 6e819560..cfbb0d64 100644
--- a/app/components/Chart/LinesDiff.vue
+++ b/app/components/Chart/LinesDiff.vue
@@ -204,86 +204,75 @@ function getZeroY(svg: VueUiXySvgSlotProps['svg']) {
         />
         {{ classification.label }}
       </dt>
-      <ClientOnly>
-        <VueUiXy
-          :selected-x-index="selectedXIndex"
-          :dataset="classification.data"
-          :config="config"
+      <VueUiXy
+        :selected-x-index="selectedXIndex"
+        :dataset="classification.data"
+        :config="config"
+      >
+        <template
+          #time-label="{
+            x,
+            y,
+            fontSize,
+            fill,
+            content,
+            textAnchor,
+            absoluteIndex,
+          }"
         >
-          <template
-            #time-label="{
-              x,
-              y,
-              fontSize,
-              fill,
-              content,
-              textAnchor,
-              absoluteIndex,
+          <text
+            v-if="
+              absoluteIndex % XAXIS_LABELS_MOD_THRESHOLD === 1 ||
+              absoluteIndex === selectedXIndex
+            "
+            :x="x"
+            :y="y + 48"
+            :font-size="fontSize"
+            :fill="fill"
+            :text-anchor="textAnchor"
+            :style="{
+              transition: 'opacity 0.2s',
+              opacity:
+                selectedXIndex === undefined || selectedXIndex === absoluteIndex
+                  ? 1
+                  : 0.3,
             }"
           >
-            <text
-              v-if="
-                absoluteIndex % XAXIS_LABELS_MOD_THRESHOLD === 1 ||
-                absoluteIndex === selectedXIndex
-              "
-              :x="x"
-              :y="y + 48"
-              :font-size="fontSize"
-              :fill="fill"
-              :text-anchor="textAnchor"
-              :style="{
-                transition: 'opacity 0.2s',
-                opacity:
-                  selectedXIndex === undefined ||
-                  selectedXIndex === absoluteIndex
-                    ? 1
-                    : 0.3,
-              }"
-            >
-              {{ content }}
-            </text>
-          </template>
-
-          <template #area-gradient="{ series, id }">
-            <linearGradient
-              v-if="series.isPositive"
-              :id
-              x1="0"
-              x2="0"
-              y1="0"
-              y2="1"
-            >
-              <stop offset="0%" :stop-color="series.color" stop-opacity="0.5" />
-              <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
-            </linearGradient>
+            {{ content }}
+          </text>
+        </template>
 
-            <linearGradient v-else :id x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" :stop-color="colors.bg" stop-opacity="0" />
-              <stop
-                offset="100%"
-                :stop-color="series.color"
-                stop-opacity="0.5"
-              />
-            </linearGradient>
-          </template>
+        <template #area-gradient="{ series, id }">
+          <linearGradient
+            v-if="series.isPositive"
+            :id
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="1"
+          >
+            <stop offset="0%" :stop-color="series.color" stop-opacity="0.5" />
+            <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+          </linearGradient>
 
-          <template #svg="{ svg }">
-            <!-- Zero baseline axis -->
-            <line
-              :x1="svg.drawingArea.left + 18"
-              :x2="svg.drawingArea.right - 18"
-              :y1="getZeroY(svg)"
-              :y2="getZeroY(svg)"
-              :stroke="colors.border"
-              stroke-dasharray="0.5 4"
-            />
-          </template>
-        </VueUiXy>
+          <linearGradient v-else :id x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" :stop-color="colors.bg" stop-opacity="0" />
+            <stop offset="100%" :stop-color="series.color" stop-opacity="0.5" />
+          </linearGradient>
+        </template>
 
-        <template #fallback>
-          <Skeleton height="h-36" />
+        <template #svg="{ svg }">
+          <!-- Zero baseline axis -->
+          <line
+            :x1="svg.drawingArea.left + 18"
+            :x2="svg.drawingArea.right - 18"
+            :y1="getZeroY(svg)"
+            :y2="getZeroY(svg)"
+            :stroke="colors.border"
+            stroke-dasharray="0.5 4"
+          />
         </template>
-      </ClientOnly>
+      </VueUiXy>
     </div>
   </div>
 </template>