From c1c8a4ab79f652d143fee412913359f38c3926e2 Mon Sep 17 00:00:00 2001 From: braimbault Date: Wed, 4 Dec 2024 15:54:58 +0100 Subject: [PATCH] feat: use PeriodDimension in ThematicDialog --- i18n/en.pot | 7 +- package.json | 2 +- .../edit/thematic/ThematicDialog.js | 7 +- src/components/periods/RenderingStrategy.js | 76 +++++++++++++------ src/constants/periods.js | 22 +++--- src/loaders/thematicLoader.js | 7 +- yarn.lock | 4 +- 7 files changed, 79 insertions(+), 46 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 9c411d406..9e2061348 100644 --- a/i18n/en.pot +++ b/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" diff --git a/package.json b/package.json index da1f49e13..0f8668cdc 100644 --- a/package.json +++ b/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", diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js index 942b50ae8..b580eb17b 100644 --- a/src/components/edit/thematic/ThematicDialog.js +++ b/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 && ( diff --git a/src/components/periods/RenderingStrategy.js b/src/components/periods/RenderingStrategy.js index 483ea6e85..d2d72a549 100644 --- a/src/components/periods/RenderingStrategy.js +++ b/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 ( - + ) @@ -93,7 +121,7 @@ const RenderingStrategy = ({ RenderingStrategy.propTypes = { onChange: PropTypes.func.isRequired, layerId: PropTypes.string, - period: PropTypes.object, + periods: PropTypes.array, value: PropTypes.string, } diff --git a/src/constants/periods.js b/src/constants/periods.js index 70dfe3aa9..72fcaf97c 100644 --- a/src/constants/periods.js +++ b/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' diff --git a/src/loaders/thematicLoader.js b/src/loaders/thematicLoader.js index 4e3dc81f7..ccd737764 100644 --- a/src/loaders/thematicLoader.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index 0a6c5668f..22111db1e 100644 --- a/yarn.lock +++ b/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"