Blame for src/lib/LineChart.svelte

<script lang="ts">
  import type { Series, SeriesPoint } from './data'
  import { formatMetric } from './types'
  import { colorFor, formatTick, yDomain } from './viz'

  interface Props {
    metric: string
    label: string
    series: Series[]
    lowerIsBetter?: boolean
  }

  let { metric, label, series, lowerIsBetter = false }: Props = $props()

  const W = 460
  const H = 180
  // Extra right padding makes room for end-of-line value labels.
  const PAD = { top: 10, right: 58, bottom: 24, left: 52 }

  let allPoints = $derived(series.flatMap((s) => s.points))
  let tMin = $derived(Math.min(...allPoints.map((p) => p.t)))
  let tMax = $derived(Math.max(...allPoints.map((p) => p.t)))
  // All points on a single date: no line to draw, one centered column of dots.
  let singleDate = $derived(tMin === tMax)
  // Padded nice domain around the data (not zero-anchored) so small
  // regressions are visible; see viz.ts for the zero-inclusion rule.
  let domain = $derived(yDomain(allPoints.map((p) => p.y)))

  function sx(t: number): number {
    return PAD.left + (singleDate ? 0.5 : (t - tMin) / (tMax - tMin)) * (W - PAD.left - PAD.right)
  }
  function sy(v: number): number {
    return PAD.top + (1 - (v - domain.min) / (domain.max - domain.min || 1)) * (H - PAD.top - PAD.bottom)
  }

  // At most 6 date labels along the x axis to avoid overlap.
  let xTicks = $derived.by(() => {
    const ts = [...new Set(allPoints.map((p) => p.t))].sort((a, b) => a - b)
    const MAX = 6
    if (ts.length <= MAX) return ts
    const step = (ts.length - 1) / (MAX - 1)
    return Array.from({ length: MAX }, (_, i) => ts[Math.round(i * step)])
  })

  function path(pts: SeriesPoint[]): string {
    return pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${sx(p.t).toFixed(1)},${sy(p.y).toFixed(1)}`).join(' ')
  }

  // Latest value at the end of each line (leaderboard edge); labels are
  // nudged apart vertically when they collide.
  let endLabels = $derived.by(() => {
    const items = series
      .filter((s) => s.points.length > 0)
      .map((s) => {
        const p = s.points[s.points.length - 1]
        return {
          name: s.name,
          color: colorFor(s.name),
          text: formatMetric(metric, p.y),
          x: sx(p.t) + 5,
          y: sy(p.y),
          ly: sy(p.y),
        }
      })
      .sort((a, b) => a.y - b.y)
    const GAP = 9
    const lo = PAD.top + 4
    const hi = H - PAD.bottom - 2
    if (items.length > 0) items[0].ly = Math.max(items[0].ly, lo)
    for (let i = 1; i < items.length; i++) items[i].ly = Math.max(items[i].ly, items[i - 1].ly + GAP)
    const overflow = items.length > 0 ? items[items.length - 1].ly - hi : 0
    if (overflow > 0) {
      for (const it of items) it.ly = Math.max(lo, it.ly - overflow)
      for (let i = items.length - 2; i >= 0; i--) items[i].ly = Math.min(items[i].ly, items[i + 1].ly - GAP)
    }
    return items
  })

  // Hover-to-highlight: hovering a line or legend entry dims the other series.
  let highlight = $state<string | null>(null)

  // HTML tooltip shown over the chart on point hover (<title> kept as fallback).
  interface Tip {
    x: number
    y: number
    name: string
    date: string
    value: string
    deltaText: string | null
    deltaGood: boolean
    deltaBad: boolean
    commits: string | null
  }
  let tip = $state<Tip | null>(null)
  let plotEl = $state<HTMLDivElement | undefined>()

  function showTip(e: MouseEvent, s: Series, p: SeriesPoint, idx: number): void {
    const el = plotEl
    if (!el) return
    const r = el.getBoundingClientRect()
    const prev = idx > 0 ? s.points[idx - 1] : null
    const d = prev && prev.y !== 0 ? ((p.y - prev.y) / prev.y) * 100 : null
    tip = {
      x: Math.min(Math.max(e.clientX - r.left, 85), r.width - 85),
      y: e.clientY - r.top,
      name: s.name,
      date: p.date,
      value: formatMetric(metric, p.y),
      deltaText:
        d === null
          ? prev
            ? 'first tracked value'
            : null
          : `${d > 0 ? '▲' : d < 0 ? '▼' : '•'} ${Math.abs(d).toFixed(1)}% vs ${prev ? fmtDate(prev.t) : 'prev'}`,
      deltaGood: d !== null && d !== 0 && (lowerIsBetter ? d < 0 : d > 0),
      deltaBad: d !== null && d !== 0 && (lowerIsBetter ? d > 0 : d < 0),
      commits: p.commits && p.commits.length > 0 ? p.commits.join(', ') : null,
    }
  }

  // The series with the best latest value drives the KPI; its own previous
  // and first points give the short-term (Δ) and over-range deltas.
  let bestSeries = $derived(
    series
      .filter((s) => s.points.length > 0)
      .sort((a, b) => {
        const la = a.points[a.points.length - 1].y
        const lb = b.points[b.points.length - 1].y
        return lowerIsBetter ? la - lb : lb - la
      })[0]
  )
  let latest = $derived(bestSeries?.points[bestSeries.points.length - 1])
  let previous = $derived(bestSeries?.points[bestSeries.points.length - 2] ?? null)
  let first = $derived(bestSeries?.points[0])
  let delta = $derived(
    latest && previous && previous.y !== 0 ? ((latest.y - previous.y) / previous.y) * 100 : null
  )
  let rangeDelta = $derived(
    latest && first && first !== latest && first.y !== 0 ? ((latest.y - first.y) / first.y) * 100 : null
  )
  let deltaGood = $derived(delta !== null && delta !== 0 && (lowerIsBetter ? delta < 0 : delta > 0))
  let deltaBad = $derived(delta !== null && delta !== 0 && (lowerIsBetter ? delta > 0 : delta < 0))
  let rangeGood = $derived(rangeDelta !== null && rangeDelta !== 0 && (lowerIsBetter ? rangeDelta < 0 : rangeDelta > 0))
  let rangeBad = $derived(rangeDelta !== null && rangeDelta !== 0 && (lowerIsBetter ? rangeDelta > 0 : rangeDelta < 0))

  const fmtDate = (t: number) =>
    new Date(t).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
</script>

<div class="chart-card">
  <div class="chart-head">
    <h3>{label}</h3>
    {#if latest}
      <div class="kpi">
        <span class="kpi-value">{formatMetric(metric, latest.y)}</span>
        {#if delta !== null}
          <span class="kpi-delta" class:good={deltaGood} class:bad={deltaBad} title="vs {previous?.date}">
            {delta > 0 ? '▲' : delta < 0 ? '▼' : '•'} {Math.abs(delta).toFixed(1)}%
          </span>
        {/if}
        {#if rangeDelta !== null}
          <span class="kpi-range" class:good={rangeGood} class:bad={rangeBad} title="since {first?.date}">
            {rangeDelta > 0 ? '▲' : rangeDelta < 0 ? '▼' : '•'} {Math.abs(rangeDelta).toFixed(1)}% over range
          </span>
        {/if}
      </div>
    {/if}
  </div>

  {#if allPoints.length === 0}
    <div class="empty">No data for current filters</div>
  {:else}
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="plot"
      bind:this={plotEl}
      onmouseleave={() => {
        tip = null
        highlight = null
      }}
    >
      <svg viewBox="0 0 {W} {H}" role="img" aria-label={label}>
        {#each domain.ticks as tick (tick)}
          <line class="grid" x1={PAD.left} x2={W - PAD.right} y1={sy(tick)} y2={sy(tick)} />
          <text class="tick" x={PAD.left - 6} y={sy(tick) + 3} text-anchor="end">
            {formatTick(metric, tick, domain.step)}
          </text>
        {/each}
        {#each xTicks as tick (tick)}
          <text class="tick" x={sx(tick)} y={H - 6} text-anchor="middle">{fmtDate(tick)}</text>
        {/each}

        {#each series as s (s.name)}
          {@const color = colorFor(s.name)}
          <!-- svelte-ignore a11y_no_static_element_interactions -->
          <g
            class="series"
            opacity={highlight !== null && highlight !== s.name ? 0.15 : 1}
            onmouseenter={() => (highlight = s.name)}
            onmouseleave={() => (highlight = null)}
          >
            {#if s.points.length > 1}
              <!-- transparent fat stroke = easy hover target for highlight -->
              <path class="hitline" d={path(s.points)} />
              <path class="line" d={path(s.points)} stroke={color} />
            {/if}
            {#each s.points as p, j (p.t)}
              <circle
                class="dot"
                cx={sx(p.t)}
                cy={sy(p.y)}
                r={j === s.points.length - 1 ? 4 : 2.8}
                fill={color}
                stroke={j === s.points.length - 1 ? 'var(--card)' : 'none'}
                stroke-width={j === s.points.length - 1 ? 1.5 : 0}
              />
              <!-- svelte-ignore a11y_no_static_element_interactions -->
              <circle
                class="hit"
                cx={sx(p.t)}
                cy={sy(p.y)}
                r="8"
                fill="transparent"
                onmouseenter={(e) => showTip(e, s, p, j)}
                onmousemove={(e) => showTip(e, s, p, j)}
                onmouseleave={() => (tip = null)}
              >
                <title>
                  {s.name} — {p.date}: {formatMetric(metric, p.y)}{p.commits ? ` @ ${p.commits.join(', ')}` : ''}
                </title>
              </circle>
            {/each}
          </g>
        {/each}

        {#each endLabels as el (el.name)}
          <text
            class="end-label"
            x={el.x}
            y={el.ly + 3}
            fill={el.color}
            opacity={highlight !== null && highlight !== el.name ? 0.15 : 1}
          >
            {el.text}
          </text>
        {/each}
      </svg>

      {#if tip}
        <div
          class="tip"
          class:below={tip.y < 80}
          style:left="{tip.x}px"
          style:top="{tip.y}px"
          role="tooltip"
        >
          <div class="tip-name" style="color:{colorFor(tip.name)}">{tip.name}</div>
          <div class="tip-row">
            <span class="tip-date">{tip.date}</span>
            <strong>{tip.value}</strong>
          </div>
          {#if tip.deltaText}
            <div class="tip-delta" class:good={tip.deltaGood} class:bad={tip.deltaBad}>{tip.deltaText}</div>
          {/if}
          {#if tip.commits}
            <div class="tip-commits">@ {tip.commits}</div>
          {/if}
        </div>
      {/if}
    </div>

    <div class="legend">
      {#each series as s (s.name)}
        {@const last = s.points[s.points.length - 1]}
        {@const prev = s.points[s.points.length - 2]}
        {@const d = last && prev && prev.y !== 0 ? ((last.y - prev.y) / prev.y) * 100 : null}
        <!-- svelte-ignore a11y_no_static_element_interactions -->
        <span
          class="legend-item"
          class:dim={highlight !== null && highlight !== s.name}
          title={s.name}
          onmouseenter={() => (highlight = s.name)}
          onmouseleave={() => (highlight = null)}
        >
          <span class="swatch" style="background:{colorFor(s.name)}"></span>
          <span class="legend-name">{s.name}</span>
          {#if last}
            <span class="legend-value">{formatMetric(metric, last.y)}</span>
            {#if d !== null}
              <span
                class="legend-delta"
                class:good={d !== 0 && (lowerIsBetter ? d < 0 : d > 0)}
                class:bad={d !== 0 && (lowerIsBetter ? d > 0 : d < 0)}
              >{d > 0 ? '▲' : d < 0 ? '▼' : '•'}{Math.abs(d).toFixed(1)}%</span>
            {/if}
          {/if}
        </span>
      {/each}
    </div>
  {/if}
</div>

<style>
  .chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    min-width: 0;
  }
  .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
  }
  h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .kpi {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
  }
  .kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .kpi-delta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
  }
  .kpi-delta.good {
    color: var(--good);
  }
  .kpi-delta.bad {
    color: var(--bad);
  }
  .kpi-range {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
  }
  .kpi-range.good {
    color: var(--good);
  }
  .kpi-range.bad {
    color: var(--bad);
  }
  .plot {
    position: relative;
  }
  svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .grid {
    stroke: var(--border);
    stroke-width: 1;
  }
  .tick {
    fill: var(--muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
  }
  .series {
    transition: opacity 0.15s ease;
  }
  .line {
    fill: none;
    stroke-width: 2;
  }
  .hitline {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
  }
  .hit {
    cursor: crosshair;
  }
  .end-label {
    font-size: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .tip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, calc(-100% - 12px));
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  .tip.below {
    transform: translate(-50%, 12px);
  }
  .tip-name {
    font-weight: 600;
    margin-bottom: 0.15rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tip-row {
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
  }
  .tip-date {
    color: var(--muted);
  }
  .tip-delta {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .tip-delta.good {
    color: var(--good);
  }
  .tip-delta.bad {
    color: var(--bad);
  }
  .tip-commits {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.66rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--muted);
    max-height: 7.5rem;
    overflow-y: auto;
  }
  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    cursor: default;
    transition: opacity 0.15s ease;
  }
  .legend-item.dim {
    opacity: 0.35;
  }
  .legend-name {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .legend-value {
    color: var(--fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .legend-delta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .legend-delta.good {
    color: var(--good);
  }
  .legend-delta.bad {
    color: var(--bad);
  }
  .swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
    flex: none;
  }
  .empty {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 2.5rem 0;
    text-align: center;
  }
</style>