Tech Report: Visual improvements

config/techreport.json

@@ -403,28 +403,32 @@
               "category": "performance",
               "metric": "median_score_pct",
               "label": "Performance",
-              "url": "?median-lighthouse-over-time=performance#lighthouse"
+              "url": "?median-lighthouse-over-time=performance#lighthouse",
+              "description": "Median Lighthouse <strong>performance</strong> score."
             },
             {
               "endpoint": "lighthouse",
               "category": "accessibility",
               "metric": "median_score_pct",
               "label": "Accessibility",
-              "url": "?median-lighthouse-over-time=accessibility#lighthouse"
+              "url": "?median-lighthouse-over-time=accessibility#lighthouse",
+              "description": "Median Lighthouse <strong>accessibility</strong> score."
             },
             {
               "endpoint": "lighthouse",
               "category": "seo",
               "metric": "median_score_pct",
               "label": "SEO",
-              "url": "?median-lighthouse-over-time=seo#lighthouse"
+              "url": "?median-lighthouse-over-time=seo#lighthouse",
+              "description": "Median Lighthouse <strong>SEO</strong> score."
             },
             {
               "endpoint": "lighthouse",
               "category": "best_practices",
               "metric": "median_score_pct",
               "label": "Best Practices",
-              "url": "?median-lighthouse-over-time=best_practices#lighthouse"
+              "url": "?median-lighthouse-over-time=best_practices#lighthouse",
+              "description": "Median Lighthouse <strong>best practices</strong> score."
             }
           ]
         },
