Content and styling improvements (#881)

* change 'ALL' to 'All technologies' * prototype categories and description * remove console.logs and unused code * prototype custom colors in dark mode * prototype different timeseries colors in dark mode * format numbers according to locale * increase color contrast in dark mode * move beta header down * update placeholder text on landing and in categories * have fallback when categories and description are empty * only fetch tech info on drilldown * Turn off target-size audit * fix bug: landing page color theme * fix color contrast in dark mode * Update src/js/techreport/index.js Co-authored-by: Rick Viscomi <[email protected]> * fix z-index and replace base url with constant * save constants --------- Co-authored-by: Barry Pollard <[email protected]> Co-authored-by: Rick Viscomi <[email protected]>
HTTPArchive · Aug 9, 2024 · df56a3d · df56a3d
1 parent fbfef3a
commit df56a3d
Show file tree

Hide file tree

Showing 20 changed files with 203 additions and 62 deletions.
diff --git a/.github/lighthouse/lighthouse-config-dev.json b/.github/lighthouse/lighthouse-config-dev.json
@@ -27,6 +27,7 @@
         "service-worker": "off",
         "speed-index": "off",
         "splash-screen": "off",
+        "target-size": "off",
         "themed-omnibox": "off",
         "third-party-facades": "off",
         "total-byte-weight": "off",

diff --git a/.github/lighthouse/lighthouse-config-prod.json b/.github/lighthouse/lighthouse-config-prod.json
@@ -27,6 +27,7 @@
         "service-worker": "off",
         "speed-index": "off",
         "splash-screen": "off",
+        "target-size": "off",
         "themed-omnibox": "off",
         "third-party-facades": "off",
         "total-byte-weight": "off",

diff --git a/config/techreport.json b/config/techreport.json
@@ -47,7 +47,24 @@
       },
       "config": {
         "default": {
-          "app": ["WordPress", "Squarespace", "Drupal"]
+          "app": ["WordPress", "Squarespace", "Drupal"],
+          "series": {
+              "breakdown": "client",
+              "breakdown_values": [
+                {
+                  "name": "desktop",
+                  "color": "#669E8E",
+                  "color_dark": "#fff000",
+                  "suffix": "%"
+                },
+                {
+                  "name": "mobile",
+                  "color": "#BD6EBE",
+                  "color_dark": "#ff00f0",
+                  "suffix": "%"
+                }
+              ]
+            }
         },
         "popular_tech": {
           "id": "popular_tech",
@@ -76,11 +93,13 @@
               {
                 "name": "desktop",
                 "color": "#669E8E",
+                "color_dark": "#fff000",
                 "suffix": "%"
               },
               {
                 "name": "mobile",
                 "color": "#BD6EBE",
+                "color_dark": "#ff00f0",
                 "suffix": "%"
               }
             ]
@@ -158,11 +177,13 @@
               "values": [
                 {
                   "name": "desktop",
-                  "color": "#669E8E"
+                  "color": "#669E8E",
+                  "color_dark": "#fff000"
                 },
                 {
                   "name": "mobile",
-                  "color": "#BD6EBE"
+                  "color": "#BD6EBE",
+                  "color_dark": "#ff00f0"
                 }
               ],
               "defaults": [
@@ -339,11 +360,13 @@
                 {
                   "name": "desktop",
                   "color": "#669E8E",
+                  "color_dark": "#fff000",
                   "suffix": "%"
                 },
                 {
                   "name": "mobile",
                   "color": "#BD6EBE",
+                  "color_dark": "#ff00f0",
                   "suffix": "%"
                 }
               ],
@@ -477,11 +500,13 @@
               "values": [
                 {
                   "name": "desktop",
-                  "color": "#669E8E"
+                  "color": "#669E8E",
+                  "color_dark": "#fff000"
                 },
                 {
                   "name": "mobile",
-                  "color": "#BD6EBE"
+                  "color": "#BD6EBE",
+                  "color_dark": "#ff00f0"
                 }
               ],
               "defaults": [
@@ -607,12 +632,14 @@
                 {
                   "name": "desktop",
                   "color": "#669E8E",
-                  "suffix": " bytes"
+                  "suffix": " bytes",
+                  "color_dark": "#fff000"
                 },
                 {
                   "name": "mobile",
                   "color": "#BD6EBE",
-                  "suffix": " bytes"
+                  "suffix": " bytes",
+                  "color_dark": "#ff00f0"
                 }
               ],
               "defaults": [
@@ -669,8 +696,20 @@
             "#8E3496",
             "#CB377C"
           ],
+          "app_dark": [
+            "#5980EB",
+            "#D55316",
+            "#A8A9CA",
+            "#68A16D",
+            "#B979A7",
+            "#AC8D1C",
+            "#947786",
+            "#449DB1",
+            "#C861D2",
+            "#E24070"
+          ],
           "overrides": {
-            "WordPress": "#ff0000"
+            "WordPress": "#fff000"
           }
         },
         "default": {

diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js
@@ -1,3 +1,5 @@
+import { DataUtils } from "../techreport/utils/data";
+
 function setTitle(title) {
   const mainTitle = document.querySelector('h2 span.main-title');
   mainTitle.textContent = title;
@@ -33,7 +35,8 @@ function update(data, filters) {
   const app = filters.app[0];
 
   if(app) {
-    setTitle(app);
+    const formattedApp = DataUtils.formatAppName(app);
+    setTitle(formattedApp);
   }
 
   if(data[app]) {

diff --git a/src/js/components/filters.js b/src/js/components/filters.js
@@ -99,7 +99,7 @@ class Filters {
         const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
         const option = optionTmpl.querySelector('option');
         const formattedTech = technology.technology;
-        option.textContent = technology.technology;
+        option.textContent = DataUtils.formatAppName(technology.technology);
         option.value = formattedTech;
         if(formattedTech === techSelector.getAttribute('data-selected')) {
           option.selected = true;

diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js
@@ -1,4 +1,5 @@
 import Filters from '../components/filters';
+import { Constants } from './utils/constants';
 const { DrilldownHeader } = require("../components/drilldownHeader");
 const { DataUtils } = require("./utils/data");
 const { UIUtils } = require("./utils/ui");
@@ -25,17 +26,21 @@ class TechReport {
     this.initializePage();
     this.getAllMetricData();
     this.bindSettingsListeners();
+    this.initializeAccessibility();
   }
 
   // Initialize the sections for the different pages
   initializePage() {
+    this.updateStyling();
+
     switch(this.pageId) {
       case 'landing':
         this.initializeLanding();
         break;
 
       case 'drilldown':
         this.initializeReport();
+        this.getTechInfo();
         break;
 
       case 'comparison':
@@ -44,18 +49,14 @@ class TechReport {
     }
   }
 
-  // TODO
-  initializeLanding() {
-  }
-
-  // TODO
-  initializeReport() {
-    // TODO: Move to function
+  // Load accessibility/themeing info
+  initializeAccessibility() {
+    // Show indicators?
     const showIndicators = localStorage.getItem('showIndicators');
     document.querySelector('main').dataset.showIndicators = showIndicators;
     document.querySelector('#indicators-check').checked = showIndicators === 'true';
 
-    // TODO: Move to function
+    // Dark or light mode?
     const theme = localStorage.getItem('haTheme');
     document.querySelector('html').dataset.theme = theme;
     const btn = document.querySelector('.theme-switcher');
@@ -64,7 +65,13 @@ class TechReport {
     } else if(theme === 'light') {
       btn.innerHTML = '🌚 Switch to dark theme';
     }
+  }
 
+  initializeLanding() {
+  }
+
+  // TODO
+  initializeReport() {
     const sections = document.querySelectorAll('[data-type="section"]');
     // TODO: add general config too
     sections.forEach(section => {
@@ -79,7 +86,6 @@ class TechReport {
     });
 
     this.bindClientListener();
-    this.updateStyling();
   }
 
   // Watch for changes in the client dropdown
@@ -174,8 +180,6 @@ class TechReport {
       },
     ];
 
-    const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
-
     const technology = technologies.join('%2C')
       .replaceAll(" ", "%20");
 
@@ -186,18 +190,21 @@ class TechReport {
     technologies.forEach(tech => allResults[tech] = []);
 
     Promise.all(apis.map(api => {
-      const url = `${base}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
+      const url = `${Constants.apiBase}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
 
       return fetch(url)
         .then(result => result.json())
         .then(result => {
+          // Loop through all the rows of the API result
           result.forEach(row => {
             const parsedRow = {
               ...row,
             }
 
+            // Parse the data and add it to the results
             if(api.parse) {
-              parsedRow[api.metric] = api.parse(parsedRow[api.metric], parsedRow?.date);
+              const metric = parsedRow[api.metric] || parsedRow;
+              parsedRow[api.metric] = api.parse(metric, parsedRow?.date);
             }
 
             const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
@@ -217,6 +224,37 @@ class TechReport {
     });
   }
 
+  // Get the information about the selected technology
+  getTechInfo() {
+    const technologies = this.filters.app;
+    const technology = technologies.join('%2C')
+      .replaceAll(" ", "%20");
+
+    const url = `${Constants.apiBase}/technologies?technology=${technology}`;
+
+    fetch(url)
+      .then(result => result.json())
+      .then(result => {
+        const techInfo = result[0];
+
+        const categoryListEl = document.getElementsByClassName('category-list')[0];
+        categoryListEl.innerHTML = '';
+
+        const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : [];
+        categories.forEach(category => {
+          const categoryItemEl = document.createElement('li');
+          categoryItemEl.className = 'cell';
+          categoryItemEl.textContent = category;
+          categoryListEl.append(categoryItemEl);
+        });
+
+        const descriptionEl = document.createElement('p');
+        descriptionEl.className = 'tech-description';
+        descriptionEl.textContent = techInfo?.description;
+        categoryListEl.after(descriptionEl);
+      });
+  }
+
   // Update components and sections that are relevant to the current page
   updateComponents(data) {
     switch(this.pageId) {
@@ -239,12 +277,11 @@ class TechReport {
   // Fetch the data for the filter dropdowns
   getFilterInfo() {
     const filterData = {};
-    const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
 
     const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
 
     Promise.all(filterApis.map(api => {
-      const url = `${base}/${api}`;
+      const url = `${Constants.apiBase}/${api}`;
 
       return fetch(url)
         .then(result => result.json())

diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
@@ -1,3 +1,5 @@
+import { DataUtils } from "./utils/data";
+
 class TableLinked {
   constructor(id, config, filters, data) {
     this.id = id;
@@ -40,7 +42,8 @@ class TableLinked {
               cell = document.createElement('th');
               const link = document.createElement('a');
               link.setAttribute('href', `?tech=${app}`);
-              link.innerHTML = app;
+              const formattedApp = DataUtils.formatAppName(app);
+              link.textContent = formattedApp;
               cell.append(link);
             } else if(column.key === 'client') {
               cell = document.createElement('td');