feat: use PeriodDimension in ThematicDialog

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-10-23T12:50:51.401Z\n"
-"PO-Revision-Date: 2024-10-23T12:50:51.401Z\n"
+"POT-Creation-Date: 2024-12-09T14:15:43.944Z\n"
+"PO-Revision-Date: 2024-12-09T14:15:43.944Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -461,6 +461,12 @@ msgstr "High radius should be greater than low radius"
 msgid "Radius should be between {{min}} and {{max}}"
 msgstr "Radius should be between {{min}} and {{max}}"
 
+msgid "Choose from presets"
+msgstr "Choose from presets"
+
+msgid "Define start - end dates"
+msgstr "Define start - end dates"
+
 msgid "Indicator group is required"
 msgstr "Indicator group is required"
 
@@ -921,24 +927,33 @@ msgstr "Period type"
 msgid "Start/end dates"
 msgstr "Start/end dates"
 
+msgid "Select {{number}} or more periods to enable timeline or split map views."
+msgstr "Select {{number}} or more periods to enable timeline or split map views."
+
 msgid "Only one timeline is allowed."
 msgstr "Only one timeline is allowed."
 
 msgid "Remove other layers to enable split map views."
 msgstr "Remove other layers to enable split map views."
 
-msgid "Display periods"
-msgstr "Display periods"
+msgid "Only up to {{number}} periods can be selected to enable split map views."
+msgstr "Only up to {{number}} periods can be selected to enable split map views."
 
-msgid "Single (aggregate)"
-msgstr "Single (aggregate)"
+msgid "Period display mode"
+msgstr "Period display mode"
+
+msgid "Single (combine periods)"
+msgstr "Single (combine periods)"
 
 msgid "Timeline"
 msgstr "Timeline"
 
 msgid "Split map views"
 msgstr "Split map views"
 
+msgid "Start and end dates are inclusive and will be included in the outputs."
+msgstr "Start and end dates are inclusive and will be included in the outputs."
+
 msgid "Start date"
 msgstr "Start date"
 

package.json

@@ -41,7 +41,7 @@
         "start-server-and-test": "^2.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.8.4",
+        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#8c539c2cee08357ef6c7daaab2521e3df6ef7801",
         "@dhis2/app-runtime": "^3.11.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

src/actions/layerEdit.js

@@ -185,6 +185,12 @@ export const setPeriodType = (periodType, keepPeriod) => ({
     keepPeriod,
 })
 
