# Analytics dashboard overview > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The overview page of *Beacon*, a product-analytics tool. Cool light theme: `#f4f6f9` page, white cards with 1px `#e2e6ec` borders and a 1px shadow. A 56px top bar holds the breadcrumb and a four-option date-range segmented control whose white thumb slides between options. Below: a row of four KPI tiles (label, 30px value, signed mono delta with an arrow), a single-series area chart drawn with inline SVG whose 2px blue line draws itself over 1.1s before the fill fades in, and a four-row recent-events table. Hovering the chart snaps a dashed crosshair and a dot to the nearest point with a dark tooltip. The detail worth copying is the chart: pure SVG paths generated from an array, `stroke-dasharray` equal to the measured path length, redrawn whenever the range changes. ## Reference behaviour 1. Initial state: "7d" is pressed in the segmented control; KPIs show 18.4M / 42,118 / 212 ms / 0.09%; the chart's line draws from left to right over 1100ms (expo-out), then the light-blue area fades in over 500ms. Y axis reads 0k / 67k / 133k / 200k; X axis shows Mon…Sun. 2. Move the pointer over the chart: a 1px dashed vertical crosshair and a 4px-radius white dot with a 2px blue ring snap to the nearest data point. A tooltip (dark, 12px mono) appears 12px above the point reading e.g. "142k requests" with the bucket label beneath. Leaving the SVG hides all three. 3. Click "24h", "30d" or "90d": the thumb slides to the pressed option over 220ms; the chart regenerates its data (24 / 30 / 45 points), rebuilds grid, axis labels and paths, and replays the draw. The subtitle under the chart title and the "Updated … last N days" line update. 4. Click anywhere on the chart: replays the draw for the current range. 5. Hover a table row: cells tint to `--bg`. 6. Hover a segmented option: its label darkens from `--ink-3` to `--ink` over 150ms. 7. Reduced motion: the line appears fully drawn and the area is visible immediately; the thumb still moves (1ms). ## Structure ``` 1280 × 800 ┌─────────────────────────────────────────────────────────────────────────────┐ │ [B] Beacon / Overview [24h | 7d | 30d | 90d ] (o) │ 56 top bar ├─────────────────────────────────────────────────────────────────────────────┤ │ Overview Updated 2 min ago · last 7 days │ 22px h1 + mono │ ┌ Requests ─┐ ┌ Active users ┐ ┌ p95 latency ┐ ┌ Error rate ─┐ │ │ │ 18.4M │ │ 42,118 │ │ 212 ms │ │ 0.09% │ │ 110 KPI tiles │ │ ↑+6.2% … │ │ ↑+3.9% … │ │ ↓+18 ms … │ │ ↑−0.02 pt … │ │ │ └───────────┘ └──────────────┘ └─────────────┘ └─────────────┘ │ │ ┌ Requests per hour 7 days · hourly buckets · click to replay ───────────┐ │ │ │200k ───────────────────────────────────────────────────────────────── │ │ │ │133k ─────╱╲──────────────────────────────╱‾‾‾╲───────────╱‾‾ ──────── │ │ ~320 chart card │ │ 67k ╱‾‾‾╱ ╲____╱‾‾╲______╱‾‾‾╲_______╱ ╲_________╱ │ │ (svg viewBox 1200×220) │ │ 0k Mon Tue Wed Thu Fri Sat Sun │ │ │ └────────────────────────────────────────────────────────────────────────┘ │ │ ┌ Time Event Source Status Duration ┐│ │ │ 14:32:07 Deploy v3.18.2 finished ci / eu-west-1 ● Healthy 4m 12s ││ 4 rows × 38 │ └─────────────────────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────────────────────┘ 24px page padding · 14px gaps ``` - `
` — flex, 56px, white, 1px bottom border. `.crumb` (22px logo square, product, slash, page), `.seg` (`role="group" aria-label="Date range"`, four `