From cbd50cfece9aaa84890e8ac28fd344e2a4cd2c0f Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Thu, 3 Sep 2026 15:46:42 +0000
Subject: [PATCH] Clip chart plot curves to the chart area with a per-chart SVG
 clipPath.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Past-week overlays can run far above the autoscaled y range, and the svg
is overflow: visible for the axis labels — wrap the data paths (bars,
skyline, area/line curves) in a clipped group so they cannot paint outside
the plot rect.
---
 frontend/src/VisitorCharts.vue | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/VisitorCharts.vue b/frontend/src/VisitorCharts.vue
index 8d43f1e..3102ecc 100644
--- a/frontend/src/VisitorCharts.vue
+++ b/frontend/src/VisitorCharts.vue
@@ -75,25 +75,33 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
       <svg class="chart" :viewBox="`${-MARGIN_L} 0 ${VIEW_W} ${VIEW_H}`"
            :style="{ maxWidth: `${VIEW_W}px`, marginLeft: CHART_MARGIN }"
            role="img" :aria-label="axisLabel(c.chart.unit, c.ylabel)">
+        <!-- Clip the plot curves to the chart area: past-week overlays can
+             run far above the autoscaled y range, and the svg itself is
+             overflow: visible for the axis labels. -->
+        <clipPath :id="`plot-${c.ylabel}`">
+          <rect x="0" y="0" :width="CHART_W" :height="CHART_H" />
+        </clipPath>
         <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
               :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
         <template v-for="t in c.chart.xticks" :key="'t' + t.x">
           <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
                 class="minor vertical" />
         </template>
-        <template v-if="c.chart.bars">
-          <rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
-                :x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
-          <path :d="c.chart.skyline" class="line" />
-        </template>
-        <template v-else>
-          <!-- Oldest overlay weeks first so the current week paints on top. -->
-          <template v-for="(s, i) in [...c.chart.series].reverse()" :key="i">
-            <path v-if="s.area" :d="s.area" class="area" />
-            <path :d="s.line" class="line" :class="{ past: s.past }"
-                  :style="{ opacity: s.opacity }" />
+        <g :clip-path="`url(#plot-${c.ylabel})`">
+          <template v-if="c.chart.bars">
+            <rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
+                  :x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
+            <path :d="c.chart.skyline" class="line" />
           </template>
-        </template>
+          <template v-else>
+            <!-- Oldest overlay weeks first so the current week paints on top. -->
+            <template v-for="(s, i) in [...c.chart.series].reverse()" :key="i">
+              <path v-if="s.area" :d="s.area" class="area" />
+              <path :d="s.line" class="line" :class="{ past: s.past }"
+                    :style="{ opacity: s.opacity }" />
+            </template>
+          </template>
+        </g>
         <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
               class="axis" />
         <text v-for="g in c.chart.majors" :key="'y' + g.value" x="-5" :y="g.y"