fix how geohub map are used in single and multi dashboard

UNDP-Data · Oct 26, 2024 · 1d7b4cd · 1d7b4cd
1 parent 8ebaf9a
commit 1d7b4cd
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 152 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/src/Components/Dashboard/GraphEl.tsx b/src/Components/Dashboard/GraphEl.tsx
@@ -1938,7 +1938,7 @@ function GraphEl(props: Props) {
       case 'geoHubMap':
         return {
           mode: settings?.mode,
-          mapStyle: settings?.mapStyle as string,
+          mapStyle: settings?.mapStyle,
           center: settings?.center,
           zoomLevel: settings?.zoomLevel,
           graphTitle: settings?.graphTitle,

diff --git a/src/Components/Dashboard/MultiGraphDashboard.tsx b/src/Components/Dashboard/MultiGraphDashboard.tsx
@@ -17,7 +17,6 @@ import {
   fetchAndTransformDataFromAPI,
 } from '../../Utils/fetchAndParseData';
 import { UNDPColorModule } from '../ColorPalette';
-import GraphEl from './GraphEl';
 import { getUniqValue } from '../../Utils/getUniqValue';
 import { GraphHeader } from '../Elements/GraphHeader';
 import { transformColumnsToArray } from '../../Utils/transformData/transformColumnsToArray';
@@ -466,49 +465,28 @@ export function MultiGraphDashboard(props: Props) {
                         flexGrow: 1,
                       }}
                     >
-                      {el.graphType === 'geoHubCompareMap' ||
-                      el.graphType === 'geoHubMap' ? (
-                        <GraphEl
-                          graph={el.graphType}
-                          graphDataConfiguration={el.graphDataConfiguration}
-                          graphData={data}
-                          debugMode={debugMode}
-                          settings={{
-                            ...el.settings,
-                            width: undefined,
-                            height: undefined,
-                            radius: undefined,
-                            size: undefined,
-                            rtl: dashboardLayout.rtl,
-                            language: dashboardLayout.language,
-                            mode: mode || el.settings?.mode,
-                          }}
-                          readableHeader={readableHeader || []}
-                        />
-                      ) : (
-                        <SingleGraphDashboard
-                          graphType={el.graphType}
-                          dataFilters={el.dataFilters}
-                          graphSettings={{
-                            ...el.settings,
-                            width: undefined,
-                            height: undefined,
-                            radius: undefined,
-                            size: undefined,
-                            rtl: dashboardLayout.rtl,
-                            language: dashboardLayout.language,
-                            mode: mode || el.settings?.mode,
-                          }}
-                          dataSettings={{
-                            data,
-                          }}
-                          dataTransform={el.dataTransform}
-                          dataSelectionOptions={el.dataSelectionOptions}
-                          graphDataConfiguration={el.graphDataConfiguration}
-                          debugMode={debugMode}
-                          readableHeader={readableHeader || []}
-                        />
-                      )}
+                      <SingleGraphDashboard
+                        graphType={el.graphType}
+                        dataFilters={el.dataFilters}
+                        graphSettings={{
+                          ...el.settings,
+                          width: undefined,
+                          height: undefined,
+                          radius: undefined,
+                          size: undefined,
+                          rtl: dashboardLayout.rtl,
+                          language: dashboardLayout.language,
+                          mode: mode || el.settings?.mode,
+                        }}
+                        dataSettings={{
+                          data,
+                        }}
+                        dataTransform={el.dataTransform}
+                        dataSelectionOptions={el.dataSelectionOptions}
+                        graphDataConfiguration={el.graphDataConfiguration}
+                        debugMode={debugMode}
+                        readableHeader={readableHeader || []}
+                      />
                     </div>
                   ))}
                 </div>

