@bakery-framework/plugin-dashboard 2.0.0-alpha.11 → 2.0.0-alpha.13

package/src/client/parts/stats.ts

@@ -1,171 +1,36 @@
-import {
-  formatUptime,
-  getWebSocketUrl,
-  SegmentedProgress,
-  setEmpty,
-  setText,
-} from './utils'
-
 /**
- * One row per sparkline. The nine metrics were previously written out
- * longhand at seven separate sites — the history arrays, the tracker record,
- * the tooltip configs, `drawAllSparklines`, the two incremental update paths,
- * the full-history path and `changeTimescale` — so adding or renaming one
- * meant seven coordinated edits, and the two update paths had already drifted
- * apart in how they coerce missing values.
+ * The live feed: the socket, the polling fallback, and everything that writes
+ * a number into the page.
+ *
+ * This file was 999 lines and held four jobs. Three of them left, along the
+ * seams they already read as: `metrics.ts` is what the charts *are*,
+ * `sparkline.ts` is how one is drawn, `sparkline-tooltip.ts` is the tooltip
+ * over it. What is left here is the part that changes over time, which is the
+ * only part with any state a request can move.
  *
- * That drift is preserved deliberately, not flattened: `zero` says whether a
- * history point's missing value reads as `0`, and `live` covers the two
- * metrics whose live payload differs from their history payload (`ping` uses
- * `??`, and `memoryUsed` arrives as a `"12 MB"` string over the socket).
+ * The dependency runs one way through all four — tooltip and feed both reach
+ * for drawing, drawing reaches for the catalogue, and the catalogue reaches for
+ * nothing — so no pair of them can close a cycle.
  */
-interface Metric {
-  /** Tracker key, and the prefix of the `-min` / `-max` / `-avg` element ids. */
-  key: string
-  /** Canvas element id. */
-  canvas: string
-  /** `.chart-card` id, for the metrics that blur when analytics is inactive. */
-  card?: string
-  /** `.card-sub` caption, before the timescale label is appended. */
-  sub: string
-  /** Property name on a history point and on the live stats payload. */
-  field: string
-  /** Suffix in the hover tooltip; trimmed for the min/max/avg readout. */
-  unit: string
-  stroke: string
-  fill: string
-  /** Whether a missing history value reads as `0`. */
-  zero: boolean
-  /** Live-payload reader, where it differs from the history reader. */
-  live?: (s: any) => number
-  history: number[]
-}
-
-export const METRICS: Metric[] = [
-  {
-    key: 'ping',
-    canvas: 'canvas-ping',
-    sub: 'Server self-check ping latency',
-    field: 'ping',
-    unit: 'ms',
-    stroke: '#f43f5e',
-    fill: 'rgba(244, 63, 94, 0.25)',
-    zero: true,
-    live: s => s.ping ?? 0,
-    history: [],
-  },
-  {
-    key: 'memory',
-    canvas: 'canvas-memory',
-    sub: 'Heap/RSS RAM consumption',
-    field: 'memoryUsed',
-    unit: ' MB',
-    stroke: '#3b82f6',
-    fill: 'rgba(59, 130, 246, 0.25)',
-    zero: false,
-    live: s => parseFloat(s.memoryUsed) || 0,
-    history: [],
-  },
-  {
-    key: 'loggers',
-    canvas: 'canvas-loggers',
-    sub: 'Active client logger tunnels',
-    field: 'activeLoggers',
-    unit: '',
-    stroke: '#10b981',
-    fill: 'rgba(16, 185, 129, 0.25)',
-    zero: false,
-    history: [],
-  },
-  {
-    key: 'sessions',
-    canvas: 'canvas-sessions',
-    sub: 'In-memory active user sessions',
-    field: 'activeSessions',
-    unit: '',
-    stroke: '#fbbf24',
-    fill: 'rgba(251, 191, 36, 0.25)',
-    zero: false,
-    history: [],
-  },
-  {
-    key: 'pageHits',
-    canvas: 'canvas-route-hits',
-    card: 'chart-route-hits',
-    sub: 'Application page requests',
-    field: 'pageHits',
-    unit: '',
-    stroke: '#06b6d4',
-    fill: 'rgba(6, 182, 212, 0.25)',
-    zero: true,
-    history: [],
-  },
-  {
-    key: 'apiHits',
-    canvas: 'canvas-api-hits',
-    card: 'chart-api-hits',
-    sub: 'API endpoint requests',
-    field: 'apiHits',
-    unit: '',
-    stroke: '#8b5cf6',
-    fill: 'rgba(139, 92, 246, 0.25)',
-    zero: true,
-    history: [],
-  },
-  {
-    key: 'uniqueRequests',
-    canvas: 'canvas-unique-requests',
-    card: 'chart-unique-requests',
-    sub: 'Distinct request signatures',
-    field: 'uniqueRequests',
-    unit: '',
-    stroke: '#f97316',
-    fill: 'rgba(249, 115, 22, 0.25)',
-    zero: true,
-    history: [],
-  },
-  {
-    key: 'dbHits',
-    canvas: 'canvas-db-hits',
-    card: 'chart-db-hits',
-    sub: 'Database query executions',
-    field: 'dbHits',
-    unit: '',
-    stroke: '#a78bfa',
-    fill: 'rgba(167, 139, 250, 0.25)',
-    zero: true,
-    history: [],
-  },
-  {
-    key: 'errorPageHits',
-    canvas: 'canvas-error-page-hits',
-    card: 'chart-error-page-hits',
-    sub: 'Custom error page renders',
-    field: 'errorPageHits',
-    unit: '',
-    stroke: '#ef4444',
-    fill: 'rgba(239, 68, 68, 0.25)',
-    zero: true,
-    history: [],
-  },
-]
 
