Skip to content

WIP: feat: add geographic CWV breakdown chart to tech report drilldown#1220

Draft
alonkochba wants to merge 2 commits intoHTTPArchive:mainfrom
alonkochba:feat/geo-cwv-breakdown-chart
Draft

WIP: feat: add geographic CWV breakdown chart to tech report drilldown#1220
alonkochba wants to merge 2 commits intoHTTPArchive:mainfrom
alonkochba:feat/geo-cwv-breakdown-chart

Conversation

@alonkochba
Copy link
Member

Implements #1146.

Summary

  • Adds a new Geographic Breakdown section to the tech report drilldown page (below Core Web Vitals)
  • Renders a stacked horizontal bar chart showing origins with good CWVs (teal, left) vs not passing (gray, right), sorted by total origins descending
  • Shows % good CWVs as a label inside each teal bar
  • Dropdown to switch between CWV sub-metrics: Overall, LCP, INP, CLS, FCP, TTFB
  • Responds to the existing mobile/desktop client filter
  • Full light and dark mode support using existing project CSS variables (--color-teal-vibrant, --color-teal-vibrant-lighter)

Changes

  • src/js/techreport/geoBreakdown.js — new self-contained Highcharts component
  • src/js/techreport/section.js — registers geoBreakdown component type
  • templates/techreport/components/geo_breakdown.html — component template
  • templates/techreport/drilldown.html — adds the Geographic Breakdown section
  • templates/techreport/techreport.html — loads the new JS bundle
  • config/techreport.json — adds geo_breakdown config to drilldown page
  • webpack.config.js — adds techreport/geoBreakdown entry

Depends on

This PR requires a new /v1/geo-breakdown API endpoint — see companion PR in HTTPArchive/tech-report-apis.

Adds a Geographic Breakdown section to the drilldown page showing
origins with good/not-passing CWVs per country as a stacked horizontal
bar chart, sorted by total origins. Supports CWV metric selection
(overall, LCP, INP, CLS, FCP, TTFB), mobile/desktop toggle, and
light/dark mode. Requires the new /v1/geo-breakdown API endpoint.

Closes HTTPArchive#1146
The endpoint now defaults to the latest month; no param needed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant