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-02T09:29:29.011Z\n"
+"PO-Revision-Date: 2024-12-02T09:29:29.011Z\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"
 
@@ -927,8 +933,8 @@ 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 "Period display mode"
+msgstr "Period display mode"
 
 msgid "Single (aggregate)"
 msgstr "Single (aggregate)"
@@ -1413,6 +1419,108 @@ msgstr "Financial year (Start July)"
 msgid "Financial year (Start April)"
 msgstr "Financial year (Start April)"
 
+msgid "Today"
+msgstr "Today"
+
+msgid "Yesterday"
+msgstr "Yesterday"
+
+msgid "Last 3 days"
+msgstr "Last 3 days"
+
+msgid "Last 7 days"
+msgstr "Last 7 days"
+
+msgid "Last 14 days"
+msgstr "Last 14 days"
+
+msgid "This week"
+msgstr "This week"
+
+msgid "Last week"
+msgstr "Last week"
+
+msgid "Last 4 weeks"
+msgstr "Last 4 weeks"
+
+msgid "Last 12 weeks"
+msgstr "Last 12 weeks"
+
+msgid "Last 52 weeks"
+msgstr "Last 52 weeks"
+
+msgid "Weeks this year"
+msgstr "Weeks this year"
+
+msgid "This month"
+msgstr "This month"
+
+msgid "Last month"
+msgstr "Last month"
+
+msgid "Last 3 months"
+msgstr "Last 3 months"
+
+msgid "Last 6 months"
+msgstr "Last 6 months"
+
+msgid "Last 12 months"
+msgstr "Last 12 months"
+
+msgid "Months this year"
+msgstr "Months this year"
+
+msgid "This bimonth"
+msgstr "This bimonth"
+
+msgid "Last bimonth"
+msgstr "Last bimonth"
+
+msgid "Last 6 bimonths"
+msgstr "Last 6 bimonths"
+
+msgid "Bimonths this year"
+msgstr "Bimonths this year"
+
+msgid "This quarter"
+msgstr "This quarter"
+
+msgid "Last quarter"
+msgstr "Last quarter"
+
+msgid "Last 4 quarters"
+msgstr "Last 4 quarters"
+
+msgid "Quarters this year"
+msgstr "Quarters this year"
+
+msgid "This six-month"
+msgstr "This six-month"
+
+msgid "Last six-month"
+msgstr "Last six-month"
+
+msgid "Last 2 six-months"
+msgstr "Last 2 six-months"
+
+msgid "This financial year"
+msgstr "This financial year"
+
+msgid "Last financial year"
+msgstr "Last financial year"
+
+msgid "Last 5 financial years"
+msgstr "Last 5 financial years"
+
+msgid "This year"
+msgstr "This year"
+
+msgid "Last year"
+msgstr "Last year"
+
+msgid "Last 5 years"
+msgstr "Last 5 years"
+
 msgid "Cancelled"
 msgstr "Cancelled"
 

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}
                 >
@@ -47,6 +59,8 @@ RadioGroup.propTypes = {
     children: PropTypes.arrayOf(PropTypes.node),
     dataTest: PropTypes.string,
     display: PropTypes.string,
+    boldLabel: PropTypes.bool,
+    compact: PropTypes.bool,
     helpText: PropTypes.string,
     label: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

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/download/DownloadSettings.js

@@ -2,6 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, ButtonStrip } from '@dhis2/ui'
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import { setDownloadConfig } from '../../actions/download.js'
 import { standardizeFilename } from '../../util/dataDownload.js'
 import { downloadMapImage, downloadSupport } from '../../util/export-image.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

@@ -9,11 +9,12 @@ import {
     ButtonStrip,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { addLayer, updateLayer, cancelLayer } from '../../actions/layers.js'
 import { EARTH_ENGINE_LAYER } from '../../constants/layers.js'
 import { useOrgUnits } from '../OrgUnitsProvider.js'
+import useKeyDown from '../../hooks/useKeyDown.js'
 import EarthEngineDialog from './earthEngine/EarthEngineDialog.js'
 import EventDialog from './event/EventDialog.js'
 import FacilityDialog from './FacilityDialog.js'
@@ -72,6 +73,8 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         }
     }
 
+    useKeyDown('Escape', cancelLayer)
+
     if (!layer) {
         return null
     }
@@ -94,7 +97,7 @@ 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>
             <ModalTitle>{title}</ModalTitle>
             <ModalContent>
                 <div className={styles.content}>

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 {