+// Set periods (thematic)
+export const setPeriods = (periods) => ({
+    type: types.LAYER_EDIT_PERIODS_SET,
+    periods,
+})
+
 // Set period (event & thematic)
 export const setPeriod = (period) => ({
     type: types.LAYER_EDIT_PERIOD_SET,

src/components/core/RadioGroup.js

@@ -12,6 +12,8 @@ const RadioGroup = ({
     helpText,
     display,
     onChange,
+    boldLabel,
+    compact,
     children,
     dataTest,
 }) => {
@@ -28,10 +30,20 @@ const RadioGroup = ({
             <div
                 className={cx(styles.radioGroup, {
                     [styles.row]: display === 'row',
+                    [styles.compact]: compact,
                 })}
             >
                 <FieldGroup
-                    label={label}
+                    label={
+                        <span
+                            className={cx({
+                                [styles.boldLabel]: boldLabel,
+                                [styles.compact]: compact,
+                            })}
+                        >
+                            {label}
+                        </span>
+                    }
                     helpText={helpText}
                     dataTest={dataTest}
                 >
@@ -44,7 +56,9 @@ const RadioGroup = ({
 
 RadioGroup.propTypes = {
     onChange: PropTypes.func.isRequired,
+    boldLabel: PropTypes.bool,
     children: PropTypes.arrayOf(PropTypes.node),
+    compact: PropTypes.bool,
     dataTest: PropTypes.string,
     display: PropTypes.string,
     helpText: PropTypes.string,

src/components/core/styles/RadioGroup.module.css

@@ -10,6 +10,10 @@
     height: 36px;
 }
 
+.radioGroup.compact fieldset>div>div>label {
+    height: 20px;
+}
+
 .row {
     margin: var(--spacers-dp8) 0;
 }
@@ -21,3 +25,7 @@
 .row fieldset > div > div > label {
     margin-right: var(--spacers-dp16);
 }
+
+.boldLabel {
+    font-weight: bold;
+}

src/components/datatable/BottomPanel.js

@@ -8,6 +8,7 @@ import {
     LAYERS_PANEL_WIDTH,
     RIGHT_PANEL_WIDTH,
 } from '../../constants/layout.js'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import { useWindowDimensions } from '../WindowDimensionsProvider.js'
 import DataTable from './DataTable.js'
 import ErrorBoundary from './ErrorBoundary.js'
@@ -37,6 +38,8 @@ const BottomPanel = () => {
     const tableWidth = width - layersWidth - rightPanelWidth
     const dataTableControlsHeight = 20
 
+    useKeyDown('Escape', () => dispatch(closeDataTable()), true)
+
     return (
         <div
             ref={panelRef}

src/components/datatable/DataTable.js

@@ -200,7 +200,7 @@ const Table = ({ availableHeight, availableWidth }) => {
     })
 
     useEffect(() => {
-        /* The combination of automtic table layout and virtual scrolling
+        /* The combination of automatic table layout and virtual scrolling
          * causes a content shift when scrolling and filtering because the
          * cells in the DOM have a different content length which causes the
          * columns to have a different width. To avoid that we measure the

src/components/download/DownloadSettings.js

@@ -3,6 +3,7 @@ import { Button, ButtonStrip } from '@dhis2/ui'
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { setDownloadConfig } from '../../actions/download.js'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import { standardizeFilename } from '../../util/dataDownload.js'
 import { downloadMapImage, downloadSupport } from '../../util/export-image.js'
 import { getSplitViewLayer } from '../../util/helpers.js'
@@ -105,6 +106,8 @@ const DownloadSettings = () => {
         }
     }, [isPushAnalytics])
 
+    useKeyDown('Escape', closeDownloadMode)
+
     const isSupported = downloadSupport() && !error
     const isSplitView = !!getSplitViewLayer(mapViews)
     const showMarginsCheckbox = false // Not in use

src/components/edit/LayerEdit.js

@@ -13,6 +13,7 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { addLayer, updateLayer, cancelLayer } from '../../actions/layers.js'
 import { EARTH_ENGINE_LAYER } from '../../constants/layers.js'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import { useOrgUnits } from '../OrgUnitsProvider.js'
 import EarthEngineDialog from './earthEngine/EarthEngineDialog.js'
 import EventDialog from './event/EventDialog.js'
@@ -72,6 +73,9 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         }
     }
 
+    useKeyDown('Escape', cancelLayer)
+    useKeyDown('Enter', onValidateLayer)
+
     if (!layer) {
         return null
     }
@@ -94,7 +98,12 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         : i18n.t('Add new {{name}} layer', { name })
 
     return (
-        <Modal position="middle" dataTest="layeredit">
+        <Modal
+            position="middle"
+            dataTest="layeredit"
+            large
+            onClose={cancelLayer}
+        >
             <ModalTitle>{title}</ModalTitle>
             <ModalContent>
                 <div className={styles.content}>

src/components/edit/event/EventDialog.js

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { NoticeBox } from '@dhis2/ui'
+import { NoticeBox, IconErrorFilled24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
@@ -18,8 +18,6 @@ import {
     setOrgUnits,
 } from '../../../actions/layerEdit.js'
 import {
-    DEFAULT_START_DATE,
-    DEFAULT_END_DATE,
     EVENT_COLOR,
     EVENT_RADIUS,
     EVENT_BUFFER,
@@ -47,7 +45,7 @@ import FilterGroup from '../../dataItem/filter/FilterGroup.js'
 import StyleByDataItem from '../../dataItem/StyleByDataItem.js'
 import OrgUnitSelect from '../../orgunits/OrgUnitSelect.js'
 import RelativePeriodSelect from '../../periods/RelativePeriodSelect.js'
-import StartEndDates from '../../periods/StartEndDates.js'
+import StartEndDate from '../../periods/StartEndDate.js'
 import ProgramSelect from '../../program/ProgramSelect.js'
 import ProgramStageSelect from '../../program/ProgramStageSelect.js'
 import BufferRadius from '../shared/BufferRadius.js'
@@ -82,6 +80,7 @@ class EventDialog extends Component {
         legendSet: PropTypes.object,
         method: PropTypes.number,
         orgUnits: PropTypes.object,
+        periodsSettings: PropTypes.object,
         program: PropTypes.shape({
             id: PropTypes.string.isRequired,
             trackedEntityType: PropTypes.object,
@@ -116,29 +115,25 @@ class EventDialog extends Component {
             endDate,
             orgUnits,
             setPeriod,
-            setStartDate,
-            setEndDate,
             setOrgUnits,
         } = this.props
 
         const period = getPeriodFromFilters(filters)
         const { keyAnalysisRelativePeriod: defaultPeriod, hiddenPeriods } =
             systemSettings
 
+        const hasDate = startDate !== undefined && endDate !== undefined
+
         // Set default period from system settings
         if (
             !period &&
-            !startDate &&
-            !endDate &&
+            !hasDate &&
             defaultPeriod &&
             isPeriodAvailable(defaultPeriod, hiddenPeriods)
         ) {
             setPeriod({
                 id: defaultPeriod,
             })
-        } else if (!startDate && !endDate) {
-            setStartDate(DEFAULT_START_DATE)
-            setEndDate(DEFAULT_END_DATE)
         }
 
         // Set org unit tree roots as default
@@ -151,18 +146,38 @@ class EventDialog extends Component {
     }
 
     componentDidUpdate(prev) {
-        const { validateLayer, onLayerValidation } = this.props
+        const {
+            validateLayer,
+            onLayerValidation,
+            filters,
+            startDate,
+            endDate,
+            setStartDate,
+            setEndDate,
+        } = this.props
+        const { periodError } = this.state
 
         if (validateLayer && validateLayer !== prev.validateLayer) {
             onLayerValidation(this.validate())
         }
+
+        const hasDate = startDate !== undefined || endDate !== undefined
+        if (hasDate && getPeriodFromFilters(filters) !== undefined) {
+            setStartDate()
+            setEndDate()
+            this.setErrorState('periodError', null, 'period')
+        } else if (
+            periodError &&
+            (startDate !== prev.startDate || endDate !== prev.endDate)
+        ) {
+            this.setErrorState('periodError', null, 'period')
+        }
     }
 
     render() {
         const {
             // layer options
             columns = [],
-            endDate,
             eventClustering,
             eventStatus,
             eventCoordinateField,
@@ -173,7 +188,9 @@ class EventDialog extends Component {
             program,
             programStage,
             startDate,
+            endDate,
             legendSet,
+            periodsSettings,
         } = this.props
 
         const {
@@ -272,12 +289,20 @@ class EventDialog extends Component {
                                 className={styles.select}
                             />
                             {period && period.id === START_END_DATES && (
-                                <StartEndDates
+                                <StartEndDate
                                     startDate={startDate}
                                     endDate={endDate}
-                                    errorText={periodError}
+                                    setStartDate={setStartDate}
+                                    setEndDate={setEndDate}
+                                    periodsSettings={periodsSettings}
                                 />
                             )}
+                            {periodError && (
+                                <div key="error" className={styles.error}>
+                                    <IconErrorFilled24 />
+                                    {periodError}
+                                </div>
+                            )}
                         </div>
                     )}
                     {tab === 'orgunits' && (

src/components/edit/styles/LayerDialog.module.css

@@ -80,6 +80,11 @@
 .error {
     margin-top: var(--spacers-dp8);
     color: var(--theme-error);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    gap: 8px;
 }
 
 .indent {
@@ -109,6 +114,13 @@
     margin: 8px 0 0 -8px;
 }
 
+/* Thematic */
+
+.navigation {
+    flex-grow: 0; 
+    margin-bottom: 8px;
+}
+
 /* Tracked entity */
 
 .teiCheckbox {