From 059bdcacffe7dfa3e25232e55163978ab24e5f09 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 24 Feb 2025 01:48:47 +0100 Subject: [PATCH 1/7] fix formatting table icons --- src/js/techreport/tableLinked.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 2b618454..0c1ff1f0 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -79,7 +79,6 @@ class TableLinked { // Set the data and the app name const data = technology; const app = technology[0]?.technology; - const formattedApp = DataUtils.formatAppName(app); // Select the latest entry for each technology const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date)); @@ -96,12 +95,13 @@ class TableLinked { cell.classList.add('app-cell'); const img = document.createElement('span'); - const imgUrl = `https://cdn.httparchive.org/static/icons/${formattedApp}.png`; + const imgUrl = `https://cdn.httparchive.org/static/icons/${app.replaceAll(' ','%20')}.png`; img.setAttribute('aria-hidden', 'true'); img.setAttribute('style', `background-image: url(${imgUrl})`); img.classList.add('app-img'); cell.append(img); + const formattedApp = DataUtils.formatAppName(app); const link = document.createElement('a'); link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`); link.innerHTML = formattedApp; From 0ff820d405f6fae1722280e65b475323619bb6c0 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 24 Feb 2025 19:28:06 +0100 Subject: [PATCH 2/7] Update src/js/techreport/tableLinked.js Co-authored-by: Barry Pollard --- src/js/techreport/tableLinked.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 0c1ff1f0..d5d74a8f 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -95,7 +95,7 @@ class TableLinked { cell.classList.add('app-cell'); const img = document.createElement('span'); - const imgUrl = `https://cdn.httparchive.org/static/icons/${app.replaceAll(' ','%20')}.png`; + const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(app)}.png`; img.setAttribute('aria-hidden', 'true'); img.setAttribute('style', `background-image: url(${imgUrl})`); img.classList.add('app-img'); From d45af5086a465b84bd55a79251a996178dbe466b Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 3 Mar 2025 14:33:55 +0100 Subject: [PATCH 3/7] render icon in the drilldown based on the value from the api response --- src/js/components/drilldownHeader.js | 15 ++++++++------- src/js/techreport/index.js | 5 +++-- static/css/techreport/techreport.css | 6 +++++- templates/techreport/drilldown.html | 5 ++++- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js index 95987592..4c403289 100644 --- a/src/js/components/drilldownHeader.js +++ b/src/js/components/drilldownHeader.js @@ -4,13 +4,12 @@ function setTitle(title) { const mainTitle = document.querySelector('h1 span.main-title'); mainTitle.textContent = title; - const img = document.createElement('img'); - const imgUrl = `https://cdn.httparchive.org/static/icons/${title}.png`; - img.setAttribute('aria-hidden', 'true'); - img.setAttribute('alt', ''); - img.setAttribute('src', imgUrl); - img.classList.add('title-img'); - mainTitle.append(img); +} + +function setIcon(icon) { + const img = document.querySelector('h1 .title-img'); + const imgUrl = `https://cdn.httparchive.org/static/icons/${icon}`; + img.setAttribute('style', `background-image: url(${imgUrl})`); } function setCategories(categories) { @@ -51,6 +50,7 @@ function update(filters) { if(app) { const formattedApp = DataUtils.formatAppName(app); setTitle(formattedApp); + console.log(app, filters); } } @@ -58,4 +58,5 @@ export const DrilldownHeader = { update, setCategories, setDescription, + setIcon, } diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 1bd0cca9..a773c1bd 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -372,6 +372,7 @@ class TechReport { const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : []; DrilldownHeader.setCategories(categories); DrilldownHeader.setDescription(techInfo.description); + DrilldownHeader.setIcon(techInfo.icon); }); } @@ -441,9 +442,9 @@ class TechReport { // Update drilldown page components updateDrilldownComponents(data) { - DrilldownHeader.update(this.filters); - const app = this.filters.app[0]; + DrilldownHeader.update(this.filters); + DrilldownHeader.setIcon(`${encodeURI(app)}.png`); if(data && data[app]) { UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels); diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 0d0cd0e7..e16c9373 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -1159,10 +1159,14 @@ select { } .title-img { - max-height: 1.5rem; margin-left: 0.5rem; position: relative; top: -0.1rem; + width: 1.5rem; + height: 1.5rem; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; } .intro .heading-wrapper { diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index e64f21eb..0a1af724 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -12,7 +12,10 @@

Technology - ALL + + ALL + +

{% include "techreport/components/filter_breakdown.html" %}
From f82204e79b6dc2b8e677d66fc117e2b24531eef7 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 3 Mar 2025 15:57:03 +0100 Subject: [PATCH 4/7] use logo from api result in comparison view --- src/js/components/drilldownHeader.js | 1 - src/js/techreport/index.js | 24 +++++++++++++++++------- src/js/techreport/tableLinked.js | 2 +- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js index 4c403289..e819d69f 100644 --- a/src/js/components/drilldownHeader.js +++ b/src/js/components/drilldownHeader.js @@ -50,7 +50,6 @@ function update(filters) { if(app) { const formattedApp = DataUtils.formatAppName(app); setTitle(formattedApp); - console.log(app, filters); } } diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index a773c1bd..3dc087b2 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -208,6 +208,10 @@ class TechReport { const technologies = this.filters.app; const apis = [ + { + endpoint: 'technologies', + metric: 'technologies', + }, { endpoint: 'cwv', metric: 'vitals', @@ -237,6 +241,7 @@ class TechReport { const rank = this.filters.rank.replaceAll(" ", "%20"); let allResults = {}; + let techInfo = {}; technologies.forEach(tech => allResults[tech] = []); Promise.all(apis.map(api => { @@ -257,14 +262,19 @@ class TechReport { parsedRow[api.metric] = api.parse(metric, parsedRow?.date); } - const resIndex = allResults[row.technology].findIndex(res => res.date === row.date); - if(resIndex > -1) { - allResults[row.technology][resIndex] = { - ...allResults[row.technology][resIndex], - ...parsedRow - } + if(api.endpoint === 'technologies') { + techInfo[row.technology] = row; } else { - allResults[row.technology].push(parsedRow); + const resIndex = allResults[row.technology].findIndex(res => res.date === row.date); + if(resIndex > -1) { + allResults[row.technology][resIndex] = { + ...allResults[row.technology][resIndex], + ...techInfo[row.technology], + ...parsedRow + } + } else { + allResults[row.technology].push(parsedRow); + } } }); }) diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index d5d74a8f..3769773c 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -95,7 +95,7 @@ class TableLinked { cell.classList.add('app-cell'); const img = document.createElement('span'); - const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(app)}.png`; + const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(technology[0]?.icon)}`; img.setAttribute('aria-hidden', 'true'); img.setAttribute('style', `background-image: url(${imgUrl})`); img.classList.add('app-img'); From 80178e65eb49bc7cda7cf8aced48444db1e6511a Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 2 Apr 2025 15:17:57 +0200 Subject: [PATCH 5/7] fetch the icons in the categories page --- src/js/techreport/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 3dc087b2..27c02373 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -287,6 +287,10 @@ class TechReport { getCategoryData(category) { const url = `${Constants.apiBase}/categories?category=${category}`; const apis = [ + { + endpoint: 'technologies', + metric: 'technologies', + }, { endpoint: 'cwv', metric: 'vitals', From 3ddef0044af50fcd19f43506432084959cbcbdd3 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sun, 13 Apr 2025 01:44:19 +0200 Subject: [PATCH 6/7] update merge bug --- src/js/techreport/tableLinked.js | 2 -- src/js/techreport/utils/data.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index f023d1bc..c3ebd1a9 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -35,8 +35,6 @@ class TableLinked { this.dataArray = this.dataArray.filter(row => row.length > 0); - console.log('set content', content, this.dataArray); - const isContent = content?.length > 0 || this.dataArray?.length > 0; if(tbody && isContent) { diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 2b064e5f..0bf52a97 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -108,6 +108,10 @@ const fetchCategoryData = (rows, filters, callback) => { const categoryFormatted = encodeURI(filters.category); const url = `${Constants.apiBase}/categories?category=${categoryFormatted}&geo=${geoFormatted}&rank=${rankFormatted}`; const apis = [ + { + endpoint: 'technologies', + metric: 'technologies', + }, { endpoint: 'cwv', metric: 'vitals', @@ -168,6 +172,11 @@ const fetchCategoryData = (rows, filters, callback) => { ...allResults[row.technology][resIndex], ...parsedRow } + } else if(allResults[row.technology].length === 1) { + allResults[row.technology][0] = { + ...allResults[row.technology][0], + ...parsedRow + } } else { allResults[row.technology].push(parsedRow); } @@ -189,6 +198,7 @@ const fetchCategoryData = (rows, filters, callback) => { total.forEach(t => t.textContent = Math.ceil(category?.technologies?.length / rows)); /* Update components */ + console.log(category); callback(category); }); }); From 390e9852cad7a07daeddea4187d15de32224e8c2 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sun, 13 Apr 2025 01:46:29 +0200 Subject: [PATCH 7/7] max 30 techs per page --- src/js/techreport/utils/data.js | 1 - templates/techreport/category.html | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 0bf52a97..3bc0d31f 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -198,7 +198,6 @@ const fetchCategoryData = (rows, filters, callback) => { total.forEach(t => t.textContent = Math.ceil(category?.technologies?.length / rows)); /* Update components */ - console.log(category); callback(category); }); }); diff --git a/templates/techreport/category.html b/templates/techreport/category.html index 319a5974..20756365 100644 --- a/templates/techreport/category.html +++ b/templates/techreport/category.html @@ -149,15 +149,15 @@

Technologies

{% else %} {% endif %} - {% if filters.rows == "25" %} - + {% if filters.rows == "20" %} + {% else %} - + {% endif %} - {% if filters.rows == "50" %} - + {% if filters.rows == "30" %} + {% else %} - + {% endif %}