@undp/data-viz 1.5.8 → 1.5.9

package/dist/GeoHubMap.js

@@ -1,15 +1,15 @@
-import { j as e, m as I } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import R, { useState as N, useRef as M, useEffect as L, useMemo as A } from "react";
-import { Z as E, H as Z } from "./DropdownSelect-CtOKZHD0.js";
+import { j as e, m as A } from "./index-CHPV5EwG-DBWUSD9b.js";
+import W, { useState as C, useRef as M, useEffect as L, useMemo as E } from "react";
+import { Z, H as F } from "./DropdownSelect-6kjXM6oW.js";
 import w from "maplibre-gl";
-import * as W from "pmtiles";
+import * as _ from "pmtiles";
 /* empty css                     */
 import { f as z } from "./fetchAndParseData-sapWbnYk.js";
 import { f as V } from "./filterData-9nEcQ-Jp.js";
-import { X as _ } from "./index-BmCqpO1B.js";
-import { s as $ } from "./string2HTML-oFCROsus.js";
-import { s as P } from "./select-DKy99ogv.js";
-import { GraphHeader as F } from "./GraphHeader.js";
+import { X as $ } from "./index-zZjQEHlm.js";
+import { s as P } from "./string2HTML-oFCROsus.js";
+import { s as R } from "./select-DKy99ogv.js";
+import { GraphHeader as I } from "./GraphHeader.js";
 import { GraphFooter as J } from "./GraphFooter.js";
 function X(k) {
   const {
@@ -17,62 +17,62 @@ function X(k) {
     height: n,
     width: r,
     relativeHeight: a,
-    center: y,
-    zoomLevel: b,
+    center: b,
+    zoomLevel: y,
     minHeight: c,
     includeLayers: u,
-    excludeLayers: p,
+    excludeLayers: g,
     mapLegend: l
-  } = k, [o, v] = N(0), [j, h] = N(0), [H, C] = N(!0), d = M(null), g = M(null), i = M(null);
+  } = k, [o, v] = C(0), [j, h] = C(0), [H, S] = C(!0), d = M(null), p = M(null), s = M(null);
   return L(() => {
-    const s = new ResizeObserver((m) => {
+    const i = new ResizeObserver((m) => {
       v(r || m[0].target.clientWidth || 620), h(n || m[0].target.clientHeight || 480);
     });
-    return d.current && (h(d.current.clientHeight || 480), v(d.current.clientWidth || 620), r || s.observe(d.current)), () => s.disconnect();
+    return d.current && (h(d.current.clientHeight || 480), v(d.current.clientWidth || 620), r || i.observe(d.current)), () => i.disconnect();
   }, [r, n]), L(() => {
-    g.current && o && !i.current && z(t).then((s) => {
-      P(g.current).selectAll("div").remove();
-      const f = new W.Protocol();
+    p.current && o && !s.current && z(t).then((i) => {
+      R(p.current).selectAll("div").remove();
+      const f = new _.Protocol();
       w.addProtocol("pmtiles", f.tile);
       const x = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        container: g.current,
-        style: u.length === 0 && p.length === 0 ? s : {
-          ...s,
-          layers: V(s.layers, [
+        container: p.current,
+        style: u.length === 0 && g.length === 0 ? i : {
+          ...i,
+          layers: V(i.layers, [
             {
               column: "id",
               includeValues: u,
-              excludeValues: p
+              excludeValues: g
             }
           ])
         },
         attributionControl: !0
       };
-      y && (x.center = y), b && (x.zoom = b), i.current = new w.Map(x), i.current.addControl(
+      b && (x.center = b), y && (x.zoom = y), s.current = new w.Map(x), s.current.addControl(
         new w.NavigationControl({
           visualizePitch: !0,
           showZoom: !0,
           showCompass: !0
         }),
         "bottom-right"
-      ), i.current.addControl(new w.ScaleControl(), "bottom-left");
+      ), s.current.addControl(new w.ScaleControl(), "bottom-left");
     });
-  }, [o, y, b, u, p, t]), L(() => {
-    i.current && z(t).then((s) => {
+  }, [o, b, y, u, g, t]), L(() => {
+    s.current && z(t).then((i) => {
       const m = {
-        ...s,
-        layers: V(s.layers, [
+        ...i,
+        layers: V(i.layers, [
           {
             column: "id",
             includeValues: u,
-            excludeValues: p
+            excludeValues: g
           }
         ])
       };
-      i.current.setStyle(m);
+      s.current.setStyle(m);
     });
-  }, [p, u, t]), /* @__PURE__ */ e.jsx(
+  }, [g, u, t]), /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "flex flex-col grow justify-center leading-0",
@@ -92,7 +92,7 @@ function X(k) {
             /* @__PURE__ */ e.jsx(
               "div",
               {
-                ref: g,
+                ref: p,
                 className: "map maplibre-show-control",
                 style: { width: "100%", height: "100%" }
               }
@@ -101,34 +101,19 @@ function X(k) {
               /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  style: {
-                    backgroundColor: "rgba(240,240,240, 0.7)",
-                    border: "1px solid var(--gray-400)",
-                    borderRadius: "999px",
-                    width: "24px",
-                    height: "24px",
-                    padding: "3px",
-                    cursor: "pointer",
-                    zIndex: 10,
-                    position: "absolute",
-                    right: "-0.75rem",
-                    top: "-0.75rem"
-                  },
+                  className: "color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",
                   onClick: () => {
-                    C(!1);
+                    S(!1);
                   },
-                  children: /* @__PURE__ */ e.jsx(_, {})
+                  children: /* @__PURE__ */ e.jsx($, {})
                 }
               ),
               /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: "p-2",
-                  style: {
-                    backgroundColor: "rgba(240,240,240, 0.7)"
-                  },
-                  dangerouslySetInnerHTML: typeof l == "string" ? { __html: $(l) } : void 0,
-                  children: R.isValidElement(l) ? l : null
+                  className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",
+                  dangerouslySetInnerHTML: typeof l == "string" ? { __html: P(l) } : void 0,
+                  children: W.isValidElement(l) ? l : null
                 }
               )
             ] }) : /* @__PURE__ */ e.jsx(
@@ -137,9 +122,9 @@ function X(k) {
                 type: "button",
                 className: "mb-0 border-0 bg-transparent p-0 self-start",
                 onClick: () => {
-                  C(!0);
+                  S(!0);
                 },
-                children: /* @__PURE__ */ e.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
+                children: /* @__PURE__ */ e.jsx("div", { className: "show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
               }
             ) }) : null
           ]
@@ -154,39 +139,39 @@ function q(k) {
     height: n,
     width: r,
     relativeHeight: a,
-    center: y,
-    zoomLevel: b,
+    center: b,
+    zoomLevel: y,
     minHeight: c,
     includeLayers: u,
-    excludeLayers: p,
+    excludeLayers: g,
     mapLegend: l
-  } = k, [o, v] = N(0), [j, h] = N(0), [H, C] = N(!0), d = M(null), g = M(null);
+  } = k, [o, v] = C(0), [j, h] = C(0), [H, S] = C(!0), d = M(null), p = M(null);
   return L(() => {
-    const i = new ResizeObserver((s) => {
-      v(r || s[0].target.clientWidth || 620), h(n || s[0].target.clientHeight || 480);
+    const s = new ResizeObserver((i) => {
+      v(r || i[0].target.clientWidth || 620), h(n || i[0].target.clientHeight || 480);
     });
-    return d.current && (h(d.current.clientHeight || 480), v(d.current.clientWidth || 620), r || i.observe(d.current)), () => i.disconnect();
+    return d.current && (h(d.current.clientHeight || 480), v(d.current.clientWidth || 620), r || s.observe(d.current)), () => s.disconnect();
   }, [r, n]), L(() => {
-    g.current && o && z(t).then((i) => {
-      P(g.current).selectAll("div").remove();
-      const m = new W.Protocol();
+    p.current && o && z(t).then((s) => {
+      R(p.current).selectAll("div").remove();
+      const m = new _.Protocol();
       w.addProtocol("pmtiles", m.tile);
       const f = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        container: g.current,
-        style: u.length === 0 && p.length === 0 ? i : {
-          ...i,
-          layers: V(i.layers, [
+        container: p.current,
+        style: u.length === 0 && g.length === 0 ? s : {
+          ...s,
+          layers: V(s.layers, [
             {
               column: "id",
               includeValues: u,
-              excludeValues: p
+              excludeValues: g
             }
           ])
         },
         attributionControl: !0
       };
-      y && (f.center = y), b && (f.zoom = b);
+      b && (f.center = b), y && (f.zoom = y);
       const x = new w.Map(f);
       x.addControl(
         new w.NavigationControl({
@@ -197,7 +182,7 @@ function q(k) {
         "bottom-right"
       ), x.addControl(new w.ScaleControl(), "bottom-left");
     });
-  }, [o, t, y, b, u, p]), /* @__PURE__ */ e.jsx(
+  }, [o, t, b, y, u, g]), /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "flex flex-col grow justify-center leading-0",
@@ -217,7 +202,7 @@ function q(k) {
             /* @__PURE__ */ e.jsx(
               "div",
               {
-                ref: g,
+                ref: p,
                 className: "map maplibre-show-control",
                 style: { width: "100%", height: "100%" }
               }
@@ -226,34 +211,19 @@ function q(k) {
               /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  style: {
-                    backgroundColor: "rgba(240,240,240, 0.7)",
-                    border: "1px solid var(--gray-400)",
-                    borderRadius: "999px",
-                    width: "24px",
-                    height: "24px",
-                    padding: "3px",
-                    cursor: "pointer",
-                    zIndex: 10,
-                    position: "absolute",
-                    right: "-0.75rem",
-                    top: "-0.75rem"
-                  },
+                  className: "color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",
                   onClick: () => {
-                    C(!1);
+                    S(!1);
                   },
-                  children: /* @__PURE__ */ e.jsx(_, {})
+                  children: /* @__PURE__ */ e.jsx($, {})
                 }
               ),
               /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: "p-2",
-                  style: {
-                    backgroundColor: "rgba(240,240,240, 0.7)"
-                  },
-                  dangerouslySetInnerHTML: typeof l == "string" ? { __html: $(l) } : void 0,
-                  children: R.isValidElement(l) ? l : null
+                  className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",
+                  dangerouslySetInnerHTML: typeof l == "string" ? { __html: P(l) } : void 0,
+                  children: W.isValidElement(l) ? l : null
                 }
               )
             ] }) : /* @__PURE__ */ e.jsx(
@@ -262,9 +232,9 @@ function q(k) {
                 type: "button",
                 className: "mb-0 border-0 bg-transparent p-0 self-start",
                 onClick: () => {
-                  C(!0);
+                  S(!0);
                 },
-                children: /* @__PURE__ */ e.jsx("div", { className: "items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
+                children: /* @__PURE__ */ e.jsx("div", { className: "show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500", children: "Show Legend" })
               }
             ) }) : null
           ]
@@ -273,38 +243,38 @@ function q(k) {
     }
   );
 }
-function se(k) {
+function ie(k) {
   const {
     mapStyle: t,
     graphTitle: n,
     height: r,
     width: a,
-    relativeHeight: y,
-    sources: b,
+    relativeHeight: b,
+    sources: y,
     graphDescription: c,
     footNote: u,
-    padding: p,
+    padding: g,
     backgroundColor: l = !1,
     center: o,
     zoomLevel: v,
     graphID: j,
     language: h = "en",
     minHeight: H = 0,
-    theme: C = "light",
+    theme: S = "light",
     includeLayers: d = [],
-    excludeLayers: g = [],
-    ariaLabel: i,
-    uiMode: s = "normal",
+    excludeLayers: p = [],
+    ariaLabel: s,
+    uiMode: i = "normal",
     styles: m,
     classNames: f,
     mapLegend: x
-  } = k, [D, O] = N(
+  } = k, [D, O] = C(
     typeof t == "string" ? t : t[0].style
   );
   L(() => {
     O(typeof t == "string" ? t : t[0].style);
   }, [t]);
-  const G = A(
+  const G = E(
     () => ({
       ignoreCase: !0,
       ignoreAccents: !0,
@@ -315,12 +285,12 @@ function se(k) {
   return /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: `${C || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
+      className: `${S || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
       dir: h === "he" || h === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: I(
+          className: A(
             `${l ? l === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${h || "en"}`,
             a ? "w-fit" : "w-full",
             f?.graphContainer
@@ -330,15 +300,15 @@ function se(k) {
             ...l && l !== !0 ? { backgroundColor: l } : {}
           },
           id: j,
-          "aria-label": i || `${n ? `The graph shows ${n}. ` : ""}This is a map.${c ? ` ${c}` : ""}`,
+          "aria-label": s || `${n ? `The graph shows ${n}. ` : ""}This is a map.${c ? ` ${c}` : ""}`,
           children: /* @__PURE__ */ e.jsx(
             "div",
             {
               className: "flex grow",
-              style: { padding: l ? p || "1rem" : p || 0 },
+              style: { padding: l ? g || "1rem" : g || 0 },
               children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
                 n || c ? /* @__PURE__ */ e.jsx(
-                  F,
+                  I,
                   {
                     styles: {
                       title: m?.title,
@@ -354,22 +324,22 @@ function se(k) {
                   }
                 ) : null,
                 typeof t == "string" ? null : /* @__PURE__ */ e.jsx(
-                  E,
+                  Z,
                   {
-                    options: t.map((S) => ({ label: S.name, value: S.style })),
+                    options: t.map((N) => ({ label: N.name, value: N.style })),
                     isClearable: !1,
                     size: "sm",
-                    variant: s,
+                    variant: i,
                     isRtl: h === "he" || h === "ar",
                     isSearchable: !0,
-                    filterOption: Z(G),
+                    filterOption: F(G),
                     defaultValue: {
                       label: t[0].name,
                       value: t[0].style
                     },
                     controlShouldRenderValue: !0,
-                    onChange: (S) => {
-                      S && O(S.value);
+                    onChange: (N) => {
+                      N && O(N.value);
                     }
                   }
                 ),
@@ -381,10 +351,10 @@ function se(k) {
                     zoomLevel: v,
                     width: a,
                     height: r,
-                    relativeHeight: y,
+                    relativeHeight: b,
                     minHeight: H,
                     includeLayers: d,
-                    excludeLayers: g,
+                    excludeLayers: p,
                     mapLegend: x
                   }
                 ) : /* @__PURE__ */ e.jsx(
@@ -395,16 +365,16 @@ function se(k) {
                     zoomLevel: v,
                     width: a,
                     height: r,
-                    relativeHeight: y,
+                    relativeHeight: b,
                     minHeight: H,
                     includeLayers: d,
-                    excludeLayers: g,
+                    excludeLayers: p,
                     mapLegend: (x || []).find(
-                      (S) => S.mapStyleName === t.find((T) => T.style === D)?.name
+                      (N) => N.mapStyleName === t.find((T) => T.style === D)?.name
                     )?.legend
                   }
                 ),
-                b || u ? /* @__PURE__ */ e.jsx(
+                y || u ? /* @__PURE__ */ e.jsx(
                   J,
                   {
                     styles: { footnote: m?.footnote, source: m?.source },
@@ -412,7 +382,7 @@ function se(k) {
                       footnote: f?.footnote,
                       source: f?.source
                     },
-                    sources: b,
+                    sources: y,
                     footNote: u,
                     width: a
                   }
@@ -426,6 +396,6 @@ function se(k) {
   );
 }
 export {
-  se as GeoHubMap
+  ie as GeoHubMap
 };
 //# sourceMappingURL=GeoHubMap.js.map

package/dist/GeoHubMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"GeoHubMap.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubMultipleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubSingleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function GeoHubMultipleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, includeLayers, excludeLayers, mapStyle]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...d,\r\n          layers: filterData(d.layers, [\r\n            {\r\n              column: 'id',\r\n              includeValues: includeLayers,\r\n              excludeValues: excludeLayers,\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      });\r\n    }\r\n  }, [excludeLayers, includeLayers, mapStyle]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                      border: '1px solid var(--gray-400)',\r\n                      borderRadius: '999px',\r\n                      width: '24px',\r\n                      height: '24px',\r\n                      padding: '3px',\r\n                      cursor: 'pointer',\r\n                      zIndex: 10,\r\n                      position: 'absolute',\r\n                      right: '-0.75rem',\r\n                      top: '-0.75rem',\r\n                    }}\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  mapLegend?: string | React.ReactNode;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n}\r\n\r\nexport function GeoHubSingleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        const map = new maplibreGl.Map(mapObj);\r\n        map.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                      border: '1px solid var(--gray-400)',\r\n                      borderRadius: '999px',\r\n                      width: '24px',\r\n                      height: '24px',\r\n                      padding: '3px',\r\n                      cursor: 'pointer',\r\n                      zIndex: 10,\r\n                      position: 'absolute',\r\n                      right: '-0.75rem',\r\n                      top: '-0.75rem',\r\n                    }}\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { DropdownSelect, createFilter } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\r\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URL for mapStyle JSON. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\r\n  mapStyle: string | { style: string; name: string }[];\r\n  /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */\r\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */\r\n  includeLayers?: string[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    includeLayers = [],\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [selectedMapStyle, setSelectedMapStyle] = useState(\r\n    typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style,\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSelectedMapStyle(typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style);\r\n  }, [mapStyle]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            {typeof mapStyle === 'string' ? null : (\r\n              <DropdownSelect\r\n                options={mapStyle.map(d => ({ label: d.name, value: d.style }))}\r\n                isClearable={false}\r\n                size='sm'\r\n                variant={uiMode}\r\n                isRtl={language === 'he' || language === 'ar'}\r\n                isSearchable\r\n                filterOption={createFilter(filterConfig)}\r\n                defaultValue={{\r\n                  label: mapStyle[0].name,\r\n                  value: mapStyle[0].style,\r\n                }}\r\n                controlShouldRenderValue\r\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                onChange={(el: any) => {\r\n                  if (el) setSelectedMapStyle(el.value);\r\n                }}\r\n              />\r\n            )}\r\n            {typeof mapStyle === 'string' ? (\r\n              <GeoHubSingleMap\r\n                mapStyle={mapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={mapLegend as string | React.ReactNode | undefined}\r\n              />\r\n            ) : (\r\n              <GeoHubMultipleMap\r\n                mapStyle={selectedMapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={\r\n                  ((mapLegend || []) as MapLegendDataType[]).find(\r\n                    d =>\r\n                      d.mapStyleName === mapStyle.find(el => el.style === selectedMapStyle)?.name,\r\n                  )?.legend\r\n                }\r\n              />\r\n            )}\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GeoHubMultipleMap","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","includeLayers","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubSingleMap","map","GeoHubMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","uiMode","styles","classNames","selectedMapStyle","setSelectedMapStyle","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","el","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"GeoHubMap.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubMultipleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubSingleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function GeoHubMultipleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, includeLayers, excludeLayers, mapStyle]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...d,\r\n          layers: filterData(d.layers, [\r\n            {\r\n              column: 'id',\r\n              includeValues: includeLayers,\r\n              excludeValues: excludeLayers,\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      });\r\n    }\r\n  }, [excludeLayers, includeLayers, mapStyle]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  mapLegend?: string | React.ReactNode;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n}\r\n\r\nexport function GeoHubSingleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        const map = new maplibreGl.Map(mapObj);\r\n        map.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { DropdownSelect, createFilter } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\r\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URL for mapStyle JSON. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\r\n  mapStyle: string | { style: string; name: string }[];\r\n  /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */\r\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */\r\n  includeLayers?: string[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    includeLayers = [],\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [selectedMapStyle, setSelectedMapStyle] = useState(\r\n    typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style,\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSelectedMapStyle(typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style);\r\n  }, [mapStyle]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            {typeof mapStyle === 'string' ? null : (\r\n              <DropdownSelect\r\n                options={mapStyle.map(d => ({ label: d.name, value: d.style }))}\r\n                isClearable={false}\r\n                size='sm'\r\n                variant={uiMode}\r\n                isRtl={language === 'he' || language === 'ar'}\r\n                isSearchable\r\n                filterOption={createFilter(filterConfig)}\r\n                defaultValue={{\r\n                  label: mapStyle[0].name,\r\n                  value: mapStyle[0].style,\r\n                }}\r\n                controlShouldRenderValue\r\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                onChange={(el: any) => {\r\n                  if (el) setSelectedMapStyle(el.value);\r\n                }}\r\n              />\r\n            )}\r\n            {typeof mapStyle === 'string' ? (\r\n              <GeoHubSingleMap\r\n                mapStyle={mapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={mapLegend as string | React.ReactNode | undefined}\r\n              />\r\n            ) : (\r\n              <GeoHubMultipleMap\r\n                mapStyle={selectedMapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={\r\n                  ((mapLegend || []) as MapLegendDataType[]).find(\r\n                    d =>\r\n                      d.mapStyleName === mapStyle.find(el => el.style === selectedMapStyle)?.name,\r\n                  )?.legend\r\n                }\r\n              />\r\n            )}\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GeoHubMultipleMap","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","includeLayers","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubSingleMap","map","GeoHubMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","uiMode","styles","classNames","selectedMapStyle","setSelectedMapStyle","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","el","GraphFooter"],"mappings":"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"}