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>

Author: sarahfossheim

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,
 }

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);

src/js/techreport/tableLinked.js

@@ -87,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));
@@ -104,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;

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',
@@ -170,6 +174,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);
               }

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 {

templates/techreport/category.html

@@ -149,15 +149,15 @@ <h2>Technologies</h2>
               {% else %}
                 <option value="10">10</option>
               {% endif %}
-              {% if filters.rows == "25" %}
-                <option value="25" selected>25</option>
+              {% if filters.rows == "20" %}
+                <option value="20" selected>20</option>
               {% else %}
-                <option value="25">25</option>
+                <option value="20">20</option>
               {% endif %}
-              {% if filters.rows == "50" %}
-                <option value="50" selected>50</option>
+              {% if filters.rows == "30" %}
+                <option value="30" selected>30</option>
               {% else %}
-                <option value="50">50</option>
+                <option value="30">30</option>
               {% endif %}
             </select>
           </div>

templates/techreport/drilldown.html

@@ -12,7 +12,10 @@
       <div class="heading-wrapper">
         <h1>
           <span class="subtitle">Technology</span>
-          <span class="main-title">ALL</span>
+          <span>
+            <span class="main-title">ALL</span>
+            <span class="title-img" role="img" aria-hidden="true"></span>
+          </span>
         </h1>
         {% include "techreport/components/filter_breakdown.html" %}
       </div>