Skip to main content

The Wall Metrics Dashboard

· 2 min read

We're excited to introduce the new Metrics Dashboard! This interactive page provides a comprehensive view of the design system's health and evolution over time.

What's Included​

The dashboard tracks three key areas:

Tokens​

  • Total count — Number of unique tokens defined across brands/themes
  • Not used — Tokens that aren't referenced in code (helping identify cleanup opportunities)
  • Misalignment — Differences between Figma and code (should always be 0 with automated sync)
  • Bundle size — Combined size of token CSS chunks

Components​

  • Total count — Number of React components in the-wall-web
  • Not used — Components not imported by consumer applications
  • Misalignment — Differences between Figma and code (manual tracking for now)
  • A11y issues — Components with accessibility issues from Storybook tests

Icons​

  • Total count — Number of SVG icons available per brand
  • Not used — Icons not referenced in consuming code
  • Bundle size by brand — JS bundle size for lazy-loaded icon chunks (Betfair, SkyBet, PokerStars, Paddy Power)

Interactive Charts​

Each section includes:

  • Trend sparklines — Quick visual of metric evolution
  • Delta indicators — See changes compared to last measurement
  • Detailed trend charts — Full historical view with multiple metrics overlaid

Automated Collection​

The metrics are now collected automatically via a shell script that:

  1. Counts tokens and checks usage across codebases
  2. Runs accessibility tests against the live Storybook
  3. Builds brand apps to measure bundle sizes
  4. Updates the dashboard JSON automatically

Run it yourself with:

cd packages/the-wall-metrics
yarn collect

Check It Out​

Visit the Metrics page to see the dashboard in action!

For implementation details, see:

  • PR #4997 — Initial metrics page
  • PR #5306 — Automated collection and charts