From 4317f19a0e6d8068f9d6c32bce154f7a8a3b83c4 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Tue, 17 Dec 2024 10:24:02 +0000 Subject: [PATCH 1/3] Use discrete colours on the map We are also currently displaying a map with linearly interpolated colours, which means that colours will not always align with the scale. This commit changes the map to use discrete colours. --- app/javascript/controllers/map_controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js index 953aae35..dacd8b0a 100644 --- a/app/javascript/controllers/map_controller.js +++ b/app/javascript/controllers/map_controller.js @@ -202,7 +202,7 @@ export default class MapController extends Controller { format: "image/png", opacity: 1, pane: "pollution", - styles: `daqi${pollutant}_linear`, + styles: `daqi${pollutant}`, }); } From fec77343d08df2a1c5c78e73f4e1a6d1b326cb5c Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Tue, 17 Dec 2024 10:29:40 +0000 Subject: [PATCH 2/3] Update DAQI colours to include half levels The map uses extra colours for the half levels for levels 1, 2, and 3. This commit adds those colours to the scale using gradients, and sets their opacity to 60% to match the map. --- app/assets/stylesheets/daqi-levels.scss | 76 +++++++++++++++++++------ 1 file changed, 60 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/daqi-levels.scss b/app/assets/stylesheets/daqi-levels.scss index a3e14929..672cc65c 100644 --- a/app/assets/stylesheets/daqi-levels.scss +++ b/app/assets/stylesheets/daqi-levels.scss @@ -1,14 +1,17 @@ :root { - --daqi-level-1-bg: rgb(149 225 114); - --daqi-level-2-bg: rgb(147 191 115); - --daqi-level-3-bg: rgb(89 153 121); - --daqi-level-4-bg: rgb(252 255 117); - --daqi-level-5-bg: rgb(251 219 110); - --daqi-level-6-bg: rgb(251 194 107); - --daqi-level-7-bg: rgb(251 150 100); - --daqi-level-8-bg: rgb(250 92 96); - --daqi-level-9-bg: rgb(154 88 108); - --daqi-level-10-bg: rgb(86 86 86); + --daqi-level-1-color: #64ee06; + --daqi-level-1-5-color: #63d310; + --daqi-level-2-color: #61b61a; + --daqi-level-2-5-color: #61a323; + --daqi-level-3-color: #388b2b; + --daqi-level-3-5-color: #096b35; + --daqi-level-4-color: #fbff00; + --daqi-level-5-color: #facb02; + --daqi-level-6-color: #faa701; + --daqi-level-7-color: #fa6501; + --daqi-level-8-color: #fa2200; + --daqi-level-9-color: #6b0820; + --daqi-level-10-color: #000; --daqi-level-1-text: black; --daqi-level-2-text: black; --daqi-level-3-text: black; @@ -19,45 +22,86 @@ --daqi-level-8-text: white; --daqi-level-9-text: white; --daqi-level-10-text: white; + --pollution-layer-opacity: 60%; + --map-layer-background-color: #ddd; } @for $i from 1 through 10 { - .daqi-scale, .tabs, .daqi-table, .air-quality-alert-banner { .daqi-level-#{$i} { - --daqi-color: var(--daqi-level-#{$i}-bg); + --daqi-color: var(--daqi-level-#{$i}-color); background-color: var(--daqi-color); color: var(--daqi-level-#{$i}-text); } } + + .daqi-scale { + .daqi-level-#{$i} { + --daqi-color: var(--daqi-level-#{$i}-color); + + background-color: color-mix( + in srgb, + var(--daqi-color) var(--pollution-layer-opacity), + var(--map-layer-background-color) + ); + color: white; + text-shadow: 0 0 2px black; + } + } +} + +@for $i from 1 through 3 { + .daqi-scale { + .daqi-level-#{$i} { + --first-half: color-mix( + in srgb, + var(--daqi-level-#{$i}-color) var(--pollution-layer-opacity), + var(--map-layer-background-color) + ); + --second-half: color-mix( + in srgb, + var(--daqi-level-#{$i}-5-color) var(--pollution-layer-opacity), + var(--map-layer-background-color) + ); + + background: var(--first-half); + background: linear-gradient( + 0deg, + var(--first-half) 0%, + var(--first-half) 50%, + var(--second-half) 50%, + var(--second-half) 100% + ); + } + } } .daqi-level-low { - --daqi-color: var(--daqi-level-2-bg); + --daqi-color: var(--daqi-level-2-color); background-color: var(--daqi-color); color: var(--daqi-level-2-text); } .daqi-level-moderate { - --daqi-color: var(--daqi-level-5-bg); + --daqi-color: var(--daqi-level-5-color); background-color: var(--daqi-color); color: var(--daqi-level-5-text); } .daqi-level-high { - --daqi-color: var(--daqi-level-8-bg); + --daqi-color: var(--daqi-level-8-color); background-color: var(--daqi-color); color: var(--daqi-level-8-text); } .daqi-level-very-high { - --daqi-color: var(--daqi-level-10-bg); + --daqi-color: var(--daqi-level-10-color); background-color: var(--daqi-color); color: var(--daqi-level-10-text); From a3d48f0a41db36ff380272f89ba392c2289aa1e2 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Tue, 17 Dec 2024 10:34:39 +0000 Subject: [PATCH 3/3] Reformat DAQI scale Update the scale to include labels for the four groups and to move the scale onto the map. --- app/assets/stylesheets/forecast-page.scss | 55 +++++++++++++++++++---- app/views/forecasts/_map.html.erb | 32 ++++++++----- 2 files changed, 68 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/forecast-page.scss b/app/assets/stylesheets/forecast-page.scss index 2168896e..ec736320 100644 --- a/app/assets/stylesheets/forecast-page.scss +++ b/app/assets/stylesheets/forecast-page.scss @@ -100,23 +100,60 @@ a.primary-cta { #map-wrapper { display: flex; + position: relative; .map { width: 100%; - height: 20rem; + height: 80vh; } .daqi-scale { display: flex; - flex-direction: column-reverse; + flex-direction: column; + position: absolute; + right: 0; + z-index: 1000; + top: 50px; // 50px for the search box + height: calc( + 100% - 50px - 20px + ); // 50px for the search box, 20px for the bottom padding + + > div { + flex: 1; + display: grid; + + span { + grid-column: 2; + grid-row: 1 / 4; + writing-mode: vertical-lr; + display: flex; + justify-content: center; + align-items: center; + font-size: 50%; + background-color: var(--main-colour-lightest); + padding: 2px; + border-bottom: 0.5px solid black; + } - div { - display: flex; - padding: 0.25rem 0; - justify-content: center; - align-items: center; - width: 2rem; - height: 10%; + &:first-child { + span { + grid-row: 1 / 1; + } + } + + &:last-child { + span { + border-bottom: 0; + } + } + + > div { + grid-column: 1; + width: 2rem; + display: flex; + justify-content: center; + align-items: center; + } } } diff --git a/app/views/forecasts/_map.html.erb b/app/views/forecasts/_map.html.erb index 9eedbbbe..e768317f 100644 --- a/app/views/forecasts/_map.html.erb +++ b/app/views/forecasts/_map.html.erb @@ -1,16 +1,28 @@
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
+
+ Very High +
10
+
+
+ High +
9
+
8
+
7
+
+
+ Moderate +
6
+
5
+
4
+
+
+ Low +
3
+
2
+
1
+

<%= link_to("Learn more about the colour scale", health_advice_path, class: "a") %>