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

package/src/client/parts/sparkline-tooltip.ts

@@ -0,0 +1,158 @@
+/**
+ * The sparkline tooltip: the element, what it says, and when it is shown.
+ *
+ * Split out of `stats.ts`. Everything here creates or positions DOM;
+ * `sparkline.ts` next door owns the canvas and the geometry, and this file
+ * depends on it in one direction only.
+ */
+
+import { activeTimescale, METRICS, type Metric } from './metrics'
+import {
+  drawSparkline,
+  resolveHoverPoint,
+  sparklineHoverStates,
+} from './sparkline'
+
+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,
+  })
+}

package/src/client/parts/sparkline.ts

@@ -0,0 +1,383 @@
+/**
+ * Drawing a sparkline, and the geometry that goes with it.
+ *
+ * Split out of `stats.ts`. The seam between this file and
+ * `sparkline-tooltip.ts` is **geometry against DOM**: everything here answers
+ * "where on the canvas", and nothing here creates or positions an element. The
+ * split runs that way because `drawSparkline` needs the hovered point in order
+ * to mark it, so a seam drawn around "hover" instead would have put the two
+ * files in a cycle.
+ */
+
+import { activeTimescale, getTimescaleLimit, METRICS } from './metrics'
+
+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 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 }
+}
+
+export 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.
+ */
+export 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()
+}
+
+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)
+}
+
+export function drawAllSparklines() {
+  for (const m of METRICS) {
+    drawSparkline(m.canvas, m.history, m.stroke, m.fill)
+  }
+}