+ Data from{' '}
+
+ ECMWF
+ {' '}
+ /{' '}
+
+ Google Earth Engine
+
+
+)
+
+export default ERA5Source
diff --git a/src/components/climate/Forecast.js b/src/components/climate/Forecast.js
new file mode 100644
index 000000000..0bc564693
--- /dev/null
+++ b/src/components/climate/Forecast.js
@@ -0,0 +1,87 @@
+import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
+import React, { useState, useEffect } from 'react'
+import DataLoading from './DataLoading.js'
+import DayForecast from './DayForecast.js'
+import styles from './styles/Forecast.module.css'
+
+// Freetown:
+// https://www.yr.no/en/forecast/daily-table/2-2409306/Sierra%20Leone/Western%20Area/Freetown
+const Forecast = ({ geometry }) => {
+ const [data, setData] = useState()
+
+ const [lng, lat] = geometry.coordinates
+
+ useEffect(() => {
+ fetch(
+ `https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${lat}&lon=${lng}`
+ )
+ .then((response) => response.json())
+ .then(setData)
+ }, [lng, lat])
+
+ if (!data) {
+ return | + | {i18n.t('Night')} | +{i18n.t('Morning')} | +{i18n.t('Afternoon')} | +{i18n.t('Evening')} | ++ {i18n.t('Max/min temp.')} + | +{i18n.t('Precip.')} | +{i18n.t('Wind')} | +
+ Data from{' '}
+
+ MET Norway
+ {' '}
+ /{' '}
+
+ ECMWF HRES
+
+
+
+ )
+}
+
+Forecast.propTypes = {
+ geometry: PropTypes.object.isRequired,
+}
+
+export default Forecast
diff --git a/src/components/climate/PeriodTypeSelect.js b/src/components/climate/PeriodTypeSelect.js
new file mode 100644
index 000000000..e063fa8ee
--- /dev/null
+++ b/src/components/climate/PeriodTypeSelect.js
@@ -0,0 +1,36 @@
+import i18n from '@dhis2/d2-i18n'
+import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useRef, useEffect } from 'react'
+import styles from './styles/PeriodTypeSelect.module.css'
+
+export const MONTHLY = 'monthly'
+export const DAILY = 'daily'
+
+const PeriodTypeSelect = ({ type, onChange }) => (
+
+
+
+
+)
+
+PeriodTypeSelect.propTypes = {
+ type: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+}
+
+export default PeriodTypeSelect
diff --git a/src/components/climate/PrecipitationTab.js b/src/components/climate/PrecipitationTab.js
new file mode 100644
index 000000000..626adbbcb
--- /dev/null
+++ b/src/components/climate/PrecipitationTab.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import DataLoading from './DataLoading.js'
+import ERA5Source from './ERA5Source.js'
+import PeriodTypeSelect, { MONTHLY } from './PeriodTypeSelect.js'
+import Chart from './Chart.js'
+import getMonthlyChart from './charts/precipitationMonthly.js'
+import getDailyChart from './charts/precipitationDaily.js'
+
+const PrecipitationTab = ({ loading, monthlyData, dailyData }) => {
+ const [periodType, setPeriodType] = useState(MONTHLY)
+
+ if (loading) {
+ return 
+