Skip to content

Commit a82b3bc

Browse files
sarahfossheimrviscomi
sarahfossheim
and
rviscomi
authored
Category dashboard with collapsible filters (#934)
* custom techreport header * add prototype categories page * add filters in sidebar and change page based on amount of techs * add new nav and filter structure (wip * responsive filters prototype * wip: add collapsible filter sidebar * fix bug with double close button * add aria * add checkboxes on category page, update texts, minor bugfixes * select correct technology in comparison view, remove category selector, minor bugfixes * fix css linting * fix linting * fix linting * fix sorting order multi apps * sort table alternative correctly * close <nav> * update tests * format tests * Update src/js/techreport/tableLinked.js Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com> * fix geo/rank bug, long category list bug, adoption bug, add category summary, improve landing page card interaction * add technologies to summary in category page * add timestamp to category page and format large numbers * remove console.log * select correct technology in comparison view filters * make menu responsive on mobile + track aria-expanded status * give remove button icon alt that matches the label * filter out data with empty content * fix linting * add width and height to close filter button * remove placeholder texts * use client filter for origins in category page --------- Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com>
1 parent 9840299 commit a82b3bc

31 files changed

+1359
-412
lines changed

‎config/techreport.json‎

Lines changed: 133 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
"name": "Technology Report",
44
"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.",
55
"config": {
6+
"default_apps": {
7+
"drilldown": [ "ALL" ],
8+
"comparison": [ "ALL", "WordPress", "Wix", "Next.js" ]
9+
},
10+
"default_category": "CMS",
611
"cwv_subcategories": [
712
"CLS",
813
"LCP",
@@ -39,7 +44,7 @@
3944
"id": "landing",
4045
"title": "Technology Report",
4146
"subtitle": "Report",
42-
"description": "This is placeholder text about how the report works",
47+
"description": "",
4348
"data": {},
4449
"filters": {
4550
"technologies": ["WordPress", "Squarespace", "Drupal"]
@@ -82,7 +87,7 @@
8287
"id": "drilldown",
8388
"title": "Drilldown",
8489
"subtitle": "Technology Report",
85-
"description": "Drilldown placeholder",
90+
"description": "View detailed information about one technology and compare mobile and desktop data over time.",
8691
"config": {
8792
"default": {
8893
"app": ["ALL"],
@@ -151,7 +156,7 @@
151156
"table": {
152157
"param": "",
153158
"default": "adoption",
154-
"caption": "Usage placeholder",
159+
"caption": "Amount of origins a technology has over time.",
155160
"columns": [
156161
{
157162
"key": "date",
@@ -263,7 +268,7 @@
263268
},
264269
"good_cwv_timeseries": {
265270
"title": "Good Core Web Vitals over time",
266-
"description": "Placeholder - combination of several metrics",
271+
"description": "The percentage of origins passing all three Core Web Vitals (LCP, INP, CLS) with a good experience. Note that if an origin is missing INP data, it's assessed based on the performance of the remaining metrics.",
267272
"id": "good_cwv_timeseries",
268273
"endpoint": "vitals",
269274
"metric": "good_pct",
@@ -425,7 +430,7 @@
425430
},
426431
"lighthouse_timeseries": {
427432
"title": "Lighthouse over time",
428-
"description": "Placeholder text",
433+
"description": "",
429434
"id": "lighthouse_timeseries",
430435
"endpoint": "lighthouse",
431436
"metric": "median_score_pct",
@@ -557,7 +562,7 @@
557562
},
558563
"weight_timeseries": {
559564
"title": "Weight over time",
560-
"description": "Placeholder text",
565+
"description": "",
561566
"id": "weight_timeseries",
562567
"summary": true,
563568
"endpoint": "pageWeight",
@@ -695,7 +700,8 @@
695700
"#E24070"
696701
],
697702
"overrides": {
698-
"WordPress": "#fff000"
703+
"WordPress": "#3858e9",
704+
"ALL": "#69797e"
699705
}
700706
},
701707
"default": {
@@ -750,7 +756,7 @@
750756
},
751757
"good_cwv_timeseries": {
752758
"title": "Good Core Web Vitals over time",
753-
"description": "Placeholder - combination of several metrics",
759+
"description": "Comparison of the percentage of origins passing all three Core Web Vitals (LCP, INP, CLS) with a good experience. Note that if an origin is missing INP data, it's assessed based on the performance of the remaining metrics.",
754760
"id": "good_cwv_timeseries",
755761
"endpoint": "vitals",
756762
"metric": "good_pct",
@@ -789,7 +795,7 @@
789795
"table": {
790796
"param": "good-cwv-over-time",
791797
"default": "overall",
792-
"caption": "Good Core Web Vitals placeholder",
798+
"caption": "Comparison of the percentage of origins of the different technologies passing all three Core Web Vitals (LCP, INP, CLS), visualized over time.",
793799
"columns": [
794800
{
795801
"key": "date",
@@ -857,7 +863,7 @@
857863
},
858864
"lighthouse_timeseries": {
859865
"title": "Lighthouse over time",
860-
"description": "Placeholder text",
866+
"description": "Lighthouse has audits for performance, accessibility, progressive web apps, SEO, and more. Based on the audits, a score is calculated. Currently, this section visualizes median scores, but in the future you'll also be able to explore the details of the audits here.",
861867
"id": "lighthouse_timeseries",
862868
"endpoint": "lighthouse",
863869
"metric": "median_score_pct",
@@ -887,7 +893,7 @@
887893
"table": {
888894
"param": "median-lighthouse-over-time",
889895
"default": "performance",
890-
"caption": "Lighthouse placeholder",
896+
"caption": "Comparing the Lighthouse scores of the different selected technologies over time.",
891897
"columns": [
892898
{
893899
"key": "date",
@@ -952,7 +958,7 @@
952958
},
953959
"weight_timeseries": {
954960
"title": "Page weight over time",
955-
"description": "Placeholder text",
961+
"description": "",
956962
"id": "weight_timeseries",
957963
"endpoint": "pageWeight",
958964
"metric": "median_bytes",
@@ -1047,7 +1053,7 @@
10471053
},
10481054
"adoption_timeseries": {
10491055
"title": "Origins over time",
1050-
"description": "Placeholder text",
1056+
"description": "",
10511057
"id": "adoption_timeseries",
10521058
"endpoint": "adoption",
10531059
"metric": "origins",
@@ -1117,7 +1123,107 @@
11171123
}
11181124
}
11191125
},
1120-
"description": "Comparison placeholder"
1126+
"description": "Get a detailed comparison for 2 to 10 technologies."
1127+
},
1128+
"category": {
1129+
"id": "category",
1130+
"title": "Categories",
1131+
"subtitle": "Technology Report",
1132+
"config": {
1133+
"default": {
1134+
"category": "CMS",
1135+
"app": ["ALL", "WordPress", "Drupal"],
1136+
"series": {
1137+
"breakdown": "app"
1138+
}
1139+
},
1140+
"summary": [
1141+
{
1142+
"endpoint": "category",
1143+
"metric": "origins",
1144+
"label": "Origins",
1145+
"description": "Origins analyzed in this category.",
1146+
"key": "info"
1147+
},
1148+
{
1149+
"endpoint": "category",
1150+
"metric": "technologies",
1151+
"label": "Technologies",
1152+
"description": "Amount of technologies in this category.",
1153+
"key": "info"
1154+
}
1155+
],
1156+
"tech_comparison_summary": {
1157+
"id": "tech_comparison_summary",
1158+
"table": {
1159+
"caption": "Summary",
1160+
"key": "technologies",
1161+
"columns": [
1162+
{
1163+
"key": "selectTech",
1164+
"name": "Select technology",
1165+
"hiddenName": true,
1166+
"type": "checkbox"
1167+
},
1168+
{
1169+
"key": "technology",
1170+
"name": "Tech",
1171+
"type": "heading"
1172+
},
1173+
{
1174+
"key": "origins",
1175+
"name": "Origins",
1176+
"breakdown": "subcategory",
1177+
"subcategory": "adoption",
1178+
"endpoint": "adoption",
1179+
"metric": "origins"
1180+
},
1181+
{
1182+
"key": "good_pct",
1183+
"name": "Good CWV",
1184+
"breakdown": "subcategory",
1185+
"subcategory": "overall",
1186+
"suffix": "%",
1187+
"className": "main-cell pct-value",
1188+
"endpoint": "vitals",
1189+
"metric": "good_pct"
1190+
},
1191+
{
1192+
"key": "good_pct",
1193+
"name": "LCP",
1194+
"breakdown": "subcategory",
1195+
"subcategory": "LCP",
1196+
"suffix": "%",
1197+
"endpoint": "vitals",
1198+
"metric": "good_pct"
1199+
},
1200+
{
1201+
"key": "good_pct",
1202+
"name": "INP",
1203+
"breakdown": "subcategory",
1204+
"subcategory": "INP",
1205+
"suffix": "%",
1206+
"endpoint": "vitals",
1207+
"metric": "good_pct"
1208+
},
1209+
{
1210+
"key": "good_pct",
1211+
"name": "CLS",
1212+
"breakdown": "subcategory",
1213+
"subcategory": "CLS",
1214+
"suffix": "%",
1215+
"endpoint": "vitals",
1216+
"metric": "good_pct"
1217+
},
1218+
{
1219+
"key": "client",
1220+
"name": "Client",
1221+
"className": "client"
1222+
}
1223+
]
1224+
}
1225+
}
1226+
}
11211227
}
11221228
},
11231229

@@ -1145,6 +1251,9 @@
11451251
}
11461252
},
11471253
"vitals": {
1254+
"general": {
1255+
"description": "Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. A good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices."
1256+
},
11481257
"overall": {
11491258
"label": "Overall Core Web Vitals",
11501259
"title": "Passes Core Web Vitals",
@@ -1178,23 +1287,29 @@
11781287
}
11791288
},
11801289
"pageWeight": {
1290+
"general": {
1291+
"description": ""
1292+
},
11811293
"images": {
11821294
"title": "Image Weight",
1183-
"description": "todo"
1295+
"description": ""
11841296
},
11851297
"js": {
11861298
"title": "JavaScript Transfer Size",
1187-
"description": "todo"
1299+
"description": ""
11881300
},
11891301
"total": {
11901302
"title": "Total Page Weight",
1191-
"description": "todo"
1303+
"description": ""
11921304
}
11931305
},
11941306
"adoption": {
1307+
"general": {
1308+
"description": ""
1309+
},
11951310
"adoption": {
11961311
"title": "Adoption",
1197-
"description": "Todo"
1312+
"description": "The amount of origins using this technology over time."
11981313
}
11991314
}
12001315
},

‎server/routes.py‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ def reports():
6868

6969

7070
@app.route("/reports/techreport/<page_id>", strict_slashes=False)
71-
def techreport(page_id):
71+
def techreportlanding(page_id):
7272
# Needed for the header dropdown
7373
all_reports = report_util.get_reports()
7474

@@ -85,26 +85,92 @@ def techreport(page_id):
8585
"app"
8686
) or ["ALL"]
8787

88+
# Get the filters
89+
requested_geo = request.args.get("geo") or "ALL"
90+
requested_rank = request.args.get("rank") or "ALL"
91+
requested_category = request.args.get("category") or "ALL"
92+
filters = {
93+
"geo": requested_geo,
94+
"rank": requested_rank,
95+
"app": requested_technologies,
96+
"category": requested_category,
97+
}
98+
params = {
99+
"geo": requested_geo.replace(" ", "+"),
100+
"rank": requested_rank.replace(" ", "+"),
101+
}
102+
103+
active_tech_report["filters"] = filters
104+
active_tech_report["params"] = params
105+
106+
return render_template(
107+
"techreport/%s.html" % page_id,
108+
active_page=page_id,
109+
tech_report_labels=tech_report.get("labels"),
110+
tech_report_config=tech_report.get("config"),
111+
tech_report_page=active_tech_report,
112+
custom_navigation=True,
113+
reports=all_reports,
114+
)
115+
116+
117+
@app.route("/reports/techreport/tech", strict_slashes=False)
118+
def techreport():
119+
# Needed for the header dropdown
120+
all_reports = report_util.get_reports()
121+
122+
# Get the configuration for the tech report
123+
tech_report = tech_report_util.get_report()
124+
125+
# Get the current page_id
126+
requested_technologies = ["ALL"]
127+
if request.args.get("tech"):
128+
requested_technologies = request.args.get("tech").split(",")
129+
130+
if len(requested_technologies) > 1:
131+
page_id = "comparison"
132+
else:
133+
page_id = "drilldown"
134+
135+
# Get the settings for the current page
136+
active_tech_report = tech_report.get("pages").get(page_id)
137+
138+
# Add the technologies requested in the URL to the filters
139+
# Use the default configured techs as fallback
140+
# Use ["ALL"] if there is nothing configured
141+
requested_technologies = active_tech_report.get("config").get("default").get(
142+
"app"
143+
) or ["ALL"]
144+
88145
if request.args.get("tech"):
89146
requested_technologies = request.args.get("tech").split(",")
90147

91148
# Get the filters
92149
requested_geo = request.args.get("geo") or "ALL"
93150
requested_rank = request.args.get("rank") or "ALL"
151+
requested_category = request.args.get("category") or "ALL"
94152
filters = {
95153
"geo": requested_geo,
96154
"rank": requested_rank,
97155
"app": requested_technologies,
156+
"category": requested_category,
157+
}
158+
params = {
159+
"geo": requested_geo.replace(" ", "+"),
160+
"rank": requested_rank.replace(" ", "+"),
98161
}
99162

100163
active_tech_report["filters"] = filters
164+
active_tech_report["params"] = params
101165

102166
return render_template(
103167
"techreport/%s.html" % page_id,
104168
active_page=page_id,
169+
requested_page="technology",
105170
tech_report_labels=tech_report.get("labels"),
106171
tech_report_config=tech_report.get("config"),
107172
tech_report_page=active_tech_report,
173+
custom_navigation=True,
108174
reports=all_reports,
109175
)
110176

0 commit comments

Comments
 (0)