From b1d8c51d85bf1bb62ae3d6a8e30c0d96714726cb Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Fri, 27 Mar 2020 12:45:02 -0700 Subject: [PATCH 01/11] Maps: use CE colour scales --- public/external-text/default.yaml | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/public/external-text/default.yaml b/public/external-text/default.yaml index 9a8fbb2a..a09fafa2 100644 --- a/public/external-text/default.yaml +++ b/public/external-text/default.yaml @@ -1,6 +1,6 @@ app: tabs: - default: references + default: summary selectors: prologue: I am interested in information about projected climate change ... @@ -216,14 +216,20 @@ maps: min: -50 max: 50 ticks: [-50, 0, 50] + fdd: + palette: x-Occam + range: + min: 0 + max: 4000 + ticks: [0, 1000, 2000, 3000, 4000] gdd: - palette: seq-Oranges + palette: x-Occam range: min: 0 max: 4000 ticks: [0, 1000, 2000, 3000, 4000] hdd: - palette: seq-Oranges + palette: x-Occam range: min: 0 max: 10000 @@ -234,14 +240,26 @@ maps: min: 0 max: 20 ticks: [0, 5, 10, 15, 20] + prsn: + palette: x-Occam + range: + min: 0 + max: 20 + ticks: [0, 5, 10, 15, 20] tasmax: - palette: div-BuRd + palette: x-Occam range: min: -40 max: 40 ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] tasmin: - palette: div-BuRd + palette: x-Occam + range: + min: -40 + max: 40 + ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] + tasmean: + palette: x-Occam range: min: -40 max: 40 From 1f0e041625582ab41f22b94b7f01b36d417a4973 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Fri, 27 Mar 2020 14:15:50 -0700 Subject: [PATCH 02/11] Add logscaling to climate layer requests --- src/components/maps/map-utils.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/maps/map-utils.js b/src/components/maps/map-utils.js index 6202e071..a89294cc 100644 --- a/src/components/maps/map-utils.js +++ b/src/components/maps/map-utils.js @@ -34,6 +34,7 @@ export const getDisplaySpecItem = curry( ) ); +export const wmsLogscale = getDisplaySpecItem('logscale'); export const wmsPalette = getDisplaySpecItem('palette'); export const wmsDataRange = getDisplaySpecItem('range'); export const wmsTicks = getDisplaySpecItem('ticks'); @@ -53,7 +54,7 @@ export const wmsColorScaleRange = (displaySpec, variableSpec) => { export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, season) => { return { format: 'image/png', - logscale: false, + logscale: wmsLogscale(displaySpec, variableSpec), noWrap: true, numcolorbands: wmsNumcolorbands, opacity: 0.7, From 4e0a925f3f4fab60792ea6e9a41a1f5a2cc345c3 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Fri, 27 Mar 2020 14:16:06 -0700 Subject: [PATCH 03/11] Add logscaling to colour bar --- .../maps/NcwmsColourbar/NcwmsColourbar.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js index 2ea5d904..298b5f4b 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js +++ b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js @@ -22,6 +22,9 @@ // - Props `width` and `height` are for the unrotated (vertical) graphic; // so their meaning is reversed in the rendered graphic. Confusing, sorry. +// TODO: Configuration should be obtained outside this component and passed in; +// no use of ExternalText here. + import PropTypes from 'prop-types'; import React from 'react'; import get from 'lodash/fp/get'; @@ -31,8 +34,10 @@ import styles from './NcwmsColourbar.module.css'; import { makeURI } from '../../../utils/uri'; import { wmsDataRange, + wmsLogscale, wmsNumcolorbands, - wmsPalette, wmsTicks + wmsPalette, + wmsTicks } from '../map-utils'; @@ -74,6 +79,7 @@ export default class NcwmsColourbar extends React.Component { render() { const displaySpec = T.get(this.context, 'maps.displaySpec', {}, 'raw'); + const logscale = wmsLogscale(displaySpec, this.props.variableSpec); const range = wmsDataRange(displaySpec, this.props.variableSpec); const span = range.max - range.min; const ticks = wmsTicks(displaySpec, this.props.variableSpec); @@ -110,15 +116,20 @@ export default class NcwmsColourbar extends React.Component { // their enclosing div; a value of `left` in % makes it very // easy to place them correctly. map( - tick => ( - - {tick} - - ) + tick => { + const position = logscale ? + Math.log(tick/range.min) / Math.log(range.max/range.min) : + (tick - range.min) / span; + return ( + + {tick} + + ) + } )(ticks) } From f88308b3c2dee7e07e74bf33af292fdef4107c96 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Fri, 27 Mar 2020 14:17:23 -0700 Subject: [PATCH 04/11] Update map display spec for logscaled variables --- public/external-text/default.yaml | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/public/external-text/default.yaml b/public/external-text/default.yaml index a09fafa2..67ab3c9a 100644 --- a/public/external-text/default.yaml +++ b/public/external-text/default.yaml @@ -210,6 +210,7 @@ maps: displaySpec: fallback: palette: seq-Oranges + logscale: false aboveMaxColor: black belowMinColor: black range: @@ -236,16 +237,18 @@ maps: ticks: [0, 2000, 4000, 6000, 8000, 10000] pr: palette: seq-Greens + logscale: true range: - min: 0 + min: 0.1 max: 20 - ticks: [0, 5, 10, 15, 20] + ticks: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20] prsn: palette: x-Occam + logscale: true range: - min: 0 + min: 0.1 max: 20 - ticks: [0, 5, 10, 15, 20] + ticks: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20] tasmax: palette: x-Occam range: From d38560309488f5411906f4534cdfa8e4531d7346 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 09:48:21 -0700 Subject: [PATCH 05/11] Install react-input-range --- package-lock.json | 14 ++++++++++++++ package.json | 1 + 2 files changed, 15 insertions(+) diff --git a/package-lock.json b/package-lock.json index 5f8490f9..3d67aa0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2581,6 +2581,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "autobind-decorator": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz", + "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=" + }, "autoprefixer": { "version": "9.5.1", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.5.1.tgz", @@ -15107,6 +15112,15 @@ "prop-types": "^15.5.8" } }, + "react-input-range": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz", + "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=", + "requires": { + "autobind-decorator": "^1.3.4", + "prop-types": "^15.5.8" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", diff --git a/package.json b/package.json index 9b2ad14c..5e7e2528 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-bootstrap": "^1.0.0-beta.6", "react-dom": "^16.8.6", "react-icons": "^3.5.0", + "react-input-range": "^1.3.0", "react-leaflet": "^2.1.4", "react-loader": "^2.4.5", "react-markdown": "^4.0.6", From 5ac9e7e2a2c84b12701cd3a630e298450c882425 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 09:48:42 -0700 Subject: [PATCH 06/11] Add shortcut method to external text --- src/temporary/external-text.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/temporary/external-text.js b/src/temporary/external-text.js index 6e611b32..fe6dcc86 100644 --- a/src/temporary/external-text.js +++ b/src/temporary/external-text.js @@ -210,4 +210,7 @@ export default class ExternalText extends React.Component { ExternalText.contextType = ExternalTextContext; ExternalText.Provider = Provider; ExternalText.get = get; +ExternalText.getRaw = _.curry( + (texts, path) => get(texts, path, {}, 'raw', undefined) +); ExternalText.Markdown = ReactMarkdown; From 8c86f603e380053e76d3903006b2c5f2b987f4f1 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 09:49:09 -0700 Subject: [PATCH 07/11] Add range slider to TwoDataMaps --- src/components/app-root/App/App.js | 2 + .../maps/TwoDataMaps/TwoDataMaps.js | 49 +++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/src/components/app-root/App/App.js b/src/components/app-root/App/App.js index 6dbd0494..1350503a 100755 --- a/src/components/app-root/App/App.js +++ b/src/components/app-root/App/App.js @@ -30,6 +30,8 @@ import TwoDataMaps from '../../maps/TwoDataMaps/TwoDataMaps'; import Cards from '../../misc/Cards'; +import 'react-input-range/lib/css/index.css'; + const baselineTimePeriod = { start_date: 1961, end_date: 1990, diff --git a/src/components/maps/TwoDataMaps/TwoDataMaps.js b/src/components/maps/TwoDataMaps/TwoDataMaps.js index 320b27d1..bebfe19e 100644 --- a/src/components/maps/TwoDataMaps/TwoDataMaps.js +++ b/src/components/maps/TwoDataMaps/TwoDataMaps.js @@ -32,6 +32,14 @@ import T from '../../../temporary/external-text'; import DataMap from '../../maps/DataMap'; import BCBaseMap from '../BCBaseMap'; import NcwmsColourbar from '../NcwmsColourbar'; +import InputRange from 'react-input-range'; + + +const getVariableConfig = (texts, variable, path) => + get( + [get('representative.variable_id', variable), path], + T.getRaw(texts, 'maps.displaySpec') + ); export default class TwoDataMaps extends React.Component { @@ -47,21 +55,62 @@ export default class TwoDataMaps extends React.Component { }; state = { + range: getVariableConfig(this.context, this.props.variable, 'range'), viewport: BCBaseMap.initialViewport, popup: { isOpen: false, }, }; + + // Updating the state in getDerivedStateFromProps is preferable, but we can't + // access context there (at least I don't know how to do that) since it is + // a static method. Therefore do it in componentDidUpdate. + // + // static getDerivedStateFromProps(props, state) { + // return null; + // // TODO: See if this can be done with memoization instead + // const range = getVariableConfig(this.context, props.variable, 'range'); + // console.log('### TwoDataMaps.getDerivedStateFromProps: range', range) + // return { + // range, + // }; + // } + // + componentDidUpdate(prevProps, prevState, snapshot) { + // Reset state.range to the default for the variable. + if (prevProps.variable !== this.props.variable) { + const range = getVariableConfig(this.context, this.props.variable, 'range'); + console.log('### TwoDataMaps.componentDidUpdate', range) + this.handleChangeRange(range); + } + } + handleChangeSelection = (name, value) => this.setState({ [name]: value }); + handleChangeRange = this.handleChangeSelection.bind(this, 'range'); handleChangeViewport = this.handleChangeSelection.bind(this, 'viewport'); handleChangePopup = this.handleChangeSelection.bind(this, 'popup'); + getConfig = T.getRaw(this.context); + render() { + console.log('### TwoDataMaps.render') + const rangeConfig = + getVariableConfig(this.context, this.props.variable, 'range'); return ( +

+ min: {this.state.range.min} {', '} + max: {this.state.range.max} +

+ Date: Mon, 30 Mar 2020 10:04:40 -0700 Subject: [PATCH 08/11] Make colour bar ticks respect range --- .../maps/NcwmsColourbar/NcwmsColourbar.js | 21 ++++++++++--------- .../maps/TwoDataMaps/TwoDataMaps.js | 1 + 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js index 298b5f4b..cca73ecb 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js +++ b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js @@ -63,6 +63,7 @@ export default class NcwmsColourbar extends React.Component { variableSpec: PropTypes.object, width: PropTypes.number, height: PropTypes.number, + range: PropTypes.object, }; static defaultProps = { @@ -78,11 +79,11 @@ export default class NcwmsColourbar extends React.Component { ); render() { + const { variableSpec, width, height, range } = this.props; const displaySpec = T.get(this.context, 'maps.displaySpec', {}, 'raw'); - const logscale = wmsLogscale(displaySpec, this.props.variableSpec); - const range = wmsDataRange(displaySpec, this.props.variableSpec); + const logscale = wmsLogscale(displaySpec, variableSpec); const span = range.max - range.min; - const ticks = wmsTicks(displaySpec, this.props.variableSpec); + const ticks = wmsTicks(displaySpec, variableSpec); return (
diff --git a/src/components/maps/TwoDataMaps/TwoDataMaps.js b/src/components/maps/TwoDataMaps/TwoDataMaps.js index bebfe19e..2df6b1ff 100644 --- a/src/components/maps/TwoDataMaps/TwoDataMaps.js +++ b/src/components/maps/TwoDataMaps/TwoDataMaps.js @@ -115,6 +115,7 @@ export default class TwoDataMaps extends React.Component { variableSpec={this.props.variable.representative} width={20} height={600} + range={this.state.range} /> From be5a1f52d3817536f0631ee27f3a96d95a01f117 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 10:15:48 -0700 Subject: [PATCH 09/11] Pass range through to climate layers --- src/components/maps/ClimateLayer/ClimateLayer.js | 4 +++- src/components/maps/DataMap/DataMap.js | 2 ++ src/components/maps/TwoDataMaps/TwoDataMaps.js | 6 ++---- src/components/maps/map-utils.js | 5 +++-- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/maps/ClimateLayer/ClimateLayer.js b/src/components/maps/ClimateLayer/ClimateLayer.js index d40dcee1..a10bf4d0 100644 --- a/src/components/maps/ClimateLayer/ClimateLayer.js +++ b/src/components/maps/ClimateLayer/ClimateLayer.js @@ -12,6 +12,7 @@ export default class ClimateLayer extends React.Component { fileMetadata: PropTypes.object, variableSpec: PropTypes.object, season: PropTypes.number, + range: PropTypes.object, }; render() { @@ -23,7 +24,8 @@ export default class ClimateLayer extends React.Component { this.props.fileMetadata, displaySpec, this.props.variableSpec, - this.props.season + this.props.season, + this.props.range, )} /> ); diff --git a/src/components/maps/DataMap/DataMap.js b/src/components/maps/DataMap/DataMap.js index 474a432a..aaa3635a 100644 --- a/src/components/maps/DataMap/DataMap.js +++ b/src/components/maps/DataMap/DataMap.js @@ -56,6 +56,7 @@ class DataMapDisplay extends React.Component { popup: PropTypes.object, onPopupChange: PropTypes.func, fileMetadata: PropTypes.object, + range: PropTypes.object, }; // TODO: This code is currently disabled because the CE ncWMS does not allow @@ -122,6 +123,7 @@ class DataMapDisplay extends React.Component { fileMetadata={this.props.fileMetadata} variableSpec={this.props.variable.representative} season={this.props.season} + range={this.props.range} /> { this.props.popup.isOpen && diff --git a/src/components/maps/TwoDataMaps/TwoDataMaps.js b/src/components/maps/TwoDataMaps/TwoDataMaps.js index 2df6b1ff..33a435ca 100644 --- a/src/components/maps/TwoDataMaps/TwoDataMaps.js +++ b/src/components/maps/TwoDataMaps/TwoDataMaps.js @@ -101,10 +101,6 @@ export default class TwoDataMaps extends React.Component { -

- min: {this.state.range.min} {', '} - max: {this.state.range.max} -

@@ -154,6 +151,7 @@ export default class TwoDataMaps extends React.Component { variable={this.props.variable} timePeriod={this.props.futureTimePeriod} metadata={this.props.metadata} + range={this.state.range} /> diff --git a/src/components/maps/map-utils.js b/src/components/maps/map-utils.js index a89294cc..d116e0ee 100644 --- a/src/components/maps/map-utils.js +++ b/src/components/maps/map-utils.js @@ -51,7 +51,7 @@ export const wmsColorScaleRange = (displaySpec, variableSpec) => { }; -export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, season) => { +export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, season, range) => { return { format: 'image/png', logscale: wmsLogscale(displaySpec, variableSpec), @@ -66,6 +66,7 @@ export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, se layers: wmsLayerName(fileMetadata, variableSpec), time: wmsTime(fileMetadata, season), styles: wmsStyle(displaySpec, variableSpec), - colorscalerange: wmsColorScaleRange(displaySpec, variableSpec), + // colorscalerange: wmsColorScaleRange(displaySpec, variableSpec), + colorscalerange: `${range.min},${range.max}`, } }; From 693b4894afc320867fa5d7d3892da6ba016b5a9d Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 10:24:27 -0700 Subject: [PATCH 10/11] Refactor data range selection --- .../maps/NcwmsColourbar/NcwmsColourbar.js | 21 ------------- .../NcwmsColourbar/NcwmsColourbar.module.css | 15 ++++----- .../maps/TwoDataMaps/TwoDataMaps.js | 31 +++++++++++++++++-- 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js index cca73ecb..5029b9f5 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js +++ b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js @@ -71,13 +71,6 @@ export default class NcwmsColourbar extends React.Component { height: 300, }; - getConfig = path => T.get(this.context, path, {}, 'raw'); - getUnits = variableSpec => - get( - [get('variable_id', variableSpec), 'units'], - this.getConfig('variables') - ); - render() { const { variableSpec, width, height, range } = this.props; const displaySpec = T.get(this.context, 'maps.displaySpec', {}, 'raw'); @@ -89,15 +82,6 @@ export default class NcwmsColourbar extends React.Component { className={styles.wrapper} style={{ width: this.props.height + 20 }} > - -
); } diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css b/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css index 3a71e2c7..4ec34af2 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css +++ b/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css @@ -5,11 +5,6 @@ width: 320px; /* for nominal 300px height */ } -.wrapper .label { - text-align: center; - margin-bottom: -0.4rem; -} - .wrapper .image { transform: rotate(90deg); transform-origin: bottom right; @@ -32,8 +27,14 @@ padding-top: 10px; } -.wrapper .note { +.label { + text-align: center; + margin-top: 1rem; + margin-bottom: -0.4rem; +} + +.note { font-size: 80%; text-align: center; - margin-top: -0.75rem; + /*margin-top: -0.75rem;*/ } diff --git a/src/components/maps/TwoDataMaps/TwoDataMaps.js b/src/components/maps/TwoDataMaps/TwoDataMaps.js index 33a435ca..6b51a91b 100644 --- a/src/components/maps/TwoDataMaps/TwoDataMaps.js +++ b/src/components/maps/TwoDataMaps/TwoDataMaps.js @@ -33,6 +33,7 @@ import DataMap from '../../maps/DataMap'; import BCBaseMap from '../BCBaseMap'; import NcwmsColourbar from '../NcwmsColourbar'; import InputRange from 'react-input-range'; +import styles from '../NcwmsColourbar/NcwmsColourbar.module.css'; const getVariableConfig = (texts, variable, path) => @@ -91,28 +92,54 @@ export default class TwoDataMaps extends React.Component { handleChangeViewport = this.handleChangeSelection.bind(this, 'viewport'); handleChangePopup = this.handleChangeSelection.bind(this, 'popup'); - getConfig = T.getRaw(this.context); + getConfig = path => T.get(this.context, path, {}, 'raw'); + getUnits = variableSpec => + get( + [get('variable_id', variableSpec), 'units'], + this.getConfig('variables') + ); render() { console.log('### TwoDataMaps.render') const rangeConfig = getVariableConfig(this.context, this.props.variable, 'range'); + const variableSpec = this.props.variable.representative; return ( + + + From b9763c77cf8914b5a27d898467639f5d593fae76 Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Mon, 30 Mar 2020 10:42:49 -0700 Subject: [PATCH 11/11] Add steps to data range slider --- public/external-text/default.yaml | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/public/external-text/default.yaml b/public/external-text/default.yaml index 67ab3c9a..7a357973 100644 --- a/public/external-text/default.yaml +++ b/public/external-text/default.yaml @@ -12,7 +12,7 @@ selectors: default: 2050 variable: prefix: ... with details about - default: pr + default: tasmax season: prefix: for a typical postfix: period @@ -216,24 +216,28 @@ maps: range: min: -50 max: 50 + step: 5 ticks: [-50, 0, 50] fdd: palette: x-Occam range: min: 0 max: 4000 + step: 500 ticks: [0, 1000, 2000, 3000, 4000] gdd: palette: x-Occam range: min: 0 max: 4000 + step: 500 ticks: [0, 1000, 2000, 3000, 4000] hdd: palette: x-Occam range: min: 0 max: 10000 + step: 500 ticks: [0, 2000, 4000, 6000, 8000, 10000] pr: palette: seq-Greens @@ -241,6 +245,7 @@ maps: range: min: 0.1 max: 20 + step: 0.1 ticks: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20] prsn: palette: x-Occam @@ -254,18 +259,21 @@ maps: range: min: -40 max: 40 + step: 5 ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] tasmin: palette: x-Occam range: min: -40 max: 40 + step: 5 ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] tasmean: palette: x-Occam range: min: -40 max: 40 + step: 5 ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] graph: @@ -498,6 +506,7 @@ components: colourScale: label: ${variable} (${units}) + rangeLabel: Minimum and maximum data values for colour scale note: '*Note: This colour scale applies to both maps.*' variables: