Content and styling improvements

.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",

.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",

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": {

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]) {

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;

src/js/techreport/index.js

@@ -25,17 +25,22 @@ class TechReport {
     this.initializePage();
     this.getAllMetricData();
     this.bindSettingsListeners();
+    this.initializeAccessibility();
   }
 
   // Initialize the sections for the different pages
   initializePage() {
+    console.log('initialize page');
+    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
@@ -191,13 +197,16 @@ class TechReport {
       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 +226,38 @@ class TechReport {
     });
   }
 
+  // Get the information about the selected technology
+  getTechInfo() {
+    const technologies = this.filters.app;
+    const technology = technologies.join('%2C')
+      .replaceAll(" ", "%20");
+
+    const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
+    const url = `${base}/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) {

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

src/js/techreport/timeseries.js

@@ -1,4 +1,5 @@
 import { Table } from "./table";
+import { DataUtils } from "./utils/data";
 import { UIUtils } from "./utils/ui";
 class Timeseries {
   // Create the component
@@ -136,7 +137,11 @@ class Timeseries {
         /* Create a wrapper */
         const itemWrapper = document.createElement('div');
         itemWrapper.classList.add('breakdown-item');
-        itemWrapper.style.setProperty('--breakdown-color', breakdown.color);
+
+        /* Set the breakdown color depending on chosen theme */
+        const theme = document.querySelector('html').dataset.theme;
+        const themeColor = theme === 'dark' ? breakdown.color_dark : breakdown.color;
+        itemWrapper.style.setProperty('--breakdown-color', themeColor);
 
         /* Add a text label to the wrapper */
         const breakdownLabel = document.createElement('p');
@@ -153,7 +158,7 @@ class Timeseries {
         } else {
           /* Add the value to the wrapper */
           const valueLabel = document.createElement('p');
-          valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`;
+          valueLabel.textContent = `${latestValue.toLocaleString()}${breakdown.suffix || ''}`;
           valueLabel.classList.add('breakdown-value');
           itemWrapper.appendChild(valueLabel);
         }
@@ -193,8 +198,8 @@ class Timeseries {
         const latestEndpoint = latest[endpoint];
         const latestSubcategory = latestEndpoint?.find(row => row.name === subcategory);
         const latestClient  = latestSubcategory?.[client];
-        const latestValue = latestClient?.[metric];
-        const summaryValue = latestClient?.[summary];
+        const latestValue = latestClient?.[metric]?.toLocaleString();
+        const summaryValue = latestClient?.[summary]?.toLocaleString();
 
         /* Select the container to which we'll add elements. */
         const card = container.querySelector(`[data-app="${app}"]`);
@@ -203,7 +208,8 @@ class Timeseries {
         const value = card.getElementsByClassName('breakdown-value')[0];
 
         /* Update text */
-        label.textContent = latest.technology;
+        const formattedApp = DataUtils.formatAppName(latest.technology);
+        label.textContent = formattedApp;
         if(latestValue) {
           if(summary) {
             value.textContent = `${summaryValue}`;
@@ -343,7 +349,7 @@ class Timeseries {
           document.getElementsByTagName('main')[0].append(pointSvg);
 
           pointSeries.innerHTML = point.series.name;
-          pointItem.innerHTML = `${pointSvg.outerHTML} ${pointSeries.outerHTML}: ${point.y}`;
+          pointItem.innerHTML = `${pointSvg.outerHTML} ${pointSeries.outerHTML}: ${point.y.toLocaleString()}`;
 
           pointList.appendChild(pointItem);
         });
@@ -434,6 +440,9 @@ class Timeseries {
 
     const category = this.getCategory(config);
 
+    // Get color scheme
+    const theme = document.querySelector('html').dataset.theme;
+
     // Breakdown data by categories defined in config
     config?.series?.values?.forEach((value, index) => {
       // Filter by selected client & sort
@@ -454,14 +463,18 @@ class Timeseries {
 
       const sortedData = formattedData.sort((a, b) => new Date(a.x) - new Date(b.x));
 
+      // Pick color from settings depending on theme
       const colors = this.defaults(config)?.chart?.colors;
+      const colorDark = value.color_dark;
+      const colorLight = value.color;
+      const seriesColor = theme === "dark" ? colorDark : colorLight;
 
       // Push the configurations and formatted data to the series array
       series.push(
         {
           name: value.name,
           data: sortedData,
-          color: value.color || colors[index],
+          color: seriesColor || colors?.[index],
           lineWidth: 2,
         }
       )