Northstar, Revenue Analytics

The brief and the build

Brief: Put the answer on one screen. Headline figures with period-over-period change, a trend chart that switches metric and date range, and a short channel and best-days breakdown.

The chart is plain SVG generated from the data, so the bundle has no charting dependency and the line stays crisp at any size. It is focusable: arrow keys step through days and the tooltip follows, so the values are available without a mouse. The SVG carries a text description of its overall range.

Each headline figure compares against the previous period of the same length. When there is no earlier data, as with the 90-day view, the card says so instead of showing a made-up change.

Sample data comes from a seeded generator, so every visit shows identical numbers. Light is a standard analytics layout. Dark is a dense terminal-style grid with the trend chart as the main column. Creative is a poster-style layout with offset-shadow cards.

Results

• Problem: Revenue figures were spread over four tools, so nobody could say at a glance whether this month beat last month.
• Built: One screen with period-over-period headline figures, a keyboard-navigable SVG trend chart, and channel and best-day breakdowns.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 1.0 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 10.3 KB (4.3 KB gzipped). The script alone is 7.4 KB (3.0 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 95 and 95 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Hand-built SVG charts
• Keyboard-readable chart
• Period comparison
• No chart library