diff --git a/src/Components/Dashboard/SingleGraphDashboard.tsx b/src/Components/Dashboard/SingleGraphDashboard.tsx
@@ -41,7 +41,7 @@ interface Props {
   dataSettings?: DataSettingsDataType;
   dataFromAPISettings?: APISettingsDataType;
   filters?: FilterUiSettingsDataType[];
-  graphType: Exclude<GraphType, 'geoHubMap' | 'geoHubCompareMap'>;
+  graphType: GraphType;
   dataTransform?: {
     keyColumn: string;
     aggregationColumnsSetting?: AggregationSettingsDataType[];
@@ -97,69 +97,32 @@ export function SingleGraphDashboard(props: Props) {
   };
 
   useEffect(() => {
-    if (dataFromFile) {
-      const filteredData = dataFromFile.filter((item: any) =>
-        selectedFilters.every(filter =>
-          filter.value && filter.value.length > 0
-            ? intersection(flattenDeep([item[filter.filter]]), filter.value)
-                .length > 0
-            : true,
-        ),
-      );
-      setData(filteredData);
+    if (graphType !== 'geoHubMap' && graphType !== 'geoHubCompareMap') {
+      if (dataFromFile) {
+        const filteredData = dataFromFile.filter((item: any) =>
+          selectedFilters.every(filter =>
+            filter.value && filter.value.length > 0
+              ? intersection(flattenDeep([item[filter.filter]]), filter.value)
+                  .length > 0
+              : true,
+          ),
+        );
+        setData(filteredData);
+      }
     }
-  }, [selectedFilters, dataFromFile]);
+  }, [selectedFilters, dataFromFile, graphType]);
 
   useEffect(() => {
-    if (dataFromAPISettings) {
-      const fetchData = fetchAndTransformDataFromAPI(
-        dataFromAPISettings.requestURL,
-        dataFromAPISettings.method || 'GET',
-        dataFromAPISettings.headers,
-        dataFromAPISettings.requestBody,
-        dataFromAPISettings.apiDataTransform,
-        debugMode,
-      );
-      fetchData.then(d => {
-        setDataFromFile(d);
-        setFilterSettings(
-          filters?.map(el => ({
-            filter: el.column,
-            label: el.label || `Filter by ${el.column}`,
-            singleSelect: el.singleSelect,
-            clearable: el.clearable,
-            defaultValue: el.defaultValue,
-            availableValues: getUniqValue(
-              filterData(d, dataFilters || []),
-              el.column,
-            )
-              .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
-              )
-              .map(v => ({
-                value: v,
-                label: v,
-              })),
-          })) || [],
+    if (graphType !== 'geoHubMap' && graphType !== 'geoHubCompareMap') {
+      if (dataFromAPISettings) {
+        const fetchData = fetchAndTransformDataFromAPI(
+          dataFromAPISettings.requestURL,
+          dataFromAPISettings.method || 'GET',
+          dataFromAPISettings.headers,
+          dataFromAPISettings.requestBody,
+          dataFromAPISettings.apiDataTransform,
+          debugMode,
         );
-      });
-    }
-    if (dataSettings && !dataFromAPISettings) {
-      if (dataSettings.dataURL) {
-        const fetchData =
-          dataSettings.fileType === 'json'
-            ? fetchAndParseJSON(
-                dataSettings.dataURL as string,
-                dataSettings.columnsToArray,
-                debugMode,
-              )
-            : fetchAndParseCSV(
-                dataSettings.dataURL as string,
-                dataSettings.columnsToArray,
-                debugMode,
-                dataSettings.delimiter,
-                true,
-              );
         fetchData.then(d => {
           setDataFromFile(d);
           setFilterSettings(
@@ -169,7 +132,10 @@ export function SingleGraphDashboard(props: Props) {
               singleSelect: el.singleSelect,
               clearable: el.clearable,
               defaultValue: el.defaultValue,
-              availableValues: getUniqValue(d, el.column)
+              availableValues: getUniqValue(
+                filterData(d, dataFilters || []),
+                el.column,
+              )
                 .filter(v =>
                   el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
                 )
@@ -180,38 +146,83 @@ export function SingleGraphDashboard(props: Props) {
             })) || [],
           );
         });
-      } else {
-        const tempData = dataSettings.columnsToArray
-          ? transformColumnsToArray(
-              dataSettings.data,
-              dataSettings.columnsToArray,
-            )
-          : dataSettings.data;
-        setDataFromFile(tempData);
-        setFilterSettings(
-          filters?.map(el => ({
-            filter: el.column,
-            label: el.label || `Filter by ${el.column}`,
-            singleSelect: el.singleSelect,
-            clearable: el.clearable,
-            defaultValue: el.defaultValue,
-            availableValues: getUniqValue(
-              filterData(tempData, dataFilters || []),
-              el.column,
-            )
-              .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
+      }
+      if (dataSettings && !dataFromAPISettings) {
+        if (dataSettings.dataURL) {
+          const fetchData =
+            dataSettings.fileType === 'json'
+              ? fetchAndParseJSON(
+                  dataSettings.dataURL as string,
+                  dataSettings.columnsToArray,
+                  debugMode,
+                )
+              : fetchAndParseCSV(
+                  dataSettings.dataURL as string,
+                  dataSettings.columnsToArray,
+                  debugMode,
+                  dataSettings.delimiter,
+                  true,
+                );
+          fetchData.then(d => {
+            setDataFromFile(d);
+            setFilterSettings(
+              filters?.map(el => ({
+                filter: el.column,
+                label: el.label || `Filter by ${el.column}`,
+                singleSelect: el.singleSelect,
+                clearable: el.clearable,
+                defaultValue: el.defaultValue,
+                availableValues: getUniqValue(d, el.column)
+                  .filter(v =>
+                    el.excludeValues
+                      ? el.excludeValues.indexOf(v) === -1
+                      : true,
+                  )
+                  .map(v => ({
+                    value: v,
+                    label: v,
+                  })),
+              })) || [],
+            );
+          });
+        } else {
+          const tempData = dataSettings.columnsToArray
+            ? transformColumnsToArray(
+                dataSettings.data,
+                dataSettings.columnsToArray,
               )
-              .map(v => ({
-                value: v,
-                label: v,
-              })),
-          })) || [],
-        );
+            : dataSettings.data;
+          setDataFromFile(tempData);
+          setFilterSettings(
+            filters?.map(el => ({
+              filter: el.column,
+              label: el.label || `Filter by ${el.column}`,
+              singleSelect: el.singleSelect,
+              clearable: el.clearable,
+              defaultValue: el.defaultValue,
+              availableValues: getUniqValue(
+                filterData(tempData, dataFilters || []),
+                el.column,
+              )
+                .filter(v =>
+                  el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
+                )
+                .map(v => ({
+                  value: v,
+                  label: v,
+                })),
+            })) || [],
+          );
+        }
       }
     }
-  }, [dataSettings, dataFromAPISettings, dataFilters]);
-  if (!dataFromAPISettings && !dataSettings)
+  }, [dataSettings, dataFromAPISettings, dataFilters, graphType]);
+  if (
+    !dataFromAPISettings &&
+    !dataSettings &&
+    graphType !== 'geoHubMap' &&
+    graphType !== 'geoHubCompareMap'
+  )
     return (
       <p
         className={
@@ -270,7 +281,9 @@ export function SingleGraphDashboard(props: Props) {
             justifyContent: 'space-between',
           }}
         >
-          {data ? (
+          {data ||
+          graphType === 'geoHubMap' ||
+          graphType === 'geoHubCompareMap' ? (
             <>
               {graphSettings?.graphTitle ||
               graphSettings?.graphDescription ||
@@ -757,17 +770,21 @@ export function SingleGraphDashboard(props: Props) {
               ) : null}
               <GraphEl
                 graph={graphType}
-                graphData={transformDataForGraph(
-                  dataTransform
-                    ? transformDataForAggregation(
-                        filterData(data, dataFilters || []),
-                        dataTransform.keyColumn,
-                        dataTransform.aggregationColumnsSetting,
+                graphData={
+                  graphType !== 'geoHubMap' && graphType !== 'geoHubCompareMap'
+                    ? transformDataForGraph(
+                        dataTransform
+                          ? transformDataForAggregation(
+                              filterData(data, dataFilters || []),
+                              dataTransform.keyColumn,
+                              dataTransform.aggregationColumnsSetting,
+                            )
+                          : filterData(data, dataFilters || []),
+                        graphType,
+                        graphConfig,
                       )
-                    : filterData(data, dataFilters || []),
-                  graphType,
-                  graphConfig,
-                )}
+                    : undefined
+                }
                 graphDataConfiguration={graphConfig}
                 debugMode={debugMode}
                 readableHeader={readableHeader || []}

diff --git a/src/Components/Dashboard/SingleGraphDashboardFromConfig.tsx b/src/Components/Dashboard/SingleGraphDashboardFromConfig.tsx
@@ -15,9 +15,9 @@ import { UNDPColorModule } from '../ColorPalette';
 
 interface ConfigObject {
   graphSettings?: any;
-  dataSettings: DataSettingsDataType;
+  dataSettings?: DataSettingsDataType;
   filters?: FilterUiSettingsDataType[];
-  graphType: Exclude<GraphType, 'geoHubMap' | 'geoHubCompareMap'>;
+  graphType: GraphType;
   dataTransform?: {
     keyColumn: string;
     aggregationColumnsSetting?: AggregationSettingsDataType[];