From 089ab3433fdf68e6192de0d78a37f6cb94f0fb36 Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Mon, 18 Aug 2025 13:39:41 +0100 Subject: [PATCH] Fix formatting of client and numbers --- src/js/techreport/index.js | 2 +- src/js/techreport/table.js | 9 ++++++--- src/js/techreport/tableLinked.js | 12 ++++++------ src/js/techreport/timeseries.js | 12 ++++++++++-- src/js/techreport/utils/ui.js | 5 +++++ templates/techreport/components/filter_meta.html | 2 +- 6 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 420d7588..b50a104c 100644 --- a/src/js/techreport/index.js +++ b/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; }); } diff --git a/src/js/techreport/table.js b/src/js/techreport/table.js index 5bc35995..9658f05e 100644 --- a/src/js/techreport/table.js +++ b/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 ` / `) @@ -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); diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 06d3219e..810defcb 100644 --- a/src/js/techreport/tableLinked.js +++ b/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.`; } } diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index d8058873..5f0a2fc2 100644 --- a/src/js/techreport/timeseries.js +++ b/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); } diff --git a/src/js/techreport/utils/ui.js b/src/js/techreport/utils/ui.js index 1460178a..244aafef 100644 --- a/src/js/techreport/utils/ui.js +++ b/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, } diff --git a/templates/techreport/components/filter_meta.html b/templates/techreport/components/filter_meta.html index 28734686..6641858c 100644 --- a/templates/techreport/components/filter_meta.html +++ b/templates/techreport/components/filter_meta.html @@ -1,6 +1,6 @@
  • - Client: {{ request.args.get('client', '') or 'mobile' }} + Client: {{ request.args.get('client', '') | capitalize or 'Mobile' }}
  • Geo: {{ request.args.get('geo', '') or 'ALL' }}