-const METRIC_BY_KEY = new Map(METRICS.map(m => [m.key, m]))
-
-/** The "have we loaded any history yet" probe; every metric fills together. */
-const memoryHistory = METRIC_BY_KEY.get('memory')!.history
-
-/** A history point's value for this metric. */
-function readPoint(m: Metric, point: any): number {
-  return m.zero ? point[m.field] || 0 : point[m.field]
-}
-
-/** The live per-second payload's value for this metric. */
-function readLive(m: Metric, s: any): number {
-  return m.live ? m.live(s) : s[m.field] || 0
-}
+import { formatUptime, getWebSocketUrl, setEmpty, setText } from './utils'
+import {
+  activeTimescale,
+  emptyTracker,
+  getTimescaleIntervalMs,
+  getTimescaleLimit,
+  memoryHistory,
+  METRICS,
+  type Metric,
+  readLive,
+  readPoint,
+  setActiveTimescale,
+  trackers,
+  updateTracker,
+} from './metrics'
+import { drawAllSparklines } from './sparkline'
+import { refreshSparklineTooltips } from './sparkline-tooltip'
 
-export let activeTimescale = '1m'
 export let lastProcessedHistoryTimestamp = 0
 export let lastServerPid = 0
 export let connectionLost = false
@@ -179,7 +44,7 @@ function setConnectionStatus(online: boolean) {
     dot.style.background = '#10b981'
     dot.style.boxShadow = '0 0 10px rgba(16, 185, 129, 0.4)'
     text.innerText = 'Online (DEV)'
-    text.style.color = 'var(--text-main)'
+    text.style.color = 'var(--text)'
   } else {
     dot.style.background = '#ef4444'
     dot.style.boxShadow = '0 0 10px rgba(239, 68, 68, 0.4)'
@@ -188,7 +53,6 @@ function setConnectionStatus(online: boolean) {
   }
 }
 export let activePagesFilter = '1d'
-export let activeTopPagesProgressBars: SegmentedProgress[] = []
 
 export function changePagesFilter(newFilter: string) {
   activePagesFilter = newFilter
@@ -222,581 +86,6 @@ export async function resetAnalytics() {
   }
 }
 
