Skip to content

Commit 12b5896

Browse files
sarahfossheimrviscomitunetheweb
authored
Tech Report: Visual improvements (#999)
* 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 * add icons and chart to the summary tables * add descriptions to technologies * style lighthouse cards * add lighthouse progress circles to table * edit styling of the client dropdown selector * move breakdown selector to top of page * add LH circles to table alt, category descriptions, tech img * update colors and change linting * add origin fix * remove duplicate client-breakdowns --------- Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com> Co-authored-by: Barry Pollard <barrypollard@google.com>
1 parent bee5251 commit 12b5896

File tree

17 files changed

+266
-313
lines changed

17 files changed

+266
-313
lines changed

‎config/techreport.json‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -403,28 +403,32 @@
403403
"category": "performance",
404404
"metric": "median_score_pct",
405405
"label": "Performance",
406-
"url": "?median-lighthouse-over-time=performance#lighthouse"
406+
"url": "?median-lighthouse-over-time=performance#lighthouse",
407+
"description": "Median Lighthouse <strong>performance</strong> score."
407408
},
408409
{
409410
"endpoint": "lighthouse",
410411
"category": "accessibility",
411412
"metric": "median_score_pct",
412413
"label": "Accessibility",
413-
"url": "?median-lighthouse-over-time=accessibility#lighthouse"
414+
"url": "?median-lighthouse-over-time=accessibility#lighthouse",
415+
"description": "Median Lighthouse <strong>accessibility</strong> score."
414416
},
415417
{
416418
"endpoint": "lighthouse",
417419
"category": "seo",
418420
"metric": "median_score_pct",
419421
"label": "SEO",
420-
"url": "?median-lighthouse-over-time=seo#lighthouse"
422+
"url": "?median-lighthouse-over-time=seo#lighthouse",
423+
"description": "Median Lighthouse <strong>SEO</strong> score."
421424
},
422425
{
423426
"endpoint": "lighthouse",
424427
"category": "best_practices",
425428
"metric": "median_score_pct",
426429
"label": "Best Practices",
427-
"url": "?median-lighthouse-over-time=best_practices#lighthouse"
430+
"url": "?median-lighthouse-over-time=best_practices#lighthouse",
431+
"description": "Median Lighthouse <strong>best practices</strong> score."
428432
}
429433
]
430434
},
@@ -470,7 +474,8 @@
470474
{
471475
"key": "median_score_pct",
472476
"name": "Median score",
473-
"className": "main-cell"
477+
"className": "main-cell",
478+
"viz": "progress-circle"
474479
},
475480
{
476481
"key": "client",
@@ -676,16 +681,16 @@
676681
"config": {
677682
"colors": {
678683
"app": [
679-
"#5980EB",
680-
"#D55316",
681-
"#2C2F70",
682-
"#68A16D",
683-
"#B979A7",
684-
"#AC8D1C",
685-
"#742F53",
686-
"#449DB1",
687-
"#8E3496",
688-
"#CB377C"
684+
"#ED5FB4",
685+
"#322288",
686+
"#6DA072",
687+
"#E47112",
688+
"#4E9CC8",
689+
"#e51607",
690+
"#616F0D",
691+
"#7D58CD",
692+
"#ba7cb0",
693+
"#882155"
689694
],
690695
"app_dark": [
691696
"#5980EB",
@@ -730,21 +735,32 @@
730735
},
731736
{
732737
"key": "good_pct",
733-
"name": "Overall good CWV",
738+
"name": "Good CWVs",
734739
"breakdown": "subcategory",
735740
"subcategory": "overall",
736741
"suffix": "%",
737-
"className": "main-cell pct-value",
742+
"viz": "progress",
743+
"className": "cwv-cell main-cell pct-value",
738744
"endpoint": "vitals",
739745
"metric": "good_pct"
740746
},
741747
{
742748
"key": "medium_score_pct",
743-
"name": "Accessibility",
749+
"name": "Perf.",
750+
"breakdown": "subcategory",
751+
"subcategory": "performance",
752+
"endpoint": "lighthouse",
753+
"metric": "median_score_pct",
754+
"viz": "progress-circle"
755+
},
756+
{
757+
"key": "medium_score_pct",
758+
"name": "A11Y",
744759
"breakdown": "subcategory",
745760
"subcategory": "accessibility",
746761
"endpoint": "lighthouse",
747-
"metric": "median_score_pct"
762+
"metric": "median_score_pct",
763+
"viz": "progress-circle"
748764
},
749765
{
750766
"key": "client",
@@ -904,7 +920,8 @@
904920
"key": "median_score_pct",
905921
"name": "Median lighthouse score",
906922
"breakdown": "app",
907-
"className": "main-cell"
923+
"className": "main-cell",
924+
"viz": "progress-circle"
908925
},
909926
{
910927
"key": "client",
@@ -1163,7 +1180,8 @@
11631180
"key": "selectTech",
11641181
"name": "Select technology",
11651182
"hiddenName": true,
1166-
"type": "checkbox"
1183+
"type": "checkbox",
1184+
"className": "check-cell"
11671185
},
11681186
{
11691187
"key": "technology",
@@ -1180,11 +1198,12 @@
11801198
},
11811199
{
11821200
"key": "good_pct",
1183-
"name": "Good CWV",
1201+
"name": "Good CWVs",
11841202
"breakdown": "subcategory",
11851203
"subcategory": "overall",
11861204
"suffix": "%",
1187-
"className": "main-cell pct-value",
1205+
"viz": "progress",
1206+
"className": "cwv-cell main-cell pct-value",
11881207
"endpoint": "vitals",
11891208
"metric": "good_pct"
11901209
},

‎src/js/components/drilldownHeader.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import { DataUtils } from "../techreport/utils/data";
33
function setTitle(title) {
44
const mainTitle = document.querySelector('h1 span.main-title');
55
mainTitle.textContent = title;
6+
7+
const img = document.createElement('img');
8+
const imgUrl = `https://cdn.httparchive.org/static/icons/${title}.png`;
9+
img.setAttribute('aria-hidden', 'true');
10+
img.setAttribute('alt', '');
11+
img.setAttribute('src', imgUrl);
12+
img.classList.add('title-img');
13+
mainTitle.append(img);
614
}
715

816
function setCategories(categories) {
@@ -30,6 +38,13 @@ function setCategories(categories) {
3038
}
3139
}
3240

41+
function setDescription(description) {
42+
if(description && description !== "") {
43+
const descr = document.querySelector('p.app-description');
44+
descr.textContent = description;
45+
}
46+
}
47+
3348
function update(filters) {
3449
const app = filters.app[0];
3550

@@ -42,4 +57,5 @@ function update(filters) {
4257
export const DrilldownHeader = {
4358
update,
4459
setCategories,
60+
setDescription,
4561
}

‎src/js/techreport/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,11 +371,13 @@ class TechReport {
371371

372372
const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
373373
DrilldownHeader.setCategories(categories);
374+
DrilldownHeader.setDescription(techInfo.description);
374375
});
375376
}
376377

377378
updateCategoryComponents (category) {
378379
this.updateComponents(category.data);
380+
DrilldownHeader.setDescription(category.description);
379381
}
380382

381383
// Update components and sections that are relevant to the current page

‎src/js/techreport/section.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ class Section {
4141
this.components[component.dataset.id] = new TableLinked(
4242
component.dataset.id,
4343
this.pageConfig,
44+
this.config,
4445
this.pageFilters,
4546
this.data
4647
);
@@ -60,6 +61,7 @@ class Section {
6061
this.components[component.dataset.id] = new Timeseries(
6162
component.dataset.id,
6263
this.pageConfig,
64+
this.config,
6365
this.pageFilters,
6466
this.data
6567
);

‎src/js/techreport/summaryCards.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,12 @@ class SummaryCard {
5858
const valueSlot = card.querySelector('[data-slot="value"]');
5959
valueSlot.innerHTML = latestValue?.toLocaleString();
6060

61-
const progress = card.querySelectorAll('.lighthouse-progress');
61+
const progress = card.querySelectorAll('.progress-circle');
6262
progress.forEach(circle => {
6363
const scoreCategory = DataUtils.getLighthouseScoreCategories(latestValue, this.config.lighthouse_brackets);
6464
const scoreCategoryName = scoreCategory?.name;
65-
circle.setAttribute('style', `--offset: ${100 - latestValue};`);
66-
const chart = card.querySelector('svg.progress-chart');
67-
chart.classList.add(scoreCategoryName);
65+
circle.setAttribute('style', `--offset: ${latestValue}%;`);
66+
circle.classList.add(scoreCategoryName);
6867
});
6968

7069
}

‎src/js/techreport/table.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { DataUtils } from "./utils/data";
2+
13
function formatData(tableConfig, data) {
24
const { id, config, apps } = tableConfig;
35

@@ -100,7 +102,7 @@ function getSubcategory(config) {
100102
}
101103

102104
// Update the table
103-
function updateTable(id, config, apps, data) {
105+
function updateTable(id, config, appConfig, apps, data) {
104106
// Select a table based on the passed in id
105107
const component = document.getElementById(`table-${id}`)
106108
const tbody = component.querySelector('tbody');
@@ -178,6 +180,12 @@ function updateTable(id, config, apps, data) {
178180
cell.className = className;
179181
}
180182

183+
if(column.viz === 'progress-circle' && value) {
184+
const score = DataUtils.getLighthouseScoreCategories(value, appConfig.lighthouse_brackets);
185+
wrapper.classList.add('progress-circle', score.name);
186+
wrapper.setAttribute('style', `--offset: ${value}%`);
187+
}
188+
181189
// Add cell to the row
182190
tr.appendChild(cell);
183191
});

‎src/js/techreport/tableLinked.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { DataUtils } from "./utils/data";
22

33
class TableLinked {
4-
constructor(id, config, filters, data) {
4+
constructor(id, pageConfig, globalConfig, filters, data) {
55
this.id = id;
6-
this.pageConfig = config;
6+
this.config = globalConfig;
7+
this.pageConfig = pageConfig;
78
this.pageFilters = filters;
89
this.submetric = ''; // TODO: Fetch the default one from somewhere
910
this.data = data;
@@ -92,6 +93,15 @@ class TableLinked {
9293
let cell;
9394
if(column.type === 'heading') {
9495
cell = document.createElement('th');
96+
cell.classList.add('app-cell');
97+
98+
const img = document.createElement('span');
99+
const imgUrl = `https://cdn.httparchive.org/static/icons/${formattedApp}.png`;
100+
img.setAttribute('aria-hidden', 'true');
101+
img.setAttribute('style', `background-image: url(${imgUrl})`);
102+
img.classList.add('app-img');
103+
cell.append(img);
104+
95105
const link = document.createElement('a');
96106
link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
97107
link.innerHTML = formattedApp;
@@ -123,24 +133,36 @@ class TableLinked {
123133
cell.append(checkbox);
124134

125135
const label = document.createElement('label');
126-
label.innerHTML = formattedApp;
136+
label.innerHTML = `Select ${formattedApp}`;
127137
label.classList.add('sr-only');
128138
label.setAttribute('for', `${app}-table-${this.id}`);
129139
cell.append(label);
130-
140+
cell.classList.add('check-cell');
131141
} else if(column.key === 'client') {
132142
cell = document.createElement('td');
133143
cell.innerHTML = component.dataset.client;
134144
} else {
145+
const cellContent = document.createElement('span');
135146
cell = document.createElement('td');
136147
const dataset = latest?.[column?.endpoint];
137148
let value = dataset?.find(entry => entry.name === column.subcategory);
138149
value = value?.[component.dataset.client]?.[column?.metric];
139150
if(column.suffix) {
140-
cell.innerHTML = `${value?.toLocaleString()}${column.suffix}`;
151+
cellContent.innerHTML = `${value?.toLocaleString()}${column.suffix}`;
141152
} else {
142-
cell.innerHTML = `${value?.toLocaleString()}`;
153+
cellContent.innerHTML = `${value?.toLocaleString()}`;
143154
}
155+
156+
if(column.viz === 'progress') {
157+
cell.setAttribute('style', `--cell-value: ${value}%`);
158+
cell.dataset.value = value;
159+
} else if(column.viz === 'progress-circle') {
160+
const score = DataUtils.getLighthouseScoreCategories(value, this.config.lighthouse_brackets);
161+
cellContent.classList.add('progress-circle', score.name);
162+
cellContent.setAttribute('style', `--offset: ${value}%`);
163+
}
164+
165+
cell.append(cellContent);
144166
}
145167

146168
if(column.className) {

‎src/js/techreport/timeseries.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { DataUtils } from "./utils/data";
33
import { UIUtils } from "./utils/ui";
44
class Timeseries {
55
// Create the component
6-
constructor(id, config, filters, data) {
6+
constructor(id, pageConfig, config, filters, data) {
77
this.id = id;
8-
this.pageConfig = config;
8+
this.pageConfig = pageConfig;
9+
this.config = config;
910
this.pageFilters = filters;
1011
this.submetric = ''; // TODO: Fetch the default one from somewhere
1112
this.data = data;
@@ -80,7 +81,7 @@ class Timeseries {
8081
this.updateSummary();
8182
}
8283
this.updateViz();
83-
Table.updateTable(this.id, this.pageConfig[this.id]?.table, this.pageFilters.app, this.data);
84+
Table.updateTable(this.id, this.pageConfig[this.id]?.table, this.config, this.pageFilters.app, this.data);
8485
}
8586

8687
// Update the summary with the latest data for all categories

0 commit comments

Comments
 (0)