From b0a3cccd5cc129c1352ec6a325a957760a296085 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 1 May 2024 21:33:25 +0200 Subject: [PATCH 01/18] fix incomplete techs bug --- src/js/components/filters.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index b0c85a5d..1040e056 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -162,18 +162,21 @@ class Filters { /* Set the selected category */ updateCategory(event) { - const selectedTechs = this.categories.find(category => category.category === event.target.value)?.technologies; - const selectedTechInfo = []; - selectedTechs.forEach(selectedTech => selectedTechInfo.push(this.technologies.find(tech => tech.technology === selectedTech))); + // Get the techs associated with the selected category + const selectedCategory = this.categories.find(category => category.category === event.target.value); + const selectedTechs = selectedCategory?.technologies; + console.log(selectedCategory, selectedTechs); + + // Get the component with the selected tech const techSelector = document.getElementById(event.target.dataset.tech); techSelector.innerHTML = ''; - selectedTechInfo.forEach((technology) => { + // Update the options + selectedTechs.forEach((technology) => { const option = document.createElement('option'); - const formattedTech = technology.technology; - option.textContent = technology.technology; - option.value = formattedTech; - if(formattedTech === techSelector.getAttribute('data-selected')) { + option.textContent = technology; + option.value = technology; + if(technology === techSelector.getAttribute('data-selected')) { option.selected = true; } techSelector.append(option); From 1b428118ec38d27c7ab968b52ec7693c29517a90 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 1 May 2024 21:55:53 +0200 Subject: [PATCH 02/18] sort filterts alphabetically --- src/js/components/filters.js | 10 +++++++--- src/js/techreport/summaryCards.js | 1 - 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 1040e056..5dcb09eb 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -89,7 +89,9 @@ class Filters { } /* Add one option per technology */ - this.technologies.forEach((technology) => { + const techs = this.technologies; + const sortedTechs = techs.sort((a, b) => a.technology - b.technology); + sortedTechs.forEach((technology) => { const optionTmpl = document.getElementById('filter-option').content.cloneNode(true); const option = optionTmpl.querySelector('option'); const formattedTech = technology.technology; @@ -107,7 +109,8 @@ class Filters { updateGeo() { const select = document.querySelector('select#geo'); select.innerHTML = ''; - this.geos.forEach((geo) => { + const sortedGeos = this.geos.sort((a, b) => a.geo !== b.geo ? a.geo < b.geo ? -1 : 1 : 0); + sortedGeos.forEach((geo) => { const optionTmpl = document.getElementById('filter-option').content.cloneNode(true); const option = optionTmpl.querySelector('option'); const formattedTech = geo.geo; @@ -150,7 +153,8 @@ class Filters { all.innerHTML = 'ALL'; select.append(all); - this.categories.forEach((category) => { + const sortedCategories = this.categories.sort((a, b) => a.category !== b.category ? a.category < b.category ? -1 : 1 : 0); + sortedCategories.forEach((category) => { const option = document.createElement('option'); option.value = category.category; option.innerHTML = category.category; diff --git a/src/js/techreport/summaryCards.js b/src/js/techreport/summaryCards.js index 34caf911..04cdc981 100644 --- a/src/js/techreport/summaryCards.js +++ b/src/js/techreport/summaryCards.js @@ -59,7 +59,6 @@ class SummaryCard { const scoreCategoryName = scoreCategory?.name; circle.setAttribute('style', `--offset: ${100 - latestValue};`); const chart = card.querySelector('svg.progress-chart'); - console.log('chart', chart); chart.classList.add(scoreCategoryName); }); From 34c360d8fcdbd5732a11612cb1699bcdae62c0d1 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 1 May 2024 23:34:07 +0200 Subject: [PATCH 03/18] keep ALL as a technology option --- src/js/components/filters.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 5dcb09eb..e770694f 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -88,9 +88,12 @@ class Filters { techSelector.before(errorMsg); } - /* Add one option per technology */ + /* Get a list of technologies */ const techs = this.technologies; const sortedTechs = techs.sort((a, b) => a.technology - b.technology); + sortedTechs.unshift({ technology: 'ALL' }); + + /* Add one option per technology */ sortedTechs.forEach((technology) => { const optionTmpl = document.getElementById('filter-option').content.cloneNode(true); const option = optionTmpl.querySelector('option'); From a8043999bbc25d44b1a6820de8d4e0b27079e33d Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 2 May 2024 01:52:39 +0200 Subject: [PATCH 04/18] show all technologies when choosing all categories --- src/js/components/filters.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index e770694f..5008940b 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -171,8 +171,10 @@ class Filters { updateCategory(event) { // Get the techs associated with the selected category const selectedCategory = this.categories.find(category => category.category === event.target.value); - const selectedTechs = selectedCategory?.technologies; - console.log(selectedCategory, selectedTechs); + let selectedTechs = selectedCategory?.technologies; + if(event.target.value === 'ALL') { + selectedTechs = this.technologies.map(technology => technology.technology); + } // Get the component with the selected tech const techSelector = document.getElementById(event.target.dataset.tech); From a3ab289c51cee6aaac8bb927bcf96d085a41a9f7 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 2 May 2024 14:03:43 +0200 Subject: [PATCH 05/18] revert sort order and add fallback for selected techs --- src/js/components/filters.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 5008940b..9ff4a62e 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -90,11 +90,10 @@ class Filters { /* Get a list of technologies */ const techs = this.technologies; - const sortedTechs = techs.sort((a, b) => a.technology - b.technology); - sortedTechs.unshift({ technology: 'ALL' }); + techs.unshift({ technology: 'ALL' }); /* Add one option per technology */ - sortedTechs.forEach((technology) => { + techs.forEach((technology) => { const optionTmpl = document.getElementById('filter-option').content.cloneNode(true); const option = optionTmpl.querySelector('option'); const formattedTech = technology.technology; @@ -112,8 +111,7 @@ class Filters { updateGeo() { const select = document.querySelector('select#geo'); select.innerHTML = ''; - const sortedGeos = this.geos.sort((a, b) => a.geo !== b.geo ? a.geo < b.geo ? -1 : 1 : 0); - sortedGeos.forEach((geo) => { + this.geos.forEach((geo) => { const optionTmpl = document.getElementById('filter-option').content.cloneNode(true); const option = optionTmpl.querySelector('option'); const formattedTech = geo.geo; @@ -171,7 +169,7 @@ class Filters { updateCategory(event) { // Get the techs associated with the selected category const selectedCategory = this.categories.find(category => category.category === event.target.value); - let selectedTechs = selectedCategory?.technologies; + let selectedTechs = selectedCategory?.technologies || []; if(event.target.value === 'ALL') { selectedTechs = this.technologies.map(technology => technology.technology); } From e8b81276f1e429f43bfbbbeb3dca6a7957ee185e Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 8 May 2024 01:23:13 +0200 Subject: [PATCH 06/18] scroll to the report content when clicking update (#851) --- src/js/components/filters.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 9ff4a62e..5ea226bc 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -63,6 +63,8 @@ class Filters { url.searchParams.delete('rank'); url.searchParams.append('rank', rank); + /* Scroll to the report content */ + url.hash = '#report-content'; /* Update the url */ location.href = url; From c97139a4f66d0e15901a830648a3bb655a241a6c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 16 May 2024 07:40:22 -0700 Subject: [PATCH 07/18] show formatted page weight --- config/techreport.json | 34 ++++++++++++++------------------- src/js/techreport/utils/data.js | 2 ++ 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index e167e208..cc36bcb8 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -115,11 +115,10 @@ "url": "#lighthouse&median-lighthouse-over-time=accessibility" }, { - "endpoint": "lighthouse", - "category": "seo", - "metric": "median_score_pct", + "endpoint": "pageWeight", + "category": "total", + "metric": "median_bytes_formatted", "label": "Page weight", - "suffix": "kB", "description": "Median total bytes per page for across tested origins.", "url": "#page-weight" } @@ -525,26 +524,23 @@ { "endpoint": "pageWeight", "category": "images", - "metric": "median_bytes", + "metric": "median_bytes_formatted", "label": "Image Weight", - "url": "?weight-over-time=image#page-weight", - "suffix": " kB" + "url": "?weight-over-time=image#page-weight" }, { "endpoint": "pageWeight", "category": "js", - "metric": "median_bytes", + "metric": "median_bytes_formatted", "label": "JavaScript Size", - "url": "?weight-over-time=js#page-weight", - "suffix": " kB" + "url": "?weight-over-time=js#page-weight" }, { "endpoint": "pageWeight", "category": "total", - "metric": "median_bytes", + "metric": "median_bytes_formatted", "label": "Total Page Weight", - "url": "?weight-over-time=total#page-weight", - "suffix": " kB" + "url": "?weight-over-time=total#page-weight" } ] }, @@ -586,8 +582,7 @@ }, { "name": "Median Bytes", - "key": "median_bytes", - "suffix": "kB", + "key": "median_bytes_formatted", "className": "main-cell" }, { @@ -648,7 +643,7 @@ ] }, "yAxis": { - "title": "Weight in kB" + "title": "Weight in bytes" } } } @@ -978,8 +973,7 @@ }, { "name": "Median Bytes", - "key": "median_bytes", - "suffix": "kB", + "key": "median_bytes_formatted", "className": "main-cell", "breakdown": "app" }, @@ -999,7 +993,7 @@ "metric": "median_bytes", "series": { "breakdown": "app", - "suffix": " kB", + "suffix": "bytes", "defaults": [ { "name": "App", @@ -1030,7 +1024,7 @@ ] }, "yAxis": { - "title": "Weight in kB" + "title": "Weight in bytes" } } }, diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index d3f200e5..96dc05af 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -62,11 +62,13 @@ const parsePageWeightData = (metric, date) => { ...submetric, desktop: { ...submetric.desktop, + median_bytes_formatted: submetric.desktop.median_bytes > 1024 ? `${Math.round(submetric.desktop.median_bytes / 1024)} KB` : submetric.desktop.median_bytes > 1048576 ? `${Math.round(submetric.desktop.median_bytes / 1048576)} MB` : `${submetric.desktop.median_bytes} bytes`, client: 'desktop', date: date, }, mobile: { ...submetric.mobile, + median_bytes_formatted: submetric.mobile.median_bytes > 1024 ? `${Math.round(submetric.mobile.median_bytes / 1024)} KB` : submetric.mobile.median_bytes > 1048576 ? `${Math.round(submetric.mobile.median_bytes / 1048576)} MB` : `${submetric.mobile.median_bytes} bytes`, client: 'mobile', date: date, }, From b29ed8443720124ec2ece0ad280984279c658cef Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 16 May 2024 07:40:35 -0700 Subject: [PATCH 08/18] format tooltip with correct timezone --- src/js/techreport/timeseries.js | 101 ++++++++++++++++++++++++++- static/css/techreport/techreport.css | 36 +++++++++- 2 files changed, 133 insertions(+), 4 deletions(-) diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index de090032..8da5f5a8 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -145,7 +145,11 @@ class Timeseries { /* Add the value to the wrapper */ const valueLabel = document.createElement('p'); - valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; + if(!breakdown.formatted) { + valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; + } else { + valueLabel.textContent = `${formatted}`; + } valueLabel.classList.add('breakdown-value'); itemWrapper.appendChild(valueLabel); @@ -248,6 +252,97 @@ class Timeseries { timeseries.series = this.formatSeries(); } + timeseries.tooltip = { + shared: true, + crosshairs: true, + useHTML: true, + formatter: function() { + const wrapper = document.createElement('div'); + wrapper.className = 'tooltip-wrapper'; + + const d = Highcharts.dateFormat('%b %e, %Y', this.x); + + const dateEl = document.createElement('p'); + dateEl.innerHTML = d; + + wrapper.appendChild(dateEl); + + const pointList = document.createElement('ul'); + + this.points.forEach(point => { + const pointItem = document.createElement('li'); + const pointSeries = document.createElement('span'); + + const pointSvg = document.createElement('svg'); + let pointSymbol; + + + switch(point?.point?.graphic?.symbolName) { + case 'circle': + pointSymbol = document.createElement('circle'); + pointSymbol.setAttribute('class', 'point-symbol circle'); + pointSymbol.setAttribute('r', point.point.graphic.width / 2); + pointSymbol.setAttribute('stroke', point.color); + pointSymbol.setAttribute('stroke-width', point.point.graphic['stroke-width']); + break; + + case 'diamond': + pointSymbol = document.createElement('path'); + pointSymbol.setAttribute('class', 'point-symbol diamond'); + pointSymbol.setAttribute('d', 'M 4 0 L 8 4 L 4 8 L 0 4 Z'); + pointSymbol.setAttribute('stroke', point.color); + pointSymbol.setAttribute('stroke-width', point.point.graphic['stroke-width']); + break; + + case 'square': + pointSymbol = document.createElement('path'); + pointSymbol.setAttribute('class', 'point-symbol square'); + pointSymbol.setAttribute('d', 'M 0 0 L 8 0 L 8 8 L 0 8 Z'); + pointSymbol.setAttribute('stroke', point.color); + pointSymbol.setAttribute('stroke-width', point.point.graphic['stroke-width']); + break; + + case 'triangle-down': + pointSymbol = document.createElement('path'); + pointSymbol.setAttribute('class', 'point-symbol triangle-down'); + pointSymbol.setAttribute('d', 'M 0 0 L 8 0 L 4 8 Z'); + pointSymbol.setAttribute('stroke', point.color); + pointSymbol.setAttribute('stroke-width', point.point.graphic['stroke-width']); + break; + + case 'triangle': + pointSymbol = document.createElement('path'); + pointSymbol.setAttribute('class', 'point-symbol triangle-up'); + pointSymbol.setAttribute('d', 'M 4 0 L 8 8 L 0 8 Z'); + pointSymbol.setAttribute('stroke', point.color); + pointSymbol.setAttribute('stroke-width', point.point.graphic['stroke-width']); + break; + + + default: + pointSymbol = document.createElement('circle'); + pointSymbol.setAttribute('class', 'point-fallback'); + pointSymbol.setAttribute('r', '4'); + pointSymbol.setAttribute('fill', point.color); + break; + } + + pointSvg.appendChild(pointSymbol); + + document.getElementsByTagName('main')[0].append(pointSvg); + + pointSeries.innerHTML = point.series.name; + pointItem.innerHTML = `${pointSvg.outerHTML} ${pointSeries.outerHTML}: ${point.y}`; + + pointList.appendChild(pointItem); + }); + + wrapper.appendChild(pointList); + + return wrapper.outerHTML; + } + } + // Render the chart Highcharts.chart(`${this.id}-timeseries`, timeseries); } @@ -298,7 +393,7 @@ class Timeseries { const data = app.map(row => { const value = row?.[endpoint]?.find(row => row.name === subcategory)?.[client]?.[metric]; return { - x: new Date(row.date), + x: new Date(row.date).getTime(), y: value || 0, }; }); @@ -341,7 +436,7 @@ class Timeseries { const clientData = categoryData?.[value.name]; const y = clientData?.[metric]; formattedData.push({ - x: new Date(row.date), + x: new Date(row.date).getTime(), y: Number(y), }); }); diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index beb10533..edccbca8 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -1134,12 +1134,46 @@ path.highcharts-tick { filter: none; } -.highcharts-tooltip path { +.highcharts-tooltip > path { fill: var(--color-tooltip-background); stroke: var(--color-tooltip-border); stroke-width: 1px; } +.tooltip-wrapper ul { + margin-top: 0.5rem; +} + +.tooltip-wrapper li { + position: relative; +} + +.tooltip-wrapper li span { + font-weight: 600; +} + +.tooltip-wrapper li svg { + position: relative; + left: 0; + top: 0.05rem; + width: 0.75rem; + height: 0.75rem; +} + +.tooltip-wrapper svg .point-symbol { + fill: var(--color-card-background); +} + +.tooltip-wrapper svg .point-symbol.circle, +.tooltip-wrapper svg .point-fallback { + transform: translateX(0.375rem) translateY(0.375rem); +} + +.tooltip-wrapper svg .point-symbol:is(.diamond, .square, .triangle-down, .triangle-up) { + transform: translateX(2px) translateY(2px); +} + + /* ------------------------ */ /* ----- Small charts ----- */ /* ------------------------ */ From 1b0423f43705bb64b229c884dd7bbb5d43e93a99 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 16 May 2024 16:47:43 -0700 Subject: [PATCH 09/18] format pageweight in summary view --- config/techreport.json | 15 ++++++--- src/js/techreport/timeseries.js | 33 ++++++++++++++----- .../techreport/components/timeseries.html | 4 ++- 3 files changed, 38 insertions(+), 14 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index cc36bcb8..b5e087b2 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -598,6 +598,8 @@ "default": "images", "title": "Image weight over time", "metric": "median_bytes", + "suffix": "bytes", + "metric_summary": "median_bytes_formatted", "height": 600, "series": { "breakdown": "client", @@ -605,12 +607,12 @@ { "name": "desktop", "color": "#669E8E", - "suffix": " kB" + "suffix": " bytes" }, { "name": "mobile", "color": "#BD6EBE", - "suffix": " kB" + "suffix": " bytes" } ], "defaults": [ @@ -991,17 +993,20 @@ "param": "median-weight-over-time", "default": "total", "metric": "median_bytes", + "metric_summary": "median_bytes_formatted", "series": { "breakdown": "app", - "suffix": "bytes", + "suffix": " bytes", "defaults": [ { "name": "App", - "data": [0,0,0,0,0,0,0,0,0,0,0,0] + "data": [0,0,0,0,0,0,0,0,0,0,0,0], + "suffix": " bytes" }, { "name": "App", - "data": [0,0,0,0,0,0,0,0,0,0,0,0] + "data": [0,0,0,0,0,0,0,0,0,0,0,0], + "suffix": " bytes" } ] }, diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index 8da5f5a8..32323a6c 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -108,6 +108,7 @@ class Timeseries { /* Get settings */ const metric = viz.dataset.metric; const endpoint = viz.dataset.endpoint; + const summary = viz.dataset.summary; const app = pageFilters.app[0]; const filtered = data?.[app]?.filter(entry => entry[endpoint]); @@ -143,15 +144,23 @@ class Timeseries { breakdownLabel.classList.add('breakdown-label'); itemWrapper.appendChild(breakdownLabel); - /* Add the value to the wrapper */ - const valueLabel = document.createElement('p'); - if(!breakdown.formatted) { - valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; + /* If defined, use a different metric for the summary */ + if(summary) { + const valueLabel = document.createElement('p'); + valueLabel.textContent = categoryData?.[breakdown.name]?.[summary]; + valueLabel.classList.add('breakdown-value'); + itemWrapper.appendChild(valueLabel); + + const summaryLabel = document.createElement('p'); + summaryLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; + itemWrapper.appendChild(summaryLabel); } else { - valueLabel.textContent = `${formatted}`; + /* Add the value to the wrapper */ + const valueLabel = document.createElement('p'); + valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; + valueLabel.classList.add('breakdown-value'); + itemWrapper.appendChild(valueLabel); } - valueLabel.classList.add('breakdown-value'); - itemWrapper.appendChild(valueLabel); /* Add the wrapper to the container */ container.appendChild(itemWrapper); @@ -177,6 +186,7 @@ class Timeseries { const metric = component.dataset.metric; const endpoint = component.dataset.endpoint; const client = component.dataset.client; + const summary = component.dataset.summary; pageFilters.app.forEach((app, index) => { if(data[app] && data[app].length > 0) { @@ -188,17 +198,24 @@ class Timeseries { const latestSubcategory = latestEndpoint?.find(row => row.name === subcategory); const latestClient = latestSubcategory?.[client]; const latestValue = latestClient?.[metric]; + const summaryValue = latestClient?.[summary]; /* Select the container to which we'll add elements. */ const card = container.querySelector(`[data-app="${app}"]`); const timestamp = component.querySelector('[data-slot="timestamp"]'); const label = card.getElementsByClassName('breakdown-label')[0]; const value = card.getElementsByClassName('breakdown-value')[0]; + const secondaryValue = card.getElementsByClassName('breakdown-value-secondary')[0]; /* Update text */ label.innerHTML = latest.technology; if(latestValue) { - value.innerHTML = `${latestValue}${config.series.suffix || ''}`; + if(summary) { + value.innerHTML = `${summaryValue}`; + secondaryValue.innerHTML = `${latestValue}${config.series.suffix || ''}`; + } else { + value.innerHTML = `${latestValue}${config.series.suffix || ''}`; + } } else { value.classList.add('undefined'); value.innerHTML = 'No data'; diff --git a/templates/techreport/components/timeseries.html b/templates/techreport/components/timeseries.html index 5eb42ac6..05fd5f40 100644 --- a/templates/techreport/components/timeseries.html +++ b/templates/techreport/components/timeseries.html @@ -1,7 +1,7 @@ {% set category = selected_subcategory or subcategory.default %} {% set endpoint = timeseries.endpoint %} -
+
{% set title = timeseries.title %} @@ -39,6 +39,7 @@

{{ breakdown.name }}

00{% if breakdown.suffix == "%" %}.00{% endif %}{{ breakdown.suffix }}

+

{% endfor %} {% elif timeseries.viz.series.breakdown == 'app' %} @@ -46,6 +47,7 @@

{{ app }}

00{{ timeseries.viz.series.suffix }}

+

{% endfor %} {% endif %} From eedd92c67a57a71f79461903cb89792654ad5806 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 16 May 2024 16:49:44 -0700 Subject: [PATCH 10/18] change feedback url and style beta label differently --- static/css/techreport/techreport.css | 8 +++----- templates/techreport/techreport.html | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index edccbca8..8884ebdc 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -697,11 +697,9 @@ select { } .info-panel .info-label { - margin-right: 1rem; - padding: 0.3rem 0.5rem; - border-radius: 3px; - background-color: white; - border: 1px solid black; + margin-right: 0.75rem; + margin-left: 0.25rem; + font-weight: 600; } /* General tables */ diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index 181ad873..4ce5d4f2 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -13,7 +13,7 @@ {% block report_navigation %}
-

Beta

+

Beta version

This dashboard is still under development.

@@ -65,7 +65,7 @@

Feedback?

We are still working on this dashboard. The design and functionality can still change, and we're working on accessibility improvements and bugfixes. - What you're seeing here is a snapshot of our latest GitHub commit, and are open for feedback. + What you're seeing here is a snapshot of our latest GitHub commit, and are open for feedback.

From f35dc86ae639bbe59a73f870d53e70680d563096 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 27 May 2024 00:20:12 +0200 Subject: [PATCH 11/18] linting --- static/css/techreport/techreport.css | 1 - 1 file changed, 1 deletion(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 8884ebdc..04f3ce6c 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -1171,7 +1171,6 @@ path.highcharts-tick { transform: translateX(2px) translateY(2px); } - /* ------------------------ */ /* ----- Small charts ----- */ /* ------------------------ */ From 6b265d8ac5feb1c619f1a628f454f0151732d1bd Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 27 May 2024 00:53:22 +0200 Subject: [PATCH 12/18] fix inverted color bug --- static/css/techreport/techreport.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 04f3ce6c..4f3e26cc 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -433,6 +433,11 @@ main :is(a, p a) { color: var(--color-text); } +[data-theme="dark"] select option, +[data-theme="dark"] .tech-input-wrapper:has(select:focus-visible) select { + color: var(--color-page-background) !important; +} + .tech-selector-group .content { position: relative; width: 100%; From 9a59a94901919ea998a2012aeffb7a0b28342ab0 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 29 May 2024 16:07:59 +0200 Subject: [PATCH 13/18] replace dev with prod API --- server/csp.py | 2 ++ src/js/techreport/index.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/server/csp.py b/server/csp.py index 97d8a1b4..bdce0f2c 100644 --- a/server/csp.py +++ b/server/csp.py @@ -12,6 +12,7 @@ "lux.speedcurve.com", "'unsafe-inline'", "dev-gw-2vzgiib6.ue.gateway.dev", + "prod-gw-2vzgiib6.ue.gateway.dev", ], "font-src": ["'self'"], "connect-src": [ @@ -26,6 +27,7 @@ "*.analytics.google.com", "stats.g.doubleclick.net", "dev-gw-2vzgiib6.ue.gateway.dev", + "prod-gw-2vzgiib6.ue.gateway.dev", ], "img-src": ["'self'", "https:"], "frame-src": ["'none'"], diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 29f0108c..38e715da 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -174,7 +174,7 @@ class TechReport { }, ]; - const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1'; + const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; const technology = technologies.join('%2C') .replaceAll(" ", "%20"); @@ -239,7 +239,7 @@ class TechReport { // Fetch the data for the filter dropdowns getFilterInfo() { const filterData = {}; - const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1'; + const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1'; const filterApis = ['categories', 'technologies', 'ranks', 'geos']; From 3b1a4624b402aec105264eae85e8da9bcf9d9140 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 29 May 2024 16:09:09 +0200 Subject: [PATCH 14/18] remove placeholder images --- static/css/techreport/landing.css | 8 -------- templates/techreport/landing.html | 2 -- 2 files changed, 10 deletions(-) diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css index dc23d173..60bff02a 100644 --- a/static/css/techreport/landing.css +++ b/static/css/techreport/landing.css @@ -25,14 +25,6 @@ padding: 0; } -.choices .card .img-placeholder { - display: block; - width: 100%; - height: 17rem; - background-color: #eee; - margin-top: 1rem; -} - .latest-info h2 { font-size: 1rem; font-weight: 600; diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 88659812..b6be6c66 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -23,12 +23,10 @@

Technology Drilldown

Get detailed information about one technology.

-

Technology Comparison

Get detailed information about two to ten technologies.

-

From 8a8837f1573313c0820685d424e7802dfdcc0010 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 30 May 2024 23:57:10 +0200 Subject: [PATCH 15/18] Update src/js/techreport/utils/data.js Co-authored-by: Rick Viscomi --- src/js/techreport/utils/data.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 96dc05af..53dc5ad3 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -62,7 +62,7 @@ const parsePageWeightData = (metric, date) => { ...submetric, desktop: { ...submetric.desktop, - median_bytes_formatted: submetric.desktop.median_bytes > 1024 ? `${Math.round(submetric.desktop.median_bytes / 1024)} KB` : submetric.desktop.median_bytes > 1048576 ? `${Math.round(submetric.desktop.median_bytes / 1048576)} MB` : `${submetric.desktop.median_bytes} bytes`, + median_bytes_formatted: submetric.desktop.median_bytes > 1048576 ? `${Math.round(submetric.desktop.median_bytes / 1048576)} MB` : submetric.desktop.median_bytes > 1024 ? `${Math.round(submetric.desktop.median_bytes / 1024)} KB` : `${submetric.desktop.median_bytes} bytes`, client: 'desktop', date: date, }, From dee67c0283c2bec91275ad86bb5bb962e9b2c567 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 1 Jun 2024 00:50:30 +0200 Subject: [PATCH 16/18] remove secondary value --- src/js/techreport/timeseries.js | 2 -- templates/techreport/components/timeseries.html | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index 32323a6c..b8ef743a 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -205,14 +205,12 @@ class Timeseries { const timestamp = component.querySelector('[data-slot="timestamp"]'); const label = card.getElementsByClassName('breakdown-label')[0]; const value = card.getElementsByClassName('breakdown-value')[0]; - const secondaryValue = card.getElementsByClassName('breakdown-value-secondary')[0]; /* Update text */ label.innerHTML = latest.technology; if(latestValue) { if(summary) { value.innerHTML = `${summaryValue}`; - secondaryValue.innerHTML = `${latestValue}${config.series.suffix || ''}`; } else { value.innerHTML = `${latestValue}${config.series.suffix || ''}`; } diff --git a/templates/techreport/components/timeseries.html b/templates/techreport/components/timeseries.html index 05fd5f40..648622b7 100644 --- a/templates/techreport/components/timeseries.html +++ b/templates/techreport/components/timeseries.html @@ -39,7 +39,6 @@

{{ breakdown.name }}

00{% if breakdown.suffix == "%" %}.00{% endif %}{{ breakdown.suffix }}

-

{% endfor %} {% elif timeseries.viz.series.breakdown == 'app' %} @@ -47,7 +46,6 @@

{{ app }}

00{{ timeseries.viz.series.suffix }}

-

{% endfor %} {% endif %} From 935b169ceb88308f65e8c2086ef1beb86a3ad5b7 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 1 Jun 2024 00:58:18 +0200 Subject: [PATCH 17/18] remove bytes from weight timeseries and move formatting to reusable function --- src/js/techreport/timeseries.js | 4 ---- src/js/techreport/utils/data.js | 8 ++++++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index b8ef743a..553c7505 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -150,10 +150,6 @@ class Timeseries { valueLabel.textContent = categoryData?.[breakdown.name]?.[summary]; valueLabel.classList.add('breakdown-value'); itemWrapper.appendChild(valueLabel); - - const summaryLabel = document.createElement('p'); - summaryLabel.textContent = `${latestValue}${breakdown.suffix || ''}`; - itemWrapper.appendChild(summaryLabel); } else { /* Add the value to the wrapper */ const valueLabel = document.createElement('p'); diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js index 53dc5ad3..e455b481 100644 --- a/src/js/techreport/utils/data.js +++ b/src/js/techreport/utils/data.js @@ -56,19 +56,23 @@ const parseAdoptionData = (submetric, date) => { ]; } +const formatBytes = (value) => { + return value > 1048576 ? `${Math.round(value / 1048576)} MB` : value > 1024 ? `${Math.round(value / 1024)} KB` : `${submetric.desktop.median_bytes} bytes`; +}; + const parsePageWeightData = (metric, date) => { return metric.map(submetric => { return { ...submetric, desktop: { ...submetric.desktop, - median_bytes_formatted: submetric.desktop.median_bytes > 1048576 ? `${Math.round(submetric.desktop.median_bytes / 1048576)} MB` : submetric.desktop.median_bytes > 1024 ? `${Math.round(submetric.desktop.median_bytes / 1024)} KB` : `${submetric.desktop.median_bytes} bytes`, + median_bytes_formatted: formatBytes(submetric.desktop.median_bytes), client: 'desktop', date: date, }, mobile: { ...submetric.mobile, - median_bytes_formatted: submetric.mobile.median_bytes > 1024 ? `${Math.round(submetric.mobile.median_bytes / 1024)} KB` : submetric.mobile.median_bytes > 1048576 ? `${Math.round(submetric.mobile.median_bytes / 1048576)} MB` : `${submetric.mobile.median_bytes} bytes`, + median_bytes_formatted: formatBytes(submetric.mobile.median_bytes), client: 'mobile', date: date, }, From d268ebe11e095595b6e103dfb792c6171462b7fc Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 1 Jun 2024 01:00:12 +0200 Subject: [PATCH 18/18] innerhtml to textcontent --- src/js/techreport/timeseries.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js index 553c7505..45e3c6ce 100644 --- a/src/js/techreport/timeseries.js +++ b/src/js/techreport/timeseries.js @@ -49,10 +49,10 @@ class Timeseries { const button = event.target; const tableWrapper = document.getElementById(`${button.dataset.id}-table-wrapper`); if(tableWrapper.classList.contains('hidden')) { - button.innerHTML = 'Hide table'; + button.textContent = 'Hide table'; tableWrapper.classList.remove('hidden'); } else { - button.innerHTML = 'Show table'; + button.textContent = 'Show table'; tableWrapper.classList.add('hidden'); } } @@ -203,18 +203,18 @@ class Timeseries { const value = card.getElementsByClassName('breakdown-value')[0]; /* Update text */ - label.innerHTML = latest.technology; + label.textContent = latest.technology; if(latestValue) { if(summary) { - value.innerHTML = `${summaryValue}`; + value.textContent = `${summaryValue}`; } else { - value.innerHTML = `${latestValue}${config.series.suffix || ''}`; + value.textContent = `${latestValue}${config.series.suffix || ''}`; } } else { value.classList.add('undefined'); - value.innerHTML = 'No data'; + value.textContent = 'No data'; } - timestamp.innerHTML = latest.date; + timestamp.textContent = latest.date; const techColor = UIUtils.getAppColor(app, this.pageFilters.app, this.pageConfig.colors); const fallback = this.pageConfig.colors.app[index]; card.style.setProperty('--breakdown-color', techColor || fallback);