Skip to content

Commit df56a3d

Browse files
sarahfossheimtunethewebrviscomi
authored
Content and styling improvements (#881)
* change 'ALL' to 'All technologies' * prototype categories and description * remove console.logs and unused code * prototype custom colors in dark mode * prototype different timeseries colors in dark mode * format numbers according to locale * increase color contrast in dark mode * move beta header down * update placeholder text on landing and in categories * have fallback when categories and description are empty * only fetch tech info on drilldown * Turn off target-size audit * fix bug: landing page color theme * fix color contrast in dark mode * Update src/js/techreport/index.js Co-authored-by: Rick Viscomi <[email protected]> * fix z-index and replace base url with constant * save constants --------- Co-authored-by: Barry Pollard <[email protected]> Co-authored-by: Rick Viscomi <[email protected]>
1 parent fbfef3a commit df56a3d

File tree

20 files changed

+203
-62
lines changed

20 files changed

+203
-62
lines changed

‎.github/lighthouse/lighthouse-config-dev.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"service-worker": "off",
2828
"speed-index": "off",
2929
"splash-screen": "off",
30+
"target-size": "off",
3031
"themed-omnibox": "off",
3132
"third-party-facades": "off",
3233
"total-byte-weight": "off",

‎.github/lighthouse/lighthouse-config-prod.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"service-worker": "off",
2828
"speed-index": "off",
2929
"splash-screen": "off",
30+
"target-size": "off",
3031
"themed-omnibox": "off",
3132
"third-party-facades": "off",
3233
"total-byte-weight": "off",

‎config/techreport.json

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,24 @@
4747
},
4848
"config": {
4949
"default": {
50-
"app": ["WordPress", "Squarespace", "Drupal"]
50+
"app": ["WordPress", "Squarespace", "Drupal"],
51+
"series": {
52+
"breakdown": "client",
53+
"breakdown_values": [
54+
{
55+
"name": "desktop",
56+
"color": "#669E8E",
57+
"color_dark": "#fff000",
58+
"suffix": "%"
59+
},
60+
{
61+
"name": "mobile",
62+
"color": "#BD6EBE",
63+
"color_dark": "#ff00f0",
64+
"suffix": "%"
65+
}
66+
]
67+
}
5168
},
5269
"popular_tech": {
5370
"id": "popular_tech",
@@ -76,11 +93,13 @@
7693
{
7794
"name": "desktop",
7895
"color": "#669E8E",
96+
"color_dark": "#fff000",
7997
"suffix": "%"
8098
},
8199
{
82100
"name": "mobile",
83101
"color": "#BD6EBE",
102+
"color_dark": "#ff00f0",
84103
"suffix": "%"
85104
}
86105
]
@@ -158,11 +177,13 @@
158177
"values": [
159178
{
160179
"name": "desktop",
161-
"color": "#669E8E"
180+
"color": "#669E8E",
181+
"color_dark": "#fff000"
162182
},
163183
{
164184
"name": "mobile",
165-
"color": "#BD6EBE"
185+
"color": "#BD6EBE",
186+
"color_dark": "#ff00f0"
166187
}
167188
],
168189
"defaults": [
@@ -339,11 +360,13 @@
339360
{
340361
"name": "desktop",
341362
"color": "#669E8E",
363+
"color_dark": "#fff000",
342364
"suffix": "%"
343365
},
344366
{
345367
"name": "mobile",
346368
"color": "#BD6EBE",
369+
"color_dark": "#ff00f0",
347370
"suffix": "%"
348371
}
349372
],
@@ -477,11 +500,13 @@
477500
"values": [
478501
{
479502
"name": "desktop",
480-
"color": "#669E8E"
503+
"color": "#669E8E",
504+
"color_dark": "#fff000"
481505
},
482506
{
483507
"name": "mobile",
484-
"color": "#BD6EBE"
508+
"color": "#BD6EBE",
509+
"color_dark": "#ff00f0"
485510
}
486511
],
487512
"defaults": [
@@ -607,12 +632,14 @@
607632
{
608633
"name": "desktop",
609634
"color": "#669E8E",
610-
"suffix": " bytes"
635+
"suffix": " bytes",
636+
"color_dark": "#fff000"
611637
},
612638
{
613639
"name": "mobile",
614640
"color": "#BD6EBE",
615-
"suffix": " bytes"
641+
"suffix": " bytes",
642+
"color_dark": "#ff00f0"
616643
}
617644
],
618645
"defaults": [
@@ -669,8 +696,20 @@
669696
"#8E3496",
670697
"#CB377C"
671698
],
699+
"app_dark": [
700+
"#5980EB",
701+
"#D55316",
702+
"#A8A9CA",
703+
"#68A16D",
704+
"#B979A7",
705+
"#AC8D1C",
706+
"#947786",
707+
"#449DB1",
708+
"#C861D2",
709+
"#E24070"
710+
],
672711
"overrides": {
673-
"WordPress": "#ff0000"
712+
"WordPress": "#fff000"
674713
}
675714
},
676715
"default": {

‎src/js/components/drilldownHeader.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { DataUtils } from "../techreport/utils/data";
2+
13
function setTitle(title) {
24
const mainTitle = document.querySelector('h2 span.main-title');
35
mainTitle.textContent = title;
@@ -33,7 +35,8 @@ function update(data, filters) {
3335
const app = filters.app[0];
3436

3537
if(app) {
36-
setTitle(app);
38+
const formattedApp = DataUtils.formatAppName(app);
39+
setTitle(formattedApp);
3740
}
3841

3942
if(data[app]) {

‎src/js/components/filters.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ class Filters {
9999
const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
100100
const option = optionTmpl.querySelector('option');
101101
const formattedTech = technology.technology;
102-
option.textContent = technology.technology;
102+
option.textContent = DataUtils.formatAppName(technology.technology);
103103
option.value = formattedTech;
104104
if(formattedTech === techSelector.getAttribute('data-selected')) {
105105
option.selected = true;

‎src/js/techreport/index.js

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Filters from '../components/filters';
2+
import { Constants } from './utils/constants';
23
const { DrilldownHeader } = require("../components/drilldownHeader");
34
const { DataUtils } = require("./utils/data");
45
const { UIUtils } = require("./utils/ui");
@@ -25,17 +26,21 @@ class TechReport {
2526
this.initializePage();
2627
this.getAllMetricData();
2728
this.bindSettingsListeners();
29+
this.initializeAccessibility();
2830
}
2931

3032
// Initialize the sections for the different pages
3133
initializePage() {
34+
this.updateStyling();
35+
3236
switch(this.pageId) {
3337
case 'landing':
3438
this.initializeLanding();
3539
break;
3640

3741
case 'drilldown':
3842
this.initializeReport();
43+
this.getTechInfo();
3944
break;
4045

4146
case 'comparison':
@@ -44,18 +49,14 @@ class TechReport {
4449
}
4550
}
4651

47-
// TODO
48-
initializeLanding() {
49-
}
50-
51-
// TODO
52-
initializeReport() {
53-
// TODO: Move to function
52+
// Load accessibility/themeing info
53+
initializeAccessibility() {
54+
// Show indicators?
5455
const showIndicators = localStorage.getItem('showIndicators');
5556
document.querySelector('main').dataset.showIndicators = showIndicators;
5657
document.querySelector('#indicators-check').checked = showIndicators === 'true';
5758

58-
// TODO: Move to function
59+
// Dark or light mode?
5960
const theme = localStorage.getItem('haTheme');
6061
document.querySelector('html').dataset.theme = theme;
6162
const btn = document.querySelector('.theme-switcher');
@@ -64,7 +65,13 @@ class TechReport {
6465
} else if(theme === 'light') {
6566
btn.innerHTML = '🌚 Switch to dark theme';
6667
}
68+
}
6769

70+
initializeLanding() {
71+
}
72+
73+
// TODO
74+
initializeReport() {
6875
const sections = document.querySelectorAll('[data-type="section"]');
6976
// TODO: add general config too
7077
sections.forEach(section => {
@@ -79,7 +86,6 @@ class TechReport {
7986
});
8087

8188
this.bindClientListener();
82-
this.updateStyling();
8389
}
8490

8591
// Watch for changes in the client dropdown
@@ -174,8 +180,6 @@ class TechReport {
174180
},
175181
];
176182

177-
const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
178-
179183
const technology = technologies.join('%2C')
180184
.replaceAll(" ", "%20");
181185

@@ -186,18 +190,21 @@ class TechReport {
186190
technologies.forEach(tech => allResults[tech] = []);
187191

188192
Promise.all(apis.map(api => {
189-
const url = `${base}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
193+
const url = `${Constants.apiBase}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
190194

191195
return fetch(url)
192196
.then(result => result.json())
193197
.then(result => {
198+
// Loop through all the rows of the API result
194199
result.forEach(row => {
195200
const parsedRow = {
196201
...row,
197202
}
198203

204+
// Parse the data and add it to the results
199205
if(api.parse) {
200-
parsedRow[api.metric] = api.parse(parsedRow[api.metric], parsedRow?.date);
206+
const metric = parsedRow[api.metric] || parsedRow;
207+
parsedRow[api.metric] = api.parse(metric, parsedRow?.date);
201208
}
202209

203210
const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
@@ -217,6 +224,37 @@ class TechReport {
217224
});
218225
}
219226

227+
// Get the information about the selected technology
228+
getTechInfo() {
229+
const technologies = this.filters.app;
230+
const technology = technologies.join('%2C')
231+
.replaceAll(" ", "%20");
232+
233+
const url = `${Constants.apiBase}/technologies?technology=${technology}`;
234+
235+
fetch(url)
236+
.then(result => result.json())
237+
.then(result => {
238+
const techInfo = result[0];
239+
240+
const categoryListEl = document.getElementsByClassName('category-list')[0];
241+
categoryListEl.innerHTML = '';
242+
243+
const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
244+
categories.forEach(category => {
245+
const categoryItemEl = document.createElement('li');
246+
categoryItemEl.className = 'cell';
247+
categoryItemEl.textContent = category;
248+
categoryListEl.append(categoryItemEl);
249+
});
250+
251+
const descriptionEl = document.createElement('p');
252+
descriptionEl.className = 'tech-description';
253+
descriptionEl.textContent = techInfo?.description;
254+
categoryListEl.after(descriptionEl);
255+
});
256+
}
257+
220258
// Update components and sections that are relevant to the current page
221259
updateComponents(data) {
222260
switch(this.pageId) {
@@ -239,12 +277,11 @@ class TechReport {
239277
// Fetch the data for the filter dropdowns
240278
getFilterInfo() {
241279
const filterData = {};
242-
const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
243280

244281
const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
245282

246283
Promise.all(filterApis.map(api => {
247-
const url = `${base}/${api}`;
284+
const url = `${Constants.apiBase}/${api}`;
248285

249286
return fetch(url)
250287
.then(result => result.json())

‎src/js/techreport/tableLinked.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { DataUtils } from "./utils/data";
2+
13
class TableLinked {
24
constructor(id, config, filters, data) {
35
this.id = id;
@@ -40,7 +42,8 @@ class TableLinked {
4042
cell = document.createElement('th');
4143
const link = document.createElement('a');
4244
link.setAttribute('href', `?tech=${app}`);
43-
link.innerHTML = app;
45+
const formattedApp = DataUtils.formatAppName(app);
46+
link.textContent = formattedApp;
4447
cell.append(link);
4548
} else if(column.key === 'client') {
4649
cell = document.createElement('td');

0 commit comments

Comments
 (0)