[WIP] Add Core Web Vitals Report

[sarahfossheim]

See https://github.com/HTTPArchive/httparchive.org/pull/728

Note:

• ! Work in progress / Prototype
• The PR can be reviewed already, but the outcome is not a production-ready app :)

The PR is focused on:

• Configuring the new CWV tech report
• Putting in place
• Adding configuration and template and component structure for the tech report
• Load in the data
• Creating a basic frame and way of displaying the data as a proof of concept

Included:

• Text, labels, and other config in the techreport.json config file
• Landing, Drilldown, Comparison page template files
• Filters (apps, region, rank) can be set through selects, need to press update button to update the filter
  • This also updates the URL
  • The correct page skeleton is drawn on the server-side based on the filters (URL) and the configuration (techreport.json)
  • The geo and rank filters carry over between the pages
  • The APP name is case sensitive and needs to be formatted the same as in the API
  • The category dropdown filters the technology dropdown
  • On the comparison page it’s possible to select multiple technologies
• The data is fetched and drawn client-side
  • On the client we fetch the data through .json files in one global class
  • When the data is fetched, it gets processed and then the HTML gets updated with it
• The data can be further filtered without requiring a new API call by the following criteria:
  • Client, on the page level
  • Sub-metric, on the component level
• The following components are added:
  • Report navigation, to switch between the different pages
  • Technology (+category), rank, geo filters
  • Summary cards on the drilldown page
  • Summary table on the comparison page
  • Timeseries per metric (Good CWVs, lighthouse scores, page weight, adoption)
    • Consists of line chart (Highcharts), summary stats, and table alternative
    • Possible to select sub-metric that updates all the contents of the timeseries
  • CWV sub-metric comparison table
• Start of the styling the pages and components
• More info in: docs/cwv_tech_report.md

To be added

PR can be reviewed even though these are not added yet:

• [ ] Charts in the comparison page
The comparison page currently consists only of tables, add the Highcharts timeseries there too
• [ ] Code cleanup
  • [ ] Make summary cards and table follow the same format as the charts
  • [ ] Fetch all text labels from a settings file (easier to update in one central location)
  • [ ] Continue documentation
  • [ ] Linting
• [ ] Bugfixes
  • [ ] Category filter doesn’t work when adding new techs in the comparison view

In follow-up PR(s) this autumn:

• Switch from JSON files to the new API
• Styling of the filters
• Improved styling of the page and charts
• UX improvements & improved search
• Copywriting / correct text labels
• Accessibility & performance updates
• Additional charts based on the metrics we have
• …
• See Notion / Figma

Later:

What we know of already:

• Improved functionality and styling
• Additional metrics and charts:
  • Median CWVs
  • Distribution of the CWV values
  • Breakdown / compare / explore by rank
  • Lighthouse audits / opportunities
  • …
• …
• See Notion / Figma