Skip to content

Commit 037a3c1

Browse files
sarahfossheimrviscomitunetheweb
authored
[WIP] Add Core Web Vitals Report (#785)
* add dashboard templates example * move to techreport.json/.py, out of reports * rename dashboard to tech_report * add techreport as a link in the reports.json instead of almost hardcoding it into the main.html * start adding components and cleaning up structure * add drilldown/comparison toggle header * add basic styling to landing table * fetch mock responses (needs code cleanup) * fetch metrics for sections on drilldown * style drilldown page * style drilldown page * move summary cards to their own component * turn placeholder timeseries in its own component * conditionally render the data in the drilldown based on selected tech * compress global header in techreport * compress global footer in techreport * use data from sample jsons in tables * make table responsive * fix indentations * linting * remove if statement from <a> (linting) * style landing page * add drilldown and comparison placeholders * show correct drilldown page * fix indentation * code cleanup * use new jsons for api calls * support app names with mismatching capitalization, update and style filters * filter positioning * show selected rank and geo filter * linting * fix bug - selected option in dropdown now matches the url * add frame for latest data table * replace absolute values with % * add more metrics in the table * add table on overview * render data with js * readd table styling * clean up code * readd filters * populate tables (code cleanup needed) * re-add tables and filters on landing and comparison pages * add technology options for each tech set in the filters from the url (prototype, cleanup needed) * select multiple techs from header (wip) * improve styling, limit tags, limit tech selection for drilldown page * add multi tech comparison tables * update styling and responsiveness, remember geo/rank filters * bug fixes, show warning when data doesnt exist * allow removing techs in comparison mode * bugfix * connect wrapper around tables to the table captions (a11y) * WIP: add subcategory selector to tables + listen to changes (prototype) * add subcategory selector through slots * add subcategories to multi tech view * add units * bugfix: remember filters when drilling down form multitech view * WIP - add graphs and toggle, category dropdown, and update url on subcategory selection * WIP: subcategory selector updates chart prototype * fix subcategory selector bug with table * turn timeseries into class * code cleanup: use classes for timeseries, sections in preparation of new api * write documentation * add more info about the files * re-add summary cards * update summary on client select * clean up card components + bug fixes * style client in summary card * update styling * add table alternatives as general html+js instead of webcomponent * style table alts * update title and description of cards based on selected subcategory * add geo and rank info for each component (on the drilldown page) * style subcategory selector * add summary to metric sections * update styling * clean up styles * add support for app comparison tables * add comparison tables to all metrics * readd line charts on drilldown * WIP: add possibility for timeseries broken down by app * update metric/client in timeseries (code cleanup needed) * add support for timeseries summary in comparison mode (wip) * add summary to all metrics (code cleanup needed) * add color to comparison timeseries and summary (bugfixes/cleanup needed) * update color codes * removed unused code * staging script * update colors * only show markers on hover * bugfix: show categories correctly when adding more techs * fill in all category dropdowns * prototype indicator icons on line charts * add colors * style filters * style select * style filters * fix bug deleting techs * restructure heading * add filter info to page header * remember marker status in localstorage * responsiveness improvements * add basic styling to highcharts tables * style filter info header * style metric selector * fix bug with techs that have - in the name * fetch new apis globally * merge results (prototype) * prototype new api in drilldown page * format data * lighthouse progress prototype * prototype dark mode (wip) * format multiple tech data * use new apis in multi tech * make tables work with new api * bugfix cwv * draw pageweight data and months with missing values * start re-adding comparison table * prototype comparison summary (wip) * bugfix table * fix page weight bug * remove web components * select app color based on settings and name * move reusable code to utils * utils cleanup * update descriptions * cleanup * fix bugs with text * improve sr/keyboard interaction of charts * Add test coverage * Fix test url * Linting * More linting fixes * Linting fixes * Fix Lighthouse tests * replace filters with new apis * update highcharts colors * modify variables for dark mode * update page background * add dropdown dark mode * edit highcharts tooltip color for darkmode * code cleanup & bugfix * beta banner and feedback message * Update src/js/components/filters.js Co-authored-by: Rick Viscomi <[email protected]> * Update server/tests/routes_test.py Co-authored-by: Rick Viscomi <[email protected]> * clean up code & improve 200% font-size * fix config * responsive and copy * Remove source maps * lowercase colors * CSS linting * More CSS linting * More linting * Linting * remove duplicate selectors * img h/w --------- Co-authored-by: Rick Viscomi <[email protected]> Co-authored-by: Barry Pollard <[email protected]> Co-authored-by: Rick Viscomi <[email protected]>
1 parent 9bb33de commit 037a3c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5629
-5
lines changed

‎.github/linters/.stylelintrc.json

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
],
1111
"color-function-notation": null,
1212
"comment-empty-line-before": null,
13+
"declaration-colon-newline-after": null,
1314
"font-family-no-duplicate-names": [
1415
true,
1516
{
@@ -18,6 +19,7 @@
1819
],
1920
"length-zero-no-unit": null,
2021
"max-line-length": null,
22+
"media-feature-range-notation": "prefix",
2123
"no-descending-specificity": null,
2224
"no-eol-whitespace": [
2325
true,

‎config/last_updated.json

+110
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
{
2+
"/static/components/summary.css": {
3+
"date_published": "2023-10-09T00:00:00.000Z",
4+
"date_modified": "2023-10-09T00:00:00.000Z",
5+
"hash": "304aa7ab9c39f9eb730f4f9de0261652"
6+
},
7+
"/static/components/table.css": {
8+
"date_published": "2023-10-09T00:00:00.000Z",
9+
"date_modified": "2023-10-09T00:00:00.000Z",
10+
"hash": "56bd14f21cf53b601d86be0061ae7baa"
11+
},
212
"/static/css/bootstrap.min.css": {
313
"date_published": "2018-05-08T00:00:00.000Z",
414
"date_modified": "2021-04-23T00:00:00.000Z",
@@ -29,11 +39,46 @@
2939
"date_modified": "2023-04-26T00:00:00.000Z",
3040
"hash": "1d22c6afc3a451844da89684d7ad84ef"
3141
},
42+
"/static/css/techreport/general.css": {
43+
"date_published": "2023-10-09T00:00:00.000Z",
44+
"date_modified": "2024-04-05T00:00:00.000Z",
45+
"hash": "28eb032e3482a2447241be1e712ed74d"
46+
},
47+
"/static/css/techreport/landing.css": {
48+
"date_published": "2023-10-09T00:00:00.000Z",
49+
"date_modified": "2023-10-09T00:00:00.000Z",
50+
"hash": "804dc15c1ed6962ae75a2b189de56148"
51+
},
52+
"/static/css/techreport/techreport.css": {
53+
"date_published": "2023-10-09T00:00:00.000Z",
54+
"date_modified": "2024-04-05T00:00:00.000Z",
55+
"hash": "44544a77ae69a65af90cb8b147bd0263"
56+
},
57+
"/static/js/accessibility.js": {
58+
"date_published": "2023-10-09T00:00:00.000Z",
59+
"date_modified": "2023-10-09T00:00:00.000Z",
60+
"hash": "cf1af15492a3443d875cffaf34cd97fe"
61+
},
62+
"/static/js/accessibility.js.map": {
63+
"date_published": "2023-10-09T00:00:00.000Z",
64+
"date_modified": "2023-10-09T00:00:00.000Z",
65+
"hash": "c2cbce2ba7a3898335fde135b24e301d"
66+
},
67+
"/static/js/export-data.js": {
68+
"date_published": "2023-10-09T00:00:00.000Z",
69+
"date_modified": "2023-10-09T00:00:00.000Z",
70+
"hash": "7f994d8425277b2e3e05f062c8c497c1"
71+
},
3272
"/static/js/exporting.js": {
3373
"date_published": "2021-05-19T00:00:00.000Z",
3474
"date_modified": "2024-01-28T00:00:00.000Z",
3575
"hash": "bf113a2ddbc983f18f069cd5957814d9"
3676
},
77+
"/static/js/exporting.js.map": {
78+
"date_published": "2024-04-05T00:00:00.000Z",
79+
"date_modified": "2024-04-05T00:00:00.000Z",
80+
"hash": "90a638c281c291abf8acb7531024d3a5"
81+
},
3782
"/static/js/faq.js": {
3883
"date_published": "2018-05-08T00:00:00.000Z",
3984
"date_modified": "2024-03-14T00:00:00.000Z",
@@ -44,11 +89,26 @@
4489
"date_modified": "2024-01-28T00:00:00.000Z",
4590
"hash": "1d792d50f4462089ca7b3453f8426d6c"
4691
},
92+
"/static/js/highcharts-more.js.map": {
93+
"date_published": "2024-04-05T00:00:00.000Z",
94+
"date_modified": "2024-04-05T00:00:00.000Z",
95+
"hash": "8d31b26d9fd75b9f2749cf0fc652fb34"
96+
},
97+
"/static/js/highcharts.js": {
98+
"date_published": "2023-10-09T00:00:00.000Z",
99+
"date_modified": "2023-10-09T00:00:00.000Z",
100+
"hash": "7517a72a4be7d8cb449462dfd7c3cf34"
101+
},
47102
"/static/js/highstock.js": {
48103
"date_published": "2021-04-26T00:00:00.000Z",
49104
"date_modified": "2024-01-28T00:00:00.000Z",
50105
"hash": "2435bd016c365ddc7c6daad120bcde8b"
51106
},
107+
"/static/js/highstock.js.map": {
108+
"date_published": "2024-04-05T00:00:00.000Z",
109+
"date_modified": "2024-04-05T00:00:00.000Z",
110+
"hash": "6a6de9a402c29ea5b76e30b5eed6ddd9"
111+
},
52112
"/static/js/histogram.js": {
53113
"date_published": "2018-05-08T00:00:00.000Z",
54114
"date_modified": "2024-03-14T00:00:00.000Z",
@@ -74,6 +134,51 @@
74134
"date_modified": "2024-03-14T00:00:00.000Z",
75135
"hash": "b15100fd778e0784c465ffe4215e57be"
76136
},
137+
"/static/js/summaryLinked.js": {
138+
"date_published": "2023-10-09T00:00:00.000Z",
139+
"date_modified": "2023-10-09T00:00:00.000Z",
140+
"hash": "b00f52e619f9aa6b965ebe2a49b6fd23"
141+
},
142+
"/static/js/tableCWVOverviewMulti.js": {
143+
"date_published": "2023-10-09T00:00:00.000Z",
144+
"date_modified": "2023-10-09T00:00:00.000Z",
145+
"hash": "ab2994dc074ff02e055c5fb5c8df988b"
146+
},
147+
"/static/js/tableGeneral.js": {
148+
"date_published": "2023-10-09T00:00:00.000Z",
149+
"date_modified": "2023-10-09T00:00:00.000Z",
150+
"hash": "d2317a0b43a4c04a86723b178dfedf2c"
151+
},
152+
"/static/js/tableGeneralMulti.js": {
153+
"date_published": "2023-10-09T00:00:00.000Z",
154+
"date_modified": "2023-10-09T00:00:00.000Z",
155+
"hash": "62b2c943393389849758cc3d7ff7be5b"
156+
},
157+
"/static/js/tableOverview.js": {
158+
"date_published": "2023-10-09T00:00:00.000Z",
159+
"date_modified": "2023-10-09T00:00:00.000Z",
160+
"hash": "0a9bf98ecfeeb9594fde313ae8ab8edb"
161+
},
162+
"/static/js/tableOverviewMulti.js": {
163+
"date_published": "2023-10-09T00:00:00.000Z",
164+
"date_modified": "2023-10-09T00:00:00.000Z",
165+
"hash": "6d90ac2a5081aebcf8377f37dc2d98dc"
166+
},
167+
"/static/js/techreport.js": {
168+
"date_published": "2023-10-09T00:00:00.000Z",
169+
"date_modified": "2024-04-05T00:00:00.000Z",
170+
"hash": "c6d56aa085452dd25392d3cac889dba8"
171+
},
172+
"/static/js/techreport/section.js": {
173+
"date_published": "2023-10-09T00:00:00.000Z",
174+
"date_modified": "2024-04-05T00:00:00.000Z",
175+
"hash": "692808a4620e6d84ce2a12d45eb7d40b"
176+
},
177+
"/static/js/techreport/timeseries.js": {
178+
"date_published": "2023-10-09T00:00:00.000Z",
179+
"date_modified": "2024-04-05T00:00:00.000Z",
180+
"hash": "6e7983322c2a8dab527e43209910e939"
181+
},
77182
"/static/js/timeseries.js": {
78183
"date_published": "2018-05-08T00:00:00.000Z",
79184
"date_modified": "2024-03-14T00:00:00.000Z",
@@ -119,6 +224,11 @@
119224
"date_modified": "2023-09-07T00:00:00.000Z",
120225
"hash": "bb56bcf9203e97fcad14369053f778e3"
121226
},
227+
"reports/cwv-tech-new": {
228+
"date_published": "2023-10-09T00:00:00.000Z",
229+
"date_modified": "2024-04-05T00:00:00.000Z",
230+
"hash": "59ca9a96a7a3a9ec1b19bb7aba15f930"
231+
},
122232
"reports/loading-speed": {
123233
"date_published": "2018-05-08T00:00:00.000Z",
124234
"date_modified": "2023-09-07T00:00:00.000Z",

‎config/reports.json

+19-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"page-weight",
1111
"chrome-ux-report",
1212
"project-fugu",
13-
"cwv-tech"
13+
"cwv-tech",
14+
"cwv-tech-new"
1415
],
1516
"_featured": [
1617
"state-of-the-web"
@@ -1378,5 +1379,22 @@
13781379
"width": "fa-w-18"
13791380
}
13801381
}
1382+
},
1383+
"cwv-tech-new": {
1384+
"name": "BETA: Core Web Vitals Technology Report",
1385+
"summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
1386+
"url": "/reports/techreport/landing",
1387+
"metrics": [],
1388+
"graphic": {
1389+
"bgcolor": "#fff",
1390+
"primary": {
1391+
"color": "#444",
1392+
"icon": "fas fa-wrench"
1393+
},
1394+
"secondary": {
1395+
"color": "rgba(0, 0, 0, 0.3)",
1396+
"icon": "fas fa-tachometer-alt"
1397+
}
1398+
}
13811399
}
13821400
}

0 commit comments

Comments
 (0)