Fix formatting of client and numbers (#1108)

Author: tunetheweb

src/js/techreport/index.js

@@ -201,7 +201,7 @@ class TechReport {
 
     // Update labels
     document.querySelectorAll('[data-slot="client"]').forEach(component => {
-      component.innerHTML = client;
+      component.innerText = client;
     });
   }
 

src/js/techreport/table.js

@@ -139,7 +139,10 @@ function updateTable(id, config, appConfig, apps, data) {
       let text = '';
       let className = column.className;
 
-      const value = column.value;
+      const value =
+        typeof column.value === 'string' ? UIUtils.capitalizeFirstLetter(column.value) :
+        typeof column.value === 'number' ? column.value.toLocaleString() :
+        column.value;
 
       // Fill in the data if it exists
       if(value && value !== '') {
@@ -152,7 +155,7 @@ function updateTable(id, config, appConfig, apps, data) {
 
       // Wrap the text in a span for styling
       const wrapper = document.createElement('span');
-      wrapper.innerHTML = text;
+      wrapper.innerText = text;
       cell.append(wrapper);
 
       // Stylized column groups (eg format `<column 1> / <column 2>`)
@@ -167,7 +170,7 @@ function updateTable(id, config, appConfig, apps, data) {
         hiddenSuffix.innerHTML = column.hiddenSuffix;
 
         const textWrapper = document.createElement('span');
-        textWrapper.innerHTML = text;
+        textWrapper.innerText = text;
 
         const cellWrapper = document.createElement(cellType);
         cellWrapper.appendChild(textWrapper);

src/js/techreport/tableLinked.js

@@ -116,14 +116,14 @@ class TableLinked {
               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;
+              link.innerText = formattedApp;
               wrapper.append(link);
               cell.append(wrapper);
             } else if (column.type === 'checkbox') {
               cell = this.addColumnCheckbox(app);
             } else if(column.key === 'client') {
               cell = document.createElement('td');
-              cell.innerHTML = component.dataset.client;
+              cell.innerText = UIUtils.capitalizeFirstLetter(component.dataset.client);
             } else {
               const cellContent = document.createElement('span');
               cell = document.createElement('td');
@@ -132,9 +132,9 @@ class TableLinked {
               const changeStyle = UIUtils.getChangeStatus(value?.[component.dataset.client]?.momPerc);
               value = value?.[component.dataset.client]?.[column?.metric];
               if(column.suffix) {
-                cellContent.innerHTML = `${value?.toLocaleString()}${column.suffix}`;
+                cellContent.innerText = `${value?.toLocaleString()}${column.suffix}`;
               } else {
-                cellContent.innerHTML = `${value?.toLocaleString()}`;
+                cellContent.innerText = `${value?.toLocaleString()}`;
               }
 
               if(column.viz === 'progress') {
@@ -265,7 +265,7 @@ class TableLinked {
       }
 
       appLinkEl.setAttribute('href', href);
-      appLinkEl.innerHTML = label;
+      appLinkEl.innerText = label;
     });
 
     if(this.selectedTechs.length > 0) {
@@ -320,7 +320,7 @@ class TableLinked {
     this.data = result.data;
     this.updateContent();
     const rowsAnnouncement = document.getElementById('rows-announcement');
-    rowsAnnouncement.innerHTML = `Showing ${this.rows} rows.`;
+    rowsAnnouncement.innerText = `Showing ${this.rows} rows.`;
   }
 }
 

src/js/techreport/timeseries.js

@@ -3,6 +3,7 @@
 import { Table } from "./table";
 import { DataUtils } from "./utils/data";
 import { UIUtils } from "./utils/ui";
+
 class Timeseries {
   // Create the component
   constructor(id, pageConfig, config, filters, data) {
@@ -150,7 +151,7 @@ class Timeseries {
 
         /* Add a text label to the wrapper */
         const breakdownLabel = document.createElement('p');
-        breakdownLabel.textContent = breakdown.name;
+        breakdownLabel.textContent = UIUtils.capitalizeFirstLetter(breakdown.name);
         breakdownLabel.classList.add('breakdown-label');
         itemWrapper.appendChild(breakdownLabel);
 
@@ -377,7 +378,7 @@ class Timeseries {
 
           document.getElementsByTagName('main')[0].append(pointSvg);
 
-          pointSeries.innerHTML = point.series.name;
+          pointSeries.innerHTML = UIUtils.capitalizeFirstLetter(point.series.name);
           pointItem.innerHTML = `${pointSvg.outerHTML} ${pointSeries.outerHTML}: ${point.y.toLocaleString()}`;
 
           pointList.appendChild(pointItem);
@@ -389,6 +390,13 @@ class Timeseries {
       }
     }
 
+    timeseries.legend = {
+      labelFormatter: function () {
+        const name = this.name || "";
+        return UIUtils.capitalizeFirstLetter(name);
+      }
+    }
+
     // Render the chart
     Highcharts.chart(`${this.id}-timeseries`, timeseries);
   }

src/js/techreport/utils/ui.js

@@ -57,8 +57,13 @@ const getChangeStatus = (percentage, meaning) => {
   }
 }
 
+function capitalizeFirstLetter(theString) {
+  return theString && typeof theString === 'string' ? theString.charAt(0)?.toUpperCase() + theString.slice(1) : theString;
+}
+
 export const UIUtils = {
   getAppColor,
   updateReportComponents,
   getChangeStatus,
+  capitalizeFirstLetter,
 }

templates/techreport/components/filter_meta.html

@@ -1,6 +1,6 @@
 <ul class="meta">
   <li>
-    Client: <span data-slot="client">{{ request.args.get('client', '')  or 'mobile' }}</span>
+    Client: <span data-slot="client">{{ request.args.get('client', '') | capitalize or 'Mobile' }}</span>
   </li>
   <li>
     Geo: <span data-slot="geo">{{ request.args.get('geo', '')  or 'ALL' }}</span>