initialize table view in tooltip for phase classification

WFP-VAM · Jul 14, 2023 · 8bfdedd · 8bfdedd
1 parent cb4f125
commit 8bfdedd
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 22 deletions.
diff --git a/frontend/src/components/MapView/MapTooltip/index.tsx b/frontend/src/components/MapView/MapTooltip/index.tsx
@@ -8,14 +8,78 @@ import {
   LinearProgress,
   Typography,
 } from '@material-ui/core';
-import { isEqual } from 'lodash';
-import { tooltipSelector } from 'context/tooltipStateSlice';
+import { isEmpty, isEqual, sum } from 'lodash';
+import { PopupData, tooltipSelector } from 'context/tooltipStateSlice';
 import { isEnglishLanguageSelected, useSafeTranslation } from 'i18n';
 
+const generatePhasePopulationTable = (popupData: PopupData) => {
+  const phasePopulations: Record<string, number> = Object.entries(
+    popupData,
+  ).reduce((acc: any, cur: any) => {
+    const [key, value] = cur;
+    if (key.includes('Population in phase ')) {
+      // extract number from string looking like "Phase classification 1"
+      const phaseNumber = key.replace('Population in phase ', '');
+      if (phaseNumber) {
+        return { ...acc, [phaseNumber]: value.data };
+      }
+    }
+    return acc;
+  }, {});
+
+  if (isEmpty(phasePopulations)) {
+    return null;
+  }
+
+  // calculate total population
+  // eslint-disable-next-line no-param-reassign, fp/no-mutation
+  phasePopulations.Total =
+    sum(Object.values(phasePopulations)) - phasePopulations['3 to 5'];
+
+  const phasePopulationTable = (
+    <div>
+      <Typography display="inline" variant="h4" color="inherit">
+        Ref. period: {popupData['Reference period start']?.data} to{' '}
+        {popupData['Reference period end']?.data}
+      </Typography>
+      <table
+        style={{
+          tableLayout: 'fixed',
+          borderCollapse: 'collapse',
+          width: '100%',
+          borderWidth: '1px;',
+          borderColor: 'inherit',
+          borderStyle: 'solid',
+        }}
+      >
+        <tr style={{ border: '1px solid white' }}>
+          {Object.keys(phasePopulations).map((phase: string) => (
+            <th>{phase}</th>
+          ))}
+        </tr>
+        <tr style={{ border: '1px solid white' }}>
+          {Object.values(phasePopulations).map((phase: number) => (
+            <th>{phase.toLocaleString()}</th>
+          ))}
+        </tr>
+        <tr style={{ border: '1px solid white' }}>
+          {Object.values(phasePopulations).map((phase: number) => (
+            <th>{Math.round((phase / phasePopulations.Total) * 100)}%</th>
+          ))}
+        </tr>
+      </table>
+    </div>
+  );
+
+  return phasePopulationTable;
+};
+
 const MapTooltip = memo(({ classes }: TooltipProps) => {
   const popup = useSelector(tooltipSelector);
   const { t, i18n } = useSafeTranslation();
 
+  const popupData = popup.data;
+
   const popupTitle = useMemo(() => {
     if (isEnglishLanguageSelected(i18n)) {
       return popup.locationName;
@@ -24,7 +88,21 @@ const MapTooltip = memo(({ classes }: TooltipProps) => {
   }, [i18n, popup.locationLocalName, popup.locationName]);
 
   const renderedPopupContent = useMemo(() => {
-    return Object.entries(popup.data)
+    const phasePopulationTable = generatePhasePopulationTable(popupData);
+    // filter out popupData where key value contains "Population in phase "
+    const popupDataWithoutPhasePopulations: PopupData = Object.entries(
+      popupData,
+    ).reduce((acc: any, cur: any) => {
+      const [key, value] = cur;
+      if (
+        !key.includes('Population in phase ') &&
+        !key.includes('Reference period ')
+      ) {
+        return { ...acc, [key]: value };
+      }
+      return acc;
+    }, {});
+    return Object.entries(popupDataWithoutPhasePopulations)
       .filter(([, value]) => {
         return isEqual(value.coordinates, popup.coordinates);
       })
@@ -50,13 +128,15 @@ const MapTooltip = memo(({ classes }: TooltipProps) => {
             >
               {`${value.data}`}
             </Typography>
-            <Typography variant="h4" color="inherit" className={classes.text}>
+            {/* Phase classification data */}
+            <Typography variant="h4" color="inherit">
               {value.adminLevel && `${t('Admin Level')}: ${value.adminLevel}`}
             </Typography>
+            {value.adminLevel && phasePopulationTable}
           </Fragment>
         );
       });
-  }, [classes.text, popup.coordinates, popup.data, t]);
+  }, [classes.text, popup.coordinates, popupData, t]);
 
   const renderedPopupLoader = useMemo(() => {
     if (!popup.wmsGetFeatureInfoLoading) {

diff --git a/frontend/src/config/nigeria/layers.json b/frontend/src/config/nigeria/layers.json
@@ -3650,8 +3650,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "fallbackLayerKeys": ["ch_phase_admin1"],
     "admin_level": 2,
@@ -3815,8 +3815,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "data_field": "calc_pop_ph3_5_admin2",
     "admin_level": 2,
@@ -3993,8 +3993,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "phase_class",
@@ -4102,8 +4102,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "calc_pop_ph3_5_admin2",
@@ -4234,8 +4234,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "phase_class",
@@ -4298,8 +4298,8 @@
       "2023-06-01"
     ],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "calc_pop_ph3_5_admin2",
@@ -4361,8 +4361,8 @@
     "path": "data/nigeria/ch/urb_admin2_{YYYY_MM_DD}.json",
     "dates": ["2021-02-01", "2021-06-01", "2022-02-01", "2022-06-01"],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "phase_class",
@@ -4414,8 +4414,8 @@
     "path": "data/nigeria/ch/urb_admin2_{YYYY_MM_DD}.json",
     "dates": ["2022-02-01", "2022-06-01", "2023-06-01"],
     "validityPeriod": {
-      "start_date_field" : "start_date",
-      "end_date_field" : "end_date"
+      "start_date_field": "start_date",
+      "end_date_field": "end_date"
     },
     "admin_level": 2,
     "data_field": "calc_pop_ph3_5_admin2",
@@ -4470,4 +4470,4 @@
     ],
     "legend_text": "Urban areas - population in phase 3 to 5"
   }
-}
+}
diff --git a/frontend/src/context/layers/admin_level_data.ts b/frontend/src/context/layers/admin_level_data.ts
@@ -142,6 +142,7 @@ export async function getAdminLevelDataLayerData({
           ...adminBoundaryLayer.adminLevelLocalNames,
         ]),
         value: matchedData ? matchedData[dataField!] : fallbackValue,
+        // TODO - verify the logic for deciding which admin level to use
         adminLevel: fallbackAdminLevel ?? adminLevel,
         ...featureInfoPropsValues,
       } as DataRecord;