Rework analytics chart scaling; self-contained SVG charts

- Charts render as single SVGs with axis labels inside the viewBox,
  replacing the stretched plot + HTML overlay labels
- Rolling ranges end at now, t0 aligned to UTC day; bucket size follows
  the window (6h up to 31 days) so "all" at its 30-day minimum renders
  identically to "month"
- X labels always centered on their true position; no edge-align shifting
- rangeWindow simplified to rolling spans ending at now
- TransitionGraph "all" visual scale floored at the 30-day plot minimum

frontend/src/VisitorCharts.vue

@@ -4,7 +4,15 @@
  */
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { makeSeries } from './analytics/time.js'
-import { CHART_H, CHART_W, buildChart, fmtY } from './analytics/chart.js'
+import {
+  CHART_H,
+  CHART_W,
+  MARGIN_B,
+  MARGIN_L,
+  VIEW_H,
+  VIEW_W,
+  buildChart,
+} from './analytics/chart.js'
 
 const DAY_REFRESH_MS = 15000
 
@@ -48,41 +56,35 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
       { ylabel: 'views', chart: viewChart, empty: 'no views recorded yet' },
     ]" :key="c.ylabel">
     <template v-if="c.chart">
-      <div class="chartwrap">
-        <div class="plot">
-          <div class="plotarea">
-            <span class="yaxis-label">{{ freqLabel(c.chart.unit) }} {{ c.ylabel }}</span>
-            <svg class="chart" :viewBox="`0 0 ${CHART_W} ${CHART_H}`"
-                 preserveAspectRatio="none" role="img" :aria-label="`${freqLabel(c.chart.unit)} ${c.ylabel}`">
-              <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>
-                <template v-for="(s, i) in c.chart.series" :key="i">
-                  <path v-if="s.area" :d="s.area" class="area" />
-                  <path :d="s.line" class="line" :style="{ opacity: s.opacity }" />
-                </template>
-              </template>
-              <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
-                    class="axis" />
-            </svg>
-            <span v-for="g in c.chart.majors" :key="g.value" class="ylab"
-                  :style="{ bottom: g.bottom + '%' }">{{ fmtY(g.value) }}</span>
-          </div>
-          <div class="xlabels">
-            <span v-for="t in c.chart.xticks" :key="t.x" class="xlab"
-                  :style="{ left: t.left + '%' }">{{ t.label }}</span>
-          </div>
-        </div>
-      </div>
+      <svg class="chart" :viewBox="`${-MARGIN_L} 0 ${VIEW_W} ${VIEW_H}`"
+           role="img" :aria-label="`${freqLabel(c.chart.unit)} ${c.ylabel}`">
+        <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>
+          <template v-for="(s, i) in c.chart.series" :key="i">
+            <path v-if="s.area" :d="s.area" class="area" />
+            <path :d="s.line" class="line" :style="{ opacity: s.opacity }" />
+          </template>
+        </template>
+        <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="-8" :y="g.y"
+              text-anchor="end" dominant-baseline="middle" class="ylab">{{ g.label }}</text>
+        <text :x="-(MARGIN_L - 10)" :y="CHART_H / 2" text-anchor="middle"
+              :transform="`rotate(-90 ${-(MARGIN_L - 10)} ${CHART_H / 2})`"
+              class="yaxis-label">{{ freqLabel(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>
+      </svg>
       <div v-if="c.chart.series && c.chart.series.length > 1" class="legend">
         <span v-for="(s, i) in c.chart.series" :key="i" :style="{ opacity: s.opacity }">
           ● {{ s.label }}
@@ -94,57 +96,25 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
 </template>
 
 <style scoped>
-/* The svg is stretched (preserveAspectRatio none), so all text lives in
-   HTML overlays positioned by the same fractions the geometry uses. */
-.chartwrap {
-  padding-left: 2.8rem; /* y labels */
-}
-
-.plot {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.plotarea {
-  position: relative;
-  height: 8rem;
-}
-
-.xlabels {
-  position: relative;
-  height: 1.2rem;
-}
-
+/* Each chart is a self-contained SVG: the viewBox includes the axis label
+   margins, so nothing is positioned with HTML overlays. */
 .chart {
   display: block;
   width: 100%;
-  height: 100%;
+  height: auto;
 }
 
-.ylab {
-  position: absolute;
-  left: -2.8rem;
-  width: 2.6rem;
-  text-align: right;
-  transform: translateY(50%);
-  font-size: 0.75rem;
-  color: var(--muted);
+.chart .ylab,
+.chart .xlab,
+.chart .yaxis-label {
+  font-size: 12px;
+  fill: var(--muted);
+}
+
+.chart .ylab {
   font-variant-numeric: tabular-nums;
 }
 
-.xlab {
-  position: absolute;
-  top: 0.25rem;
-  transform: translateX(-50%);
-  font-size: 0.75rem;
-  color: var(--muted);
-  white-space: nowrap;
-}
-
-.xlabels .xlab:first-child { transform: none; }
-.xlabels .xlab:last-child { transform: translateX(-100%); }
-
 .chart .minor {
   stroke: var(--line);
   stroke-width: 1;
@@ -199,17 +169,6 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
 
 .legend span { color: var(--accent); }
 
-.yaxis-label {
-  position: absolute;
-  top: 50%;
-  left: -2.8rem;
-  font-size: 0.75rem;
-  color: var(--muted);
-  writing-mode: vertical-rl;
-  white-space: nowrap;
-  transform: translateY(-50%) rotate(180deg);
-}
-
 section { margin-top: 1.8rem; }
 
 .empty { color: var(--muted); }