Add prop in map to allow zoom in and out on highlight

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package.json

@@ -1,35 +1,43 @@
 import '@undp/design-system-react/style.css';
 import './styles/styles.css';
-import { DotDensityMap } from './Components/Graphs/Maps/DotDensityMap';
+import { A, H3, P } from '@undp/design-system-react/Typography';
 
 function App() {
   return (
-    <DotDensityMap
-      data={[
-        {
-          lat: 20,
-          long: 10,
-        },
-        {
-          lat: 25,
-          long: 26,
-        },
-        {
-          lat: 0,
-          long: 0,
-        },
-        {
-          lat: 15,
-          long: 5,
-        },
-        {
-          lat: 10,
-          long: 20,
-        },
-      ]}
-      onSeriesMouseClick={function YJ() {}}
-      onSeriesMouseOver={function YJ() {}}
-    />
+    <div
+      style={{
+        height: '90vh',
+        maxWidth: '712px',
+        margin: '0 auto',
+        padding: '2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <img width='56' alt='undp-logo' src='/undp-logo-blue.svg' />
+      <H3 style={{ textAlign: 'center', paddingTop: '24px' }}>UNDP Data Visualization Library</H3>
+      <P style={{ textAlign: 'center' }}>
+        This visualization library for react, developed by the United Nations Development Programme,
+        offers various interactive visualizations such as graphs, maps, and animated charts. You can
+        access the documentation{' '}
+        <A href='https://dataviz.design.undp.org/' target='_blank' rel='noreferrer'>
+          here
+        </A>
+        .
+      </P>
+      <P
+        style={{
+          textAlign: 'center',
+        }}
+      >
+        For any feedback or inquiries, please feel free to reach out to us at{' '}
+        <A href='mailto:data@undp.org' target='_blank' rel='noreferrer'>
+          data@undp.org
+        </A>
+      </P>
+    </div>
   );
 }
 

src/App.tsx

@@ -903,6 +903,7 @@ function GraphEl(props: Props) {
           classNames: settings?.classNames,
           zoomInteraction: settings?.zoomInteraction,
           animate: settings?.animate,
+          zoomAndCenterByHighlightedIds: settings?.zoomAndCenterByHighlightedIds,
         };
       case 'biVariateChoroplethMap':
         return {
@@ -962,6 +963,7 @@ function GraphEl(props: Props) {
           classNames: settings?.classNames,
           zoomInteraction: settings?.zoomInteraction,
           animate: settings?.animate,
+          zoomAndCenterByHighlightedIds: settings?.zoomAndCenterByHighlightedIds,
         };
       case 'dotDensityMap':
         return {

src/Components/Dashboard/GraphEl.tsx

@@ -73,6 +73,7 @@ interface Props {
   animate: AnimateDataType;
   dimmedOpacity: number;
   customLayers: CustomLayerDataType[];
+  zoomAndCenterByHighlightedIds: boolean;
 }
 
 export function Graph(props: Props) {
@@ -109,6 +110,7 @@ export function Graph(props: Props) {
     dimmedOpacity,
     customLayers,
     collapseColorScaleByDefault,
+    zoomAndCenterByHighlightedIds,
   } = props;
   const [showLegend, setShowLegend] = useState(
     collapseColorScaleByDefault === undefined ? !(width < 680) : !collapseColorScaleByDefault,
@@ -165,10 +167,29 @@ export function Graph(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [height, width, zoomInteraction]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const bounds = bbox(mapData as any);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const center = centerOfMass(mapData as any);
+  const bounds = bbox({
+    ...mapData,
+    features: zoomAndCenterByHighlightedIds
+      ? mapData.features.filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (d: any) =>
+            (highlightedIds || []).length === 0 ||
+            highlightedIds.indexOf(d.properties[mapProperty]) !== -1,
+        )
+      : mapData.features,
+  });
+
+  const center = centerOfMass({
+    ...mapData,
+    features: zoomAndCenterByHighlightedIds
+      ? mapData.features.filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (d: any) =>
+            (highlightedIds || []).length === 0 ||
+            highlightedIds.indexOf(d.properties[mapProperty]) !== -1,
+        )
+      : mapData.features,
+  });
   const lonDiff = bounds[2] - bounds[0];
   const latDiff = bounds[3] - bounds[1];
   const scaleX = (((width * 190) / 960) * 360) / lonDiff;

src/Components/Graphs/Maps/BiVariateMap/Graph.tsx

@@ -94,6 +94,8 @@ interface Props {
   isWorldMap?: boolean;
   /** Map projection type */
   mapProjection?: MapProjectionTypes;
+  /** Toggle if the map is centered and zoomed to the highlighted ids. */
+  zoomAndCenterByHighlightedIds?: boolean;
   /** Extend of the allowed zoom in the map */
   zoomScaleExtend?: [number, number];
   /** Extend of the allowed panning in the map */
@@ -197,6 +199,7 @@ export function BiVariateChoroplethMap(props: Props) {
     customLayers = [],
     timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },
     collapseColorScaleByDefault,
+    zoomAndCenterByHighlightedIds = false,
   } = props;
 
   const [svgWidth, setSvgWidth] = useState(0);
@@ -402,6 +405,7 @@ export function BiVariateChoroplethMap(props: Props) {
             dimmedOpacity={dimmedOpacity}
             customLayers={customLayers}
             collapseColorScaleByDefault={collapseColorScaleByDefault}
+            zoomAndCenterByHighlightedIds={zoomAndCenterByHighlightedIds}
           />
         ) : (
           <div

src/Components/Graphs/Maps/BiVariateMap/index.tsx

@@ -69,6 +69,7 @@ interface Props {
   dimmedOpacity: number;
   customLayers: CustomLayerDataType[];
   collapseColorScaleByDefault?: boolean;
+  zoomAndCenterByHighlightedIds: boolean;
 }
 
 export function Graph(props: Props) {
@@ -104,6 +105,7 @@ export function Graph(props: Props) {
     dimmedOpacity,
     customLayers,
     collapseColorScaleByDefault,
+    zoomAndCenterByHighlightedIds,
   } = props;
   const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);
   const zoomRef = useRef<ZoomBehavior<SVGSVGElement, unknown> | null>(null);
@@ -165,10 +167,29 @@ export function Graph(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [height, width, zoomInteraction]);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const bounds = bbox(mapData as any);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const center = centerOfMass(mapData as any);
+  const bounds = bbox({
+    ...mapData,
+    features: zoomAndCenterByHighlightedIds
+      ? mapData.features.filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (d: any) =>
+            (highlightedIds || []).length === 0 ||
+            highlightedIds.indexOf(d.properties[mapProperty]) !== -1,
+        )
+      : mapData.features,
+  });
+
+  const center = centerOfMass({
+    ...mapData,
+    features: zoomAndCenterByHighlightedIds
+      ? mapData.features.filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (d: any) =>
+            (highlightedIds || []).length === 0 ||
+            highlightedIds.indexOf(d.properties[mapProperty]) !== -1,
+        )
+      : mapData.features,
+  });
   const lonDiff = bounds[2] - bounds[0];
   const latDiff = bounds[3] - bounds[1];
   const scaleX = (((width * 190) / 960) * 360) / lonDiff;

src/Components/Graphs/Maps/ChoroplethMap/Graph.tsx

@@ -80,6 +80,8 @@ interface Props {
   mapData?: any;
   /** Scaling factor for the map. Multiplies the scale number to scale. */
   scale?: number;
+  /** Toggle if the map is centered and zoomed to the highlighted ids. */
+  zoomAndCenterByHighlightedIds?: boolean;
   /** Center point of the map */
   centerPoint?: [number, number];
   /** Defines the zoom mode for the map */
@@ -196,6 +198,7 @@ export function ChoroplethMap(props: Props) {
     customLayers = [],
     timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },
     collapseColorScaleByDefault,
+    zoomAndCenterByHighlightedIds = false,
   } = props;
   const [svgWidth, setSvgWidth] = useState(0);
   const [svgHeight, setSvgHeight] = useState(0);
@@ -396,6 +399,7 @@ export function ChoroplethMap(props: Props) {
                 : animate || { duration: 0, once: true, amount: 0 }
             }
             customLayers={customLayers}
+            zoomAndCenterByHighlightedIds={zoomAndCenterByHighlightedIds}
             collapseColorScaleByDefault={collapseColorScaleByDefault}
           />
         ) : (

src/Components/Graphs/Maps/ChoroplethMap/index.tsx

@@ -474,8 +474,7 @@ export interface DashboardColumnDataType extends DashboardColumnDataWithoutGraph
   graphType: GraphType;
 }
 
-export interface PerformanceIntensiveDashboardColumnDataType
-  extends DashboardColumnDataWithoutGraphType {
+export interface PerformanceIntensiveDashboardColumnDataType extends DashboardColumnDataWithoutGraphType {
   graphType: GraphType | ThreeDGraphType | GeoHubGraphType;
 }
 
@@ -517,8 +516,7 @@ export interface DashboardLayoutDataType extends DashboardLayoutDataWithoutRowsT
     height?: number;
   }[];
 }
-export interface PerformanceIntensiveDashboardLayoutDataType
-  extends DashboardLayoutDataWithoutRowsType {
+export interface PerformanceIntensiveDashboardLayoutDataType extends DashboardLayoutDataWithoutRowsType {
   rows: {
     columns: PerformanceIntensiveDashboardColumnDataType[];
     height?: number;
@@ -1018,6 +1016,7 @@ export interface GraphSettingsDataType {
   mapColorLegendTitle?: string;
   choroplethScaleType?: Exclude<ScaleDataType, 'linear'>;
   trackColor?: string;
+  zoomAndCenterByHighlightedIds?: boolean;
 }
 
 export interface InfoBoxDataType {