-function getTimescaleIntervalMs(timescale: string): number {
-  switch (timescale) {
-    case '30d':
-      return 86400000
-    case '7d':
-      return 21600000
-    case '1d':
-      return 1800000
-    case '1h':
-      return 60000
-    default:
-      return 1000
-  }
-}
-
-interface Tracker {
-  min: number
-  max: number
-  sum: number
-  count: number
-}
-
-function emptyTracker(): Tracker {
-  return { min: Infinity, max: -Infinity, sum: 0, count: 0 }
-}
-
-export const trackers: Record<string, Tracker> = Object.fromEntries(
-  METRICS.map(m => [m.key, emptyTracker()]),
-)
-
-export function updateTracker(key: string, val: number) {
-  if (val === null || val === undefined || Number.isNaN(val)) return
-  const t = trackers[key]
-  if (val < t.min) t.min = val
-  if (val > t.max) t.max = val
-  t.sum += val
-  t.count += 1
-  const avg = t.sum / t.count
-
-  const suffix = (METRIC_BY_KEY.get(key)?.unit ?? '').trim()
-  setText(`${key}-min`, `${t.min.toFixed(0)} ${suffix}`)
-  setText(`${key}-max`, `${t.max.toFixed(0)} ${suffix}`)
-  setText(`${key}-avg`, `${avg.toFixed(1)} ${suffix}`)
-}
-
-function drawSparklineGrid(
-  ctx: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  min: number,
-  range: number,
-) {
-  ctx.save()
-  ctx.beginPath()
-  ctx.setLineDash([4, 4])
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'
-  ctx.lineWidth = 1
-
-  const gridLines = [0.25, 0.5, 0.75]
-  gridLines.forEach(ratio => {
-    const y = height - 12 - ratio * (height - 24)
-    ctx.moveTo(0, y)
-    ctx.lineTo(width - 50, y)
-
-    const val = min + ratio * range
-    const roundedVal = range < 5 ? Math.round(val * 10) / 10 : Math.round(val)
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.35)'
-    ctx.font = '9px monospace'
-    ctx.fillText(roundedVal.toString(), width - 42, y + 3)
-  })
-  ctx.stroke()
-  ctx.restore()
-}
-
-function getSparklineSegments(dataPoints: number[]) {
-  const segments: { start: number; end: number }[] = []
-  let inSegment = false
-  let segmentStart = 0
-
-  for (let i = 0; i < dataPoints.length; i++) {
-    const isValValid =
-      dataPoints[i] !== null &&
-      dataPoints[i] !== undefined &&
-      !Number.isNaN(dataPoints[i])
-    if (isValValid) {
-      if (!inSegment) {
-        inSegment = true
-        segmentStart = i
-      }
-    } else {
-      if (inSegment) {
-        segments.push({ start: segmentStart, end: i - 1 })
-        inSegment = false
-      }
-    }
-  }
-  if (inSegment) {
-    segments.push({ start: segmentStart, end: dataPoints.length - 1 })
-  }
-  return segments
-}
-
-function drawSinglePointSegment(
-  ctx: CanvasRenderingContext2D,
-  start: number,
-  dataPoints: number[],
-  min: number,
-  max: number,
-  range: number,
-  width: number,
-  height: number,
-  L: number,
-  M: number,
-  colorStart: string,
-) {
-  const val = Math.max(min, Math.min(dataPoints[start], max))
-  const j = L - M + start
-  const x = (j / (L - 1)) * (width - 50)
-  const y = height - 12 - ((val - min) / range) * (height - 24)
-
-  ctx.beginPath()
-  ctx.arc(x, y, 2.5, 0, Math.PI * 2)
-  ctx.fillStyle = colorStart
-  ctx.fill()
-}
-
-function drawLineSegment(
-  ctx: CanvasRenderingContext2D,
-  start: number,
-  end: number,
-  dataPoints: number[],
-  min: number,
-  max: number,
-  range: number,
-  width: number,
-  height: number,
-  L: number,
-  M: number,
-  colorStart: string,
-) {
-  ctx.beginPath()
-  for (let i = start; i <= end; i++) {
-    const val = Math.max(min, Math.min(dataPoints[i], max))
-    const j = L - M + i
-    const x = (j / (L - 1)) * (width - 50)
-    const y = height - 12 - ((val - min) / range) * (height - 24)
-    if (i === start) ctx.moveTo(x, y)
-    else ctx.lineTo(x, y)
-  }
-  ctx.lineWidth = 2.5
-  ctx.strokeStyle = colorStart
-  ctx.lineCap = 'round'
-  ctx.lineJoin = 'round'
-  ctx.stroke()
-}
-
-function drawFillSegment(
-  ctx: CanvasRenderingContext2D,
-  start: number,
-  end: number,
-  dataPoints: number[],
-  min: number,
-  max: number,
-  range: number,
-  width: number,
-  height: number,
-  L: number,
-  M: number,
-  colorEnd: string,
-) {
-  ctx.beginPath()
-  let firstX = 0
-  let lastX = 0
-  for (let i = start; i <= end; i++) {
-    const val = Math.max(min, Math.min(dataPoints[i], max))
-    const j = L - M + i
-    const x = (j / (L - 1)) * (width - 50)
-    const y = height - 12 - ((val - min) / range) * (height - 24)
-    if (i === start) {
-      ctx.moveTo(x, y)
-      firstX = x
-    } else {
-      ctx.lineTo(x, y)
-    }
-    if (i === end) {
-      lastX = x
-    }
-  }
-  ctx.lineTo(lastX, height)
-  ctx.lineTo(firstX, height)
-  ctx.closePath()
-
-  const gradient = ctx.createLinearGradient(0, 0, 0, height)
-  gradient.addColorStop(0, colorEnd)
-  gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
-  ctx.fillStyle = gradient
-  ctx.fill()
-}
-
-export function drawSparkline(
-  canvasId: string,
-  dataPoints: number[],
-  colorStart: string,
-  colorEnd: string,
-) {
-  const canvas = document.getElementById(canvasId) as HTMLCanvasElement | null
-  if (!canvas) return
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-
-  const dpr = window.devicePixelRatio || 1
-  const rect = canvas.getBoundingClientRect()
-
-  // Assigning to width/height reallocates the backing store and resets the
-  // whole context, so the old unconditional resize threw away and rebuilt nine
-  // canvases every second even when nothing had moved. Only resize on an
-  // actual size change, and set the DPR transform outright rather than
-  // relying on the reset to make a cumulative `scale` safe.
-  const targetW = Math.trunc(rect.width * dpr)
-  const targetH = Math.trunc(rect.height * dpr)
-  if (canvas.width !== targetW || canvas.height !== targetH) {
-    canvas.width = targetW
-    canvas.height = targetH
-  }
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-
-  const width = rect.width
-  const height = rect.height
-  ctx.clearRect(0, 0, width, height)
-
-  if (dataPoints.length === 0) return
-
-  const { min, max, range } = getSparklineScale(dataPoints)
-  drawSparklineGrid(ctx, width, height, min, range)
-
-  const L = getTimescaleLimit(activeTimescale)
-  const M = dataPoints.length
-  const segments = getSparklineSegments(dataPoints)
-
-  if (segments.length === 0) return
-
-  segments.forEach(segment => {
-    if (segment.start === segment.end) {
-      drawSinglePointSegment(
-        ctx,
-        segment.start,
-        dataPoints,
-        min,
-        max,
-        range,
-        width,
-        height,
-        L,
-        M,
-        colorStart,
-      )
-    } else {
-      drawLineSegment(
-        ctx,
-        segment.start,
-        segment.end,
-        dataPoints,
-        min,
-        max,
-        range,
-        width,
-        height,
-        L,
-        M,
-        colorStart,
-      )
-      drawFillSegment(
-        ctx,
-        segment.start,
-        segment.end,
-        dataPoints,
-        min,
-        max,
-        range,
-        width,
-        height,
-        L,
-        M,
-        colorEnd,
-      )
-    }
-  })
-
-  // Last, so the marker sits above the fill rather than under it.
-  const hovered = resolveHoverPoint(canvasId, dataPoints, {
-    left: rect.left,
-    width,
-    height,
-  })
-  if (hovered) drawHoverMarker(ctx, hovered, height, colorStart)
-}
-
-interface SparklineHoverState {
-  visible: boolean
-  clientX: number
-  clientY: number
-}
-
-export const sparklineHoverStates: Record<string, SparklineHoverState> = {}
-
-export interface HoverPoint {
-  index: number
-  value: number
-  /** Where the point sits on the canvas, in CSS pixels within its box. */
-  x: number
-  y: number
-}
-
-/**
- * Which sample the pointer is over, and where that sample is drawn.
- *
- * Shared by the two things that must agree about it: the marker painted on the
- * canvas and the tooltip positioned over the card. This arithmetic — the 50px
- * reserved for the axis labels, the 24 and 12 of vertical padding, and the
- * `L - M` offset for a series shorter than the window — used to live only in
- * the tooltip. Copying it into the draw path would have worked exactly until
- * one copy was adjusted, at which point the dot and its label would point at
- * different samples and look like a rounding bug.
- */
-export function resolveHoverPoint(
-  canvasId: string,
-  data: number[],
-  rect: { left: number; width: number; height: number },
-): HoverPoint | null {
-  const state = sparklineHoverStates[canvasId]
-  if (!state?.visible || data.length === 0) return null
-
-  const { min, max, range } = getSparklineScale(data)
-  const graphWidth = Math.max(rect.width - 50, 1)
-  const graphHeight = Math.max(rect.height - 24, 1)
-  const localX = Math.min(Math.max(state.clientX - rect.left, 0), graphWidth)
-
-  const L = getTimescaleLimit(activeTimescale)
-  const M = data.length
-  const j = L === 1 ? 0 : Math.round((localX / graphWidth) * (L - 1))
-  const index = j - (L - M)
-  if (index < 0 || index >= M) return null
-
-  const value = data[index]
-  if (value === null || value === undefined || Number.isNaN(value)) return null
-
-  const safeValue = Math.max(min, Math.min(value, max))
-  return {
-    index,
-    value,
-    x: L === 1 ? 0 : (j / (L - 1)) * graphWidth,
-    y: rect.height - 12 - ((safeValue - min) / range) * graphHeight,
-  }
-}
-
-/**
- * The hover marker: a guide line down the chart and a ringed dot on the sample.
- *
- * The ring is drawn in the card's own background rather than left transparent,
- * so the dot reads as sitting *on* the line instead of merging into it wherever
- * the series is dense.
- */
-function drawHoverMarker(
-  ctx: CanvasRenderingContext2D,
-  point: HoverPoint,
-  height: number,
-  color: string,
-) {
-  ctx.save()
-
-  ctx.beginPath()
-  ctx.moveTo(point.x, 8)
-  ctx.lineTo(point.x, height - 10)
-  ctx.strokeStyle = 'rgba(148, 163, 184, 0.35)'
-  ctx.lineWidth = 1
-  ctx.setLineDash([3, 3])
-  ctx.stroke()
-  ctx.setLineDash([])
-
-  ctx.beginPath()
-  ctx.arc(point.x, point.y, 4.5, 0, Math.PI * 2)
-  ctx.fillStyle = color
-  ctx.fill()
-  ctx.lineWidth = 2
-  ctx.strokeStyle = 'rgba(15, 17, 21, 0.9)'
-  ctx.stroke()
-
-  ctx.restore()
-}
-
-function getSparklineScale(dataPoints: number[]) {
-  const validPoints = dataPoints.filter(
-    p =>
-      typeof p === 'number' &&
-      !Number.isNaN(p) &&
-      p !== null &&
-      p !== undefined,
-  )
-  if (validPoints.length === 0) {
-    return { min: 0, max: 0, range: 1 }
-  }
-  const sum = validPoints.reduce((a, b) => a + b, 0)
-  const avg = sum / validPoints.length || 1
-  const actualMax = Math.max(...validPoints)
-  const min = 0
-  const max = Math.max(avg * 2, actualMax, 50)
-  const range = max - min === 0 ? 1 : max - min
-  return { min, max, range }
-}
-
-function ensureSparklineTooltip(canvas: HTMLCanvasElement) {
-  const chartCard = canvas.closest('.chart-card') as HTMLElement | null
-  if (!chartCard) return null
-
-  let tooltip = chartCard.querySelector('.chart-tooltip') as HTMLElement | null
-  if (!tooltip) {
-    tooltip = document.createElement('div')
-    tooltip.className = 'chart-tooltip'
-    chartCard.appendChild(tooltip)
-  }
-
-  return tooltip
-}
-
-function formatSparklineTooltipValue(value: number, unitSuffix: string) {
-  return Math.round(value).toString() + unitSuffix
-}
-
-function formatAge30d(agePoints: number): string {
-  return agePoints === 1 ? '1 day ago' : `${agePoints} days ago`
-}
-
-function formatAge7d(agePoints: number): string {
-  const hours = agePoints * 6
-  if (hours >= 24) {
-    const days = Math.floor(hours / 24)
-    const remHours = hours % 24
-    return remHours > 0 ? `${days}d ${remHours}h ago` : `${days}d ago`
-  }
-  return `${hours}h ago`
-}
-
-function formatAge1d(agePoints: number): string {
-  const mins = agePoints * 30
-  if (mins >= 60) {
-    const hours = Math.floor(mins / 60)
-    const remMins = mins % 60
-    return remMins > 0 ? `${hours}h ${remMins}m ago` : `${hours}h ago`
-  }
-  return `${mins}m ago`
-}
-
-function formatAgeOther(agePoints: number, activeTimescale: string): string {
-  if (activeTimescale === '1h') {
-    return agePoints === 1 ? '1 min ago' : `${agePoints} mins ago`
-  }
-  return agePoints === 1 ? '1s ago' : `${agePoints}s ago`
-}
-
-function formatSparklineAge(index: number, length: number) {
-  const agePoints = Math.max(length - 1 - index, 0)
-  if (agePoints === 0) return 'now'
-
-  if (activeTimescale === '30d') return formatAge30d(agePoints)
-  if (activeTimescale === '7d') return formatAge7d(agePoints)
-  if (activeTimescale === '1d') return formatAge1d(agePoints)
-  return formatAgeOther(agePoints, activeTimescale)
-}
-
-export function updateSparklineTooltip(config: Metric) {
-  const state = sparklineHoverStates[config.canvas]
-  if (!state?.visible) return
-
-  const canvas = document.getElementById(
-    config.canvas,
-  ) as HTMLCanvasElement | null
-  if (!canvas) return
-
-  const tooltip = ensureSparklineTooltip(canvas)
-  if (!tooltip) return
-
-  const data = config.history
-  if (data.length === 0) {
-    tooltip.classList.remove('visible')
-    return
-  }
-
-  const rect = canvas.getBoundingClientRect()
-  const chartCard = canvas.closest('.chart-card') as HTMLElement | null
-  const chartRect = chartCard?.getBoundingClientRect() || rect
-
-  const point = resolveHoverPoint(config.canvas, data, rect)
-  if (!point) {
-    tooltip.classList.remove('visible')
-    return
-  }
-
-  tooltip.textContent = `${formatSparklineTooltipValue(point.value, config.unit)} (${formatSparklineAge(point.index, data.length)})`
-  tooltip.dataset.placement = point.y < 28 ? 'below' : 'above'
-  tooltip.style.left = `${rect.left - chartRect.left + point.x}px`
-  tooltip.style.top = `${rect.top - chartRect.top + point.y}px`
-  tooltip.classList.add('visible')
-}
-
-export function refreshSparklineTooltips() {
-  for (const config of METRICS) {
-    updateSparklineTooltip(config)
-  }
-}
-
-export function bindSparklineTooltips() {
-  for (const config of METRICS) {
-    const canvas = document.getElementById(
-      config.canvas,
-    ) as HTMLCanvasElement | null
-    if (!canvas || canvas.dataset.sparklineTooltipBound === 'true') continue
-
-    canvas.dataset.sparklineTooltipBound = 'true'
-    sparklineHoverStates[config.canvas] = {
-      visible: false,
-      clientX: 0,
-      clientY: 0,
-    }
-
-    const state = sparklineHoverStates[config.canvas]
-
-    canvas.addEventListener('pointermove', event => {
-      state.visible = true
-      state.clientX = event.clientX
-      state.clientY = event.clientY
-      updateSparklineTooltip(config)
-      // The marker is painted *into* the canvas, so it only moves when the
-      // canvas is repainted. Without this it would lag the pointer by up to a
-      // second — the polling redraw's interval — and read as a stuck dot.
-      drawSparkline(config.canvas, config.history, config.stroke, config.fill)
-    })
-
-    canvas.addEventListener('pointerleave', () => {
-      state.visible = false
-      const tooltip = ensureSparklineTooltip(canvas)
-      if (tooltip) tooltip.classList.remove('visible')
-      // Repaint to clear the marker, for the same reason.
-      drawSparkline(config.canvas, config.history, config.stroke, config.fill)
-    })
-  }
-
-  window.addEventListener('resize', refreshSparklineTooltips, {
-    passive: true,
-  })
-  window.addEventListener('scroll', refreshSparklineTooltips, {
-    passive: true,
-  })
-}
-
-function getTimescaleLimit(timescale: string): number {
-  switch (timescale) {
-    case '30d':
-      return 30
-    case '7d':
-      return 28
-    case '1d':
-      return 48
-    case '1h':
-      return 60
-    default:
-      return 60
-  }
-}
-
-export function drawAllSparklines() {
-  for (const m of METRICS) {
-    drawSparkline(m.canvas, m.history, m.stroke, m.fill)
-  }
-}
-
 export let analyticsWs: WebSocket | null = null
 let reconnectTimer: any = null
 