@@ -470,7 +474,8 @@
               {
                 "key": "median_score_pct",
                 "name": "Median score",
-                "className": "main-cell"
+                "className": "main-cell",
+                "viz": "progress-circle"
               },
               {
                 "key": "client",
@@ -676,16 +681,16 @@
       "config": {
         "colors": {
           "app": [
-            "#5980EB",
-            "#D55316",
-            "#2C2F70",
-            "#68A16D",
-            "#B979A7",
-            "#AC8D1C",
-            "#742F53",
-            "#449DB1",
-            "#8E3496",
-            "#CB377C"
+            "#ED5FB4",
+            "#322288",
+            "#6DA072",
+            "#E47112",
+            "#4E9CC8",
+            "#e51607",
+            "#616F0D",
+            "#7D58CD",
+            "#ba7cb0",
+            "#882155"
           ],
           "app_dark": [
             "#5980EB",
@@ -730,21 +735,32 @@
               },
               {
                 "key": "good_pct",
-                "name": "Overall good CWV",
+                "name": "Good CWVs",
                 "breakdown": "subcategory",
                 "subcategory": "overall",
                 "suffix": "%",
-                "className": "main-cell pct-value",
+                "viz": "progress",
+                "className": "cwv-cell main-cell pct-value",
                 "endpoint": "vitals",
                 "metric": "good_pct"
               },
               {
                 "key": "medium_score_pct",
-                "name": "Accessibility",
+                "name": "Perf.",
+                "breakdown": "subcategory",
+                "subcategory": "performance",
+                "endpoint": "lighthouse",
+                "metric": "median_score_pct",
+                "viz": "progress-circle"
+              },
+              {
+                "key": "medium_score_pct",
+                "name": "A11Y",
                 "breakdown": "subcategory",
                 "subcategory": "accessibility",
                 "endpoint": "lighthouse",
-                "metric": "median_score_pct"
+                "metric": "median_score_pct",
+                "viz": "progress-circle"
               },
               {
                 "key": "client",
@@ -904,7 +920,8 @@
                 "key": "median_score_pct",
                 "name": "Median lighthouse score",
                 "breakdown": "app",
-                "className": "main-cell"
+                "className": "main-cell",
+                "viz": "progress-circle"
               },
               {
                 "key": "client",
@@ -1163,7 +1180,8 @@
                 "key": "selectTech",
                 "name": "Select technology",
                 "hiddenName": true,
-                "type": "checkbox"
+                "type": "checkbox",
+                "className": "check-cell"
               },
               {
                 "key": "technology",
@@ -1180,11 +1198,12 @@
               },
               {
                 "key": "good_pct",
-                "name": "Good CWV",
+                "name": "Good CWVs",
                 "breakdown": "subcategory",
                 "subcategory": "overall",
                 "suffix": "%",
-                "className": "main-cell pct-value",
+                "viz": "progress",
+                "className": "cwv-cell main-cell pct-value",
                 "endpoint": "vitals",
                 "metric": "good_pct"
               },

src/js/components/drilldownHeader.js

@@ -3,6 +3,14 @@ import { DataUtils } from "../techreport/utils/data";
 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 setCategories(categories) {
@@ -30,6 +38,13 @@ function setCategories(categories) {
   }
 }
 
+function setDescription(description) {
+  if(description && description !== "") {
+    const descr = document.querySelector('p.app-description');
+    descr.textContent = description;
+  }
+}
+
 function update(filters) {
   const app = filters.app[0];
 
@@ -42,4 +57,5 @@ function update(filters) {
 export const DrilldownHeader = {
   update,
   setCategories,
+  setDescription,
 }

src/js/techreport/index.js

@@ -371,11 +371,13 @@ class TechReport {
 
         const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
         DrilldownHeader.setCategories(categories);
+        DrilldownHeader.setDescription(techInfo.description);
       });
   }
 
   updateCategoryComponents (category) {
     this.updateComponents(category.data);
+    DrilldownHeader.setDescription(category.description);
   }
 
   // Update components and sections that are relevant to the current page

src/js/techreport/section.js

@@ -41,6 +41,7 @@ class Section {
     this.components[component.dataset.id] = new TableLinked(
       component.dataset.id,
       this.pageConfig,
+      this.config,
       this.pageFilters,
       this.data
     );
@@ -60,6 +61,7 @@ class Section {
     this.components[component.dataset.id] = new Timeseries(
       component.dataset.id,
       this.pageConfig,
+      this.config,
       this.pageFilters,
       this.data
     );

src/js/techreport/summaryCards.js

@@ -58,13 +58,12 @@ class SummaryCard {
         const valueSlot = card.querySelector('[data-slot="value"]');
         valueSlot.innerHTML = latestValue?.toLocaleString();
 
-        const progress = card.querySelectorAll('.lighthouse-progress');
+        const progress = card.querySelectorAll('.progress-circle');
         progress.forEach(circle => {
           const scoreCategory = DataUtils.getLighthouseScoreCategories(latestValue, this.config.lighthouse_brackets);
           const scoreCategoryName = scoreCategory?.name;
-          circle.setAttribute('style', `--offset: ${100 - latestValue};`);
-          const chart = card.querySelector('svg.progress-chart');
-          chart.classList.add(scoreCategoryName);
+          circle.setAttribute('style', `--offset: ${latestValue}%;`);
+          circle.classList.add(scoreCategoryName);
         });
 
       }

src/js/techreport/table.js

@@ -1,3 +1,5 @@
+import { DataUtils } from "./utils/data";
+
 function formatData(tableConfig, data) {
   const { id, config, apps } = tableConfig;
 
@@ -100,7 +102,7 @@ function getSubcategory(config) {
 }
 
 // Update the table
-function updateTable(id, config, apps, data) {
+function updateTable(id, config, appConfig, apps, data) {
   // Select a table based on the passed in id
   const component = document.getElementById(`table-${id}`)
   const tbody = component.querySelector('tbody');
@@ -178,6 +180,12 @@ function updateTable(id, config, apps, data) {
         cell.className = className;
       }
 
+      if(column.viz === 'progress-circle' && value) {
+        const score = DataUtils.getLighthouseScoreCategories(value, appConfig.lighthouse_brackets);
+        wrapper.classList.add('progress-circle', score.name);
+        wrapper.setAttribute('style', `--offset: ${value}%`);
+      }
+
       // Add cell to the row
       tr.appendChild(cell);
     });

src/js/techreport/tableLinked.js

@@ -1,9 +1,10 @@
 import { DataUtils } from "./utils/data";
 
 class TableLinked {
-  constructor(id, config, filters, data) {
+  constructor(id, pageConfig, globalConfig, filters, data) {
     this.id = id;
-    this.pageConfig = config;
+    this.config = globalConfig;
+    this.pageConfig = pageConfig;
     this.pageFilters = filters;
     this.submetric = ''; // TODO: Fetch the default one from somewhere
     this.data = data;
@@ -92,6 +93,15 @@ class TableLinked {
             let cell;
             if(column.type === 'heading') {
               cell = document.createElement('th');
+              cell.classList.add('app-cell');
+
+              const img = document.createElement('span');
+              const imgUrl = `https://cdn.httparchive.org/static/icons/${formattedApp}.png`;
+              img.setAttribute('aria-hidden', 'true');
+              img.setAttribute('style', `background-image: url(${imgUrl})`);
+              img.classList.add('app-img');
+              cell.append(img);
+
               const link = document.createElement('a');
               link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
               link.innerHTML = formattedApp;
@@ -123,24 +133,36 @@ class TableLinked {
               cell.append(checkbox);
 
               const label = document.createElement('label');
-              label.innerHTML = formattedApp;
+              label.innerHTML = `Select ${formattedApp}`;
               label.classList.add('sr-only');
               label.setAttribute('for', `${app}-table-${this.id}`);
               cell.append(label);
-
+              cell.classList.add('check-cell');
             } else if(column.key === 'client') {
               cell = document.createElement('td');
               cell.innerHTML = component.dataset.client;
             } else {
+              const cellContent = document.createElement('span');
               cell = document.createElement('td');
               const dataset = latest?.[column?.endpoint];
               let value = dataset?.find(entry => entry.name === column.subcategory);
               value = value?.[component.dataset.client]?.[column?.metric];
               if(column.suffix) {
-                cell.innerHTML = `${value?.toLocaleString()}${column.suffix}`;
+                cellContent.innerHTML = `${value?.toLocaleString()}${column.suffix}`;
               } else {
-                cell.innerHTML = `${value?.toLocaleString()}`;
+                cellContent.innerHTML = `${value?.toLocaleString()}`;
               }
+
+              if(column.viz === 'progress') {
+                cell.setAttribute('style', `--cell-value: ${value}%`);
+                cell.dataset.value = value;
+              } else if(column.viz === 'progress-circle') {
+                const score = DataUtils.getLighthouseScoreCategories(value, this.config.lighthouse_brackets);
+                cellContent.classList.add('progress-circle', score.name);
+                cellContent.setAttribute('style', `--offset: ${value}%`);
+              }
+
+              cell.append(cellContent);
             }
 
             if(column.className) {

src/js/techreport/timeseries.js

@@ -3,9 +3,10 @@ import { DataUtils } from "./utils/data";
 import { UIUtils } from "./utils/ui";
 class Timeseries {
   // Create the component
-  constructor(id, config, filters, data) {
+  constructor(id, pageConfig, config, filters, data) {
     this.id = id;
-    this.pageConfig = config;
+    this.pageConfig = pageConfig;
+    this.config = config;
     this.pageFilters = filters;
     this.submetric = ''; // TODO: Fetch the default one from somewhere
     this.data = data;
@@ -80,7 +81,7 @@ class Timeseries {
       this.updateSummary();
     }
     this.updateViz();
-    Table.updateTable(this.id, this.pageConfig[this.id]?.table, this.pageFilters.app, this.data);
+    Table.updateTable(this.id, this.pageConfig[this.id]?.table, this.config, this.pageFilters.app, this.data);
   }
 
   // Update the summary with the latest data for all categories