From 091c12dbdeccddbdc6ee0c5b6c738adf6ea8985b Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sun, 9 Jun 2024 11:52:47 +0200 Subject: [PATCH 01/17] change 'ALL' to 'All technologies' --- src/js/components/drilldownHeader.js | 5 ++++- src/js/components/filters.js | 2 +- src/js/techreport/tableLinked.js | 5 ++++- src/js/techreport/timeseries.js | 4 +++- src/js/techreport/utils/data.js | 5 +++++ templates/techreport/comparison.html | 2 +- templates/techreport/components/filter_info_header.html | 2 +- templates/techreport/components/table.html | 7 ++++++- templates/techreport/drilldown.html | 2 +- templates/techreport/templates/filters.html | 4 ++++ templates/techreport/templates/selector_tech.html | 2 +- 11 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js index c31b9c8c..99e784dd 100644 --- 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 index 5ea226bc..260788d8 100644 --- 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/tableLinked.js b/src/js/techreport/tableLinked.js index cfbd1d2f..a9bb02f5 100644 --- 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'); diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index 45e3c6ce..8f61892b 100644 --- a/src/js/techreport/timeseries.js +++ b/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 @@ -203,7 +204,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}`; diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index e455b481..46598312 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -60,6 +60,10 @@ const formatBytes = (value) => { return value > 1048576 ? `${Math.round(value / 1048576)} MB` : value > 1024 ? `${Math.round(value / 1024)} KB` : `${submetric.desktop.median_bytes} bytes`; }; +const formatAppName = (app) => { + return app === 'ALL' ? 'All technologies' : app; +} + const parsePageWeightData = (metric, date) => { return metric.map(submetric => { return { @@ -103,4 +107,5 @@ export const DataUtils = { parsePageWeightData, filterDuplicates, getLighthouseScoreCategories, + formatAppName, }; diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index f2a2d488..536d18f0 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -18,7 +18,7 @@

- {% set filter_tech_title = technologies_str or tech_report_page.filters.app[0] or 'ALL' %} + {% set filter_tech_title = technologies_str or tech_report_page.filters.app[0] or 'All Technologies' %} {% include "techreport/components/filter_info_header.html" %}
diff --git a/templates/techreport/components/filter_info_header.html b/templates/techreport/components/filter_info_header.html index 4de53cd8..0dbdd9cf 100644 --- a/templates/techreport/components/filter_info_header.html +++ b/templates/techreport/components/filter_info_header.html @@ -3,7 +3,7 @@

- {{ filter_tech_title }} + {{ filter_tech_title.replace('ALL', 'All technologies') }}

diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index d0c51eb1..893ce400 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -23,7 +23,12 @@ data-metric="{{column.metric}}" class="{{ column.className }}" > - {{ app }} + {% if app == 'ALL' %} + All technologies + {% else %} + {{ app }} + {% endif %} + {% if column.hiddenSuffix %}
- {% set filter_tech_title = tech_report_page.filters.app[0] or 'ALL' %} + {% set filter_tech_title = tech_report_page.filters.app[0] or 'All technologies' %} {% include "techreport/components/filter_info_header.html" %}
diff --git a/templates/techreport/templates/filters.html b/templates/techreport/templates/filters.html index bfbdd0a1..cb00a5e7 100644 --- a/templates/techreport/templates/filters.html +++ b/templates/techreport/templates/filters.html @@ -11,6 +11,10 @@ {% for technology in technologies %} {% set key = loop.index %} {% set technology = technology %} + {% set technologyName = technology %} + {% if technology == "ALL" %} + {% set technologyName = "All technologies" %} + {% endif %} {% set name = "tech-" + key|string %} {% include "techreport/templates/selector_tech.html" %} {% endfor %} diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html index 4608857c..9abd970f 100644 --- a/templates/techreport/templates/selector_tech.html +++ b/templates/techreport/templates/selector_tech.html @@ -14,7 +14,7 @@
From 507c8b52b634ada9ff6b3305f76821e0fb8cb2e2 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sun, 9 Jun 2024 22:56:41 +0200 Subject: [PATCH 02/17] prototype categories and description --- src/js/techreport/index.js | 47 ++++++++++++++++++++++++++++++++- src/js/techreport/utils/data.js | 6 +++++ 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 38e715da..bd4cb1bf 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -24,6 +24,7 @@ class TechReport { // Load the page this.initializePage(); this.getAllMetricData(); + this.getTechInfo(); this.bindSettingsListeners(); } @@ -191,13 +192,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); @@ -213,10 +217,51 @@ class TechReport { }) .catch(error => console.log('Something went wrong', error)); })).then(() => { + console.log('ALL RESULTS', allResults); this.updateComponents(allResults); }); } + // Get the information about the selected technology + getTechInfo() { + console.log('get tech info'); + + const technologies = this.filters.app; + const technology = technologies.join('%2C') + .replaceAll(" ", "%20"); + + console.log('get info for tech', technology); + + const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; + const url = `${base}/technologies?technology=${technology}`; + + console.log('call api by url', url); + + fetch(url) + .then(result => result.json()) + .then(result => { + console.log('info result', result); + console.log(result); + const techInfo = result[0]; + + const categoryListEl = document.getElementsByClassName('category-list')[0]; + categoryListEl.innerHTML = ''; + + const categories = 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) { diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 46598312..f330e457 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -84,6 +84,11 @@ const parsePageWeightData = (metric, date) => { }); } +const parseTechnologyData = (metric, date) => { + console.log('parse', metric, date); + return metric; +} + const filterDuplicates = (array, key) => { const filtered = []; array.forEach((row) => { @@ -108,4 +113,5 @@ export const DataUtils = { filterDuplicates, getLighthouseScoreCategories, formatAppName, + parseTechnologyData, }; From 114cf31c4607cd86acabc1e428f364685641da2c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 10 Jun 2024 22:48:18 +0200 Subject: [PATCH 03/17] remove console.logs and unused code --- src/js/techreport/index.js | 7 ------- src/js/techreport/utils/data.js | 6 ------ 2 files changed, 13 deletions(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index bd4cb1bf..26706154 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -217,26 +217,19 @@ class TechReport { }) .catch(error => console.log('Something went wrong', error)); })).then(() => { - console.log('ALL RESULTS', allResults); this.updateComponents(allResults); }); } // Get the information about the selected technology getTechInfo() { - console.log('get tech info'); - const technologies = this.filters.app; const technology = technologies.join('%2C') .replaceAll(" ", "%20"); - console.log('get info for tech', technology); - const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; const url = `${base}/technologies?technology=${technology}`; - console.log('call api by url', url); - fetch(url) .then(result => result.json()) .then(result => { diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index f330e457..46598312 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -84,11 +84,6 @@ const parsePageWeightData = (metric, date) => { }); } -const parseTechnologyData = (metric, date) => { - console.log('parse', metric, date); - return metric; -} - const filterDuplicates = (array, key) => { const filtered = []; array.forEach((row) => { @@ -113,5 +108,4 @@ export const DataUtils = { filterDuplicates, getLighthouseScoreCategories, formatAppName, - parseTechnologyData, }; From d4a41f537aafe2b70986e3528164aa21dd7e951f Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 10 Jun 2024 23:05:03 +0200 Subject: [PATCH 04/17] prototype custom colors in dark mode --- config/techreport.json | 24 +++++++++++++++++------- src/js/techreport/index.js | 1 + src/js/techreport/timeseries.js | 15 +++++++++++++-- 3 files changed, 31 insertions(+), 9 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index b5e087b2..c56eb42b 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -76,11 +76,13 @@ { "name": "desktop", "color": "#669E8E", + "color_dark": "#fff000", "suffix": "%" }, { "name": "mobile", "color": "#BD6EBE", + "color_dark": "#ff00f0", "suffix": "%" } ] @@ -158,11 +160,13 @@ "values": [ { "name": "desktop", - "color": "#669E8E" + "color": "#669E8E", + "color_dark": "#fff000" }, { "name": "mobile", - "color": "#BD6EBE" + "color": "#BD6EBE", + "color_dark": "#ff00f0" } ], "defaults": [ @@ -339,11 +343,13 @@ { "name": "desktop", "color": "#669E8E", + "color_dark": "#fff000", "suffix": "%" }, { "name": "mobile", "color": "#BD6EBE", + "color_dark": "#ff00f0", "suffix": "%" } ], @@ -477,11 +483,13 @@ "values": [ { "name": "desktop", - "color": "#669E8E" + "color": "#669E8E", + "color_dark": "#fff000" }, { "name": "mobile", - "color": "#BD6EBE" + "color": "#BD6EBE", + "color_dark": "#ff00f0" } ], "defaults": [ @@ -607,12 +615,14 @@ { "name": "desktop", "color": "#669E8E", - "suffix": " bytes" + "suffix": " bytes", + "color_dark": "#fff000" }, { "name": "mobile", "color": "#BD6EBE", - "suffix": " bytes" + "suffix": " bytes", + "color_dark": "#ff00f0" } ], "defaults": [ @@ -670,7 +680,7 @@ "#CB377C" ], "overrides": { - "WordPress": "#ff0000" + "WordPress": "#fff000" } }, "default": { diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 26706154..da1279ec 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -347,6 +347,7 @@ class TechReport { const body = document.querySelector('body'); if(series?.breakdown == 'client') { series?.breakdown_values?.forEach((breakdown) => { + console.log('set breakdown color', breakdown.color) body.style.setProperty(`--breakdown-color-${breakdown.name}`, breakdown.color); }); } diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index 8f61892b..f8199a7f 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -137,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'); @@ -436,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 @@ -456,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, } ) From 2cbd53da9ff7dce89adda702cdf09aad227a3e40 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 10 Jun 2024 23:34:27 +0200 Subject: [PATCH 05/17] prototype different timeseries colors in dark mode --- config/techreport.json | 12 ++++++++++++ src/js/techreport/index.js | 3 --- src/js/techreport/utils/ui.js | 6 +++++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index c56eb42b..4dd98191 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -679,6 +679,18 @@ "#8E3496", "#CB377C" ], + "app_dark": [ + "#5980EB", + "#D55316", + "#A8A9CA", + "#68A16D", + "#B979A7", + "#AC8D1C", + "#947786", + "#449DB1", + "#C861D2", + "#E24070" + ], "overrides": { "WordPress": "#fff000" } diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index da1279ec..d5edc4c4 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -233,8 +233,6 @@ class TechReport { fetch(url) .then(result => result.json()) .then(result => { - console.log('info result', result); - console.log(result); const techInfo = result[0]; const categoryListEl = document.getElementsByClassName('category-list')[0]; @@ -347,7 +345,6 @@ class TechReport { const body = document.querySelector('body'); if(series?.breakdown == 'client') { series?.breakdown_values?.forEach((breakdown) => { - console.log('set breakdown color', breakdown.color) body.style.setProperty(`--breakdown-color-${breakdown.name}`, breakdown.color); }); } diff --git a/src/js/techreport/utils/ui.js b/src/js/techreport/utils/ui.js index 77d1b938..c7438bb9 100644 --- a/src/js/techreport/utils/ui.js +++ b/src/js/techreport/utils/ui.js @@ -5,6 +5,9 @@ const getAppColor = (tech, technologies, colors) => { const sortedTechs = [...technologies].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); const techIndex = sortedTechs.indexOf(tech); + // Get color scheme + const theme = document.querySelector('html').dataset.theme; + // Return custom colors if configured if(colors.overrides && colors.overrides[tech]) { return colors.overrides[tech]; @@ -12,7 +15,8 @@ const getAppColor = (tech, technologies, colors) => { // Otherwise reutrn based on alphabetic position if(techIndex < colors.app.length) { - return colors.app[techIndex]; + const appColors = theme === "dark" ? colors.app_dark : colors.app; + return appColors[techIndex]; } } From b43f56f277bd84aff97bd36048056605f1e7d449 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 11 Jun 2024 00:43:58 +0200 Subject: [PATCH 06/17] format numbers according to locale --- src/js/techreport/timeseries.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index f8199a7f..07684a00 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -158,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); } @@ -198,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}"]`); @@ -349,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); }); From 27d3f5b15a0e3299272447ca4da235c36dafcf53 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 11 Jun 2024 23:42:09 +0200 Subject: [PATCH 07/17] increase color contrast in dark mode --- static/css/techreport/techreport.css | 37 +++++++++++++++++++++------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 4f3e26cc..134a1074 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -29,6 +29,7 @@ --color-page-border: var(--color-teal-medium); --color-tooltip-background: var(--color-card-background); --color-tooltip-border: var(--color-card-border); + --color-nav: #667a7d; /* Font sizes */ --font-size-medium: 1.75rem; @@ -39,6 +40,8 @@ --card-shadow: 0 2px 7px 0px rgba(143, 149, 150, 0.05); --card-radius: 0.25rem; --table-row-hover: var(--color-blue-100); + --color-panel-text: #203b40; + --color-panel-background: #bfe1e7; /* Graph colors */ --graph-color-primary: var(--color-teal-dark); @@ -66,6 +69,9 @@ --color-bg-gradient: #111; --color-page-border: #000; --color-tooltip-border: var(--color-page-background); + --color-panel-text: #bfe1e7; + --color-panel-background: #203b40; + --color-nav: #bfe1e7; /* Graph colors */ --graph-color-labels: #a6bbbe; @@ -86,6 +92,15 @@ main :is(a, p a) { color: var(--color-link); } +main :is(a, p a):is(:hover, :focus) { + color: var(--color-text); + text-decoration-thickness: 2px; +} + +nav { + color: var(--color-nav); +} + /* CTA */ .cta-link { background-color: var(--color-teal-dark); @@ -330,11 +345,11 @@ main :is(a, p a) { } .select-label:has(select:is(:focus-visible, :hover))::after { - border-color: #f2f9ff; + border-color: var(--color-page-background); } .select-label:has(select:focus-visible) { - background-color: #f2f9ff; + background-color: var(--color-page-background); } .select-label:has(select:focus-visible) label { @@ -370,7 +385,7 @@ main :is(a, p a) { } .tech-selector-group:has(.remove-tech:is(:focus, :hover)) { - background-color: #f2f9ff; + background-color: var(--color-page-background); } .tech-selector-group { @@ -421,11 +436,11 @@ main :is(a, p a) { } .tech-input-wrapper:has(select:is(:focus-visible, :hover))::after { - border-color: #f2f9ff; + border-color: var(--color-page-background); } .tech-input-wrapper:has(select:focus-visible) { - background-color: #f2f9ff; + background-color: var(--color-page-background); color: var(--color-text); } @@ -653,11 +668,11 @@ select { } .subcategory-selector-wrapper:has(select:is(:focus-visible, :hover))::after { - border-color: #f2f9ff; + border-color: var(--color-page-background); } .subcategory-selector-wrapper:has(select:focus-visible) { - background-color: #f2f9ff; + background-color: var(--color-page-background); } .subcategory-selector-wrapper:has(select:focus-visible) label { @@ -686,8 +701,8 @@ select { /* Info message */ .info-panel { - background: #bfe1e7; - color: #203b40; + background: var(--color-panel-background); + color: var(--color-panel-text); font-weight: 400; padding: 0.5rem; } @@ -1143,6 +1158,10 @@ path.highcharts-tick { stroke-width: 1px; } +.tooltip-wrapper { + color: var(--color-text); +} + .tooltip-wrapper ul { margin-top: 0.5rem; } From df122a741089a076f0c65a73f45e27ca14eac36a Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 11 Jun 2024 23:51:47 +0200 Subject: [PATCH 08/17] move beta header down --- templates/techreport/techreport.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index 4ce5d4f2..6ffef20b 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -11,13 +11,6 @@ {% endblock %} {% block report_navigation %} -
-
-

Beta version

-

This dashboard is still under development.

-
-
- + +
+
+

Beta version

+

This dashboard is still under development.

+
+
{% endblock %} {% block main %} From b6615eb882719ee2642f64b792682bb0e003c81c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 12 Jun 2024 00:34:26 +0200 Subject: [PATCH 09/17] update placeholder text on landing and in categories --- templates/techreport/drilldown.html | 5 +---- templates/techreport/landing.html | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index e45f1c52..1a8df86a 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -9,9 +9,6 @@

Tech Report Drilldown

-
{% include "techreport/templates/filters.html" %} @@ -28,7 +25,7 @@

ALL

    -
  • Placeholder
    • +
  • Uncategorized
diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index b6be6c66..d57c1518 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -13,7 +13,7 @@

Tech Report

- Placeholder text: A short description about what it is that we display in the Core Web Vitals report, and how it can be used. There should probably be links here to the individual technology pages and a few interesting comparison pages, as well as to the methodology page and the discussions etc like the reports have today. + Track and compare web technology performance and adoption. Real-world Core Web Vitals performance data is provided by the Chrome UX Report at the origin level, and technologies are identified by HTTP Archive on the home page and one interior page.

From aa6960dee54fcc8aab7b906c1187343a89225d77 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 12 Jun 2024 14:18:28 +0200 Subject: [PATCH 10/17] have fallback when categories and description are empty --- src/js/techreport/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index d5edc4c4..83eba3da 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -238,7 +238,7 @@ class TechReport { const categoryListEl = document.getElementsByClassName('category-list')[0]; categoryListEl.innerHTML = ''; - const categories = techInfo.category.split(', '); + const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : []; categories.forEach(category => { const categoryItemEl = document.createElement('li'); categoryItemEl.className = 'cell'; @@ -248,7 +248,7 @@ class TechReport { const descriptionEl = document.createElement('p'); descriptionEl.className = 'tech-description'; - descriptionEl.textContent = techInfo.description; + descriptionEl.textContent = techInfo?.description; categoryListEl.after(descriptionEl); }); } From 57755aa8c49fd1e6bbd3e18b42f2b714334c0710 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 12 Jun 2024 14:28:59 +0200 Subject: [PATCH 11/17] only fetch tech info on drilldown --- src/js/techreport/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 83eba3da..67feaf4a 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -24,7 +24,6 @@ class TechReport { // Load the page this.initializePage(); this.getAllMetricData(); - this.getTechInfo(); this.bindSettingsListeners(); } @@ -37,6 +36,7 @@ class TechReport { case 'drilldown': this.initializeReport(); + this.getTechInfo(); break; case 'comparison': From 2442a2109d73bbcef3b8134e415af0b87bd8b34e Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Wed, 12 Jun 2024 14:29:45 +0100 Subject: [PATCH 12/17] Turn off target-size audit --- .github/lighthouse/lighthouse-config-dev.json | 1 + .github/lighthouse/lighthouse-config-prod.json | 1 + 2 files changed, 2 insertions(+) diff --git a/.github/lighthouse/lighthouse-config-dev.json b/.github/lighthouse/lighthouse-config-dev.json index 9222decc..90c9b7d1 100644 --- 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 index 09e21b20..3af526be 100644 --- 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", From cb242470b76e336113c554f0b6a6828cb041cb79 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 24 Jul 2024 03:29:10 +0200 Subject: [PATCH 13/17] fix bug: landing page color theme --- config/techreport.json | 19 ++++++++++++++++++- src/js/techreport/index.js | 23 ++++++++++++++--------- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index 4dd98191..80e1ecc5 100644 --- 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", diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 67feaf4a..ed8fb610 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -25,10 +25,14 @@ 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(); @@ -45,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'); @@ -65,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 => { @@ -80,7 +86,6 @@ class TechReport { }); this.bindClientListener(); - this.updateStyling(); } // Watch for changes in the client dropdown From 97376113b9940dd13ee718377144be2b90baf3a2 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 24 Jul 2024 14:34:02 +0200 Subject: [PATCH 14/17] fix color contrast in dark mode --- static/css/techreport/techreport.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 134a1074..de7730f7 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -406,7 +406,7 @@ nav { position: absolute; right: 0; border-radius: 0 4px 4px 0; - z-index: 0; + z-index: 2; } .tech-input-wrapper::after { @@ -422,7 +422,7 @@ nav { border-left: 1.5px solid var(--color-text-darker); border-radius: 1px; transform: rotate(-45deg); - z-index: 0; + z-index: 3; } .tech-input-wrapper select { @@ -451,6 +451,7 @@ nav { [data-theme="dark"] select option, [data-theme="dark"] .tech-input-wrapper:has(select:focus-visible) select { color: var(--color-page-background) !important; + background-color: var(--color-text-darker) !important; } .tech-selector-group .content { From aeacc84da9ae3a436031735526b061c7cd4e6e3a Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 30 Jul 2024 03:06:40 +0200 Subject: [PATCH 15/17] Update src/js/techreport/index.js Co-authored-by: Rick Viscomi --- src/js/techreport/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index ed8fb610..780dbbf6 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -30,7 +30,6 @@ class TechReport { // Initialize the sections for the different pages initializePage() { - console.log('initialize page'); this.updateStyling(); switch(this.pageId) { From f2e39d61cc8d853bb3161a60a79c1ce97fbffcf8 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 6 Aug 2024 03:22:13 +0200 Subject: [PATCH 16/17] fix z-index and replace base url with constant --- src/js/techreport/index.js | 11 ++++------- src/js/techreport/utils/constants.js | 4 ++++ static/css/techreport/techreport.css | 4 ++++ 3 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 src/js/techreport/utils/constants.js diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index ed8fb610..718fe406 100644 --- 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"); @@ -180,8 +181,6 @@ class TechReport { }, ]; - const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; - const technology = technologies.join('%2C') .replaceAll(" ", "%20"); @@ -192,7 +191,7 @@ 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()) @@ -232,8 +231,7 @@ class TechReport { const technology = technologies.join('%2C') .replaceAll(" ", "%20"); - const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; - const url = `${base}/technologies?technology=${technology}`; + const url = `${Constants.apiBase}/technologies?technology=${technology}`; fetch(url) .then(result => result.json()) @@ -280,12 +278,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/utils/constants.js b/src/js/techreport/utils/constants.js new file mode 100644 index 00000000..91aa0c0c --- /dev/null +++ b/src/js/techreport/utils/constants.js @@ -0,0 +1,4 @@ +const apiBase = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; +export const Constants = { + apiBase, +}; diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index de7730f7..2cd1d553 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -314,6 +314,10 @@ nav { outline-offset: 2px; } +.dropdown-content { + z-index: 2; +} + .select-label::before { content: ""; display: block; From 6b18f246ff07f8193a1288ae3faad3c832e1a4cf Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 6 Aug 2024 14:57:28 +0200 Subject: [PATCH 17/17] save constants --- src/js/techreport/utils/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/techreport/utils/constants.js b/src/js/techreport/utils/constants.js index 91aa0c0c..3e1dadcd 100644 --- a/src/js/techreport/utils/constants.js +++ b/src/js/techreport/utils/constants.js @@ -1,4 +1,5 @@ const apiBase = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; + export const Constants = { apiBase, };