From 06d6d7166e4e965220304ec72408700e196339e3 Mon Sep 17 00:00:00 2001
From: braimbault <bruno@dhis2.org>
Date: Tue, 19 Nov 2024 16:51:30 +0100
Subject: [PATCH] feat: support multiple periods

---
 package.json                                    |  2 +-
 src/components/layers/LayerCard.js              |  5 ++++-
 .../layers/styles/LayerCard.module.css          | 11 +++++++++--
 src/loaders/thematicLoader.js                   | 17 ++++++++++++++---
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 0ef32edb1..bd952b61f 100644
--- a/package.json
+++ b/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#feat/DHIS2-15796",
         "@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/layers/LayerCard.js b/src/components/layers/LayerCard.js
index e209a0f03..7c6b49436 100644
--- a/src/components/layers/LayerCard.js
+++ b/src/components/layers/LayerCard.js
@@ -31,7 +31,10 @@ const LayerCard = ({
                     })}
                 >
                     <h2>{title}</h2>
-                    {subtitle && <h3>{subtitle}</h3>}
+                    {
+                        // TODO Handle long list of periods
+                        subtitle && <h3>{subtitle}</h3>
+                    }
                 </div>
                 <div className={styles.action}>
                     {isOverlay && <SortableHandle />}
diff --git a/src/components/layers/styles/LayerCard.module.css b/src/components/layers/styles/LayerCard.module.css
index 0d95ec8eb..99773c073 100644
--- a/src/components/layers/styles/LayerCard.module.css
+++ b/src/components/layers/styles/LayerCard.module.css
@@ -6,7 +6,7 @@
 }
 
 .cardHeader {
-    height: 54px;
+    min-height: 54px;
     padding: 2px 8px 0 18px;
     font-size: 14px;
     display: flex;
@@ -26,15 +26,22 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: 500;
+    margin: 8px 0 0 0;
+}
+
+.title hz3 {
     line-height: 17px;
+    font-size: 14px;
+    font-weight: 400;
     margin: 0;
+    color: var(--colors-grey800);
 }
 
 .title h3 {
     line-height: 17px;
     font-size: 14px;
     font-weight: 400;
-    margin: 0;
+    margin: 4px 32px 8px 0;
     color: var(--colors-grey800);
 }
 
diff --git a/src/loaders/thematicLoader.js b/src/loaders/thematicLoader.js
index 03f52b2ea..1467ec14c 100644
--- a/src/loaders/thematicLoader.js
+++ b/src/loaders/thematicLoader.js
@@ -23,6 +23,7 @@ import {
 } from '../constants/layers.js'
 import {
     getOrgUnitsFromRows,
+    getPeriodsFromFilters,
     getPeriodFromFilters,
     getValidDimensionsFromFilters,
     getDataItemFromColumns,
@@ -98,9 +99,13 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
     const isBubbleMap = thematicMapType === THEMATIC_BUBBLE
     const isSingleColor = config.method === CLASSIFICATION_SINGLE_COLOR
     const period = getPeriodFromFilters(config.filters)
+    console.log('🚀 ~ thematicLoader ~ period:', period)
+    const periodx = getPeriodsFromFilters(config.filters)
+    console.log('🚀 ~ thematicLoader ~ periodx:', periodx)
     const periods = getPeriodsFromMetaData(data.metaData)
     const dimensions = getValidDimensionsFromFilters(config.filters)
     const names = getApiResponseNames(data)
+    // TODO Handle multiple maps
     const valuesByPeriod = !isSingleMap ? getValuesByPeriod(data) : null
     const valueById = getValueById(data)
     const valueFeatures = noDataColor
@@ -150,13 +155,14 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
     const legend = {
         title: name,
         period: period
-            ? names[period.id] || period.id
+            ? periodx.map((pe) => names[pe.id] || pe.id).join(', ')
             : formatStartEndDate(
                   getDateArray(config.startDate),
                   getDateArray(config.endDate)
               ),
         items: legendItems,
     }
+    console.log('🚀 ~ thematicLoader ~ names:', names)
 
     if (dimensions && dimensions.length) {
         legend.filters = dimensions.map(
@@ -262,6 +268,7 @@ const thematicLoader = async ({ config, engine, nameProperty }) => {
     if (noDataColor && Array.isArray(legend.items) && !isBubbleMap) {
         legend.items.push({ color: noDataColor, name: i18n.t('No data') })
     }
+    console.log('🚀 ~ thematicLoader ~ legend:', legend)
 
     return {
         ...config,
@@ -350,6 +357,9 @@ const loadData = async (config, nameProperty) => {
     } = config
     const orgUnits = getOrgUnitsFromRows(rows)
     const period = getPeriodFromFilters(filters)
+    console.log('🚀 ~ loadData ~ period:', period)
+    const periodx = getPeriodsFromFilters(filters)
+    console.log('🚀 ~ loadData ~ periodx:', periodx)
     const dimensions = getValidDimensionsFromFilters(config.filters)
     const dataItem = getDataItemFromColumns(columns) || {}
     const coordinateField = getCoordinateField(config)
@@ -371,10 +381,11 @@ const loadData = async (config, nameProperty) => {
         .withDisplayProperty(nameProperty)
 
     if (!isSingleMap) {
+        // TODO Handle multiple maps
         analyticsRequest = analyticsRequest.addPeriodDimension(period.id)
     } else {
-        analyticsRequest = period
-            ? analyticsRequest.addPeriodFilter(period.id)
+        analyticsRequest = periodx
+            ? analyticsRequest.addPeriodFilter(periodx.map((pe) => pe.id))
             : analyticsRequest.withStartDate(startDate).withEndDate(endDate)
     }