-
-
Notifications
You must be signed in to change notification settings - Fork 42
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WIP] Add core web vitals report type #728
Changes from 14 commits
ef85cf4
9e7aaa4
8367442
b02b349
6c31546
850f47b
c56860f
10622e0
2b523e8
05274c6
9fb8b29
fa837aa
2e20af0
88315c0
00aee29
0e07888
b347ebc
f0c60ba
4271bf7
8aa5ff8
4f943e9
2afde0c
8b4af8d
075a84f
936e260
1015478
ae366a5
1eed09f
8e43157
f7e3588
7ba16d1
312459e
edaef00
43a8629
32bcc5b
43e464b
d29dbca
6e9e847
3370006
009158e
3920683
fe29342
70c76be
a3d95e6
8a2fb08
4996410
0a05bb8
8c36231
1a78221
4745cde
7f8855d
c42ee16
31b3538
6f135ec
5930b45
9e1046e
955bd7b
657ed1c
5cf688d
6c25ffb
9fb83f1
ce5c4fb
e82fa2a
3e840db
74b1ae2
e4854f5
33a8b1c
4ef31da
a0dd98e
6d5b761
31ce9fb
6b0816c
9204729
7029693
daac7ed
3dd93be
b0d2f34
d457499
a88d901
a7a8261
0396e1d
3ff8d01
600addb
4afc026
1dd4510
0e33b15
fdb8718
e1d91c9
116154b
a2266d6
19f546f
0b3e063
db2acf7
880de49
d543395
602842d
8b757ff
d046799
b7ebafa
7ab60bd
9b644a3
40e2dc5
a5da0a2
1fe7468
f0ea1f2
85d6fe1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
{ | ||
"results": [ | ||
{ | ||
"technology_name": "Wordpress", | ||
"dates": [ | ||
{ | ||
"date": "2022-04-22T00:00:00.000Z", | ||
"origins": { | ||
"mobile": 524362, | ||
"desktop": 73542 | ||
} | ||
}, | ||
{ | ||
"date": "2022-03-22T00:00:00.000Z", | ||
"origins": { | ||
"mobile": 471531, | ||
"desktop": 68634 | ||
} | ||
} | ||
] | ||
}, | ||
{ | ||
"technology_name": "Squarespace", | ||
"dates": [ | ||
{ | ||
"date": "2022-04-22T00:00:00.000Z", | ||
"origins": { | ||
"mobile": 16345, | ||
"desktop": 735 | ||
} | ||
} | ||
] | ||
} | ||
] | ||
} | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
{ | ||
"results": [ | ||
{ | ||
"technology": "wordpress", | ||
"dates": [ | ||
{ | ||
"date": "2022-04-22T00:00:00.000Z", | ||
"tested": 204743, | ||
"good_overall": { | ||
"desktop": 73624, | ||
"mobile": 13947, | ||
"dataset": 937263 | ||
} | ||
}, | ||
{ | ||
"date": "2022-03-22T00:00:00.000Z", | ||
"tested": 104312, | ||
"good_overall": { | ||
"desktop": 14, | ||
"mobile": 263, | ||
"dataset": 424 | ||
} | ||
} | ||
] | ||
}, | ||
{ | ||
"technology": "squarespace", | ||
"dates": [ | ||
{ | ||
"date": "2022-04-22T00:00:00.000Z", | ||
"name": "overall", | ||
"tested": 264, | ||
"good_overall": { | ||
"desktop": 163, | ||
"mobile": 13, | ||
"dataset": 54 | ||
} | ||
} | ||
] | ||
} | ||
] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"results": [ | ||
{ | ||
"technology": "wordpress", | ||
"title": "Wordpress", | ||
"description": "Wordpress description" | ||
}, | ||
{ | ||
"technology": "squarespace", | ||
"title": "Squarespace", | ||
"description": "Squarespace description" | ||
} | ||
] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
{ | ||
"id": "techreport", | ||
"name": "Technology Report", | ||
"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.", | ||
"metrics": [], | ||
"labels": { | ||
"adoption": { | ||
"title": "Adoption", | ||
"section_description": "Here is a description for the adoption section", | ||
"summary_description": "websites tested using this technology", | ||
"timeseries_title": "Origins in our dataset over time", | ||
"timeseries_description": "Origin description" | ||
}, | ||
"cwv": { | ||
"title": "Core Web Vitals", | ||
"section_description": "Placeholder text, A couple of words about what will be visualized in this section. Which values are there, what do they mean, etc. And we can also link to a relevant help page if needed. Probably doesn’t need much text here, unless if we want to summarise the data. Learn more", | ||
"good": { | ||
"summary_title": "Good CWVs", | ||
"summary_description": "of tested origins had overall good Core Web Vitals.", | ||
"timeseries_title": "Good Core Web Vitals over time", | ||
"section_description": "The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a 'good' experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics." | ||
} | ||
} | ||
}, | ||
"pages": { | ||
"landing": { | ||
"id": "landing", | ||
"title": "Technology Report", | ||
"subtitle": "Report", | ||
"description": "This is placeholder text about how the report works", | ||
"sections": [ | ||
{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @tunetheweb something to discuss: to which extend do we want to configure the pages / sections / components in a json file vs. building the page structure directly in the techreport templates? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm OK with NOT putting too much into JSON. It works well for the other reports where they are all basically copies of each other with different config. But this will be it's own, individual one so quite different. Then again, having the labels in JSON would allow us to potentially offer the report in alternative languages. But should be easy enough to convert the hardcoded labels to config later. |
||
"id": "explore", | ||
"title": "Explore our data", | ||
"metrics": ["adoption", "good_vitals"], | ||
"filters": { | ||
"technologies": ["wordpress", "squarespace"], | ||
"geo": "all" | ||
}, | ||
"data": {}, | ||
"blocks": [ | ||
{ | ||
"name": "Popular Technologies", | ||
"description": "Placeholder description", | ||
"type": "table", | ||
"config": { | ||
"columns": [ | ||
{ | ||
"metric": "technology", | ||
"name": "Technology" | ||
}, | ||
{ | ||
"metric": "adoption d", | ||
"name": "Origins" | ||
}, | ||
{ | ||
"metric": "good_vitals", | ||
"name": "Good CWVs" | ||
} | ||
] | ||
} | ||
} | ||
] | ||
} | ||
] | ||
}, | ||
"drilldown": { | ||
"id": "drilldown", | ||
"title": "Drilldown", | ||
"subtitle": "Technology Report", | ||
"description": "Drilldown placeholder", | ||
"sections": [ | ||
{ | ||
"id": "all", | ||
"title": "All", | ||
"metrics": ["good_vitals", "adoption", "metadata"], | ||
"data": {} | ||
} | ||
] | ||
}, | ||
"comparison": { | ||
"id": "comparison", | ||
"title": "Comparison", | ||
"subtitle": "Technology Report", | ||
"description": "Comparison placeholder", | ||
"blocks": [ | ||
{ | ||
"name": "Summary", | ||
"description": "Summary table", | ||
"type": "table" | ||
} | ||
] | ||
} | ||
}, | ||
"graphic": { | ||
"bgcolor": "#fff", | ||
"primary": { | ||
"color": "#444", | ||
"icon": "fas fa-wrench" | ||
}, | ||
"secondary": { | ||
"color": "rgba(0, 0, 0, 0.3)", | ||
"icon": "fas fa-tachometer-alt" | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import json | ||
|
||
def update_report(): | ||
global tech_report_json | ||
with open("config/techreport.json") as tech_report_file: | ||
tech_report_json = json.load(tech_report_file) | ||
|
||
|
||
def get_report(): | ||
global tech_report_json | ||
update_report() | ||
|
||
return tech_report_json | ||
|
||
|
||
def get_metrics(metric, filters={}): | ||
global report_metrics | ||
|
||
# Mock functionality | ||
# TODO: Replace with API call | ||
print("fetch results for metric with filters") | ||
print(metric) | ||
print(filters) | ||
|
||
with open("config/mock_responses/%s.json" % metric) as report_metrics_file: | ||
report_metrics = json.load(report_metrics_file) | ||
|
||
return report_metrics | ||
|
||
def get_tech_id(request): | ||
host = request.host.split(".") | ||
subdomain = len(host) > 2 and host[0] or "" | ||
tech = request.args.get("tech") | ||
tech_arr = [] | ||
if tech: | ||
tech_arr = tech.split(",") | ||
return tech_arr or subdomain | ||
|
||
update_report() |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
|
||
.choices { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); | ||
column-gap: 2rem; | ||
row-gap: 1rem; | ||
margin-bottom: 4rem; | ||
} | ||
|
||
.choices .card { | ||
padding: 1.5rem 1.75rem; | ||
} | ||
|
||
.choices .card h2 { | ||
font-size: 1.5rem; | ||
margin-top: 0; | ||
margin-bottom: 1rem; | ||
} | ||
|
||
.choices .card h2 + p { | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.latest-info h2 { | ||
font-size: 1rem; | ||
font-weight: 600; | ||
} | ||
|
||
.latest-info .stats { | ||
display: flex; | ||
flex-wrap: wrap; | ||
align-items: center; | ||
justify-content: flex-start; | ||
} | ||
|
||
.latest-info h3 { | ||
font-size: var(--font-size-regular); | ||
} | ||
|
||
.latest-info p.value { | ||
font-size: var(--font-size-medium); | ||
font-weight: 600; | ||
} | ||
|
||
.report-summary-tables { | ||
padding: 4rem 0; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One minor nit. Do you have editorconfig set up on your IDE? We have a config file to auto add final line breaks (plus other things) to stop GitHub flagging these:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, will fix