@@ -28,10 +28,11 @@ const LegendPreview = ({ params }) => {
}
LegendPreview.propTypes = {
- params: PropTypes.shape({
+ showBelowMin: PropTypes.bool,
+ style: PropTypes.shape({
max: PropTypes.number.isRequired,
min: PropTypes.number.isRequired,
- palette: PropTypes.string.isRequired,
+ palette: PropTypes.array.isRequired,
}),
}
diff --git a/src/components/edit/earthEngine/PeriodSelect.js b/src/components/edit/earthEngine/PeriodSelect.js
index 63b3efc1a..e9ed33dad 100644
--- a/src/components/edit/earthEngine/PeriodSelect.js
+++ b/src/components/edit/earthEngine/PeriodSelect.js
@@ -2,20 +2,25 @@ import i18n from '@dhis2/d2-i18n'
import { CircularLoader } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import { BY_YEAR, EE_MONTHLY } from '../../../constants/periods.js'
+import { getPeriods } from '../../../util/earthEngine.js'
import { SelectField } from '../../core/index.js'
import styles from './styles/PeriodSelect.module.css'
-// http://localhost:8080/api/periodTypes.json
const EarthEnginePeriodSelect = ({
periodType,
period,
- periods,
+ datasetId,
+ filters,
onChange,
+ onError,
errorText,
className,
}) => {
+ const [periods, setPeriods] = useState()
+ const [yearPeriods, setYearPeriods] = useState()
const [year, setYear] = useState()
- const byYear = periodType === 'Custom'
+ const byYear = periodType === BY_YEAR || periodType === EE_MONTHLY
const years = useMemo(
() =>
@@ -28,29 +33,65 @@ const EarthEnginePeriodSelect = ({
[byYear, periods]
)
- const byYearPeriods = useMemo(
- () =>
- byYear && year && periods
- ? periods.filter((p) => p.year === year)
- : null,
- [byYear, year, periods]
- )
+ const onYearChange = useCallback(({ id }) => {
+ setYear(id)
+ }, [])
- const onYearChange = useCallback(
- ({ id }) => {
- onChange(null)
- setYear(id)
- },
- [onChange]
- )
+ useEffect(() => {
+ let isCancelled = false
+ if (periodType) {
+ getPeriods(datasetId, periodType, filters)
+ .then((periods) => {
+ if (!isCancelled) {
+ setPeriods(periods)
+ }
+ })
+ .catch((error) =>
+ onError({
+ type: 'engine',
+ message: error.message,
+ })
+ )
+ }
+
+ return () => (isCancelled = true)
+ }, [datasetId, periodType, filters, onError])
+
+ // Set year from period
useEffect(() => {
- if (byYear && period) {
+ if (!year && byYear && period) {
setYear(period.year)
}
- }, [byYear, period])
+ }, [year, byYear, period])
+
+ // Set most recent period by default
+ useEffect(() => {
+ if (!period && Array.isArray(periods) && periods.length) {
+ onChange(periods[0])
+ }
+ }, [period, periods, onChange])
+
+ // Set avaiable periods for one year
+ useEffect(() => {
+ if (byYear && year && periods) {
+ setYearPeriods(periods.filter((p) => p.year === year))
+ }
+ }, [year, byYear, periods])
+
+ // If year is changed, set most recent period for one year
+ useEffect(() => {
+ if (
+ byYear &&
+ period &&
+ yearPeriods &&
+ !yearPeriods.find(({ id }) => id === period.id)
+ ) {
+ onChange(yearPeriods[0])
+ }
+ }, [byYear, period, yearPeriods, onChange])
- const items = byYear ? byYearPeriods : periods
+ const items = yearPeriods || periods
return items ? (
@@ -67,7 +108,12 @@ const EarthEnginePeriodSelect = ({
label={i18n.t('Period')}
loading={!periods}
items={items}
- value={items && period && period.id}
+ value={
+ items &&
+ period &&
+ items.find(({ id }) => id === period.id) &&
+ period.id
+ }
onChange={onChange}
helpText={i18n.t(
'Available periods are set by the source data'
@@ -85,12 +131,14 @@ const EarthEnginePeriodSelect = ({
}
EarthEnginePeriodSelect.propTypes = {
+ datasetId: PropTypes.string.isRequired,
periodType: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
+ onError: PropTypes.func.isRequired,
className: PropTypes.string,
errorText: PropTypes.string,
+ filters: PropTypes.array,
period: PropTypes.object,
- periods: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
}
export default EarthEnginePeriodSelect
diff --git a/src/components/edit/earthEngine/StyleSelect.js b/src/components/edit/earthEngine/StyleSelect.js
index 383f959ad..69df9617f 100644
--- a/src/components/edit/earthEngine/StyleSelect.js
+++ b/src/components/edit/earthEngine/StyleSelect.js
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React, { useState, useCallback } from 'react'
import { connect } from 'react-redux'
-import { setParams } from '../../../actions/layerEdit.js'
+import { setStyle } from '../../../actions/layerEdit.js'
import { getColorScale, getColorPalette } from '../../../util/colors.js'
import { NumberField, ColorScaleSelect } from '../../core/index.js'
import styles from '../styles/LayerDialog.module.css'
@@ -10,9 +10,9 @@ import styles from '../styles/LayerDialog.module.css'
const minSteps = 3
const maxSteps = 9
-const StyleSelect = ({ unit, params, setParams }) => {
- const { min, max, palette } = params
- const [steps, setSteps] = useState(palette.split(',').length)
+const StyleSelect = ({ unit, style, setStyle }) => {
+ const { min, max, palette } = style
+ const [steps, setSteps] = useState(palette.length)
const onStepsChange = useCallback(
(steps) => {
@@ -21,13 +21,13 @@ const StyleSelect = ({ unit, params, setParams }) => {
const newPalette = getColorPalette(scale, steps)
if (newPalette) {
- setParams({ palette: newPalette })
+ setStyle({ palette: newPalette })
}
}
setSteps(steps)
},
- [palette, setParams]
+ [palette, setStyle]
)
let warningText
@@ -48,22 +48,19 @@ const StyleSelect = ({ unit, params, setParams }) => {
return (
setParams({ min: parseInt(min) })}
+ onChange={(min) => setStyle({ min })}
className={styles.flexInnerColumn}
/>
setParams({ max: parseInt(max) })}
+ onChange={(max) => setStyle({ max })}
className={styles.flexInnerColumn}
/>
{
min={minSteps}
max={maxSteps}
onChange={onStepsChange}
- className={styles.flexInnerColumn}
+ className={styles.stepField}
/>
{warningText && (
setParams({ palette })}
+ palette={style.palette}
+ onChange={(palette) => setStyle({ palette })}
width={260}
/>
@@ -90,15 +87,15 @@ const StyleSelect = ({ unit, params, setParams }) => {
}
StyleSelect.propTypes = {
- setParams: PropTypes.func.isRequired,
+ setStyle: PropTypes.func.isRequired,
unit: PropTypes.string.isRequired,
- params: PropTypes.shape({
+ style: PropTypes.shape({
max: PropTypes.number.isRequired,
min: PropTypes.number.isRequired,
- palette: PropTypes.string.isRequired,
+ palette: PropTypes.array.isRequired,
}),
}
export default connect(null, {
- setParams,
+ setStyle,
})(StyleSelect)
diff --git a/src/components/edit/earthEngine/StyleTab.js b/src/components/edit/earthEngine/StyleTab.js
index c065162e8..cdf8c72c0 100644
--- a/src/components/edit/earthEngine/StyleTab.js
+++ b/src/components/edit/earthEngine/StyleTab.js
@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React from 'react'
import { EE_BUFFER } from '../../../constants/layers.js'
@@ -6,27 +7,45 @@ import styles from '../styles/LayerDialog.module.css'
import LegendPreview from './LegendPreview.js'
import StyleSelect from './StyleSelect.js'
-const StyleTab = ({ unit, params, hasOrgUnitField }) => (
-
- {i18n.t('Unit: {{ unit }}', { - unit, - nsSeparator: '|', // https://github.com/i18next/i18next/issues/361 - })} + {i18n.t('Unit')}: {unit}
{warningText}
)}
- {
+ const { layerId, name, img, description, source } = layerSource
+
+ return (
+
+
+ {i18n.t('Configure available layer sources')}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+ManageLayerSourcesModal.propTypes = {
+ onClose: PropTypes.func.isRequired,
+}
+
+export default ManageLayerSourcesModal
diff --git a/src/components/layerSources/styles/LayerSource.module.css b/src/components/layerSources/styles/LayerSource.module.css
new file mode 100644
index 000000000..8f6c11f72
--- /dev/null
+++ b/src/components/layerSources/styles/LayerSource.module.css
@@ -0,0 +1,52 @@
+.layerSource {
+ display: flex;
+ align-items: center;
+ color: var(--colors-grey800);
+ font-size: 0.9rem;
+ border: 1px solid var(--colors-grey300);
+ border-radius: 4px;
+ padding: var(--spacers-dp16) var(--spacers-dp8);
+ margin-bottom: var(--spacers-dp8);
+ margin-right: var(--spacers-dp8);
+ cursor: pointer;
+}
+
+.layerSource:hover {
+ border-color: var(--colors-grey400);
+}
+
+.layerSource input {
+ cursor: pointer;
+}
+
+.layerSource img {
+ display: block;
+ box-sizing: border-box;
+ border: 1px solid var(--colors-grey400);
+ width: 120px;
+ height: 120px;
+ margin-left: var(--spacers-dp16);
+ margin-right: var(--spacers-dp16);
+}
+
+.layerSourceInfo {
+ align-self: start;
+}
+
+.layerSourceInfo h2 {
+ margin: 0;
+ padding-top: 2px;
+ font-size: 0.9rem;
+ font-weight: 500;
+}
+
+.layerSourceInfo p {
+ color: var(--colors-grey700);
+ margin: var(--spacers-dp8) 0;
+ line-height: 1.2rem;
+}
+
+.layerSourceInfo .source {
+ color: var(--colors-grey600);
+ padding-top: var(--spacers-dp8);
+}
diff --git a/src/components/layerSources/styles/ManageLayerSourcesButton.module.css b/src/components/layerSources/styles/ManageLayerSourcesButton.module.css
new file mode 100644
index 000000000..ffea82b56
--- /dev/null
+++ b/src/components/layerSources/styles/ManageLayerSourcesButton.module.css
@@ -0,0 +1,4 @@
+.button {
+ margin-left: var(--spacers-dp16);
+ margin-bottom: var(--spacers-dp12);
+}
diff --git a/src/components/layerSources/styles/ManageLayerSourcesModal.module.css b/src/components/layerSources/styles/ManageLayerSourcesModal.module.css
new file mode 100644
index 000000000..b3f2cd5e2
--- /dev/null
+++ b/src/components/layerSources/styles/ManageLayerSourcesModal.module.css
@@ -0,0 +1,10 @@
+.description {
+ font-size: 0.9rem;
+ line-height: 1.5rem;
+ padding-bottom: var(--spacers-dp12);
+}
+
+.layersTable {
+ border-collapse: collapse;
+ width: 100%;
+}
diff --git a/src/components/layers/overlays/AddLayerButton.js b/src/components/layers/overlays/AddLayerButton.js
index 7adf7871d..4e63fa692 100644
--- a/src/components/layers/overlays/AddLayerButton.js
+++ b/src/components/layers/overlays/AddLayerButton.js
@@ -1,14 +1,22 @@
import i18n from '@dhis2/d2-i18n'
import { IconAddCircle24 } from '@dhis2/ui'
import React, { useState, useRef } from 'react'
+import ManageLayerSourcesModal from '../../layerSources/ManageLayerSourcesModal.js'
import AddLayerPopover from './AddLayerPopover.js'
import styles from './styles/AddLayerButton.module.css'
const AddLayerButton = () => {
const [isOpen, setIsOpen] = useState(false)
+ const [isManaging, setIsManaging] = useState(false)
const buttonRef = useRef()
+
const toggleDialog = () => setIsOpen(!isOpen)
+ const onManaging = () => {
+ setIsManaging(true)
+ setIsOpen(false)
+ }
+
return (
<>
setIsManaging(false)} />
)}
)
diff --git a/src/components/layers/overlays/AddLayerPopover.js b/src/components/layers/overlays/AddLayerPopover.js
index dca19f96d..9aba2069f 100644
--- a/src/components/layers/overlays/AddLayerPopover.js
+++ b/src/components/layers/overlays/AddLayerPopover.js
@@ -2,23 +2,50 @@ import { useCachedDataQuery } from '@dhis2/analytics'
import { Popover } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
-import { connect } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
import { addLayer, editLayer } from '../../../actions/layers.js'
+import earthEngineLayers from '../../../constants/earthEngineLayers/index.js'
import { EXTERNAL_LAYER } from '../../../constants/layers.js'
+import useManagedLayerSourcesStore from '../../../hooks/useManagedLayerSourcesStore.js'
import { isSplitViewMap } from '../../../util/helpers.js'
+import ManageLayerSourcesButton from '../../layerSources/ManageLayerSourcesButton.js'
import LayerList from './LayerList.js'
-const AddLayerPopover = ({
- anchorEl,
- isSplitView,
- addLayer,
- editLayer,
- onClose,
-}) => {
- const { layerTypes } = useCachedDataQuery()
+const includeEarthEngineLayers = (defaultLayerSources, managedLayerSources) => {
+ // Earth Engine layers that are added to this DHIS2 instance
+ const managedEarthEngineLayers = earthEngineLayers
+ .filter((l) => !l.legacy && managedLayerSources.includes(l.layerId))
+ .sort((a, b) => a.name.localeCompare(b.name))
+
+ // Make copy before slicing below
+ const layerSources = [...defaultLayerSources]
+
+ // Insert Earth Engine layers before external layers
+ layerSources.splice(5, 0, ...managedEarthEngineLayers)
+
+ return layerSources
+}
+
+const AddLayerPopover = ({ anchorEl, onClose, onManaging }) => {
+ const isSplitView = useSelector((state) =>
+ isSplitViewMap(state.map.mapViews)
+ )
+ const dispatch = useDispatch()
+ const { defaultLayerSources } = useCachedDataQuery()
+ const { managedLayerSources } = useManagedLayerSourcesStore()
+ const layerSources = includeEarthEngineLayers(
+ defaultLayerSources,
+ managedLayerSources
+ )
+
const onLayerSelect = (layer) => {
const config = { ...layer }
- layer.layer === EXTERNAL_LAYER ? addLayer(config) : editLayer(config)
+ const layerType = layer.layer
+
+ dispatch(
+ layerType === EXTERNAL_LAYER ? addLayer(config) : editLayer(config)
+ )
+
onClose()
}
@@ -32,25 +59,19 @@ const AddLayerPopover = ({
dataTest="addlayerpopover"
>
+ .filter((i) => values[i.value])
+ .sort((a, b) => values[b.value] - values[a.value])
+ .map(({ value, name, color }) => (
+
{
>
{name}
- {valueFormat(values[id])}
+ {valueFormat(values[value])}
{isPercentage ? '%' : ''}
diff --git a/src/components/orgunits/OrgUnitData.js b/src/components/orgunits/OrgUnitData.js
index bce650e02..7d33e7a5f 100644
--- a/src/components/orgunits/OrgUnitData.js
+++ b/src/components/orgunits/OrgUnitData.js
@@ -22,8 +22,8 @@ const ORGUNIT_PROFILE_QUERY = {
// Only YEARLY period type is supported in first version
const periodType = 'YEARLY'
-const currentYear = String(new Date().getFullYear())
-const periods = getFixedPeriodsByType(periodType, currentYear)
+const year = String(new Date().getFullYear())
+const periods = getFixedPeriodsByType({ periodType, year })
const defaultPeriod = filterFuturePeriods(periods)[0] || periods[0]
/*
diff --git a/src/components/periods/PeriodSelect.js b/src/components/periods/PeriodSelect.js
index 9f029c931..e91641935 100644
--- a/src/components/periods/PeriodSelect.js
+++ b/src/components/periods/PeriodSelect.js
@@ -7,7 +7,8 @@ import {
} from '@dhis2/ui'
import cx from 'classnames'
import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import usePrevious from '../../hooks/usePrevious.js'
import {
getFixedPeriodsByType,
filterFuturePeriods,
@@ -16,125 +17,130 @@ import { getYear } from '../../util/time.js'
import { SelectField } from '../core/index.js'
import styles from './styles/PeriodSelect.module.css'
-class PeriodSelect extends Component {
- static propTypes = {
- onChange: PropTypes.func.isRequired,
- className: PropTypes.string,
- errorText: PropTypes.string,
- period: PropTypes.shape({
- id: PropTypes.string.isRequired,
- startDate: PropTypes.string,
- }),
- periodType: PropTypes.string,
- periodsSettings: PropTypes.object,
- }
-
- state = {
- year: null,
- periods: null,
- }
-
- componentDidMount() {
- this.setPeriods()
- }
-
- componentDidUpdate(prevProps, prevState) {
- const { periodType, period, onChange } = this.props
- const { year, periods } = this.state
-
- if (periodType !== prevProps.periodType) {
- this.setPeriods()
- } else if (periods && !period) {
- onChange(filterFuturePeriods(periods)[0] || periods[0]) // Autoselect most recent period
- }
-
- // Change period if year is changed (but keep period index)
- if (period && prevState.periods && year !== prevState.year) {
- const periodIndex = prevState.periods.findIndex(
- (item) => item.id === period.id
- )
- onChange(periods[periodIndex])
- }
- }
-
- render() {
- const { periodType, period, onChange, className, errorText } =
- this.props
- const { periods } = this.state
-
- if (!periods) {
- return null
+const PeriodSelect = ({
+ onChange,
+ className,
+ errorText,
+ firstDate,
+ lastDate,
+ period,
+ periodType,
+ periodsSettings,
+}) => {
+ const [year, setYear] = useState(getYear(period?.startDate || lastDate))
+ const prevYear = usePrevious(year)
+
+ // Set periods when periodType or year changes
+ /* eslint-disable react-hooks/exhaustive-deps */
+ const periods = useMemo(
+ () =>
+ periodType
+ ? getFixedPeriodsByType({
+ periodType,
+ year,
+ firstDate,
+ lastDate,
+ periodsSettings,
+ })
+ : [period], // saved map period (not included in dependency array by design)
+ [periodType, year, firstDate, lastDate, periodsSettings]
+ )
+ /* eslint-enable react-hooks/exhaustive-deps */
+
+ const periodIndex = useMemo(
+ () => period && periods.findIndex((p) => p.id === period.id),
+ [period, periods]
+ )
+
+ const prevPeriodIndex = usePrevious(periodIndex)
+
+ // Increment/decrement year
+ const changeYear = useCallback(
+ (change) => {
+ const newYear = year + change
+
+ if (
+ (!firstDate || newYear >= getYear(firstDate)) &&
+ (!lastDate || newYear <= getYear(lastDate))
+ ) {
+ setYear(newYear)
+ }
+ },
+ [year, firstDate, lastDate]
+ )
+
+ // Autoselect most recent period
+ useEffect(() => {
+ if (!period && periods) {
+ onChange(filterFuturePeriods(periods)[0] || periods[0])
}
+ }, [period, periods, onChange])
- const value =
- period && periods.some((p) => p.id === period.id) ? period.id : null
-
- return (
- [
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj_TOTAL',
- datasetId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
- name: i18n.t('Population'),
- unit: i18n.t('people per hectare'),
- description: i18n.t('Estimated number of people living in an area.'),
- source: 'WorldPop / Google Earth Engine',
- sourceUrl:
- 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj',
- img: 'images/population.png',
- defaultAggregations: ['sum', 'mean'],
- periodType: 'Yearly',
- band: 'population',
- filters: ({ id, name, year }) => [
- {
- id,
- name,
- type: 'eq',
- arguments: ['year', year],
- },
- ],
- mosaic: true,
- params: {
- min: 0,
- max: 25,
- palette: '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15', // Reds
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
- datasetId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
- name: i18n.t('Population age groups'),
- unit: i18n.t('people per hectare'),
- description: i18n.t(
- 'Estimated number of people living in an area, grouped by age and gender.'
- ),
- source: 'WorldPop / Google Earth Engine',
- sourceUrl:
- 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj',
- img: 'images/population.png',
- periodType: 'Yearly',
- defaultAggregations: ['sum', 'mean'],
- bands: [
- {
- id: 'M_0',
- name: i18n.t('Male 0 - 1 years'),
- },
- {
- id: 'M_1',
- name: i18n.t('Male 1 - 4 years'),
- },
- {
- id: 'M_5',
- name: i18n.t('Male 5 - 9 years'),
- },
- {
- id: 'M_10',
- name: i18n.t('Male 10 - 14 years'),
- },
- {
- id: 'M_15',
- name: i18n.t('Male 15 - 19 years'),
- },
- {
- id: 'M_20',
- name: i18n.t('Male 20 - 24 years'),
- },
- {
- id: 'M_25',
- name: i18n.t('Male 25 - 29 years'),
- },
- {
- id: 'M_30',
- name: i18n.t('Male 30 - 34 years'),
- },
- {
- id: 'M_35',
- name: i18n.t('Male 35 - 39 years'),
- },
- {
- id: 'M_40',
- name: i18n.t('Male 40 - 44 years'),
- },
- {
- id: 'M_45',
- name: i18n.t('Male 45 - 49 years'),
- },
- {
- id: 'M_50',
- name: i18n.t('Male 50 - 54 years'),
- },
- {
- id: 'M_55',
- name: i18n.t('Male 55 - 59 years'),
- },
- {
- id: 'M_60',
- name: i18n.t('Male 60 - 64 years'),
- },
- {
- id: 'M_65',
- name: i18n.t('Male 65 - 69 years'),
- },
- {
- id: 'M_70',
- name: i18n.t('Male 70 - 74 years'),
- },
- {
- id: 'M_75',
- name: i18n.t('Male 75 - 79 years'),
- },
- {
- id: 'M_80',
- name: i18n.t('Male 80 years and above'),
- },
- {
- id: 'F_0',
- name: i18n.t('Female 0 - 1 years'),
- },
- {
- id: 'F_1',
- name: i18n.t('Female 1 - 4 years'),
- },
- {
- id: 'F_5',
- name: i18n.t('Female 5 - 9 years'),
- },
- {
- id: 'F_10',
- name: i18n.t('Female 10 - 14 years'),
- },
- {
- id: 'F_15',
- name: i18n.t('Female 15 - 19 years'),
- },
- {
- id: 'F_20',
- name: i18n.t('Female 20 - 24 years'),
- },
- {
- id: 'F_25',
- name: i18n.t('Female 25 - 29 years'),
- },
- {
- id: 'F_30',
- name: i18n.t('Female 30 - 34 years'),
- },
- {
- id: 'F_35',
- name: i18n.t('Female 35 - 39 years'),
- },
- {
- id: 'F_40',
- name: i18n.t('Female 40 - 44 years'),
- },
- {
- id: 'F_45',
- name: i18n.t('Female 45 - 49 years'),
- },
- {
- id: 'F_50',
- name: i18n.t('Female 50 - 54 years'),
- },
- {
- id: 'F_55',
- name: i18n.t('Female 55 - 59 years'),
- },
- {
- id: 'F_60',
- name: i18n.t('Female 60 - 64 years'),
- },
- {
- id: 'F_65',
- name: i18n.t('Female 65 - 69 years'),
- },
- {
- id: 'F_70',
- name: i18n.t('Female 70 - 74 years'),
- multiple: true,
- },
- {
- id: 'F_75',
- name: i18n.t('Female 75 - 79 years'),
- },
- {
- id: 'F_80',
- name: i18n.t('Female 80 years and above'),
- },
- ],
- filters: ({ id, name, year }) => [
- {
- id,
- name,
- type: 'eq',
- arguments: ['year', year],
- },
- ],
- mosaic: true,
- params: {
- min: 0,
- max: 10,
- palette: '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15', // Reds
- },
- opacity: 0.9,
- tileScale: 4,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'GOOGLE/Research/open-buildings/v1/polygons',
- datasetId: 'GOOGLE/Research/open-buildings/v1/polygons',
- format: 'FeatureCollection',
- name: i18n.t('Building footprints'),
- unit: i18n.t('Number of buildings'),
- description: i18n.t(
- 'The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa.'
- ),
- notice: i18n.t(
- 'Building counts are only available for smaller organisation unit areas.'
- ),
- error: i18n.t(
- 'Select a smaller area or single organization unit to see the count of buildings.'
- ),
- source: 'NASA / USGS / JPL-Caltech / Google Earth Engine',
- sourceUrl: 'https://sites.research.google/open-buildings/',
- img: 'images/buildings.png',
- aggregations: ['count'],
- defaultAggregations: ['count'],
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'USGS/SRTMGL1_003',
- datasetId: 'USGS/SRTMGL1_003',
- name: i18n.t('Elevation'),
- unit: i18n.t('meters'),
- description: i18n.t('Elevation above sea-level.'),
- source: 'NASA / USGS / JPL-Caltech / Google Earth Engine',
- sourceUrl:
- 'https://explorer.earthengine.google.com/#detail/USGS%2FSRTMGL1_003',
- img: 'images/elevation.png',
- aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
- defaultAggregations: ['mean', 'min', 'max'],
- band: 'elevation',
- params: {
- min: 0,
- max: 1500,
- palette: '#ffffd4,#fee391,#fec44f,#fe9929,#d95f0e,#993404', // YlOrBr
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'UCSB-CHG/CHIRPS/PENTAD',
- datasetId: 'UCSB-CHG/CHIRPS/PENTAD',
- name: i18n.t('Precipitation'),
- unit: i18n.t('millimeter'),
- description: i18n.t(
- 'Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month.'
- ),
- source: 'UCSB / CHG / Google Earth Engine',
- sourceUrl:
- 'https://explorer.earthengine.google.com/#detail/UCSB-CHG%2FCHIRPS%2FPENTAD',
- periodType: 'Custom',
- band: 'precipitation',
- aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
- defaultAggregations: ['mean', 'min', 'max'],
- mask: true,
- img: 'images/precipitation.png',
- params: {
- min: 0,
- max: 100,
- palette: '#eff3ff,#c6dbef,#9ecae1,#6baed6,#3182bd,#08519c', // Blues
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'MODIS/006/MOD11A2',
- datasetId: 'MODIS/006/MOD11A2',
- name: i18n.t('Temperature'),
- unit: i18n.t('°C during daytime'),
- description: i18n.t(
- 'Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover.'
- ),
- source: 'NASA LP DAAC / Google Earth Engine',
- sourceUrl:
- 'https://explorer.earthengine.google.com/#detail/MODIS%2FMOD11A2',
- img: 'images/temperature.png',
- aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
- defaultAggregations: ['mean', 'min', 'max'],
- periodType: 'Custom',
- band: 'LST_Day_1km',
- mask: true,
- methods: {
- toFloat: [],
- multiply: [0.02],
- subtract: [273.15],
- },
- params: {
- min: 0,
- max: 40,
- palette:
- '#fff5f0,#fee0d2,#fcbba1,#fc9272,#fb6a4a,#ef3b2c,#cb181d,#a50f15,#67000d', // Reds
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- layerId: 'MODIS/006/MCD12Q1', // Layer id kept for backward compability for saved maps
- datasetId: 'MODIS/061/MCD12Q1', // No longer in use: 'MODIS/006/MCD12Q1' / 'MODIS/051/MCD12Q1',
- name: i18n.t('Landcover'),
- description: i18n.t(
- 'Distinct landcover types collected from satellites.'
- ),
- source: 'NASA LP DAAC / Google Earth Engine',
- sourceUrl:
- 'https://developers.google.com/earth-engine/datasets/catalog/MODIS_061_MCD12Q1',
- periodType: 'Yearly',
- band: 'LC_Type1',
- filters: defaultFilters,
- defaultAggregations: 'percentage',
- legend: {
- items: [
- // http://www.eomf.ou.edu/static/IGBP.pdf
- {
- id: 1,
- name: i18n.t('Evergreen Needleleaf forest'),
- color: '#162103',
- },
- {
- id: 2,
- name: i18n.t('Evergreen Broadleaf forest'),
- color: '#235123',
- },
- {
- id: 3,
- name: i18n.t('Deciduous Needleleaf forest'),
- color: '#399b38',
- },
- {
- id: 4,
- name: i18n.t('Deciduous Broadleaf forest'),
- color: '#38eb38',
- },
- {
- id: 5,
- name: i18n.t('Mixed forest'),
- color: '#39723b',
- },
- {
- id: 6,
- name: i18n.t('Closed shrublands'),
- color: '#6a2424',
- },
- {
- id: 7,
- name: i18n.t('Open shrublands'),
- color: '#c3a55f',
- },
- {
- id: 8,
- name: i18n.t('Woody savannas'),
- color: '#b76124',
- },
- {
- id: 9,
- name: i18n.t('Savannas'),
- color: '#d99125',
- },
- {
- id: 10,
- name: i18n.t('Grasslands'),
- color: '#92af1f',
- },
- {
- id: 11,
- name: i18n.t('Permanent wetlands'),
- color: '#10104c',
- },
- {
- id: 12,
- name: i18n.t('Croplands'),
- color: '#cdb400',
- },
- {
- id: 13,
- name: i18n.t('Urban and built-up'),
- color: '#cc0202',
- },
- {
- id: 14,
- name: i18n.t('Cropland/Natural vegetation mosaic'),
- color: '#332808',
- },
- {
- id: 15,
- name: i18n.t('Snow and ice'),
- color: '#d7cdcc',
- },
- {
- id: 16,
- name: i18n.t('Barren or sparsely vegetated'),
- color: '#f7e174',
- },
- {
- id: 17,
- name: i18n.t('Water'),
- color: '#aec3d6',
- },
- ],
- },
- mask: false,
- popup: '{name}: {value}',
- img: 'images/landcover.png',
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- legacy: true, // Kept for backward compability
- layerId: 'WorldPop/GP/100m/pop',
- datasetId: 'WorldPop/GP/100m/pop',
- name: i18n.t('Population'),
- unit: i18n.t('people per hectare'),
- description: i18n.t('Estimated number of people living in an area.'),
- source: 'WorldPop / Google Earth Engine',
- sourceUrl:
- 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop',
- img: 'images/population.png',
- defaultAggregations: ['sum', 'mean'],
- periodType: 'Yearly',
- filters: ({ id, name, year }) => [
- {
- id,
- name,
- type: 'eq',
- arguments: ['year', year],
- },
- ],
- mosaic: true,
- params: {
- min: 0,
- max: 10,
- palette: '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15', // Reds
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- legacy: true, // Kept for backward compability
- layerId: 'WorldPop/POP',
- datasetId: 'WorldPop/POP',
- name: i18n.t('Population'),
- unit: i18n.t('people per km²'),
- description: i18n.t('Estimated number of people living in an area.'),
- source: 'WorldPop / Google Earth Engine',
- sourceUrl:
- 'https://explorer.earthengine.google.com/#detail/WorldPop%2FPOP',
- img: 'images/population.png',
- periodType: 'Yearly',
- filters: ({ id, name, year }) => [
- {
- id,
- name,
- type: 'eq',
- arguments: ['year', year],
- },
- {
- type: 'eq',
- arguments: ['UNadj', 'yes'],
- },
- ],
- mosaic: true,
- params: {
- min: 0,
- max: 1000,
- palette: '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15', // Reds
- },
- methods: {
- multiply: [100], // Convert from people/hectare to people/km2
- },
- opacity: 0.9,
- },
- {
- layer: EARTH_ENGINE_LAYER,
- legacy: true, // Kept for backward compability
- layerId: 'NOAA/DMSP-OLS/NIGHTTIME_LIGHTS',
- datasetId: 'NOAA/DMSP-OLS/NIGHTTIME_LIGHTS',
- name: i18n.t('Nighttime lights'),
- unit: i18n.t('light intensity'),
- description: i18n.t(
- 'Light intensity from cities, towns, and other sites with persistent lighting, including gas flares.'
- ),
- source: 'NOAA / Google Earth Engine',
- sourceUrl:
- 'https://explorer.earthengine.google.com/#detail/NOAA%2FDMSP-OLS%2FNIGHTTIME_LIGHTS',
- periodType: 'Yearly',
- band: 'stable_lights',
- mask: true,
- img: 'images/nighttime.png',
- params: {
- min: 0,
- max: 63,
- palette: '#ffffd4,#fee391,#fec44f,#fe9929,#ec7014,#cc4c02,#8c2d04', // YlOrBr
- },
- opacity: 0.9,
- },
-]
-
-export const getEarthEngineLayer = (id) =>
- earthEngineLayers().find((l) => l.layerId === id)
diff --git a/src/constants/earthEngineLayers/buildings_GOOGLE.js b/src/constants/earthEngineLayers/buildings_GOOGLE.js
new file mode 100644
index 000000000..a8893f84e
--- /dev/null
+++ b/src/constants/earthEngineLayers/buildings_GOOGLE.js
@@ -0,0 +1,36 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'GOOGLE/Research/open-buildings/v3/polygons',
+ datasetId: 'GOOGLE/Research/open-buildings/v3/polygons',
+ format: 'FeatureCollection',
+ img: 'images/buildings.png',
+ name: i18n.t('Building footprints'),
+ description: i18n.t(
+ 'The outlines of buildings derived from high-resolution satellite imagery. Only for Sub-Saharan Africa, South and South-East Asia, Latin America and the Caribbean.'
+ ),
+ notice: i18n.t(
+ 'Building counts are only available for smaller organisation unit areas.'
+ ),
+ error: i18n.t(
+ 'Select a smaller area or single organization unit to see the count of buildings.'
+ ),
+ source: 'Google Research',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/GOOGLE_Research_open-buildings_v3_polygons',
+ unit: i18n.t('Number of buildings'),
+ resolution: {
+ spatial: i18n.t('0.5 meter'),
+ temporal: i18n.t('Single point in time'),
+ temporalCoverage: i18n.t('May 2023'),
+ },
+ aggregations: ['count'],
+ defaultAggregations: ['count'],
+ style: {
+ color: '#FFA500',
+ strokeWidth: 1,
+ },
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/elevation_SRTM.js b/src/constants/earthEngineLayers/elevation_SRTM.js
new file mode 100644
index 000000000..50898515b
--- /dev/null
+++ b/src/constants/earthEngineLayers/elevation_SRTM.js
@@ -0,0 +1,38 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'USGS/SRTMGL1_003',
+ datasetId: 'USGS/SRTMGL1_003',
+ format: 'Image',
+ img: 'images/elevation.png',
+ name: i18n.t('Elevation'),
+ description: i18n.t('Elevation above sea-level.'),
+ source: 'NASA / USGS / JPL-Caltech / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/USGS_SRTMGL1_003',
+ unit: i18n.t('meters'),
+ resolution: {
+ spatial: i18n.t('~30 meters'),
+ temporal: i18n.t('Single point in time'),
+ temporalCoverage: i18n.t('Febuary 2000'),
+ },
+ aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
+ defaultAggregations: ['mean', 'min', 'max'],
+ band: 'elevation',
+ style: {
+ min: 0,
+ max: 1500,
+ palette: [
+ '#ffffd4',
+ '#fee391',
+ '#fec44f',
+ '#fe9929',
+ '#d95f0e',
+ '#993404',
+ ], // YlOrBr (ColorBrewer)
+ },
+ maskOperator: 'gte',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/index.js b/src/constants/earthEngineLayers/index.js
new file mode 100644
index 000000000..5ef679e21
--- /dev/null
+++ b/src/constants/earthEngineLayers/index.js
@@ -0,0 +1,48 @@
+import buildings from './buildings_GOOGLE.js'
+import elevation from './elevation_SRTM.js'
+import landcover from './landcover_MCD12Q1.js'
+import legacyBuildings from './legacy/buildings_GOOGLE.js'
+import legacyNighttime from './legacy/nighttime_DMSP-OLS.js'
+import legacyPopulationWorldPop from './legacy/population_WorldPop.js'
+import legacyPopulation100m from './legacy/population_WorldPop_100m.js'
+import legacyPrecipitation from './legacy/precipitation_pentad_CHIRPS.js'
+import legacyTemperature from './legacy/temperature_MOD11A2v061.js'
+import populationAgeSex from './population_age_sex_WorldPop.js'
+import populationTotal from './population_total_WorldPop.js'
+import precipitationMonthly from './precipitation_monthly_ERA5-Land.js'
+import temperatureMonthly from './temperature_monthly_ERA5-Land.js'
+
+const earthEngineLayers = [
+ populationTotal,
+ populationAgeSex,
+ buildings,
+ elevation,
+ precipitationMonthly,
+ temperatureMonthly,
+ landcover,
+ legacyBuildings,
+ legacyNighttime,
+ legacyPopulation100m,
+ legacyPopulationWorldPop,
+ legacyPrecipitation,
+ legacyTemperature,
+]
+
+const earthEngineLayersDefault = [
+ populationTotal,
+ populationAgeSex,
+ buildings,
+ elevation,
+ precipitationMonthly,
+ temperatureMonthly,
+ landcover,
+]
+
+export const earthEngineLayersDefaultIds = earthEngineLayersDefault.map(
+ (l) => l.layerId
+)
+
+export const getEarthEngineLayer = (id) =>
+ earthEngineLayers.find((l) => l.layerId === id)
+
+export default earthEngineLayers
diff --git a/src/constants/earthEngineLayers/landcover_MCD12Q1.js b/src/constants/earthEngineLayers/landcover_MCD12Q1.js
new file mode 100644
index 000000000..65a77eff5
--- /dev/null
+++ b/src/constants/earthEngineLayers/landcover_MCD12Q1.js
@@ -0,0 +1,119 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'MODIS/006/MCD12Q1', // Layer id kept for backward compability for saved maps
+ datasetId: 'MODIS/061/MCD12Q1', // No longer in use: 'MODIS/006/MCD12Q1' / 'MODIS/051/MCD12Q1',
+ format: 'ImageCollection',
+ img: 'images/landcover.png',
+ name: i18n.t('Landcover'),
+ description: i18n.t('Distinct landcover types collected from satellites.'),
+ source: 'NASA LP DAAC / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/MODIS_061_MCD12Q1',
+ resolution: {
+ spatial: i18n.t('0.5 meter'),
+ temporal: i18n.t('Single point in time'),
+ temporalCoverage: i18n.t('May 2023'),
+ },
+ defaultAggregations: 'percentage',
+ periodType: 'YEARLY',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ band: 'LC_Type1',
+ style: [
+ // http://www.eomf.ou.edu/static/IGBP.pdf
+ {
+ value: 1,
+ name: i18n.t('Evergreen Needleleaf forest'),
+ color: '#162103',
+ },
+ {
+ value: 2,
+ name: i18n.t('Evergreen Broadleaf forest'),
+ color: '#235123',
+ },
+ {
+ value: 3,
+ name: i18n.t('Deciduous Needleleaf forest'),
+ color: '#399b38',
+ },
+ {
+ value: 4,
+ name: i18n.t('Deciduous Broadleaf forest'),
+ color: '#38eb38',
+ },
+ {
+ value: 5,
+ name: i18n.t('Mixed forest'),
+ color: '#39723b',
+ },
+ {
+ value: 6,
+ name: i18n.t('Closed shrublands'),
+ color: '#6a2424',
+ },
+ {
+ value: 7,
+ name: i18n.t('Open shrublands'),
+ color: '#c3a55f',
+ },
+ {
+ value: 8,
+ name: i18n.t('Woody savannas'),
+ color: '#b76124',
+ },
+ {
+ value: 9,
+ name: i18n.t('Savannas'),
+ color: '#d99125',
+ },
+ {
+ value: 10,
+ name: i18n.t('Grasslands'),
+ color: '#92af1f',
+ },
+ {
+ value: 11,
+ name: i18n.t('Permanent wetlands'),
+ color: '#10104c',
+ },
+ {
+ value: 12,
+ name: i18n.t('Croplands'),
+ color: '#cdb400',
+ },
+ {
+ value: 13,
+ name: i18n.t('Urban and built-up'),
+ color: '#cc0202',
+ },
+ {
+ value: 14,
+ name: i18n.t('Cropland/Natural vegetation mosaic'),
+ color: '#332808',
+ },
+ {
+ value: 15,
+ name: i18n.t('Snow and ice'),
+ color: '#d7cdcc',
+ },
+ {
+ value: 16,
+ name: i18n.t('Barren or sparsely vegetated'),
+ color: '#f7e174',
+ },
+ {
+ value: 17,
+ name: i18n.t('Water'),
+ color: '#aec3d6',
+ },
+ ],
+ popup: '{name}: {value}',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/buildings_GOOGLE.js b/src/constants/earthEngineLayers/legacy/buildings_GOOGLE.js
new file mode 100644
index 000000000..ae24c518e
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/buildings_GOOGLE.js
@@ -0,0 +1,35 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+
+export const legacyBuildingsDatasetId =
+ 'GOOGLE/Research/open-buildings/v1/polygons'
+
+export default {
+ legacy: true, // Kept for backward compability
+ layer: EARTH_ENGINE_LAYER,
+ layerId: legacyBuildingsDatasetId,
+ datasetId: legacyBuildingsDatasetId,
+ format: 'FeatureCollection',
+ name: i18n.t('Building footprints'),
+ unit: i18n.t('Number of buildings'),
+ description: i18n.t(
+ 'The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa.'
+ ),
+ notice: i18n.t(
+ 'Building counts are only available for smaller organisation unit areas.'
+ ),
+ error: i18n.t(
+ 'Select a smaller area or single organization unit to see the count of buildings.'
+ ),
+ source: 'Google Research',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/GOOGLE_Research_open-buildings_v1_polygons',
+ img: 'images/buildings.png',
+ aggregations: ['count'],
+ defaultAggregations: ['count'],
+ style: {
+ color: '#FFA500',
+ strokeWidth: 1,
+ },
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/nighttime_DMSP-OLS.js b/src/constants/earthEngineLayers/legacy/nighttime_DMSP-OLS.js
new file mode 100644
index 000000000..bf0e3e670
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/nighttime_DMSP-OLS.js
@@ -0,0 +1,44 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+
+export const legacyNighttimeDatasetId = 'NOAA/DMSP-OLS/NIGHTTIME_LIGHTS'
+
+export default {
+ legacy: true, // Kept for backward compability
+ layer: EARTH_ENGINE_LAYER,
+ format: 'ImageCollection',
+ layerId: legacyNighttimeDatasetId,
+ datasetId: legacyNighttimeDatasetId,
+ name: i18n.t('Nighttime lights'),
+ unit: i18n.t('light intensity'),
+ description: i18n.t(
+ 'Light intensity from cities, towns, and other sites with persistent lighting, including gas flares.'
+ ),
+ source: 'NOAA / Google Earth Engine',
+ sourceUrl:
+ 'https://explorer.earthengine.google.com/#detail/NOAA%2FDMSP-OLS%2FNIGHTTIME_LIGHTS',
+ periodType: 'YEARLY',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ band: 'stable_lights',
+ img: 'images/nighttime.png',
+ style: {
+ min: 0,
+ max: 63,
+ palette: [
+ '#ffffd4',
+ '#fee391',
+ '#fec44f',
+ '#fe9929',
+ '#ec7014',
+ '#cc4c02',
+ '#8c2d04',
+ ], // YlOrBr (ColorBrewer)
+ },
+ maskOperator: 'gte',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/population_WorldPop.js b/src/constants/earthEngineLayers/legacy/population_WorldPop.js
new file mode 100644
index 000000000..80847a1de
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/population_WorldPop.js
@@ -0,0 +1,46 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ legacy: true, // Kept for backward compability
+ layerId: 'WorldPop/POP',
+ datasetId: 'WorldPop/POP',
+ format: 'ImageCollection',
+ name: i18n.t('Population'),
+ unit: i18n.t('people per km²'),
+ description: i18n.t('Estimated number of people living in an area.'),
+ source: 'WorldPop / Google Earth Engine',
+ sourceUrl: 'https://explorer.earthengine.google.com/#detail/WorldPop%2FPOP',
+ img: 'images/population.png',
+ periodType: 'YEARLY',
+ band: 'population',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ {
+ type: 'eq',
+ arguments: ['UNadj', 'yes'],
+ },
+ ],
+ mosaic: true,
+ style: {
+ min: 0,
+ max: 1000,
+ palette: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ], // Reds (ColorBrewer)
+ },
+ methods: {
+ multiply: [100], // Convert from people/hectare to people/km2
+ },
+ maskOperator: 'gt',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/population_WorldPop_100m.js b/src/constants/earthEngineLayers/legacy/population_WorldPop_100m.js
new file mode 100644
index 000000000..eb7ec70b6
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/population_WorldPop_100m.js
@@ -0,0 +1,40 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ legacy: true, // Kept for backward compability
+ layerId: 'WorldPop/GP/100m/pop',
+ datasetId: 'WorldPop/GP/100m/pop',
+ name: i18n.t('Population'),
+ unit: i18n.t('people per hectare'),
+ description: i18n.t('Estimated number of people living in an area.'),
+ source: 'WorldPop / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop',
+ img: 'images/population.png',
+ defaultAggregations: ['sum', 'mean'],
+ periodType: 'YEARLY',
+ band: 'population',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ ],
+ mosaic: true,
+ style: {
+ min: 0,
+ max: 10,
+ palette: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ], // Reds (ColorBrewer)
+ },
+ maskOperator: 'gt',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/precipitation_pentad_CHIRPS.js b/src/constants/earthEngineLayers/legacy/precipitation_pentad_CHIRPS.js
new file mode 100644
index 000000000..105f20feb
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/precipitation_pentad_CHIRPS.js
@@ -0,0 +1,44 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+import { BY_YEAR } from '../../periods.js'
+
+export default {
+ legacy: true, // kept for backward compability
+ layer: EARTH_ENGINE_LAYER,
+ format: 'ImageCollection',
+ layerId: 'UCSB-CHG/CHIRPS/PENTAD',
+ datasetId: 'UCSB-CHG/CHIRPS/PENTAD',
+ name: i18n.t('Precipitation'),
+ unit: i18n.t('millimeter'),
+ description: i18n.t(
+ 'Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month.'
+ ),
+ source: 'UCSB / CHG / Google Earth Engine',
+ sourceUrl:
+ 'https://explorer.earthengine.google.com/#detail/UCSB-CHG%2FCHIRPS%2FPENTAD',
+ periodType: BY_YEAR,
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ band: 'precipitation',
+ aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
+ defaultAggregations: ['mean', 'min', 'max'],
+ img: 'images/precipitation.png',
+ style: {
+ min: 0,
+ max: 100,
+ palette: [
+ '#eff3ff',
+ '#c6dbef',
+ '#9ecae1',
+ '#6baed6',
+ '#3182bd',
+ '#08519c',
+ ], // Blues (ColorBrewer)
+ },
+ maskOperator: 'gte',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/legacy/temperature_MOD11A2v061.js b/src/constants/earthEngineLayers/legacy/temperature_MOD11A2v061.js
new file mode 100644
index 000000000..68055e2e8
--- /dev/null
+++ b/src/constants/earthEngineLayers/legacy/temperature_MOD11A2v061.js
@@ -0,0 +1,61 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../../layers.js'
+import { BY_YEAR } from '../../periods.js'
+
+export default {
+ legacy: true, // kept for backward compability
+ layer: EARTH_ENGINE_LAYER,
+ format: 'ImageCollection',
+ layerId: 'MODIS/006/MOD11A2',
+ datasetId: 'MODIS/006/MOD11A2',
+ img: 'images/temperature.png',
+ name: i18n.t('Temperature MODIS'),
+ unit: i18n.t('°C during daytime'),
+ description: i18n.t(
+ 'Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover.'
+ ),
+ source: 'NASA LP DAAC / Google Earth Engine',
+ sourceUrl:
+ 'https://explorer.earthengine.google.com/#detail/MODIS%2FMOD11A2',
+ aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
+ defaultAggregations: ['mean', 'min', 'max'],
+ band: 'LST_Day_1km',
+ periodType: BY_YEAR,
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ methods: [
+ {
+ name: 'toFloat',
+ arguments: [],
+ },
+ {
+ name: 'multiply',
+ arguments: [0.02],
+ },
+ {
+ name: 'subtract',
+ arguments: [273.15],
+ },
+ ],
+ style: {
+ min: 0,
+ max: 40,
+ palette: [
+ '#fff5f0',
+ '#fee0d2',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#ef3b2c',
+ '#cb181d',
+ '#a50f15',
+ '#67000d',
+ ], // Reds (ColorBrewer)
+ },
+ maskOperator: 'gte',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/population_age_sex_WorldPop.js b/src/constants/earthEngineLayers/population_age_sex_WorldPop.js
new file mode 100644
index 000000000..2b37ac5c2
--- /dev/null
+++ b/src/constants/earthEngineLayers/population_age_sex_WorldPop.js
@@ -0,0 +1,195 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
+ datasetId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
+ format: 'ImageCollection',
+ img: 'images/population.png',
+ name: i18n.t('Population age groups'),
+ description: i18n.t(
+ 'Estimated number of people living in an area, grouped by age and gender.'
+ ),
+ source: 'WorldPop / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj',
+ unit: i18n.t('people per hectare'),
+ resolution: {
+ spatial: i18n.t('~100 meters'),
+ temporal: i18n.t('Single point in time'),
+ temporalCoverage: i18n.t('2020'),
+ },
+ aggregations: ['min', 'max', 'mean', 'median', 'sum', 'stdDev', 'variance'],
+ defaultAggregations: ['sum', 'mean'],
+ unmaskAggregation: true,
+ periodType: 'YEARLY',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ ],
+ bands: [
+ {
+ id: 'M_0',
+ name: i18n.t('Male 0 - 1 years'),
+ },
+ {
+ id: 'M_1',
+ name: i18n.t('Male 1 - 4 years'),
+ },
+ {
+ id: 'M_5',
+ name: i18n.t('Male 5 - 9 years'),
+ },
+ {
+ id: 'M_10',
+ name: i18n.t('Male 10 - 14 years'),
+ },
+ {
+ id: 'M_15',
+ name: i18n.t('Male 15 - 19 years'),
+ },
+ {
+ id: 'M_20',
+ name: i18n.t('Male 20 - 24 years'),
+ },
+ {
+ id: 'M_25',
+ name: i18n.t('Male 25 - 29 years'),
+ },
+ {
+ id: 'M_30',
+ name: i18n.t('Male 30 - 34 years'),
+ },
+ {
+ id: 'M_35',
+ name: i18n.t('Male 35 - 39 years'),
+ },
+ {
+ id: 'M_40',
+ name: i18n.t('Male 40 - 44 years'),
+ },
+ {
+ id: 'M_45',
+ name: i18n.t('Male 45 - 49 years'),
+ },
+ {
+ id: 'M_50',
+ name: i18n.t('Male 50 - 54 years'),
+ },
+ {
+ id: 'M_55',
+ name: i18n.t('Male 55 - 59 years'),
+ },
+ {
+ id: 'M_60',
+ name: i18n.t('Male 60 - 64 years'),
+ },
+ {
+ id: 'M_65',
+ name: i18n.t('Male 65 - 69 years'),
+ },
+ {
+ id: 'M_70',
+ name: i18n.t('Male 70 - 74 years'),
+ },
+ {
+ id: 'M_75',
+ name: i18n.t('Male 75 - 79 years'),
+ },
+ {
+ id: 'M_80',
+ name: i18n.t('Male 80 years and above'),
+ },
+ {
+ id: 'F_0',
+ name: i18n.t('Female 0 - 1 years'),
+ },
+ {
+ id: 'F_1',
+ name: i18n.t('Female 1 - 4 years'),
+ },
+ {
+ id: 'F_5',
+ name: i18n.t('Female 5 - 9 years'),
+ },
+ {
+ id: 'F_10',
+ name: i18n.t('Female 10 - 14 years'),
+ },
+ {
+ id: 'F_15',
+ name: i18n.t('Female 15 - 19 years'),
+ },
+ {
+ id: 'F_20',
+ name: i18n.t('Female 20 - 24 years'),
+ },
+ {
+ id: 'F_25',
+ name: i18n.t('Female 25 - 29 years'),
+ },
+ {
+ id: 'F_30',
+ name: i18n.t('Female 30 - 34 years'),
+ },
+ {
+ id: 'F_35',
+ name: i18n.t('Female 35 - 39 years'),
+ },
+ {
+ id: 'F_40',
+ name: i18n.t('Female 40 - 44 years'),
+ },
+ {
+ id: 'F_45',
+ name: i18n.t('Female 45 - 49 years'),
+ },
+ {
+ id: 'F_50',
+ name: i18n.t('Female 50 - 54 years'),
+ },
+ {
+ id: 'F_55',
+ name: i18n.t('Female 55 - 59 years'),
+ },
+ {
+ id: 'F_60',
+ name: i18n.t('Female 60 - 64 years'),
+ },
+ {
+ id: 'F_65',
+ name: i18n.t('Female 65 - 69 years'),
+ },
+ {
+ id: 'F_70',
+ name: i18n.t('Female 70 - 74 years'),
+ },
+ {
+ id: 'F_75',
+ name: i18n.t('Female 75 - 79 years'),
+ },
+ {
+ id: 'F_80',
+ name: i18n.t('Female 80 years and above'),
+ },
+ ],
+ style: {
+ min: 0,
+ max: 10,
+ palette: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ],
+ },
+ maskOperator: 'gt',
+ opacity: 0.9,
+ mosaic: true,
+ tileScale: 4,
+}
diff --git a/src/constants/earthEngineLayers/population_total_WorldPop.js b/src/constants/earthEngineLayers/population_total_WorldPop.js
new file mode 100644
index 000000000..c4b3668db
--- /dev/null
+++ b/src/constants/earthEngineLayers/population_total_WorldPop.js
@@ -0,0 +1,47 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj_TOTAL',
+ datasetId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
+ format: 'ImageCollection',
+ img: 'images/population.png',
+ name: i18n.t('Population'),
+ description: i18n.t('Estimated number of people living in an area.'),
+ source: 'WorldPop / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj',
+ unit: i18n.t('people per hectare'),
+ resolution: {
+ spatial: i18n.t('~100 meters'),
+ temporal: i18n.t('Single point in time'),
+ temporalCoverage: i18n.t('2020'),
+ },
+ aggregations: ['min', 'max', 'mean', 'median', 'sum', 'stdDev', 'variance'],
+ defaultAggregations: ['sum', 'mean'],
+ unmaskAggregation: true,
+ periodType: 'YEARLY',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ ],
+ band: 'population',
+ style: {
+ min: 0,
+ max: 25,
+ palette: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ],
+ },
+ maskOperator: 'gt',
+ opacity: 0.9,
+ mosaic: true,
+}
diff --git a/src/constants/earthEngineLayers/precipitation_monthly_ERA5-Land.js b/src/constants/earthEngineLayers/precipitation_monthly_ERA5-Land.js
new file mode 100644
index 000000000..1a90817d2
--- /dev/null
+++ b/src/constants/earthEngineLayers/precipitation_monthly_ERA5-Land.js
@@ -0,0 +1,56 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+import { EE_MONTHLY } from '../periods.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'ECMWF/ERA5_LAND/MONTHLY_AGGR/total_precipitation_sum',
+ datasetId: 'ECMWF/ERA5_LAND/MONTHLY_AGGR',
+ format: 'ImageCollection',
+ img: 'images/precipitation.png',
+ name: i18n.t('Precipitation monthly'),
+ description: i18n.t(
+ 'Accumulated liquid and frozen water, including rain and snow, that falls to the surface. Combines model data with observations from across the world.'
+ ),
+ source: 'Copernicus Climate Data Store / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/ECMWF_ERA5_LAND_MONTHLY_AGGR',
+ unit: i18n.t('millimeter'),
+ resolution: {
+ spatial: i18n.t('~11 kilometers'),
+ temporal: i18n.t('Monthly'),
+ temporalCoverage: i18n.t('Febuary 1950 - One month ago'),
+ },
+ aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
+ defaultAggregations: ['mean', 'min', 'max'],
+ periodType: EE_MONTHLY,
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ band: 'total_precipitation_sum',
+ methods: [
+ {
+ name: 'multiply',
+ arguments: [1000],
+ },
+ ],
+ style: {
+ min: 0,
+ max: 700,
+ palette: [
+ '#f7fbff',
+ '#deebf7',
+ '#c6dbef',
+ '#9ecae1',
+ '#6baed6',
+ '#4292c6',
+ '#2171b5',
+ '#084594',
+ ],
+ },
+ maskOperator: 'gt',
+ opacity: 0.9,
+}
diff --git a/src/constants/earthEngineLayers/temperature_monthly_ERA5-Land.js b/src/constants/earthEngineLayers/temperature_monthly_ERA5-Land.js
new file mode 100644
index 000000000..6c76df9a8
--- /dev/null
+++ b/src/constants/earthEngineLayers/temperature_monthly_ERA5-Land.js
@@ -0,0 +1,60 @@
+import i18n from '@dhis2/d2-i18n'
+import { EARTH_ENGINE_LAYER } from '../layers.js'
+import { EE_MONTHLY } from '../periods.js'
+
+export default {
+ layer: EARTH_ENGINE_LAYER,
+ layerId: 'ECMWF/ERA5_LAND/MONTHLY_AGGR/temperature_2m',
+ datasetId: 'ECMWF/ERA5_LAND/MONTHLY_AGGR',
+ format: 'ImageCollection',
+ img: 'images/temperature.png',
+ name: i18n.t('Temperature monthly'),
+ description: i18n.t(
+ 'Temperature at 2m above the surface. Combines model data with observations from across the world.'
+ ),
+ source: 'Copernicus Climate Data Store / Google Earth Engine',
+ sourceUrl:
+ 'https://developers.google.com/earth-engine/datasets/catalog/ECMWF_ERA5_LAND_MONTHLY_AGGR',
+ unit: '°C',
+ resolution: {
+ spatial: i18n.t('~11 kilometers'),
+ temporal: i18n.t('Monthly'),
+ temporalCoverage: i18n.t('Febuary 1950 - One month ago'),
+ },
+ aggregations: ['min', 'max', 'mean', 'median', 'stdDev', 'variance'],
+ defaultAggregations: ['mean', 'min', 'max'],
+ periodType: EE_MONTHLY,
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ],
+ band: 'temperature_2m',
+ methods: [
+ {
+ name: 'toFloat',
+ arguments: [],
+ },
+ {
+ name: 'subtract',
+ arguments: [273.15],
+ },
+ ],
+ style: {
+ min: 0,
+ max: 35,
+ palette: [
+ '#fff5f0',
+ '#fee0d2',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#ef3b2c',
+ '#cb181d',
+ '#a50f15',
+ '#67000d',
+ ],
+ },
+ opacity: 0.9,
+}
diff --git a/src/constants/periods.js b/src/constants/periods.js
index 91d89ff18..16deca6d0 100644
--- a/src/constants/periods.js
+++ b/src/constants/periods.js
@@ -60,11 +60,15 @@ const LAST_FINANCIAL_YEAR = 'LAST_FINANCIAL_YEAR'
export const RELATIVE_PERIODS = 'RELATIVE_PERIODS'
export const START_END_DATES = 'START_END_DATES'
-export const periodTypes = () => [
- {
- id: RELATIVE_PERIODS,
- name: i18n.t('Relative'),
- },
+export const periodTypes = (includeRelativePeriods) => [
+ ...(includeRelativePeriods
+ ? [
+ {
+ id: RELATIVE_PERIODS,
+ name: i18n.t('Relative'),
+ },
+ ]
+ : []),
{
id: DAILY,
name: i18n.t('Daily'),
@@ -186,3 +190,7 @@ export const invalidSplitViewPeriods = [
LAST_52_WEEKS,
WEEKS_THIS_YEAR,
]
+
+// Period types used for Earth Engine layers
+export const BY_YEAR = 'BY_YEAR'
+export const EE_MONTHLY = 'EE_MONTHLY'
diff --git a/src/constants/settings.js b/src/constants/settings.js
index 1a42d38c0..016a66ef1 100644
--- a/src/constants/settings.js
+++ b/src/constants/settings.js
@@ -16,3 +16,8 @@ export const SYSTEM_SETTINGS = [
'keyHideBiMonthlyPeriods',
'keyDefaultBaseMap',
]
+
+export const MAPS_ADMIN_AUTHORITY_ID = 'F_EXTERNAL_MAP_LAYER_PUBLIC_ADD'
+
+export const MAPS_APP_NAMESPACE = 'DHIS2_MAPS_APP_CORE'
+export const MAPS_APP_KEY_MANAGED_LAYER_SOURCES = 'MANAGED_LAYER_SOURCES'
diff --git a/src/hooks/useManagedLayerSourcesStore.js b/src/hooks/useManagedLayerSourcesStore.js
new file mode 100644
index 000000000..4b37a1fb5
--- /dev/null
+++ b/src/hooks/useManagedLayerSourcesStore.js
@@ -0,0 +1,67 @@
+import { useDataEngine } from '@dhis2/app-runtime'
+import { useState, useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addLayerSource, removeLayerSource } from '../actions/layerSources.js'
+import {
+ MAPS_APP_NAMESPACE,
+ MAPS_APP_KEY_MANAGED_LAYER_SOURCES,
+} from '../constants/settings.js'
+
+const resourceLayerSourcesVisibility = `dataStore/${MAPS_APP_NAMESPACE}/${MAPS_APP_KEY_MANAGED_LAYER_SOURCES}`
+
+const useManagedLayerSourcesStore = () => {
+ const [error, setError] = useState()
+ const engine = useDataEngine()
+ const dispatch = useDispatch()
+ const managedLayerSources = useSelector((state) => state.layerSources)
+
+ // Add layer id to data store & redux store
+ const showLayerSource = useCallback(
+ (layerId) => {
+ if (!managedLayerSources.includes(layerId)) {
+ engine
+ .mutate({
+ resource: resourceLayerSourcesVisibility,
+ type: 'update',
+ data: [...managedLayerSources, layerId],
+ })
+ .then((response) => {
+ if ([200, 201].includes(response.httpStatusCode)) {
+ dispatch(addLayerSource(layerId))
+ } else {
+ setError(response)
+ }
+ })
+ .catch(setError)
+ }
+ },
+ [engine, dispatch, managedLayerSources]
+ )
+
+ // Remove layer id from data store & redux store
+ const hideLayerSource = useCallback(
+ (layerId) => {
+ if (managedLayerSources.includes(layerId)) {
+ engine
+ .mutate({
+ resource: resourceLayerSourcesVisibility,
+ type: 'update',
+ data: managedLayerSources.filter((l) => l !== layerId),
+ })
+ .then((response) => {
+ if ([200, 201].includes(response.httpStatusCode)) {
+ dispatch(removeLayerSource(layerId))
+ } else {
+ setError(response)
+ }
+ })
+ .catch(setError)
+ }
+ },
+ [engine, dispatch, managedLayerSources]
+ )
+
+ return { managedLayerSources, showLayerSource, hideLayerSource, error }
+}
+
+export default useManagedLayerSourcesStore
diff --git a/src/loaders/earthEngineLoader.js b/src/loaders/earthEngineLoader.js
index ec44ea9af..703f82ea3 100644
--- a/src/loaders/earthEngineLoader.js
+++ b/src/loaders/earthEngineLoader.js
@@ -6,9 +6,13 @@ import {
WARNING_NO_GEOMETRY_COORD,
ERROR_CRITICAL,
} from '../constants/alerts.js'
-import { getEarthEngineLayer } from '../constants/earthEngine.js'
+import { getEarthEngineLayer } from '../constants/earthEngineLayers/index.js'
import { getOrgUnitsFromRows } from '../util/analytics.js'
-import { hasClasses, getPeriodNameFromFilter } from '../util/earthEngine.js'
+import {
+ hasClasses,
+ getStaticFilterFromPeriod,
+ getPeriodFromFilter,
+} from '../util/earthEngine.js'
import { getDisplayProperty } from '../util/helpers.js'
import { toGeoJson } from '../util/map.js'
import { getRoundToPrecisionFn } from '../util/numbers.js'
@@ -19,7 +23,7 @@ import {
// Returns a promise
const earthEngineLoader = async (config) => {
- const { rows, aggregationType } = config
+ const { format, rows, aggregationType } = config
const orgUnits = getOrgUnitsFromRows(rows)
const coordinateField = getCoordinateField(config)
const alerts = []
@@ -80,6 +84,23 @@ const earthEngineLoader = async (config) => {
// From database as favorite
layerConfig = JSON.parse(config.config)
+ const { filter, params } = layerConfig
+
+ // Backward compability for layers saved before 2.41
+ if (filter) {
+ layerConfig.period = getPeriodFromFilter(filter, layerConfig.id)
+ delete layerConfig.filter
+ }
+
+ // Backward compability for layers saved before 2.41
+ if (params) {
+ layerConfig.style = params
+ if (params.palette) {
+ layerConfig.style.palette = params.palette.split(',')
+ }
+ delete layerConfig.params
+ }
+
// Backward compability for layers with periods saved before 2.36
// (could also be fixed in a db update script)
if (layerConfig.image) {
@@ -102,6 +123,11 @@ const earthEngineLoader = async (config) => {
}
}
+ // Backward compability for layers saved before 2.40
+ if (typeof layerConfig.params?.palette === 'string') {
+ layerConfig.params.palette = layerConfig.params.palette.split(',')
+ }
+
dataset = getEarthEngineLayer(layerConfig.id)
if (dataset) {
@@ -109,6 +135,7 @@ const earthEngineLoader = async (config) => {
}
delete config.config
+ delete config.filters // Backend returns empty filters array
} else {
dataset = getEarthEngineLayer(layerConfig.id)
}
@@ -119,9 +146,20 @@ const earthEngineLoader = async (config) => {
...layerConfig,
}
- const { unit, filter, description, source, sourceUrl, band, bands } = layer
+ const {
+ unit,
+ period,
+ filters,
+ description,
+ source,
+ sourceUrl,
+ band,
+ bands,
+ style,
+ maskOperator,
+ } = layer
+
const { name } = dataset || config
- const period = getPeriodNameFromFilter(filter)
const data =
Array.isArray(features) && features.length ? features : undefined
const hasBand = (b) =>
@@ -134,8 +172,9 @@ const earthEngineLoader = async (config) => {
const legend = {
...layer.legend,
+ items: Array.isArray(style) ? style : null,
title: name,
- period,
+ period: period?.name,
groups,
unit,
description,
@@ -144,15 +183,22 @@ const earthEngineLoader = async (config) => {
}
// Create/update legend items from params
- if (!hasClasses(aggregationType) && layer.params) {
- legend.items = createLegend(layer.params)
+ if (
+ format !== 'FeatureCollection' &&
+ !hasClasses(aggregationType) &&
+ style?.palette
+ ) {
+ legend.items = createLegend(style, !maskOperator)
}
+ const filter = getStaticFilterFromPeriod(period, filters)
+
return {
...layer,
legend,
name,
data,
+ filter,
alerts,
isLoaded: true,
isLoading: false,
@@ -161,36 +207,35 @@ const earthEngineLoader = async (config) => {
}
}
-export const createLegend = ({ min, max, palette }) => {
- const colors = palette.split(',')
- const step = (max - min) / (colors.length - (min > 0 ? 2 : 1))
+export const createLegend = ({ min, max, palette }, showBelowMin) => {
+ const step = (max - min) / (palette.length - (showBelowMin ? 2 : 1))
const precision = precisionRound(step, max)
const valueFormat = getRoundToPrecisionFn(precision)
- let from = min
+ let from = valueFormat(min)
let to = valueFormat(min + step)
- return colors.map((color, index) => {
+ return palette.map((color, index) => {
const item = { color }
- if (index === 0 && min > 0) {
+ if (index === 0 && showBelowMin) {
// Less than min
- item.from = 0
+ item.from = -Infinity
item.to = min
item.name = '< ' + min
to = min
- } else if (from < max) {
- item.from = from
- item.to = to
+ } else if (+from < max) {
+ item.from = +from
+ item.to = +to
item.name = from + ' - ' + to
} else {
// Higher than max
- item.from = from
+ item.from = +from
item.name = '> ' + from
}
from = to
- to = valueFormat(min + step * (index + (min > 0 ? 1 : 2)))
+ to = valueFormat(min + step * (index + (showBelowMin ? 1 : 2)))
return item
})
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 43230bb68..dae694828 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -8,6 +8,7 @@ import feature from './feature.js'
import featureProfile from './featureProfile.js'
import interpretation from './interpretation.js'
import layerEdit from './layerEdit.js'
+import layerSources from './layerSources.js'
import map from './map.js'
import orgUnitProfile from './orgUnitProfile.js'
import ui from './ui.js'
@@ -20,6 +21,7 @@ export default combineReducers({
download,
interpretation,
layerEdit,
+ layerSources,
map,
orgUnitProfile,
ui,
diff --git a/src/reducers/layerEdit.js b/src/reducers/layerEdit.js
index de2384c32..565c843b5 100644
--- a/src/reducers/layerEdit.js
+++ b/src/reducers/layerEdit.js
@@ -107,9 +107,9 @@ const layerEdit = (state = null, action) => {
return {
...state,
periodType: action.periodType.id,
- filters: action.clearPeriod
- ? removePeriodFromFilters(state.filters)
- : state.filters,
+ filters: action.keepPeriod
+ ? state.filters
+ : removePeriodFromFilters(state.filters),
}
case types.LAYER_EDIT_PERIOD_SET:
@@ -318,7 +318,7 @@ const layerEdit = (state = null, action) => {
newState = {
...state,
colorScale: action.colorScale,
- classes: action.colorScale.split(',').length,
+ classes: action.colorScale.length,
}
if (newState.styleDataItem) {
@@ -440,11 +440,11 @@ const layerEdit = (state = null, action) => {
band: action.payload,
}
- case types.LAYER_EDIT_PARAMS_SET:
+ case types.LAYER_EDIT_STYLE_SET:
return {
...state,
- params: {
- ...state.params,
+ style: {
+ ...state.style,
...action.payload,
},
}
@@ -569,6 +569,12 @@ const layerEdit = (state = null, action) => {
return newState
+ case types.LAYER_EDIT_EARTH_ENGINE_PERIOD_SET:
+ return {
+ ...state,
+ period: action.payload,
+ }
+
case types.LAYER_EDIT_FEATURE_STYLE_SET:
return {
...state,
diff --git a/src/reducers/layerSources.js b/src/reducers/layerSources.js
new file mode 100644
index 000000000..227901c05
--- /dev/null
+++ b/src/reducers/layerSources.js
@@ -0,0 +1,17 @@
+import * as types from '../constants/actionTypes.js'
+
+const layerSourcesReducer = (state = [], action) => {
+ switch (action.type) {
+ case types.LAYER_SOURCES_INIT:
+ return action.payload
+ case types.LAYER_SOURCE_ADD:
+ return [...state, action.payload]
+ case types.LAYER_SOURCE_REMOVE:
+ return state.filter((item) => item !== action.payload)
+
+ default:
+ return state
+ }
+}
+
+export default layerSourcesReducer
diff --git a/src/util/__tests__/app.spec.js b/src/util/__tests__/app.spec.js
index 4d5d5efcf..006dc5e46 100644
--- a/src/util/__tests__/app.spec.js
+++ b/src/util/__tests__/app.spec.js
@@ -104,7 +104,7 @@ describe('utils/app', () => {
expect(cfg.basemaps).toHaveLength(9)
expect(cfg.nameProperty).toEqual('displayName')
- expect(cfg.layerTypes).toHaveLength(13)
+ expect(cfg.defaultLayerSources).toHaveLength(6)
expect(cfg.currentUser.username).toEqual('admin')
expect(cfg.currentUser).toMatchObject({
id: 'xE7jOejl9FI',
@@ -160,7 +160,7 @@ describe('utils/app', () => {
expect(cfg.basemaps).toHaveLength(5)
expect(cfg.nameProperty).toEqual('displayShortName')
- expect(cfg.layerTypes).toHaveLength(13)
+ expect(cfg.defaultLayerSources).toHaveLength(6)
expect(cfg.currentUser).toMatchObject({
id: 'xE7jOejl9FI',
name: 'John Traore',
diff --git a/src/util/__tests__/earthEngine.spec.js b/src/util/__tests__/earthEngine.spec.js
new file mode 100644
index 000000000..8ab992157
--- /dev/null
+++ b/src/util/__tests__/earthEngine.spec.js
@@ -0,0 +1,57 @@
+import { getStaticFilterFromPeriod } from '../earthEngine.js'
+
+jest.mock('../../components/map/MapApi.js', () => ({
+ loadEarthEngineWorker: jest.fn(),
+}))
+
+describe('earth engine utils', () => {
+ it('get static filter from dynamic filter and period', () => {
+ let period = { id: '202312' }
+ let dynamicFilter = [
+ {
+ type: 'eq',
+ arguments: ['system:index', '$1'],
+ },
+ ]
+ let staticFilter = getStaticFilterFromPeriod(period, dynamicFilter)
+ expect(staticFilter).not.toEqual(dynamicFilter)
+ expect(staticFilter.length).toEqual(dynamicFilter.length)
+ expect(staticFilter[0].arguments[1]).toEqual(period.id)
+
+ period = { id: 2020 }
+ dynamicFilter = [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ ]
+ staticFilter = getStaticFilterFromPeriod(period, dynamicFilter)
+ expect(staticFilter).not.toEqual(dynamicFilter)
+ expect(staticFilter.length).toEqual(dynamicFilter.length)
+ expect(staticFilter[0].arguments[1]).toEqual(period.id)
+
+ period = { id: 2020 }
+ dynamicFilter = [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ {
+ type: 'eq',
+ arguments: ['UNadj', 'yes'],
+ },
+ ]
+ staticFilter = getStaticFilterFromPeriod(period, dynamicFilter)
+ expect(staticFilter.length).toEqual(dynamicFilter.length)
+ expect(staticFilter).not.toEqual(dynamicFilter)
+ expect(staticFilter[0]).not.toEqual(dynamicFilter[0])
+ expect(staticFilter[1]).toEqual(dynamicFilter[1])
+ expect(staticFilter[0].arguments[1]).toEqual(period.id)
+
+ let response = getStaticFilterFromPeriod(period, undefined)
+ expect(response).toBeUndefined()
+
+ response = getStaticFilterFromPeriod(undefined, dynamicFilter)
+ expect(response).toBeUndefined()
+ })
+})
diff --git a/src/util/__tests__/favorites.spec.js b/src/util/__tests__/favorites.spec.js
index 406033d71..cb82b6160 100644
--- a/src/util/__tests__/favorites.spec.js
+++ b/src/util/__tests__/favorites.spec.js
@@ -66,6 +66,7 @@ describe('cleanMapConfig', () => {
layer: 'earthEngine',
layerId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj_TOTAL',
datasetId: 'WorldPop/GP/100m/pop_age_sex_cons_unadj',
+ format: 'ImageCollection',
name: 'Population',
unit: 'people per hectare',
description:
@@ -74,15 +75,29 @@ describe('cleanMapConfig', () => {
sourceUrl:
'https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj',
defaultAggregations: ['sum', 'mean'],
- periodType: 'Yearly',
+ periodType: 'YEARLY',
+ useCentroid: true,
band: 'population',
+ filters: [
+ {
+ type: 'eq',
+ arguments: ['year', '$1'],
+ },
+ ],
mosaic: true,
- params: {
+ style: {
min: 0,
max: 25,
- palette:
- '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15',
+ palette: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ],
},
+ maskOperator: 'gt',
opacity: 0.9,
aggregationType: ['sum', 'mean'],
rows: [
@@ -160,12 +175,13 @@ describe('cleanMapConfig', () => {
defaultBasemapId: 'thedefaultBasemap',
})
+ console.log(JSON.stringify(cleanedConfig))
+
expect(cleanedConfig).toEqual({
basemap: 'thedefaultBasemap',
mapViews: [
{
areaRadius: 5000,
- config: '{"id":"WorldPop/GP/100m/pop_age_sex_cons_unadj_TOTAL","params":{"min":0,"max":25,"palette":"#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15"},"band":"population","aggregationType":["sum","mean"],"filter":[{"id":"ABW_2020","name":"2020","type":"eq","arguments":["year",2020]}]}',
layer: 'earthEngine',
name: 'Population',
opacity: 0.9,
@@ -185,6 +201,7 @@ describe('cleanMapConfig', () => {
],
},
],
+ config: '{"id":"WorldPop/GP/100m/pop_age_sex_cons_unadj_TOTAL","style":{"min":0,"max":25,"palette":["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"]},"band":"population","aggregationType":["sum","mean"]}',
},
],
})
diff --git a/src/util/__tests__/getMigratedMapConfig.spec.js b/src/util/__tests__/getMigratedMapConfig.spec.js
index 09526c407..7b078a832 100644
--- a/src/util/__tests__/getMigratedMapConfig.spec.js
+++ b/src/util/__tests__/getMigratedMapConfig.spec.js
@@ -172,3 +172,40 @@ test('getMigratedMapConfig with old GIS app format and Boundary layer', () => {
})
)
})
+
+test('getMigratedMapConfig with colorScale converted to an array', () => {
+ const config = {
+ id: 'mapId',
+ name: 'map name',
+ basemap: { id: 'osmStreet' },
+ mapViews: [
+ {
+ layer: 'thematic',
+ name: 'Thematic layer',
+ colorScale: '#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15',
+ },
+ ],
+ }
+
+ expect(getMigratedMapConfig(config, defaultBasemapId)).toEqual(
+ expect.objectContaining({
+ id: 'mapId',
+ name: 'map name',
+ basemap: { id: 'osmStreet' },
+ mapViews: [
+ {
+ layer: 'thematic',
+ name: 'Thematic layer',
+ colorScale: [
+ '#fee5d9',
+ '#fcbba1',
+ '#fc9272',
+ '#fb6a4a',
+ '#de2d26',
+ '#a50f15',
+ ],
+ },
+ ],
+ })
+ )
+})
diff --git a/src/util/__tests__/periods.spec.js b/src/util/__tests__/periods.spec.js
new file mode 100644
index 000000000..2751bdb8d
--- /dev/null
+++ b/src/util/__tests__/periods.spec.js
@@ -0,0 +1,440 @@
+import { getFixedPeriodsByType } from '../periods.js'
+
+describe('util/periods', () => {
+ test('getFixedPeriodsByType - RELATIVE', () => {
+ expect(
+ getFixedPeriodsByType({ periodType: 'RELATIVE', year: 2020 })
+ ).toBe(null)
+ })
+
+ test('getFixedPeriodsByType - YEAR not provided', () => {
+ expect(getFixedPeriodsByType({ periodType: 'MONTHLY' })).toStrictEqual(
+ []
+ )
+ })
+
+ test('getFixedPeriodsByType - MONTHLY first and last date', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'MONTHLY',
+ year: 2020,
+ firstDate: '2020-04-01',
+ lastDate: '2020-08-30',
+ periodsSettings: {
+ locale: 'en',
+ calendar: 'gregory',
+ },
+ })
+ ).toStrictEqual([
+ {
+ displayName: 'July 2020',
+ endDate: '2020-07-31',
+ id: '202007',
+ iso: '202007',
+ name: 'July 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-07-01',
+ },
+ {
+ displayName: 'June 2020',
+ endDate: '2020-06-30',
+ id: '202006',
+ iso: '202006',
+ name: 'June 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-06-01',
+ },
+ {
+ displayName: 'May 2020',
+ endDate: '2020-05-31',
+ id: '202005',
+ iso: '202005',
+ name: 'May 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-05-01',
+ },
+ {
+ displayName: 'April 2020',
+ endDate: '2020-04-30',
+ id: '202004',
+ iso: '202004',
+ name: 'April 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-04-01',
+ },
+ ])
+ })
+
+ test('getFixedPeriodsByType - YEARLY first and last date', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'YEARLY',
+ year: 2020,
+ firstDate: '2018-04-01',
+ lastDate: '2021-04-01',
+ periodsSettings: {
+ locale: 'en',
+ calendar: 'gregory',
+ },
+ })
+ ).toStrictEqual([
+ {
+ displayName: '2020',
+ endDate: '2020-12-31',
+ id: '2020',
+ iso: '2020',
+ name: '2020',
+ periodType: 'YEARLY',
+ startDate: '2020-01-01',
+ },
+ {
+ displayName: '2019',
+ endDate: '2019-12-31',
+ id: '2019',
+ iso: '2019',
+ name: '2019',
+ periodType: 'YEARLY',
+ startDate: '2019-01-01',
+ },
+ ])
+ })
+
+ test('getFixedPeriodsByType - YEARLY first date', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'YEARLY',
+ year: 2020,
+ firstDate: '2020-04-01',
+ })
+ ).toStrictEqual([])
+ })
+
+ test('getFixedPeriodsByType - FYAPR 2020', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'FYAPR',
+ year: 2020,
+ periodsSettings: {
+ locale: 'en',
+ calendar: 'gregory',
+ },
+ })
+ ).toStrictEqual([
+ {
+ displayName: 'April 2020 - March 2021',
+ endDate: '2021-03-31',
+ id: '2020April',
+ iso: '2020April',
+ name: 'April 2020 - March 2021',
+ periodType: 'FYAPR',
+ startDate: '2020-04-01',
+ },
+ {
+ displayName: 'April 2019 - March 2020',
+ endDate: '2020-03-31',
+ id: '2019April',
+ iso: '2019April',
+ name: 'April 2019 - March 2020',
+ periodType: 'FYAPR',
+ startDate: '2019-04-01',
+ },
+ {
+ displayName: 'April 2018 - March 2019',
+ endDate: '2019-03-31',
+ id: '2018April',
+ iso: '2018April',
+ name: 'April 2018 - March 2019',
+ periodType: 'FYAPR',
+ startDate: '2018-04-01',
+ },
+ {
+ displayName: 'April 2017 - March 2018',
+ endDate: '2018-03-31',
+ id: '2017April',
+ iso: '2017April',
+ name: 'April 2017 - March 2018',
+ periodType: 'FYAPR',
+ startDate: '2017-04-01',
+ },
+ {
+ displayName: 'April 2016 - March 2017',
+ endDate: '2017-03-31',
+ id: '2016April',
+ iso: '2016April',
+ name: 'April 2016 - March 2017',
+ periodType: 'FYAPR',
+ startDate: '2016-04-01',
+ },
+ {
+ displayName: 'April 2015 - March 2016',
+ endDate: '2016-03-31',
+ id: '2015April',
+ iso: '2015April',
+ name: 'April 2015 - March 2016',
+ periodType: 'FYAPR',
+ startDate: '2015-04-01',
+ },
+ {
+ displayName: 'April 2014 - March 2015',
+ endDate: '2015-03-31',
+ id: '2014April',
+ iso: '2014April',
+ name: 'April 2014 - March 2015',
+ periodType: 'FYAPR',
+ startDate: '2014-04-01',
+ },
+ {
+ displayName: 'April 2013 - March 2014',
+ endDate: '2014-03-31',
+ id: '2013April',
+ iso: '2013April',
+ name: 'April 2013 - March 2014',
+ periodType: 'FYAPR',
+ startDate: '2013-04-01',
+ },
+ {
+ displayName: 'April 2012 - March 2013',
+ endDate: '2013-03-31',
+ id: '2012April',
+ iso: '2012April',
+ name: 'April 2012 - March 2013',
+ periodType: 'FYAPR',
+ startDate: '2012-04-01',
+ },
+ {
+ displayName: 'April 2011 - March 2012',
+ endDate: '2012-03-31',
+ id: '2011April',
+ iso: '2011April',
+ name: 'April 2011 - March 2012',
+ periodType: 'FYAPR',
+ startDate: '2011-04-01',
+ },
+ ])
+ })
+
+ test('getFixedPeriodsByType YEARLY 2020', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'YEARLY',
+ year: 2020,
+ periodsSettings: {
+ locale: 'en',
+ calendar: 'gregory',
+ },
+ })
+ ).toStrictEqual([
+ {
+ displayName: '2020',
+ endDate: '2020-12-31',
+ id: '2020',
+ iso: '2020',
+ name: '2020',
+ periodType: 'YEARLY',
+ startDate: '2020-01-01',
+ },
+ {
+ displayName: '2019',
+ endDate: '2019-12-31',
+ id: '2019',
+ iso: '2019',
+ name: '2019',
+ periodType: 'YEARLY',
+ startDate: '2019-01-01',
+ },
+ {
+ displayName: '2018',
+ endDate: '2018-12-31',
+ id: '2018',
+ iso: '2018',
+ name: '2018',
+ periodType: 'YEARLY',
+ startDate: '2018-01-01',
+ },
+ {
+ displayName: '2017',
+ endDate: '2017-12-31',
+ id: '2017',
+ iso: '2017',
+ name: '2017',
+ periodType: 'YEARLY',
+ startDate: '2017-01-01',
+ },
+ {
+ displayName: '2016',
+ endDate: '2016-12-31',
+ id: '2016',
+ iso: '2016',
+ name: '2016',
+ periodType: 'YEARLY',
+ startDate: '2016-01-01',
+ },
+ {
+ displayName: '2015',
+ endDate: '2015-12-31',
+ id: '2015',
+ iso: '2015',
+ name: '2015',
+ periodType: 'YEARLY',
+ startDate: '2015-01-01',
+ },
+ {
+ displayName: '2014',
+ endDate: '2014-12-31',
+ id: '2014',
+ iso: '2014',
+ name: '2014',
+ periodType: 'YEARLY',
+ startDate: '2014-01-01',
+ },
+ {
+ displayName: '2013',
+ endDate: '2013-12-31',
+ id: '2013',
+ iso: '2013',
+ name: '2013',
+ periodType: 'YEARLY',
+ startDate: '2013-01-01',
+ },
+ {
+ displayName: '2012',
+ endDate: '2012-12-31',
+ id: '2012',
+ iso: '2012',
+ name: '2012',
+ periodType: 'YEARLY',
+ startDate: '2012-01-01',
+ },
+ {
+ displayName: '2011',
+ endDate: '2011-12-31',
+ id: '2011',
+ iso: '2011',
+ name: '2011',
+ periodType: 'YEARLY',
+ startDate: '2011-01-01',
+ },
+ ])
+ })
+ test('getFixedPeriodsByType - MONTHLY 2020', () => {
+ expect(
+ getFixedPeriodsByType({
+ periodType: 'MONTHLY',
+ year: 2020,
+ periodsSettings: {
+ locale: 'en',
+ calendar: 'gregory',
+ },
+ })
+ ).toStrictEqual([
+ {
+ displayName: 'December 2020',
+ endDate: '2020-12-31',
+ id: '202012',
+ iso: '202012',
+ name: 'December 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-12-01',
+ },
+ {
+ displayName: 'November 2020',
+ endDate: '2020-11-30',
+ id: '202011',
+ iso: '202011',
+ name: 'November 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-11-01',
+ },
+ {
+ displayName: 'October 2020',
+ endDate: '2020-10-31',
+ id: '202010',
+ iso: '202010',
+ name: 'October 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-10-01',
+ },
+ {
+ displayName: 'September 2020',
+ endDate: '2020-09-30',
+ id: '202009',
+ iso: '202009',
+ name: 'September 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-09-01',
+ },
+ {
+ displayName: 'August 2020',
+ endDate: '2020-08-31',
+ id: '202008',
+ iso: '202008',
+ name: 'August 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-08-01',
+ },
+ {
+ displayName: 'July 2020',
+ endDate: '2020-07-31',
+ id: '202007',
+ iso: '202007',
+ name: 'July 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-07-01',
+ },
+ {
+ displayName: 'June 2020',
+ endDate: '2020-06-30',
+ id: '202006',
+ iso: '202006',
+ name: 'June 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-06-01',
+ },
+ {
+ displayName: 'May 2020',
+ endDate: '2020-05-31',
+ id: '202005',
+ iso: '202005',
+ name: 'May 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-05-01',
+ },
+ {
+ displayName: 'April 2020',
+ endDate: '2020-04-30',
+ id: '202004',
+ iso: '202004',
+ name: 'April 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-04-01',
+ },
+ {
+ displayName: 'March 2020',
+ endDate: '2020-03-31',
+ id: '202003',
+ iso: '202003',
+ name: 'March 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-03-01',
+ },
+ {
+ displayName: 'February 2020',
+ endDate: '2020-02-29',
+ id: '202002',
+ iso: '202002',
+ name: 'February 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-02-01',
+ },
+ {
+ displayName: 'January 2020',
+ endDate: '2020-01-31',
+ id: '202001',
+ iso: '202001',
+ name: 'January 2020',
+ periodType: 'MONTHLY',
+ startDate: '2020-01-01',
+ },
+ ])
+ })
+})
diff --git a/src/util/app.js b/src/util/app.js
index 0e90df6c0..80c1c7007 100644
--- a/src/util/app.js
+++ b/src/util/app.js
@@ -67,8 +67,8 @@ const getBasemapList = (externalMapLayers, systemSettings) => {
.concat(externalBasemaps)
}
-const getLayerTypes = (externalMapLayers) => {
- const externalLayerTypes = externalMapLayers
+const getDefaultLayerSources = (externalMapLayers) => {
+ const externalLayerSources = externalMapLayers
.filter(
(layer) => layer.mapLayerPosition !== MAP_LAYER_POSITION_BASEMAP
)
@@ -76,7 +76,7 @@ const getLayerTypes = (externalMapLayers) => {
.map(createExternalOverlayLayer)
.filter((overlay) => layerTypes.includes(overlay.config.type))
- return getDefaultLayerTypes().concat(externalLayerTypes)
+ return getDefaultLayerTypes().concat(externalLayerSources)
}
export const providerDataTransformation = ({
@@ -107,5 +107,7 @@ export const providerDataTransformation = ({
externalMapLayers.externalMapLayers,
systemSettings
),
- layerTypes: getLayerTypes(externalMapLayers.externalMapLayers),
+ defaultLayerSources: getDefaultLayerSources(
+ externalMapLayers.externalMapLayers
+ ),
})
diff --git a/src/util/colors.js b/src/util/colors.js
index 37ad87c3d..f52e38a20 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -38,17 +38,15 @@ export const colorScales = [
]
// Returns a color brewer scale for a number of classes
-export const getColorPalette = (scale, classes) => {
- return colorbrewer[scale][classes].join(',')
-}
+export const getColorPalette = (scale, classes) => colorbrewer[scale][classes]
// Returns color scale name for a palette
-export const getColorScale = (palette) => {
- const classes = palette.split(',').length
- return colorScales.find(
- (name) => colorbrewer[name][classes].join(',') === palette
+// join(',') is used to compare two arrays of colors
+export const getColorScale = (palette) =>
+ colorScales.find(
+ (name) =>
+ colorbrewer[name][palette.length].join(',') === palette.join(',')
)
-}
export const defaultColorScaleName = 'YlOrBr'
export const defaultClasses = 5
diff --git a/src/util/earthEngine.js b/src/util/earthEngine.js
index 9e11d9b20..5310b9e3d 100644
--- a/src/util/earthEngine.js
+++ b/src/util/earthEngine.js
@@ -1,5 +1,7 @@
import i18n from '@dhis2/d2-i18n'
import { loadEarthEngineWorker } from '../components/map/MapApi.js'
+import { legacyNighttimeDatasetId } from '../constants/earthEngineLayers/legacy/nighttime_DMSP-OLS.js'
+import { EE_MONTHLY } from '../constants/periods.js'
import { apiFetch } from './api.js'
import { formatStartEndDate } from './time.js'
@@ -15,34 +17,55 @@ export const getStartEndDate = (data) =>
false
)
-export const getPeriodFromFilter = (filter) => {
+const getStaticFiltersFromDynamic = (filters, ...args) =>
+ filters.map((filter) => ({
+ ...filter,
+ arguments: filter.arguments.map((arg) => {
+ const match = arg.match(/^\$([0-9]+)$/)
+ return match ? args[match[1] - 1] : arg
+ }),
+ }))
+
+const getMonth = (data) => {
+ const date = new Date(data['system:time_start'])
+ const month = date.toLocaleString('default', { month: 'long' })
+ const year = date.getFullYear()
+ return `${month} ${year}`
+}
+
+export const getStaticFilterFromPeriod = (period, filters) => {
+ if (!period || !filters) {
+ return
+ }
+
+ return getStaticFiltersFromDynamic(filters, period.id)
+}
+
+const nonDigits = /^\D+/g
+
+// Only used for backward compatibility
+export const getPeriodFromFilter = (filter, datasetId) => {
if (!Array.isArray(filter) || !filter.length) {
return null
}
+ const isNightTimeLights = datasetId === legacyNighttimeDatasetId
+
const { id, name, year, arguments: args } = filter[0]
+ let periodId = id || args[1]
+
+ // Remove non-digits from periodId (needed for backward compatibility for population layers saved before 2.41)
+ if (!isNightTimeLights && nonDigits.test(periodId)) {
+ periodId = Number(periodId.replace(nonDigits, '')) // Remove non-digits
+ }
return {
- id: id || args[1],
+ id: periodId,
name,
year,
}
}
-// Returns period name from filter
-export const getPeriodNameFromFilter = (filter) => {
- const period = getPeriodFromFilter(filter)
-
- if (!period) {
- return null
- }
-
- const { name, year } = period
- const showYear = year && String(year) !== name
-
- return `${name}${showYear ? ` ${year}` : ''}`
-}
-
// Returns auth token for EE API as a promise
/* eslint-disable no-async-promise-executor */
export const getAuthToken = () =>
@@ -72,7 +95,6 @@ export const getAuthToken = () =>
...token,
})
})
-
/* eslint-enable no-async-promise-executor */
let workerPromise
@@ -89,31 +111,31 @@ const getWorkerInstance = async () => {
return workerPromise
}
-export const getPeriods = async (eeId, periodType) => {
- const getPeriod = ({ id, properties }) => {
- const year = new Date(properties['system:time_start']).getFullYear()
- const name =
- periodType === 'Yearly' ? String(year) : getStartEndDate(properties)
-
- // Remove when old population should not be supported
- if (eeId === 'WorldPop/POP') {
- return { id: name, name, year }
- }
+export const getPeriods = async (eeId, periodType, filters) => {
+ const useSystemIndex = filters.some((f) =>
+ f.arguments.includes('system:index')
+ )
- return { id, name, year }
+ const getPeriod = ({ id, properties }) => {
+ const year =
+ properties.year ||
+ new Date(properties['system:time_start']).getFullYear()
+
+ return periodType === 'YEARLY'
+ ? { id: useSystemIndex ? id : year, name: String(year) }
+ : {
+ id,
+ name:
+ periodType === EE_MONTHLY
+ ? getMonth(properties)
+ : getStartEndDate(properties),
+ year,
+ }
}
const eeWorker = await getWorkerInstance()
const { features } = await eeWorker.getPeriods(eeId)
+
return features.map(getPeriod)
}
-
-export const defaultFilters = ({ id, name, year }) => [
- {
- type: 'eq',
- arguments: ['system:index', String(id)],
- name,
- year,
- },
-]
diff --git a/src/util/favorites.js b/src/util/favorites.js
index c31bf9a96..db1d680e7 100644
--- a/src/util/favorites.js
+++ b/src/util/favorites.js
@@ -64,8 +64,8 @@ const validLayerProperties = [
'organisationUnitSelectionMode',
'orgUnitField',
'orgUnitFieldDisplayName',
- 'params',
- 'periodName',
+ 'style',
+ 'period',
'periodType',
'renderingStrategy',
'program',
@@ -134,14 +134,14 @@ const models2objects = (layer) => {
}
if (layerType === EARTH_ENGINE_LAYER) {
- const { layerId: id, band, params, aggregationType, filter } = layer
+ const { layerId: id, band, style, aggregationType, period } = layer
const eeConfig = {
id,
- params,
+ style,
band,
aggregationType,
- filter,
+ period,
}
// Removes undefined keys before stringify
@@ -152,11 +152,11 @@ const models2objects = (layer) => {
delete layer.layerId
delete layer.datasetId
- delete layer.params
+ delete layer.style
+ delete layer.period
delete layer.filter
delete layer.filters
delete layer.periodType
- delete layer.periodName
delete layer.aggregationType
delete layer.band
} else if (layerType === TRACKED_ENTITY_LAYER) {
@@ -211,6 +211,11 @@ const models2objects = (layer) => {
}
}
+ // Color scale needs to be stored as a string in analytical object
+ if (Array.isArray(layer.colorScale)) {
+ layer.colorScale = layer.colorScale.join(',')
+ }
+
return layer
}
diff --git a/src/util/getDefaultLayerTypes.js b/src/util/getDefaultLayerTypes.js
index 836c449b6..2c7e85db8 100644
--- a/src/util/getDefaultLayerTypes.js
+++ b/src/util/getDefaultLayerTypes.js
@@ -1,5 +1,4 @@
import i18n from '@dhis2/d2-i18n'
-import { earthEngineLayers } from '../constants/earthEngine.js'
import {
THEMATIC_LAYER,
EVENT_LAYER,
@@ -40,5 +39,4 @@ export const getDefaultLayerTypes = () => [
img: 'images/orgunits.png',
opacity: 1,
},
- ...earthEngineLayers().filter((l) => !l.legacy),
]
diff --git a/src/util/getMigratedMapConfig.js b/src/util/getMigratedMapConfig.js
index 312544941..e970c0fbb 100644
--- a/src/util/getMigratedMapConfig.js
+++ b/src/util/getMigratedMapConfig.js
@@ -2,7 +2,7 @@ import { isString, isObject, sortBy } from 'lodash/fp'
import { EXTERNAL_LAYER } from '../constants/layers.js'
export const getMigratedMapConfig = (config, defaultBasemapId) =>
- renameBoundaryLayerToOrgUnitLayer(
+ upgradeMapViews(
upgradeGisAppLayers(extractBasemap(config, defaultBasemapId))
)
@@ -79,15 +79,27 @@ const upgradeGisAppLayers = (config) => {
}
// Change layer name from boundary to orgUnit when loading an old map
+// Change colorScale from string to array
// TODO: Change in db with an upgrade script
-const renameBoundaryLayerToOrgUnitLayer = (config) => ({
- ...config,
- mapViews: config.mapViews.map((v) =>
- v.layer === 'boundary'
- ? {
- ...v,
- layer: 'orgUnit',
- }
- : v
- ),
-})
+const upgradeMapViews = (config) => {
+ if (
+ config.mapViews.find(
+ (view) =>
+ view.layer === 'boundary' || typeof view.colorScale === 'string'
+ )
+ ) {
+ return {
+ ...config,
+ mapViews: config.mapViews.map((view) => ({
+ ...view,
+ layer: view.layer === 'boundary' ? 'orgUnit' : view.layer,
+ colorScale:
+ typeof view.colorScale === 'string'
+ ? view.colorScale.split(',')
+ : view.colorScale,
+ })),
+ }
+ } else {
+ return config
+ }
+}
diff --git a/src/util/legend.js b/src/util/legend.js
index 9048f8572..fd1e49c33 100644
--- a/src/util/legend.js
+++ b/src/util/legend.js
@@ -73,11 +73,10 @@ export const getAutomaticLegendItems = (
colorScale = defaultColorScale
) => {
const items = data.length ? getLegendItems(data, method, classes) : []
- const colors = colorScale.split(',')
return items.map((item, index) => ({
...item,
- color: colors[index],
+ color: colorScale[index],
}))
}
/* eslint-enable max-params */
diff --git a/src/util/periods.js b/src/util/periods.js
index e8f6309e5..5c4b0e942 100644
--- a/src/util/periods.js
+++ b/src/util/periods.js
@@ -6,22 +6,43 @@ import { periodTypes, periodGroups } from '../constants/periods.js'
const getYearOffsetFromNow = (year) => year - new Date(Date.now()).getFullYear()
-export const getPeriodTypes = (hiddenPeriods = []) =>
- periodTypes().filter(({ group }) => !hiddenPeriods.includes(group))
+const filterPeriods = (periods, firstDate, lastDate) =>
+ periods.filter(
+ (p) =>
+ (!firstDate || p.startDate >= firstDate) &&
+ (!lastDate || p.endDate <= lastDate)
+ )
-export const getFixedPeriodsByType = (periodType, year, periodsSettings) => {
+export const getPeriodTypes = (includeRelativePeriods, hiddenPeriods = []) =>
+ periodTypes(includeRelativePeriods).filter(
+ ({ group }) => !hiddenPeriods.includes(group)
+ )
+
+export const getFixedPeriodsByType = ({
+ periodType,
+ year,
+ firstDate,
+ lastDate,
+ periodsSettings,
+}) => {
const period = getFixedPeriodsOptionsById(periodType, periodsSettings)
const forceDescendingForYearTypes = !!periodType.match(/^FY|YEARLY/)
const offset = getYearOffsetFromNow(year)
- const periods = period?.getPeriods({ offset, reversePeriods: true }) || null
- if (periods && forceDescendingForYearTypes) {
- // TODO: the reverse() is a workaround for a bug in the analytics
- // getPeriods function that no longer correctly reverses the order
- // for YEARLY and FY period types
- return periods.reverse()
+ let periods = period?.getPeriods({ offset, reversePeriods: true })
+
+ if (!periods) {
+ return null
}
- return periods
+
+ if (firstDate || lastDate) {
+ periods = filterPeriods(periods, firstDate, lastDate)
+ }
+
+ // TODO: the reverse() is a workaround for a bug in the analytics
+ // getPeriods function that no longer correctly reverses the order
+ // for YEARLY and FY period types
+ return forceDescendingForYearTypes ? periods.reverse() : periods
}
export const getRelativePeriods = (hiddenPeriods = []) =>
@@ -45,8 +66,8 @@ export const getPeriodNames = () => ({
}, {}),
})
-export const filterFuturePeriods = (periods) => {
- const now = new Date(Date.now())
+export const filterFuturePeriods = (periods, date) => {
+ const now = new Date(date || Date.now())
return periods.filter(({ startDate }) => new Date(startDate) < now)
}
diff --git a/yarn.lock b/yarn.lock
index 465505119..eeb64372d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2245,10 +2245,10 @@
i18next "^10.3"
moment "^2.24.0"
-"@dhis2/maps-gl@^3.9.2":
- version "3.9.2"
- resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-3.9.2.tgz#510a7d0f91bfbbdc6139283c8269506e3680bdc3"
- integrity sha512-AJQ8Q2qKiZ6+ieaiM7qdsZ5tjIEdUQKp/zCQoUaTpmgOPB86sM2BYV1fJ8tvSSqHU4Wo7jyoEoNku1zbpCQZRQ==
+"@dhis2/maps-gl@^4.0.0":
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-4.0.0.tgz#e97df2fbc78f787a0916224d7d54fb96b9c376db"
+ integrity sha512-TDEIBT6rFuEZGXnBxAqKhSmCXk3wtuCf/OrVZBKxT1qk0kHau71f3lzAXbWhYAuop8t6/DyJaIcQrUYMi1Xy3w==
dependencies:
"@mapbox/sphericalmercator" "^1.2.0"
"@turf/area" "^6.5.0"
@@ -2258,7 +2258,7 @@
"@turf/circle" "^6.5.0"
"@turf/length" "^6.5.0"
comlink "^4.4.1"
- fetch-jsonp "^1.2.3"
+ fetch-jsonp "^1.3.0"
lodash.throttle "^4.1.1"
maplibre-gl "^2.4.0"
polylabel "^1.1.0"
@@ -5330,13 +5330,16 @@ cachedir@^2.3.0:
resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
-call-bind@^1.0.0, call-bind@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
- integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+call-bind@^1.0.2, call-bind@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+ integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
dependencies:
- function-bind "^1.1.1"
- get-intrinsic "^1.0.2"
+ es-define-property "^1.0.0"
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.4"
+ set-function-length "^1.2.1"
callsites@^3.0.0:
version "3.1.0"
@@ -6669,6 +6672,15 @@ defer-to-connect@^1.0.1:
resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+define-data-property@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+ integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+ dependencies:
+ es-define-property "^1.0.0"
+ es-errors "^1.3.0"
+ gopd "^1.0.1"
+
define-lazy-prop@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -7307,6 +7319,18 @@ es-array-method-boxes-properly@^1.0.0:
resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+es-define-property@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+ integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+ dependencies:
+ get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+ integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
es-get-iterator@^1.1.2:
version "1.1.3"
resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
@@ -8027,10 +8051,10 @@ fd-slicer@~1.1.0:
dependencies:
pend "~1.2.0"
-fetch-jsonp@^1.2.3:
- version "1.2.3"
- resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.2.3.tgz#ae99a867095cb1ce5c39fac601d70d1084db122f"
- integrity sha512-C13k1o7R9JTN1wmhKkrW5bU/00LwixXnkufQUR6Rbf4KCS0i8mycQaovt4WVbHnA2NKgi7Ryp9Whpy/CGcij6Q==
+fetch-jsonp@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.3.0.tgz#99b8c25bd100938d7a7a6b5db9d6b81f32a10809"
+ integrity sha512-hxCYGvmANEmpkHpeWY8Kawfa5Z1t2csTpIClIDG/0S92eALWHRU1RnGaj86Tf5Cc0QF+afSa4SQ4pFB2rFM5QA==
figures@^3.0.0, figures@^3.2.0:
version "3.2.0"
@@ -8350,10 +8374,10 @@ fsevents@^2.3.2, fsevents@~2.3.2:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-function-bind@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
- integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+function-bind@^1.1.1, function-bind@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+ integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
version "1.1.5"
@@ -8407,14 +8431,16 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
- integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
+get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.4:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+ integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
dependencies:
- function-bind "^1.1.1"
- has "^1.0.3"
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ has-proto "^1.0.1"
has-symbols "^1.0.3"
+ hasown "^2.0.0"
get-own-enumerable-property-symbols@^3.0.0:
version "3.0.2"
@@ -8754,12 +8780,12 @@ has-flag@^4.0.0:
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-has-property-descriptors@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
- integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+ integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
dependencies:
- get-intrinsic "^1.1.1"
+ es-define-property "^1.0.0"
has-proto@^1.0.1:
version "1.0.1"
@@ -8838,6 +8864,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
+hasown@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+ integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+ dependencies:
+ function-bind "^1.1.2"
+
he@1.2.0, he@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -11724,10 +11757,10 @@ object-hash@^3.0.0:
resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
-object-inspect@^1.12.2, object-inspect@^1.7.0, object-inspect@^1.9.0:
- version "1.12.3"
- resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
- integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+object-inspect@^1.12.2, object-inspect@^1.13.1, object-inspect@^1.7.0:
+ version "1.13.2"
+ resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+ integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
object-is@^1.0.2, object-is@^1.1.2, object-is@^1.1.5:
version "1.1.5"
@@ -14215,6 +14248,18 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+set-function-length@^1.2.1:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+ integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+ dependencies:
+ define-data-property "^1.1.4"
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.4"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.2"
+
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -14295,13 +14340,14 @@ shell-quote@^1.4.2, shell-quote@^1.6.1, shell-quote@^1.7.3:
integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
side-channel@^1.0.4:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
- integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+ integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
dependencies:
- call-bind "^1.0.0"
- get-intrinsic "^1.0.2"
- object-inspect "^1.9.0"
+ call-bind "^1.0.7"
+ es-errors "^1.3.0"
+ get-intrinsic "^1.2.4"
+ object-inspect "^1.13.1"
signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
version "3.0.7"
- {params &&
-)
+ )
+}
StyleTab.propTypes = {
hasOrgUnitField: PropTypes.bool.isRequired,
- unit: PropTypes.string.isRequired,
- params: PropTypes.shape({
- max: PropTypes.number.isRequired,
- min: PropTypes.number.isRequired,
- palette: PropTypes.string.isRequired,
- }),
+ showBelowMin: PropTypes.bool,
+ style: PropTypes.oneOfType([
+ PropTypes.array,
+ PropTypes.shape({
+ color: PropTypes.string,
+ max: PropTypes.number,
+ min: PropTypes.number,
+ palette: PropTypes.array,
+ strokeWidth: PropTypes.number,
+ }),
+ ]),
+ unit: PropTypes.string,
}
export default StyleTab
diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js
index 40be97f08..b7148e3c0 100644
--- a/src/components/edit/thematic/ThematicDialog.js
+++ b/src/components/edit/thematic/ThematicDialog.js
@@ -422,6 +422,7 @@ class ThematicDialog extends Component {
+
- {params &&
+ {isClassStyle &&
+ {isClassStyle && (
+ trigger hide, n > trigger show
+ onClick={() => (isAdded ? onHide(layerId) : onShow(layerId))}
+ >
+ {}}
+ />
+ 
+
+ )
+}
+
+LayerSource.propTypes = {
+ isAdded: PropTypes.bool.isRequired,
+ layerSource: PropTypes.object.isRequired,
+ onHide: PropTypes.func.isRequired,
+ onShow: PropTypes.func.isRequired,
+}
+
+export default LayerSource
diff --git a/src/components/layerSources/ManageLayerSourcesButton.js b/src/components/layerSources/ManageLayerSourcesButton.js
new file mode 100644
index 000000000..9f3b32c2c
--- /dev/null
+++ b/src/components/layerSources/ManageLayerSourcesButton.js
@@ -0,0 +1,35 @@
+import { useCachedDataQuery } from '@dhis2/analytics'
+import i18n from '@dhis2/d2-i18n'
+import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { MAPS_ADMIN_AUTHORITY_ID } from '../../constants/settings.js'
+import styles from './styles/ManageLayerSourcesButton.module.css'
+
+const ManageLayerSourcesButton = ({ onClick }) => {
+ const { currentUser } = useCachedDataQuery()
+ const isMapsAdmin = currentUser.authorities.has(MAPS_ADMIN_AUTHORITY_ID)
+
+ if (!isMapsAdmin) {
+ return null
+ }
+
+ return (
+
+
+ {name}
+{description}
+
+ {i18n.t('Source')}: {source}
+
+
+
+
+ )
+}
+
+ManageLayerSourcesButton.propTypes = {
+ onClick: PropTypes.func.isRequired,
+}
+
+export default ManageLayerSourcesButton
diff --git a/src/components/layerSources/ManageLayerSourcesModal.js b/src/components/layerSources/ManageLayerSourcesModal.js
new file mode 100644
index 000000000..89f6a371d
--- /dev/null
+++ b/src/components/layerSources/ManageLayerSourcesModal.js
@@ -0,0 +1,68 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+ Modal,
+ ModalTitle,
+ ModalContent,
+ ModalActions,
+ Button,
+ ButtonStrip,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import earthEngineLayers from '../../constants/earthEngineLayers/index.js'
+import useManagedLayerSourcesStore from '../../hooks/useManagedLayerSourcesStore.js'
+import LayerSource from './LayerSource.js'
+import styles from './styles/ManageLayerSourcesModal.module.css'
+
+const nonLegacyEarthEngineLayers = earthEngineLayers
+ .filter((l) => !l.legacy)
+ .sort((a, b) => a.name.localeCompare(b.name))
+const layerSources = [...nonLegacyEarthEngineLayers]
+
+const ManageLayerSourcesModal = ({ onClose }) => {
+ const { managedLayerSources, showLayerSource, hideLayerSource } =
+ useManagedLayerSourcesStore()
+
+ return (
+
+ {i18n.t(
+ 'Choose which layer sources are available to add to maps. This selection applies to all users.'
+ )}
+
+ {layerSources.map((layerSource) => (
+
@@ -24,7 +32,14 @@ const AddLayerButton = () => {
{isOpen && (
-
-
- )
- }
-
- setPeriods() {
- const { periodType, period, periodsSettings } = this.props
- const year = this.state.year || getYear(period && period.startDate)
- let periods
+ // Keep the same period position when year changes
+ useEffect(() => {
+ if (year !== prevYear && prevPeriodIndex >= 0) {
+ const newPeriod = periods[prevPeriodIndex]
- if (periodType) {
- periods = getFixedPeriodsByType(periodType, year, periodsSettings)
- } else if (period) {
- periods = [period] // If period is loaded in favorite
+ if (newPeriod) {
+ onChange(newPeriod)
+ }
}
+ }, [year, prevYear, periods, prevPeriodIndex, onChange])
- this.setState({ periods, year })
+ if (!periods) {
+ return null
}
- nextYear = () => {
- this.changeYear(1)
- }
-
- previousYear = () => {
- this.changeYear(-1)
- }
-
- changeYear = (change) => {
- const { periodType, periodsSettings } = this.props
- const year = this.state.year + change
+ const value =
+ period && periods.some((p) => p.id === period.id) ? period.id : null
+
+ return (
+
-
- }
- onClick={this.previousYear}
- dataTest="button-previous-year"
- />
-
-
- }
- onClick={this.nextYear}
- dataTest="button-next-year"
- />
-
-
- )}
-
+
+ )
+}
- this.setState({
- year,
- periods: getFixedPeriodsByType(periodType, year, periodsSettings),
- })
- }
+PeriodSelect.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ className: PropTypes.string,
+ errorText: PropTypes.string,
+ firstDate: PropTypes.string,
+ lastDate: PropTypes.string,
+ period: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ startDate: PropTypes.string,
+ }),
+ periodType: PropTypes.string,
+ periodsSettings: PropTypes.object,
}
export default PeriodSelect
diff --git a/src/components/periods/PeriodTypeSelect.js b/src/components/periods/PeriodTypeSelect.js
index 3c04c6e98..2122545b6 100644
--- a/src/components/periods/PeriodTypeSelect.js
+++ b/src/components/periods/PeriodTypeSelect.js
@@ -1,7 +1,7 @@
+import { useCachedDataQuery } from '@dhis2/analytics'
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
-import { RELATIVE_PERIODS } from '../../constants/periods.js'
+import React, { useMemo, useEffect } from 'react'
import { getPeriodTypes, getRelativePeriods } from '../../util/periods.js'
import { SelectField } from '../core/index.js'
@@ -9,31 +9,38 @@ const PeriodTypeSelect = ({
onChange,
className,
errorText,
- hiddenPeriods,
+ includeRelativePeriods,
period,
value,
}) => {
+ const { systemSettings } = useCachedDataQuery()
+ const { hiddenPeriods } = systemSettings
+
+ const periodTypes = useMemo(
+ () => getPeriodTypes(includeRelativePeriods, hiddenPeriods),
+ [includeRelativePeriods, hiddenPeriods]
+ )
+
+ // Set default period type
useEffect(() => {
- const relativePeriodType = {
- id: RELATIVE_PERIODS,
- name: i18n.t('Relative'),
- }
+ if (!value) {
+ const isRelativePeriod = !!(
+ includeRelativePeriods &&
+ period &&
+ getRelativePeriods().find((p) => p.id === period.id)
+ )
- if (!value && period) {
- if (getRelativePeriods().find((p) => p.id === period.id)) {
- // false will not clear the period dropdown
- onChange(relativePeriodType, false)
+ if (!period || isRelativePeriod) {
+ // default to first period type
+ onChange(periodTypes[0], isRelativePeriod)
}
- } else if (!value) {
- // set relativePeriods as default
- onChange(relativePeriodType)
}
- }, [value, period, onChange])
+ }, [value, period, periodTypes, includeRelativePeriods, onChange])
return (
+
+ }
+ onClick={() => changeYear(-1)}
+ dataTest="button-previous-year"
+ />
+
+
+ }
+ onClick={() => changeYear(1)}
+ dataTest="button-next-year"
+ />
+
+
+ )}
+