diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js index 95987592..e819d69f 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) { @@ -58,4 +57,5 @@ export const DrilldownHeader = { update, setCategories, setDescription, + setIcon, } diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index ae4fe58e..4a2777bd 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -210,6 +210,10 @@ class TechReport { const technologies = this.filters.app; const apis = [ + { + endpoint: 'technologies', + metric: 'technologies', + }, { endpoint: 'cwv', metric: 'vitals', @@ -239,6 +243,7 @@ class TechReport { const rank = this.filters.rank.replaceAll(" ", "%20"); let allResults = {}; + let techInfo = {}; technologies.forEach(tech => allResults[tech] = []); Promise.all(apis.map(api => { @@ -259,14 +264,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); + } } }); }) @@ -300,6 +310,7 @@ class TechReport { const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : []; DrilldownHeader.setCategories(categories); DrilldownHeader.setDescription(techInfo.description); + DrilldownHeader.setIcon(techInfo.icon); }); } @@ -386,9 +397,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/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index fd2b792c..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) { @@ -89,7 +87,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)); @@ -106,12 +103,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/${encodeURI(technology[0]?.icon)}`; 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; diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 2b064e5f..3bc0d31f 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); } diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 1f4dd878..780c83df 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -1208,10 +1208,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/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 %} 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" %}