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-12-03T09:20:13.790Z\n"
-"PO-Revision-Date: 2024-12-03T09:20:13.790Z\n"
+"POT-Creation-Date: 2024-12-04T12:41:51.035Z\n"
+"PO-Revision-Date: 2024-12-04T12:41:51.035Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -933,6 +933,9 @@ 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 "Only up to 12 periods can be selected."
+msgstr "Only up to 12 periods can be selected."
+
 msgid "Period display mode"
 msgstr "Period display mode"
 

package.json

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

src/components/edit/thematic/ThematicDialog.js

@@ -1,4 +1,4 @@
-import { PeriodDimension, getRelativePeriodsMap } from '@dhis2/analytics'
+import { PeriodDimension, getRelativePeriodsName } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { SegmentedControl, IconErrorFilled24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -194,10 +194,11 @@ class ThematicDialog extends Component {
             isPeriodAvailable(defaultPeriod, hiddenPeriods)
         ) {
             console.log('🚀 ~ componentDidMount ~ setPeriods HERE')
+            console.log('getRelativePeriodsName()', getRelativePeriodsName())
             const defaultPeriods = [
                 {
                     id: defaultPeriod,
-                    name: getRelativePeriodsMap()[defaultPeriod],
+                    name: getRelativePeriodsName()[defaultPeriod],
                 },
             ]
             setPeriods(defaultPeriods)
@@ -541,7 +542,7 @@ class ThematicDialog extends Component {
                             {periodType === PREDEFINED_PERIODS && (
                                 <RenderingStrategy
                                     value={renderingStrategy}
-                                    period={periods}
+                                    periods={periods}
                                     layerId={id}
                                     onChange={setRenderingStrategy}
                                 />

src/components/periods/RenderingStrategy.js

@@ -7,17 +7,29 @@ import {
     RENDERING_STRATEGY_TIMELINE,
     RENDERING_STRATEGY_SPLIT_BY_PERIOD,
 } from '../../constants/layers.js'
-import {
-    singleMapPeriods,
-    invalidSplitViewPeriods,
-} from '../../constants/periods.js'
+import { singleMapPeriods, MAX_PERIODS } from '../../constants/periods.js'
+import { getPeriodsFromFilters } from '../../util/analytics.js'
 import usePrevious from '../../hooks/usePrevious.js'
 import { Radio, RadioGroup } from '../core/index.js'
+import { getRelativePeriodsItemsCount } from '@dhis2/analytics'
+
+const countPeriods = (periods) => {
+    const itemsCount = getRelativePeriodsItemsCount()
+    console.log('itemsCount', itemsCount)
+    const total = periods.reduce(
+        (sum, period) =>
+            sum +
+            (itemsCount[period.id] !== undefined ? itemsCount[period.id] : 1),
+        0
+    )
+    console.log('total', total)
+    return total
+}
 
 const RenderingStrategy = ({
     layerId,
     value = RENDERING_STRATEGY_SINGLE,
-    period = {},
+    periods = [],
     onChange,
 }) => {
     const hasOtherLayers = useSelector(
@@ -31,36 +43,55 @@ const RenderingStrategy = ({
                     layer.id !== layerId
             )
     )
-    const prevPeriod = usePrevious(period)
+    const hasTooManyPeriods = useSelector(({ layerEdit }) => {
+        console.log('layerEdit', layerEdit)
+        const periods = getPeriodsFromFilters(layerEdit.filters)
+        console.log('periods', periods)
+        return countPeriods(periods) > MAX_PERIODS
+    })
+
+    const prevPeriods = usePrevious(periods)
 
     useEffect(() => {
-        if (period !== prevPeriod) {
+        if (periods !== prevPeriods) {
             if (
-                singleMapPeriods.includes(period.id) &&
+                periods.length === 1 &&
+                singleMapPeriods.includes(periods[0].id) &&
                 value !== RENDERING_STRATEGY_SINGLE
             ) {
                 onChange(RENDERING_STRATEGY_SINGLE)
             } else if (
-                invalidSplitViewPeriods.includes(period.id) &&
-                value === RENDERING_STRATEGY_SPLIT_BY_PERIOD
+                countPeriods(periods) > MAX_PERIODS &&
+                (value === RENDERING_STRATEGY_TIMELINE ||
+                    value === RENDERING_STRATEGY_SPLIT_BY_PERIOD)
             ) {
-                // TODO: Switch to 'timeline' when we support it
                 onChange(RENDERING_STRATEGY_SINGLE)
             }
         }
-    }, [value, period, prevPeriod, onChange])
+    }, [value, periods, prevPeriods, onChange])
 
-    if (singleMapPeriods.includes(period.id)) {
+    if (periods.length === 1 && singleMapPeriods.includes(periods[0].id)) {
         return null
     }
 
-    let helpText
+    let helpText = []
 
     if (hasOtherTimelineLayers) {
-        helpText = i18n.t('Only one timeline is allowed.')
-    } else if (hasOtherLayers) {
-        helpText = i18n.t('Remove other layers to enable split map views.')
+        helpText.push(i18n.t('Only one timeline is allowed.'))
+    }
+    if (hasOtherLayers) {
+        helpText.push(i18n.t('Remove other layers to enable split map views.'))
+    }
+    if (hasTooManyPeriods) {
+        helpText.push(
+            i18n.t('Only up to ') +
+                MAX_PERIODS +
+                i18n.t(
+                    ' periods can be selected to enable timeline or split map views.'
+                )
+        )
     }
+    helpText = helpText.join(' ')
 
     return (
         <RadioGroup
@@ -72,19 +103,16 @@ const RenderingStrategy = ({
             boldLabel={true}
             compact={true}
         >
-            <Radio value="SINGLE" label={i18n.t('Single (aggregate)')} />
+            <Radio value="SINGLE" label={i18n.t('Single (combine periods)')} />
             <Radio
                 value="TIMELINE"
                 label={i18n.t('Timeline')}
-                disabled={hasOtherTimelineLayers}
+                disabled={hasTooManyPeriods || hasOtherTimelineLayers}
             />
             <Radio
                 value="SPLIT_BY_PERIOD"
                 label={i18n.t('Split map views')}
-                disabled={
-                    hasOtherLayers ||
-                    invalidSplitViewPeriods.includes(period.id)
-                }
+                disabled={hasTooManyPeriods || hasOtherLayers}
             />
         </RadioGroup>
     )
@@ -93,7 +121,7 @@ const RenderingStrategy = ({
 RenderingStrategy.propTypes = {
     onChange: PropTypes.func.isRequired,
     layerId: PropTypes.string,
-    period: PropTypes.object,
+    periods: PropTypes.array,
     value: PropTypes.string,
 }
 

src/constants/periods.js

@@ -52,10 +52,12 @@ const THIS_BIMONTH = 'THIS_BIMONTH'
 const LAST_BIMONTH = 'LAST_BIMONTH'
 const THIS_QUARTER = 'THIS_QUARTER'
 const LAST_QUARTER = 'LAST_QUARTER'
-const THIS_YEAR = 'THIS_YEAR'
-const LAST_YEAR = 'LAST_YEAR'
+const THIS_SIX_MONTH = 'THIS_SIX_MONTH'
+const LAST_SIX_MONTH = 'LAST_SIX_MONTH'
 const THIS_FINANCIAL_YEAR = 'THIS_FINANCIAL_YEAR'
 const LAST_FINANCIAL_YEAR = 'LAST_FINANCIAL_YEAR'
+const THIS_YEAR = 'THIS_YEAR'
+const LAST_YEAR = 'LAST_YEAR'
 
 export const PREDEFINED_PERIODS = 'PREDEFINED_PERIODS'
 export const RELATIVE_PERIODS = 'RELATIVE_PERIODS'
@@ -175,22 +177,16 @@ export const singleMapPeriods = [
     LAST_BIMONTH,
     THIS_QUARTER,
     LAST_QUARTER,
-    THIS_YEAR,
-    LAST_YEAR,
+    THIS_SIX_MONTH,
+    LAST_SIX_MONTH,
     THIS_FINANCIAL_YEAR,
     LAST_FINANCIAL_YEAR,
+    THIS_YEAR,
+    LAST_YEAR,
 ]
 
 // Periods not supported for split view (maximum 12 maps)
-export const invalidSplitViewPeriods = [
-    LAST_14_DAYS,
-    LAST_30_DAYS,
-    LAST_60_DAYS,
-    LAST_90_DAYS,
-    LAST_180_DAYS,
-    LAST_52_WEEKS,
-    WEEKS_THIS_YEAR,
-]
+export const MAX_PERIODS = 12
 
 // Period types used for Earth Engine layers
 export const BY_YEAR = 'BY_YEAR'

src/loaders/thematicLoader.js

@@ -102,11 +102,14 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
     console.log('🚀 ~ thematicLoader ~ period:', period)
     const periodx = getPeriodsFromFilters(config.filters)
     console.log('🚀 ~ thematicLoader ~ periodx:', periodx)
+    console.log('🚀 ~ thematicLoader ~ data.metaData:', data.metaData)
     const periods = getPeriodsFromMetaData(data.metaData)
+    console.log('🚀 ~ thematicLoader ~ periods:', periods)
     const dimensions = getValidDimensionsFromFilters(config.filters)
     const names = getApiResponseNames(data)
     // TODO Handle multiple maps
     const valuesByPeriod = !isSingleMap ? getValuesByPeriod(data) : null
+    console.log('🚀 ~ thematicLoader ~ valuesByPeriod:', valuesByPeriod)
     const valueById = getValueById(data)
     const valueFeatures = noDataColor
         ? features
@@ -384,7 +387,9 @@ const loadData = async (config, nameProperty) => {
 
     if (!isSingleMap) {
         // TODO Handle multiple maps
-        analyticsRequest = analyticsRequest.addPeriodDimension(period.id)
+        analyticsRequest = analyticsRequest.addPeriodDimension(
+            periodx.map((pe) => pe.id)
+        )
     } else {
         analyticsRequest =
             periodx.length > 0

yarn.lock

@@ -2018,9 +2018,9 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/analytics@git+https://github.com/d2-ci/analytics.git#223ec5f2dd57fc9190aae3882ed8bbb51dde46fa":
+"@dhis2/analytics@git+https://github.com/d2-ci/analytics.git#d5d4d9f63a3aa7392e44bb37bc598f8368ae3979":
   version "26.9.3"
-  resolved "git+https://github.com/d2-ci/analytics.git#223ec5f2dd57fc9190aae3882ed8bbb51dde46fa"
+  resolved "git+https://github.com/d2-ci/analytics.git#d5d4d9f63a3aa7392e44bb37bc598f8368ae3979"
   dependencies:
     "@dhis2/multi-calendar-dates" "^1.2.2"
     "@dnd-kit/core" "^6.0.7"