feat: climate charts for location

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"
 

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 = () => {
             <LayerEdit />
             <AlertStack />
             <OpenAsMapDialog />
-            <ClimateModal />
+            {showClimate && <ClimateModal />}
         </>
     )
 }

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 (
         <Modal
@@ -43,13 +60,15 @@ const ClimateModal = () => {
             <ModalContent>
                 <Tabs value={tab} onChange={setTab}>
                     <Tab value={FORECAST}>{i18n.t('10 days forecast')}</Tab>
-                    <Tab value={PAST}>{i18n.t('Past weather')}</Tab>
-                    <Tab value={FUTURE}>{i18n.t('Future climate')}</Tab>
+                    <Tab value={TEMPERATURE}>{i18n.t('Temperature')}</Tab>
+                    <Tab value={PRECIPITATION}>{i18n.t('Precipitation')}</Tab>
+                    <Tab value={CLIMATE}>{i18n.t('Climate change')}</Tab>
                 </Tabs>
                 <div className={styles.tabContent}>
                     {tab === FORECAST && <Forecast geometry={geometry} />}
-                    {tab === PAST && <PastWeather geometry={geometry} />}
-                    {tab === FUTURE && <FutureClimate geometry={geometry} />}
+                    {tab === TEMPERATURE && <Temperature data={data} />}
+                    {tab === PRECIPITATION && <Precipitation data={data} />}
+                    {tab === CLIMATE && <ClimateChange data={data} />}
                 </div>
             </ModalContent>
             <ModalActions>

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

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') && (
                             <MenuItem
                                 dataTest="context-menu-view-climate"
                                 label={i18n.t('Weather and climate')}

src/util/earthEngine.js

@@ -151,3 +151,8 @@ export const getPrecision = (values = []) => {
 
     return 0
 }
+
+export const getTimeSeries = async (config, geometry) => {
+    const eeWorker = await getWorkerInstance()
+    return await eeWorker.getTimeSeries(config, geometry)
+}