@@ -924,34 +213,26 @@ function updateTopPagesList(topPages: any[]) {
   )
   if (!topPagesListContainer) return
 
-  activeTopPagesProgressBars.forEach(bar => {
-    bar.destroy()
-  })
-  activeTopPagesProgressBars = []
-
   if (topPages.length === 0) {
     setEmpty(topPagesListContainer, 'No page hits recorded for this period.')
     return
   }
 
-  const maxHits = Math.max(...topPages.map((p: any) => p.hits), 1)
   let html = `
     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-      <div style="display: grid; grid-template-columns: 1fr auto; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">
+      <div style="display: grid; grid-template-columns: 1fr auto; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;">
         <span>Page Path</span>
         <span style="text-align: right; min-width: 80px;">Hits</span>
       </div>
   `
 
   topPages.forEach((p: any) => {
-    const percent = Math.round((p.hits / maxHits) * 100)
     html += `
       <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; font-size: 0.85rem; padding: 0.25rem 0;">
         <div style="display: flex; flex-direction: column; gap: 0.4rem; overflow: hidden; padding-right: 1rem;">
-          <span style="font-family: var(--font-mono); color: var(--text-main); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${escapeHTML(p.page)}</span>
-          <div class="segmented-progress-bar-pages" data-percent="${percent}"></div>
+          <span style="font-family: var(--mono); color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${escapeHTML(p.page)}</span>
         </div>
-        <span style="text-align: right; font-weight: 600; font-family: var(--font-mono); color: var(--text-main); min-width: 80px;">${p.hits.toLocaleString()}</span>
+        <span style="text-align: right; font-weight: 600; font-family: var(--mono); color: var(--text); min-width: 80px;">${p.hits.toLocaleString()}</span>
       </div>
     `
   })
@@ -959,12 +240,6 @@ function updateTopPagesList(topPages: any[]) {
   html += '</div>'
   topPagesListContainer.innerHTML = html
 
-  topPagesListContainer
-    .querySelectorAll('.segmented-progress-bar-pages')
-    .forEach((el: any) => {
-      const pct = parseFloat(el.getAttribute('data-percent') || '0')
-      activeTopPagesProgressBars.push(new SegmentedProgress(el, pct))
-    })
 }
 
 export function processStatsData(s: any, excludeHistory: boolean) {
@@ -1008,7 +283,7 @@ export function processStatsData(s: any, excludeHistory: boolean) {
 }
 
 export function changeTimescale(newTimescale: string) {
-  activeTimescale = newTimescale
+  setActiveTimescale(newTimescale)
 
   document.querySelectorAll('.timescale-btn').forEach(btn => {
     btn.classList.toggle('active', btn.id === `timescale-${newTimescale}`)