From 4522b8fa404663e538fa599e15e59f5054e7757f Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Fri, 18 Sep 2026 13:54:33 +0000
Subject: [PATCH] Analytics: stronger chart fills, line specimen for the day
 legend

Area and bar fills at 0.6 opacity (were a near-invisible 0.15); the day
view's 'Last 24 hours' legend entry uses the same full-opacity accent
line as the other entries instead of a translucent bar swatch.
---
 frontend/src/VisitorCharts.vue | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/frontend/src/VisitorCharts.vue b/frontend/src/VisitorCharts.vue
index 6e2b93d..46e640a 100644
--- a/frontend/src/VisitorCharts.vue
+++ b/frontend/src/VisitorCharts.vue
@@ -123,19 +123,13 @@ const viewChart = computed(() => buildChart(withTypical(allViews.value), now.val
               class="yaxis-label">{{ axisLabel(c.chart.unit, c.ylabel) }}</text>
         <text v-for="t in c.chart.xticks" :key="'x' + t.x" :x="t.x" :y="CHART_H + MARGIN_B - 8"
               text-anchor="middle" class="xlab">{{ t.label }}</text>
-        <!-- Legend, top right inside the plot: current data in accent (week
-             curve or day bars) and the typical history curve in muted. -->
+        <!-- Legend, top right inside the plot: current data in accent
+             (week label, or "Last 24 hours" on the day view) and the
+             typical history curve in muted. -->
         <g v-if="c.legend && c.chart.typical">
-          <template v-if="c.chart.bars">
-            <rect :x="CHART_W - 118" y="5" width="20" height="9" class="bar" />
-            <text :x="CHART_W - 92" y="10" dominant-baseline="middle"
-                  class="leglab">Last 24 hours</text>
-          </template>
-          <template v-else>
-            <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="10" y2="10" class="line" />
-            <text :x="CHART_W - 92" y="10" dominant-baseline="middle"
-                  class="leglab">{{ c.chart.series[0].label }}</text>
-          </template>
+          <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="10" y2="10" class="line" />
+          <text :x="CHART_W - 92" y="10" dominant-baseline="middle"
+                class="leglab">{{ c.chart.bars ? 'Last 24 hours' : c.chart.series[0].label }}</text>
           <line :x1="CHART_W - 118" :x2="CHART_W - 98" y1="25" y2="25"
                 class="line past" style="opacity: 0.6" />
           <text :x="CHART_W - 92" y="25" dominant-baseline="middle"
@@ -202,12 +196,12 @@ const viewChart = computed(() => buildChart(withTypical(allViews.value), now.val
 
 .chart .area {
   fill: var(--accent);
-  opacity: 0.15;
+  opacity: 0.6;
 }
 
 .chart .bar {
   fill: var(--accent);
-  opacity: 0.15;
+  opacity: 0.6;
 }
 
 .chart .line {