From d811099de4e5dab9cfa34d40d8cca8d00bb50c6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Wed, 18 Oct 2023 10:13:48 +0200 Subject: [PATCH] feat: climate charts for location --- i18n/en.pot | 168 ++++++++++++++++-- src/components/app/AppLayout.js | 3 +- src/components/climate/ClimateModal.js | 51 ++++-- src/components/climate/DayForecast.js | 7 +- src/components/climate/PastWeather.js | 14 -- .../climate/styles/FutureClimate.module.css | 0 .../climate/styles/PastWeather.module.css | 0 src/components/map/ContextMenu.js | 7 +- src/util/earthEngine.js | 5 + 9 files changed, 209 insertions(+), 46 deletions(-) delete mode 100644 src/components/climate/PastWeather.js delete mode 100644 src/components/climate/styles/FutureClimate.module.css delete mode 100644 src/components/climate/styles/PastWeather.module.css diff --git a/i18n/en.pot b/i18n/en.pot index d6c4cb9ce..d0d88a7c2 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2023-10-17T14:46:58.088Z\n" -"PO-Revision-Date: 2023-10-17T14:46:58.088Z\n" +"POT-Creation-Date: 2023-10-17T21:29:58.965Z\n" +"PO-Revision-Date: 2023-10-17T21:29:58.965Z\n" msgid "Untitled map, {{date}}" msgstr "Untitled map, {{date}}" @@ -29,21 +29,171 @@ msgstr "Legend set" msgid "Color" msgstr "Color" +msgid "Loading weather data" +msgstr "Loading weather data" + msgid "Weather & Climate" msgstr "Weather & Climate" msgid "10 days forecast" msgstr "10 days forecast" -msgid "Past" -msgstr "Past" +msgid "Temperature" +msgstr "Temperature" + +msgid "Precipitation" +msgstr "Precipitation" -msgid "Future" -msgstr "Future" +msgid "Climate change" +msgstr "Climate change" msgid "Close" msgstr "Close" +msgid "Night" +msgstr "Night" + +msgid "Morning" +msgstr "Morning" + +msgid "Afternoon" +msgstr "Afternoon" + +msgid "Evening" +msgstr "Evening" + +msgid "Max/min temp." +msgstr "Max/min temp." + +msgid "Precip." +msgstr "Precip." + +msgid "Wind" +msgstr "Wind" + +msgid "Clear sky" +msgstr "Clear sky" + +msgid "Fair" +msgstr "Fair" + +msgid "Partly cloudy" +msgstr "Partly cloudy" + +msgid "Cloudy" +msgstr "Cloudy" + +msgid "Light rain showers" +msgstr "Light rain showers" + +msgid "Rain showers" +msgstr "Rain showers" + +msgid "Heavy rain showers" +msgstr "Heavy rain showers" + +msgid "Light rain showers and thunder" +msgstr "Light rain showers and thunder" + +msgid "Rain showers and thunder" +msgstr "Rain showers and thunder" + +msgid "Heavy rain showers and thunder" +msgstr "Heavy rain showers and thunder" + +msgid "Light sleet showers" +msgstr "Light sleet showers" + +msgid "Sleet showers" +msgstr "Sleet showers" + +msgid "Heavy sleet showers" +msgstr "Heavy sleet showers" + +msgid "Light sleet showers and thunder" +msgstr "Light sleet showers and thunder" + +msgid "Sleet showers and thunder" +msgstr "Sleet showers and thunder" + +msgid "Heavy sleet showers and thunder" +msgstr "Heavy sleet showers and thunder" + +msgid "Light snow showers" +msgstr "Light snow showers" + +msgid "Snow showers" +msgstr "Snow showers" + +msgid "Heavy show showers" +msgstr "Heavy show showers" + +msgid "Light snow showers and thunder" +msgstr "Light snow showers and thunder" + +msgid "Snow showers and thunder" +msgstr "Snow showers and thunder" + +msgid "Heavy snow showers and thunder" +msgstr "Heavy snow showers and thunder" + +msgid "Light rain" +msgstr "Light rain" + +msgid "Rain" +msgstr "Rain" + +msgid "Heavy rain" +msgstr "Heavy rain" + +msgid "Light rain and thunder" +msgstr "Light rain and thunder" + +msgid "Rain and thunder" +msgstr "Rain and thunder" + +msgid "Heavy rain and thunder" +msgstr "Heavy rain and thunder" + +msgid "Light sleet" +msgstr "Light sleet" + +msgid "Sleet" +msgstr "Sleet" + +msgid "Heavy sleet" +msgstr "Heavy sleet" + +msgid "Light sleet and thunder" +msgstr "Light sleet and thunder" + +msgid "Sleet and thunder" +msgstr "Sleet and thunder" + +msgid "Heavy sleet and thunder" +msgstr "Heavy sleet and thunder" + +msgid "Light snow" +msgstr "Light snow" + +msgid "Snow" +msgstr "Snow" + +msgid "Heavy snow" +msgstr "Heavy snow" + +msgid "Light snow and thunder" +msgstr "Light snow and thunder" + +msgid "Snow and thunder" +msgstr "Snow and thunder" + +msgid "Heavy snow and thunder" +msgstr "Heavy snow and thunder" + +msgid "Fog" +msgstr "Fog" + msgid "Size" msgstr "Size" @@ -1083,9 +1233,6 @@ msgstr "meters" msgid "Elevation above sea-level." msgstr "Elevation above sea-level." -msgid "Precipitation" -msgstr "Precipitation" - msgid "millimeter" msgstr "millimeter" @@ -1098,9 +1245,6 @@ msgstr "" "The values are in millimeters within 5 days periods. Updated monthly, " "during the 3rd week of the following month." -msgid "Temperature" -msgstr "Temperature" - msgid "°C during daytime" msgstr "°C during daytime" diff --git a/src/components/app/AppLayout.js b/src/components/app/AppLayout.js index aabc63a0b..c61b4f33e 100644 --- a/src/components/app/AppLayout.js +++ b/src/components/app/AppLayout.js @@ -27,6 +27,7 @@ const AppLayout = () => { const detailsPanelOpen = useSelector( (state) => state.ui.rightPanelOpen && !state.orgUnitProfile ) + const showClimate = useSelector((state) => !!state.climate) const onFileMenuAction = () => detailsPanelOpen && @@ -60,7 +61,7 @@ const AppLayout = () => { - + {showClimate && } ) } diff --git a/src/components/climate/ClimateModal.js b/src/components/climate/ClimateModal.js index 1a696ff29..51de5ccef 100644 --- a/src/components/climate/ClimateModal.js +++ b/src/components/climate/ClimateModal.js @@ -7,30 +7,47 @@ import { Button, ButtonStrip, } from '@dhis2/ui' -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { Tab, Tabs } from '../core/index.js' -import Forecast from './Forecast' -import PastWeather from './PastWeather' -import FutureClimate from './FutureClimate' +import Forecast from './Forecast.js' +import Precipitation from './Precipitation.js' +import Temperature from './Temperature.js' +import ClimateChange from './ClimateChange.js' import { closeClimatePanel } from '../../actions/climate.js' +import { getTimeSeries } from '../../util/earthEngine.js' +// import data from './data-monthly.js' import styles from './styles/Modal.module.css' const FORECAST = 'forecast' -const PAST = 'past' -const FUTURE = 'future' +const PRECIPITATION = 'precipitation' +const TEMPERATURE = 'temperature' +const CLIMATE = 'climate' + +const config = { + datasetId: 'ECMWF/ERA5_LAND/MONTHLY_AGGR', + band: [ + 'temperature_2m', + 'temperature_2m_min', + 'temperature_2m_max', + 'total_precipitation_sum', + 'total_precipitation_min', + 'total_precipitation_max', + ], +} const ClimateModal = () => { - const [tab, setTab] = useState(PAST) // FORECAST + const [tab, setTab] = useState(FORECAST) + const [data, setData] = useState() const feature = useSelector((state) => state.climate) const dispatch = useDispatch() - if (!feature) { - return null - } - const { name, geometry } = feature - const title = `${name} - ${i18n.t('Weather & Climate')}` + const title = (name ? `${name} - ` : '') + i18n.t('Weather & Climate') + + useEffect(() => { + getTimeSeries(config, geometry).then(setData) + }, [geometry]) return ( { {i18n.t('10 days forecast')} - {i18n.t('Past weather')} - {i18n.t('Future climate')} + {i18n.t('Temperature')} + {i18n.t('Precipitation')} + {i18n.t('Climate change')}
{tab === FORECAST && } - {tab === PAST && } - {tab === FUTURE && } + {tab === TEMPERATURE && } + {tab === PRECIPITATION && } + {tab === CLIMATE && }
diff --git a/src/components/climate/DayForecast.js b/src/components/climate/DayForecast.js index 883eb1a1d..7e711bee2 100644 --- a/src/components/climate/DayForecast.js +++ b/src/components/climate/DayForecast.js @@ -1,6 +1,6 @@ import i18n from '@dhis2/d2-i18n' import PropTypes from 'prop-types' -import React, { useState, useRef, useEffect } from 'react' +import React from 'react' import WeatherSymbol from './WeatherSymbol' import styles from './styles/DayForecast.module.css' @@ -53,4 +53,9 @@ const DayForecast = ({ date, series }) => { ) } +DayForecast.propTypes = { + date: PropTypes.string.isRequired, + series: PropTypes.array.isRequired, +} + export default DayForecast diff --git a/src/components/climate/PastWeather.js b/src/components/climate/PastWeather.js deleted file mode 100644 index 798d77458..000000000 --- a/src/components/climate/PastWeather.js +++ /dev/null @@ -1,14 +0,0 @@ -import i18n from '@dhis2/d2-i18n' -import PropTypes from 'prop-types' -import React, { useState, useEffect } from 'react' -import styles from './styles/PastWeather.module.css' - -const PastWeather = ({ geometry }) => { - return
Past Weather
-} - -PastWeather.propTypes = { - geometry: PropTypes.object.isRequired, -} - -export default PastWeather diff --git a/src/components/climate/styles/FutureClimate.module.css b/src/components/climate/styles/FutureClimate.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/climate/styles/PastWeather.module.css b/src/components/climate/styles/PastWeather.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/map/ContextMenu.js b/src/components/map/ContextMenu.js index 7765e6e4f..5d8a568dc 100644 --- a/src/components/map/ContextMenu.js +++ b/src/components/map/ContextMenu.js @@ -89,7 +89,10 @@ const ContextMenu = (props) => { openClimatePanel({ id: attr.id, name: attr.name, - geometry: feature.geometry, + geometry: feature?.geometry || { + type: 'Point', + coordinates, + }, }) break case 'show_coordinate': @@ -147,7 +150,7 @@ const ContextMenu = (props) => { /> )} - {feature && feature.geometry.type === 'Point' && ( + {(!feature || feature.geometry.type === 'Point') && ( { return 0 } + +export const getTimeSeries = async (config, geometry) => { + const eeWorker = await getWorkerInstance() + return await eeWorker.getTimeSeries(config, geometry) +}