Skip to content

Commit e5382b5

Browse files
Fix formatting table icons (#1016)
* fix formatting table icons * Update src/js/techreport/tableLinked.js Co-authored-by: Barry Pollard <barry_pollard@hotmail.com> * render icon in the drilldown based on the value from the api response * use logo from api result in comparison view * fetch the icons in the categories page * update merge bug * max 30 techs per page --------- Co-authored-by: Barry Pollard <barry_pollard@hotmail.com>
1 parent 7457717 commit e5382b5

File tree

7 files changed

+53
-26
lines changed

7 files changed

+53
-26
lines changed

src/js/components/drilldownHeader.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ function setTitle(title) {
44
const mainTitle = document.querySelector('h1 span.main-title');
55
mainTitle.textContent = title;
66

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);
7+
}
8+
9+
function setIcon(icon) {
10+
const img = document.querySelector('h1 .title-img');
11+
const imgUrl = `https://cdn.httparchive.org/static/icons/${icon}`;
12+
img.setAttribute('style', `background-image: url(${imgUrl})`);
1413
}
1514

1615
function setCategories(categories) {
@@ -58,4 +57,5 @@ export const DrilldownHeader = {
5857
update,
5958
setCategories,
6059
setDescription,
60+
setIcon,
6161
}

src/js/techreport/index.js

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,10 @@ class TechReport {
210210
const technologies = this.filters.app;
211211

212212
const apis = [
213+
{
214+
endpoint: 'technologies',
215+
metric: 'technologies',
216+
},
213217
{
214218
endpoint: 'cwv',
215219
metric: 'vitals',
@@ -239,6 +243,7 @@ class TechReport {
239243
const rank = this.filters.rank.replaceAll(" ", "%20");
240244

241245
let allResults = {};
246+
let techInfo = {};
242247
technologies.forEach(tech => allResults[tech] = []);
243248

244249
Promise.all(apis.map(api => {
@@ -259,14 +264,19 @@ class TechReport {
259264
parsedRow[api.metric] = api.parse(metric, parsedRow?.date);
260265
}
261266

262-
const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
263-
if(resIndex > -1) {
264-
allResults[row.technology][resIndex] = {
265-
...allResults[row.technology][resIndex],
266-
...parsedRow
267-
}
267+
if(api.endpoint === 'technologies') {
268+
techInfo[row.technology] = row;
268269
} else {
269-
allResults[row.technology].push(parsedRow);
270+
const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
271+
if(resIndex > -1) {
272+
allResults[row.technology][resIndex] = {
273+
...allResults[row.technology][resIndex],
274+
...techInfo[row.technology],
275+
...parsedRow
276+
}
277+
} else {
278+
allResults[row.technology].push(parsedRow);
279+
}
270280
}
271281
});
272282
})
@@ -300,6 +310,7 @@ class TechReport {
300310
const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
301311
DrilldownHeader.setCategories(categories);
302312
DrilldownHeader.setDescription(techInfo.description);
313+
DrilldownHeader.setIcon(techInfo.icon);
303314
});
304315
}
305316

@@ -386,9 +397,9 @@ class TechReport {
386397

387398
// Update drilldown page components
388399
updateDrilldownComponents(data) {
389-
DrilldownHeader.update(this.filters);
390-
391400
const app = this.filters.app[0];
401+
DrilldownHeader.update(this.filters);
402+
DrilldownHeader.setIcon(`${encodeURI(app)}.png`);
392403

393404
if(data && data[app]) {
394405
UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels);

src/js/techreport/tableLinked.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ class TableLinked {
8787
// Set the data and the app name
8888
const data = technology;
8989
const app = technology[0]?.technology;
90-
const formattedApp = DataUtils.formatAppName(app);
9190

9291
// Select the latest entry for each technology
9392
const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date));
@@ -104,12 +103,13 @@ class TableLinked {
104103
cell.classList.add('app-cell');
105104

106105
const img = document.createElement('span');
107-
const imgUrl = `https://cdn.httparchive.org/static/icons/${formattedApp}.png`;
106+
const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(technology[0]?.icon)}`;
108107
img.setAttribute('aria-hidden', 'true');
109108
img.setAttribute('style', `background-image: url(${imgUrl})`);
110109
img.classList.add('app-img');
111110
cell.append(img);
112111

112+
const formattedApp = DataUtils.formatAppName(app);
113113
const link = document.createElement('a');
114114
link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
115115
link.innerHTML = formattedApp;

src/js/techreport/utils/data.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@ const fetchCategoryData = (rows, filters, callback) => {
108108
const categoryFormatted = encodeURI(filters.category);
109109
const url = `${Constants.apiBase}/categories?category=${categoryFormatted}&geo=${geoFormatted}&rank=${rankFormatted}`;
110110
const apis = [
111+
{
112+
endpoint: 'technologies',
113+
metric: 'technologies',
114+
},
111115
{
112116
endpoint: 'cwv',
113117
metric: 'vitals',
@@ -170,6 +174,11 @@ const fetchCategoryData = (rows, filters, callback) => {
170174
...allResults[row.technology][resIndex],
171175
...parsedRow
172176
}
177+
} else if(allResults[row.technology].length === 1) {
178+
allResults[row.technology][0] = {
179+
...allResults[row.technology][0],
180+
...parsedRow
181+
}
173182
} else {
174183
allResults[row.technology].push(parsedRow);
175184
}

static/css/techreport/techreport.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1208,10 +1208,14 @@ select {
12081208
}
12091209

12101210
.title-img {
1211-
max-height: 1.5rem;
12121211
margin-left: 0.5rem;
12131212
position: relative;
12141213
top: -0.1rem;
1214+
width: 1.5rem;
1215+
height: 1.5rem;
1216+
display: inline-block;
1217+
background-size: contain;
1218+
background-repeat: no-repeat;
12151219
}
12161220

12171221
.intro .heading-wrapper {

templates/techreport/category.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -149,15 +149,15 @@ <h2>Technologies</h2>
149149
{% else %}
150150
<option value="10">10</option>
151151
{% endif %}
152-
{% if filters.rows == "25" %}
153-
<option value="25" selected>25</option>
152+
{% if filters.rows == "20" %}
153+
<option value="20" selected>20</option>
154154
{% else %}
155-
<option value="25">25</option>
155+
<option value="20">20</option>
156156
{% endif %}
157-
{% if filters.rows == "50" %}
158-
<option value="50" selected>50</option>
157+
{% if filters.rows == "30" %}
158+
<option value="30" selected>30</option>
159159
{% else %}
160-
<option value="50">50</option>
160+
<option value="30">30</option>
161161
{% endif %}
162162
</select>
163163
</div>

templates/techreport/drilldown.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
<div class="heading-wrapper">
1313
<h1>
1414
<span class="subtitle">Technology</span>
15-
<span class="main-title">ALL</span>
15+
<span>
16+
<span class="main-title">ALL</span>
17+
<span class="title-img" role="img" aria-hidden="true"></span>
18+
</span>
1619
</h1>
1720
{% include "techreport/components/filter_breakdown.html" %}
1821
</div>

0 commit comments

Comments
 (0)