@undp/data-viz 2.6.0 → 2.6.1

package/dist/LinearColorLegend.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./compiler-runtime-oPPev21o.cjs"),F=require("@undp/design-system-react/cn"),b=require("@undp/design-system-react/Typography"),v=require("./numberFormattingFunction-u2iNHL_c.cjs");function N(E){const e=t.compilerRuntimeExports.c(29),{colorLegendTitle:f,colorDomain:l,colors:h,width:y,className:g,locale:R}=E,n=R===void 0?"en":R;let i;e[0]!==g?(i=F.cn("flex gap-0 flex-wrap justify-center leading-0 pb-3",g),e[0]=g,e[1]=i):i=e[1];const j=y?`${y}px`:"none";let s;e[2]!==j?(s={maxWidth:j},e[2]=j,e[3]=s):s=e[3];let o;e[4]!==f?(o=f&&f!==""?t.jsxRuntimeExports.jsx(b.P,{size:"sm",marginBottom:"2xs",className:"w-full text-center",children:f}):null,e[4]=f,e[5]=o):o=e[5];const w=`linear-gradient(90deg, ${h[0]} 0%, ${h[1]} 100%)`;let r;e[6]!==w?(r=t.jsxRuntimeExports.jsx("div",{className:"h-4 mb-1 w-full min-w-[360px]",style:{background:w}}),e[6]=w,e[7]=r):r=e[7];let c;e[8]!==l[0]||e[9]!==n?(c=v.numberFormattingFunction(l[0],void 0,2,"","",n),e[8]=l[0],e[9]=n,e[10]=c):c=e[10];let a;e[11]!==c?(a=t.jsxRuntimeExports.jsx(b.P,{marginBottom:"none",size:"sm",children:c}),e[11]=c,e[12]=a):a=e[12];let m;e[13]!==l[1]||e[14]!==n?(m=v.numberFormattingFunction(l[1],void 0,2,"","",n),e[13]=l[1],e[14]=n,e[15]=m):m=e[15];let x;e[16]!==m?(x=t.jsxRuntimeExports.jsx(b.P,{marginBottom:"none",size:"sm",children:m}),e[16]=m,e[17]=x):x=e[17];let u;e[18]!==x||e[19]!==a?(u=t.jsxRuntimeExports.jsxs("div",{className:"flex justify-between w-full min-w-[360px]",children:[a,x]}),e[18]=x,e[19]=a,e[20]=u):u=e[20];let d;e[21]!==u||e[22]!==r?(d=t.jsxRuntimeExports.jsxs("div",{className:"flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0",children:[r,u]}),e[21]=u,e[22]=r,e[23]=d):d=e[23];let p;return e[24]!==i||e[25]!==d||e[26]!==s||e[27]!==o?(p=t.jsxRuntimeExports.jsxs("div",{className:i,style:s,"aria-label":"Color legend",children:[o,d]}),e[24]=i,e[25]=d,e[26]=s,e[27]=o,e[28]=p):p=e[28],p}exports.LinearColorLegend=N;
-//# sourceMappingURL=LinearColorLegend.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./jsx-runtime-Cd1vCQjn.cjs`),t=require(`./numberFormattingFunction-Caf5NyIo.cjs`);let n=require(`@undp/design-system-react/cn`),r=require(`@undp/design-system-react/Typography`);var i=e.t();function a(e){let{colorLegendTitle:a,colorDomain:o,colors:s,width:c,className:l,locale:u=`en`}=e;return(0,i.jsxs)(`div`,{className:(0,n.cn)(`flex gap-0 flex-wrap justify-center leading-0 pb-3`,l),style:{maxWidth:c?`${c}px`:`none`},children:[a&&a!==``?(0,i.jsx)(r.P,{size:`sm`,marginBottom:`2xs`,className:`w-full text-center`,children:a}):null,(0,i.jsxs)(`div`,{className:`flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0`,children:[(0,i.jsx)(`div`,{className:`h-4 mb-1 w-full min-w-[360px]`,style:{background:`linear-gradient(90deg, ${s[0]} 0%, ${s[1]} 100%)`}}),(0,i.jsxs)(`div`,{className:`flex justify-between w-full min-w-[360px]`,children:[(0,i.jsx)(r.P,{marginBottom:`none`,size:`sm`,children:t.t(o[0],void 0,2,``,``,u)}),(0,i.jsx)(r.P,{marginBottom:`none`,size:`sm`,children:t.t(o[1],void 0,2,``,``,u)})]})]})]})}exports.LinearColorLegend=a;
+//# sourceMappingURL=LinearColorLegend.cjs.map

package/dist/LinearColorLegend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinearColorLegend.cjs","sources":["../src/Components/Elements/LinearColorLegend.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  colors: string[];\r\n  colorDomain: number[];\r\n  colorLegendTitle?: string;\r\n  width?: number;\r\n  className?: string;\r\n  locale?: string;\r\n}\r\n\r\nexport function LinearColorLegend(props: Props) {\r\n  const { colorLegendTitle, colorDomain, colors, width, className, locale = 'en' } = props;\r\n  return (\r\n    <div\r\n      className={cn('flex gap-0 flex-wrap justify-center leading-0 pb-3', className)}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n      aria-label='Color legend'\r\n    >\r\n      {colorLegendTitle && colorLegendTitle !== '' ? (\r\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\r\n          {colorLegendTitle}\r\n        </P>\r\n      ) : null}\r\n\r\n      <div className='flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0'>\r\n        <div\r\n          className='h-4 mb-1 w-full min-w-[360px]'\r\n          style={{ background: `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)` }}\r\n        />\r\n        <div className='flex justify-between w-full min-w-[360px]'>\r\n          <P marginBottom='none' size='sm'>\r\n            {numberFormattingFunction(colorDomain[0], undefined, 2, '', '', locale)}\r\n          </P>\r\n          <P marginBottom='none' size='sm'>\r\n            {numberFormattingFunction(colorDomain[1], undefined, 2, '', '', locale)}\r\n          </P>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["LinearColorLegend","props","$","_c","colorLegendTitle","colorDomain","colors","width","className","locale","t0","undefined","t1","cn","t2","t3","maxWidth","t4","jsx","P","t5","t6","background","t7","numberFormattingFunction","t8","t9","t10","t11","jsxs","t12","t13"],"mappings":"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"}
+{"version":3,"file":"LinearColorLegend.cjs","names":[],"sources":["../src/Components/Elements/LinearColorLegend.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { P } from '@undp/design-system-react/Typography';\n\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  colors: string[];\n  colorDomain: number[];\n  colorLegendTitle?: string;\n  width?: number;\n  className?: string;\n  locale?: string;\n}\n\nexport function LinearColorLegend(props: Props) {\n  const { colorLegendTitle, colorDomain, colors, width, className, locale = 'en' } = props;\n  return (\n    <div\n      className={cn('flex gap-0 flex-wrap justify-center leading-0 pb-3', className)}\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\n    >\n      {colorLegendTitle && colorLegendTitle !== '' ? (\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\n          {colorLegendTitle}\n        </P>\n      ) : null}\n\n      <div className='flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0'>\n        <div\n          className='h-4 mb-1 w-full min-w-[360px]'\n          style={{ background: `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)` }}\n        />\n        <div className='flex justify-between w-full min-w-[360px]'>\n          <P marginBottom='none' size='sm'>\n            {numberFormattingFunction(colorDomain[0], undefined, 2, '', '', locale)}\n          </P>\n          <P marginBottom='none' size='sm'>\n            {numberFormattingFunction(colorDomain[1], undefined, 2, '', '', locale)}\n          </P>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"kTAcA,SAAgB,EAAkB,EAAc,CAC9C,GAAM,CAAE,mBAAkB,cAAa,SAAQ,QAAO,YAAW,SAAS,MAAS,EACnF,OACE,EAAA,EAAA,MAAC,MAAD,CACE,WAAA,EAAA,EAAA,IAAc,qDAAsD,CAAS,EAC7E,MAAO,CAAE,SAAU,EAAQ,GAAG,EAAM,IAAM,MAAO,WAFnD,CAIG,GAAoB,IAAqB,IACxC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,KAAK,KAAK,aAAa,MAAM,UAAU,8BACvC,CACA,CAAA,EACD,MAEJ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8EAAf,EACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,gCACV,MAAO,CAAE,WAAY,0BAA0B,EAAO,GAAG,OAAO,EAAO,GAAG,OAAQ,CACnF,CAAA,GACD,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,qDAAf,EACE,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,aAAa,OAAO,KAAK,cACzB,EAAA,EAAyB,EAAY,GAAI,IAAA,GAAW,EAAG,GAAI,GAAI,CAAM,CACrE,CAAA,GACH,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,aAAa,OAAO,KAAK,cACzB,EAAA,EAAyB,EAAY,GAAI,IAAA,GAAW,EAAG,GAAI,GAAI,CAAM,CACrE,CAAA,CACA,GACF,GACF,GAET"}

package/dist/LinearColorLegend.d.ts

@@ -1,14 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-export declare function LinearColorLegend(props: Props): JSX.Element;
-
-declare interface Props {
-    colors: string[];
-    colorDomain: number[];
-    colorLegendTitle?: string;
-    width?: number;
-    className?: string;
-    locale?: string;
-}
-
-export { }
+export * from './Components/Elements/LinearColorLegend'
+export {}

package/dist/LinearColorLegend.js

@@ -1,55 +1,40 @@
-import { c as z, j as l } from "./compiler-runtime-qHgugrLy.js";
-import { cn as B } from "@undp/design-system-react/cn";
-import { P as h } from "@undp/design-system-react/Typography";
-import { n as y } from "./numberFormattingFunction-BUUV_luR.js";
-function R($) {
-  const e = z.c(29), {
-    colorLegendTitle: p,
-    colorDomain: t,
-    colors: v,
-    width: b,
-    className: g,
-    locale: N
-  } = $, s = N === void 0 ? "en" : N;
-  let i;
-  e[0] !== g ? (i = B("flex gap-0 flex-wrap justify-center leading-0 pb-3", g), e[0] = g, e[1] = i) : i = e[1];
-  const j = b ? `${b}px` : "none";
-  let n;
-  e[2] !== j ? (n = {
-    maxWidth: j
-  }, e[2] = j, e[3] = n) : n = e[3];
-  let o;
-  e[4] !== p ? (o = p && p !== "" ? /* @__PURE__ */ l.jsx(h, { size: "sm", marginBottom: "2xs", className: "w-full text-center", children: p }) : null, e[4] = p, e[5] = o) : o = e[5];
-  const w = `linear-gradient(90deg, ${v[0]} 0%, ${v[1]} 100%)`;
-  let r;
-  e[6] !== w ? (r = /* @__PURE__ */ l.jsx("div", { className: "h-4 mb-1 w-full min-w-[360px]", style: {
-    background: w
-  } }), e[6] = w, e[7] = r) : r = e[7];
-  let a;
-  e[8] !== t[0] || e[9] !== s ? (a = y(t[0], void 0, 2, "", "", s), e[8] = t[0], e[9] = s, e[10] = a) : a = e[10];
-  let m;
-  e[11] !== a ? (m = /* @__PURE__ */ l.jsx(h, { marginBottom: "none", size: "sm", children: a }), e[11] = a, e[12] = m) : m = e[12];
-  let c;
-  e[13] !== t[1] || e[14] !== s ? (c = y(t[1], void 0, 2, "", "", s), e[13] = t[1], e[14] = s, e[15] = c) : c = e[15];
-  let f;
-  e[16] !== c ? (f = /* @__PURE__ */ l.jsx(h, { marginBottom: "none", size: "sm", children: c }), e[16] = c, e[17] = f) : f = e[17];
-  let d;
-  e[18] !== f || e[19] !== m ? (d = /* @__PURE__ */ l.jsxs("div", { className: "flex justify-between w-full min-w-[360px]", children: [
-    m,
-    f
-  ] }), e[18] = f, e[19] = m, e[20] = d) : d = e[20];
-  let x;
-  e[21] !== d || e[22] !== r ? (x = /* @__PURE__ */ l.jsxs("div", { className: "flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0", children: [
-    r,
-    d
-  ] }), e[21] = d, e[22] = r, e[23] = x) : x = e[23];
-  let u;
-  return e[24] !== i || e[25] !== x || e[26] !== n || e[27] !== o ? (u = /* @__PURE__ */ l.jsxs("div", { className: i, style: n, "aria-label": "Color legend", children: [
-    o,
-    x
-  ] }), e[24] = i, e[25] = x, e[26] = n, e[27] = o, e[28] = u) : u = e[28], u;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { t } from "./numberFormattingFunction-Cha8dhHc.js";
+import { cn as n } from "@undp/design-system-react/cn";
+import { P as r } from "@undp/design-system-react/Typography";
+//#region src/Components/Elements/LinearColorLegend.tsx
+var i = e();
+function a(e) {
+	let { colorLegendTitle: a, colorDomain: o, colors: s, width: c, className: l, locale: u = "en" } = e;
+	return /* @__PURE__ */ (0, i.jsxs)("div", {
+		className: n("flex gap-0 flex-wrap justify-center leading-0 pb-3", l),
+		style: { maxWidth: c ? `${c}px` : "none" },
+		children: [a && a !== "" ? /* @__PURE__ */ (0, i.jsx)(r, {
+			size: "sm",
+			marginBottom: "2xs",
+			className: "w-full text-center",
+			children: a
+		}) : null, /* @__PURE__ */ (0, i.jsxs)("div", {
+			className: "flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0",
+			children: [/* @__PURE__ */ (0, i.jsx)("div", {
+				className: "h-4 mb-1 w-full min-w-[360px]",
+				style: { background: `linear-gradient(90deg, ${s[0]} 0%, ${s[1]} 100%)` }
+			}), /* @__PURE__ */ (0, i.jsxs)("div", {
+				className: "flex justify-between w-full min-w-[360px]",
+				children: [/* @__PURE__ */ (0, i.jsx)(r, {
+					marginBottom: "none",
+					size: "sm",
+					children: t(o[0], void 0, 2, "", "", u)
+				}), /* @__PURE__ */ (0, i.jsx)(r, {
+					marginBottom: "none",
+					size: "sm",
+					children: t(o[1], void 0, 2, "", "", u)
+				})]
+			})]
+		})]
+	});
 }
-export {
-  R as LinearColorLegend
-};
-//# sourceMappingURL=LinearColorLegend.js.map
+//#endregion
+export { a as LinearColorLegend };
+
+//# sourceMappingURL=LinearColorLegend.js.map

package/dist/LinearColorLegend.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearColorLegend.js","sources":["../src/Components/Elements/LinearColorLegend.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  colors: string[];\r\n  colorDomain: number[];\r\n  colorLegendTitle?: string;\r\n  width?: number;\r\n  className?: string;\r\n  locale?: string;\r\n}\r\n\r\nexport function LinearColorLegend(props: Props) {\r\n  const { colorLegendTitle, colorDomain, colors, width, className, locale = 'en' } = props;\r\n  return (\r\n    <div\r\n      className={cn('flex gap-0 flex-wrap justify-center leading-0 pb-3', className)}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n      aria-label='Color legend'\r\n    >\r\n      {colorLegendTitle && colorLegendTitle !== '' ? (\r\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\r\n          {colorLegendTitle}\r\n        </P>\r\n      ) : null}\r\n\r\n      <div className='flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0'>\r\n        <div\r\n          className='h-4 mb-1 w-full min-w-[360px]'\r\n          style={{ background: `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)` }}\r\n        />\r\n        <div className='flex justify-between w-full min-w-[360px]'>\r\n          <P marginBottom='none' size='sm'>\r\n            {numberFormattingFunction(colorDomain[0], undefined, 2, '', '', locale)}\r\n          </P>\r\n          <P marginBottom='none' size='sm'>\r\n            {numberFormattingFunction(colorDomain[1], undefined, 2, '', '', locale)}\r\n          </P>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["LinearColorLegend","props","$","_c","colorLegendTitle","colorDomain","colors","width","className","locale","t0","undefined","t1","cn","t2","t3","maxWidth","t4","jsx","P","t5","t6","background","t7","numberFormattingFunction","t8","t9","t10","t11","jsxs","t12","t13"],"mappings":"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"}
+{"version":3,"file":"LinearColorLegend.js","names":[],"sources":["../src/Components/Elements/LinearColorLegend.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { P } from '@undp/design-system-react/Typography';\n\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  colors: string[];\n  colorDomain: number[];\n  colorLegendTitle?: string;\n  width?: number;\n  className?: string;\n  locale?: string;\n}\n\nexport function LinearColorLegend(props: Props) {\n  const { colorLegendTitle, colorDomain, colors, width, className, locale = 'en' } = props;\n  return (\n    <div\n      className={cn('flex gap-0 flex-wrap justify-center leading-0 pb-3', className)}\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\n    >\n      {colorLegendTitle && colorLegendTitle !== '' ? (\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\n          {colorLegendTitle}\n        </P>\n      ) : null}\n\n      <div className='flex gap-0 flex-wrap justify-center w-full min-w-[360px] leading-0'>\n        <div\n          className='h-4 mb-1 w-full min-w-[360px]'\n          style={{ background: `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)` }}\n        />\n        <div className='flex justify-between w-full min-w-[360px]'>\n          <P marginBottom='none' size='sm'>\n            {numberFormattingFunction(colorDomain[0], undefined, 2, '', '', locale)}\n          </P>\n          <P marginBottom='none' size='sm'>\n            {numberFormattingFunction(colorDomain[1], undefined, 2, '', '', locale)}\n          </P>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAkB,GAAc;CAC9C,IAAM,EAAE,qBAAkB,gBAAa,WAAQ,UAAO,cAAW,YAAS,SAAS;CACnF,OACE,iBAAA,GAAA,EAAA,MAAC,OAAD;EACE,WAAW,EAAG,sDAAsD,CAAS;EAC7E,OAAO,EAAE,UAAU,IAAQ,GAAG,EAAM,MAAM,OAAO;YAFnD,CAIG,KAAoB,MAAqB,KACxC,iBAAA,GAAA,EAAA,KAAC,GAAD;GAAG,MAAK;GAAK,cAAa;GAAM,WAAU;aACvC;EACA,CAAA,IACD,MAEJ,iBAAA,GAAA,EAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,EAAA,KAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,YAAY,0BAA0B,EAAO,GAAG,OAAO,EAAO,GAAG,QAAQ;GACnF,CAAA,GACD,iBAAA,GAAA,EAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,EAAA,KAAC,GAAD;KAAG,cAAa;KAAO,MAAK;eACzB,EAAyB,EAAY,IAAI,KAAA,GAAW,GAAG,IAAI,IAAI,CAAM;IACrE,CAAA,GACH,iBAAA,GAAA,EAAA,KAAC,GAAD;KAAG,cAAa;KAAO,MAAK;eACzB,EAAyB,EAAY,IAAI,KAAA,GAAW,GAAG,IAAI,IAAI,CAAM;IACrE,CAAA,CACA;KACF;IACF;;AAET"}

package/dist/MapWithLayerSelection-BVxg3gYq.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Icons-DXw7FqJ_.cjs`),r=require(`./lodash.flattendeep-_PlS_1wX.cjs`),i=require(`./GraphFooter.cjs`),a=require(`./GraphHeader.cjs`),o=require(`./fetchAndParseData-Dlq4UzdG.cjs`),s=require(`./filterData-B2pPOkwy.cjs`),c=require(`./GraphContainer-7xAPK4Tb.cjs`),l=require(`./string2HTML-CyL1MYMB.cjs`),u=require(`./select-CZVfejpg.cjs`);;/* empty css                       */let d=require(`react`);d=e.a(d,1);let f=require(`@undp/design-system-react/DropdownSelect`),p=require(`@undp/design-system-react/Spacer`),m=require(`maplibre-gl`);m=e.a(m,1);let h=require(`pmtiles`);h=e.a(h,1);var g=e.a(r.t(),1),_=t.t();function v(e){let{mapStyle:t,center:r,zoomLevel:i,selectedLayer:a,layerIdList:f,excludeLayers:p,mapLegend:g}=e,[v,y]=(0,d.useState)(0),[b,x]=(0,d.useState)(0),[S,C]=(0,d.useState)(!0),[w,T]=(0,d.useState)(void 0),E=(0,d.useRef)(null),D=(0,d.useRef)(null),O=(0,d.useRef)(null);return(0,d.useEffect)(()=>{let e=new ResizeObserver(e=>{y(e[0].target.clientWidth||620),x(e[0].target.clientHeight||480)});return E.current&&e.observe(E.current),()=>e.disconnect()},[]),(0,d.useEffect)(()=>{D.current&&v&&!O.current&&o.r(t).then(e=>{T(e),u.t(D.current).selectAll(`div`).remove();let t=new h.Protocol;m.default.addProtocol(`pmtiles`,t.tile);let n={container:D.current,style:{...e,layers:s.t(e.layers,[{column:`id`,excludeValues:[...p,...f.filter(e=>a.indexOf(e)===-1)]}])},attributionControl:!0};r&&(n.center=r),i&&(n.zoom=i),O.current=new m.default.Map(n),O.current.addControl(new m.default.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),`bottom-right`),O.current.addControl(new m.default.ScaleControl,`bottom-left`)})},[v,r,i,f,t,p,a]),(0,d.useEffect)(()=>{if(O.current)if(w){let e={...w,layers:s.t(w.layers,[{column:`id`,excludeValues:[...p,...f.filter(e=>a.indexOf(e)===-1)]}])};O.current.setStyle(e)}else o.r(t).then(e=>{let t={...e,layers:s.t(e.layers,[{column:`id`,excludeValues:[...p,...f.filter(e=>a.indexOf(e)===-1)]}])};O.current.setStyle(t)})},[p,f,t,w,a]),(0,_.jsx)(c.t,{ref:E,children:v&&b?(0,_.jsxs)(`div`,{style:{width:v,height:b},children:[(0,_.jsx)(`div`,{ref:D,className:`map maplibre-show-control w-full h-full`}),g?(0,_.jsx)(`div`,{className:`absolute left-[22px] bottom-13`,children:S?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`button`,{type:`button`,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)},onKeyDown:e=>{e.key===`Enter`&&C(!1)},children:(0,_.jsx)(n.m,{})}),(0,_.jsx)(`div`,{className:`color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]`,dangerouslySetInnerHTML:typeof g==`string`?{__html:l.t(g)}:void 0,children:d.default.isValidElement(g)?g:null})]}):(0,_.jsx)(`button`,{type:`button`,className:`p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button`,onClick:()=>{C(!0)},children:(0,_.jsx)(n.i,{})})}):null]}):null})}function y(e){let{mapStyle:t,graphTitle:n,height:r,width:o,relativeHeight:s,sources:l,graphDescription:u,footNote:m,padding:h,backgroundColor:y=!1,center:b,zoomLevel:x,graphID:S,language:C=`en`,minHeight:w=0,theme:T=`light`,layerSelection:E,excludeLayers:D=[],ariaLabel:O,uiMode:k=`normal`,styles:A,classNames:j,mapLegend:M=[]}=e,[N,P]=(0,d.useState)(E[0].layerID),F=(0,d.useRef)(null);(0,d.useEffect)(()=>{P(E[0].layerID)},[E]);let I=(0,d.useMemo)(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]);return(0,_.jsxs)(c.n,{className:j?.graphContainer,style:A?.graphContainer,id:S,ref:F,"aria-label":O,backgroundColor:y,theme:T,language:C,minHeight:w,width:o,height:r,relativeHeight:s,padding:h,children:[n||u?(0,_.jsx)(a.GraphHeader,{styles:{title:A?.title,description:A?.description},classNames:{title:j?.title,description:j?.description},graphTitle:n,graphDescription:u,width:o}):null,(0,_.jsx)(f.DropdownSelect,{options:E.map(e=>({label:e.name,value:e.layerID})),size:`sm`,isClearable:!1,variant:k,isRtl:C===`he`||C===`ar`,isSearchable:!0,filterOption:(0,f.createFilter)(I),defaultValue:{label:E[0].name,value:E[0].layerID},controlShouldRenderValue:!0,onChange:e=>{e&&P(e.value)}}),(0,_.jsx)(p.Spacer,{size:`lg`}),(0,_.jsx)(v,{mapStyle:t,center:b,zoomLevel:x,selectedLayer:N,layerIdList:(0,g.default)(E.map(e=>e.layerID)),excludeLayers:D,mapLegend:M.find(e=>e.mapStyleName===E.find(e=>e.layerID===N)?.name)?.legend}),l||m?(0,_.jsx)(i.GraphFooter,{styles:{footnote:A?.footnote,source:A?.source},classNames:{footnote:j?.footnote,source:j?.source},sources:l,footNote:m,width:o}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});
+//# sourceMappingURL=MapWithLayerSelection-BVxg3gYq.cjs.map

package/dist/MapWithLayerSelection-BVxg3gYq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapWithLayerSelection-BVxg3gYq.cjs","names":[],"sources":["../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/MapEl.tsx","../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/index.tsx"],"sourcesContent":["import maplibreGl from 'maplibre-gl';\nimport * as pmtiles from 'pmtiles';\nimport { useEffect, useRef, useState } from 'react';\nimport 'maplibre-gl/dist/maplibre-gl.css';\nimport { select } from 'd3-selection';\nimport React from 'react';\nimport { GraphArea } from '@/Components/Elements/GraphContainer';\nimport { ExpandIcon, X } from '@/Components/Icons';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { string2HTML } from '@/Utils/string2HTML';\nimport { filterData } from '@/Utils/transformData/filterData';\n\ninterface Props {\n  mapStyle: string;\n  center?: [number, number];\n  zoomLevel?: number;\n  selectedLayer: string[];\n  layerIdList: string[];\n  excludeLayers: string[];\n  mapLegend?: string | React.ReactNode;\n}\n\nexport function MapEl(props: Props) {\n  const { mapStyle, center, zoomLevel, selectedLayer, layerIdList, excludeLayers, mapLegend } =\n    props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [showLegend, setShowLegend] = useState(true);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mapStyleData, setMapStyleData] = useState<any>(undefined);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const mapContainer = useRef<HTMLDivElement>(null);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const mapRef = useRef<any>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n  useEffect(() => {\n    if (mapContainer.current && svgWidth && !mapRef.current) {\n      fetchAndParseJSON(mapStyle).then((d) => {\n        setMapStyleData(d);\n        const mapDiv = select(mapContainer.current);\n        mapDiv.selectAll('div').remove();\n        const protocol = new pmtiles.Protocol();\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        const mapObj: any = {\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          container: mapContainer.current as any,\n          style: {\n            ...d,\n            layers: filterData(d.layers, [\n              {\n                column: 'id',\n                excludeValues: [\n                  ...excludeLayers,\n                  ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n                ],\n              },\n            ]),\n          },\n          attributionControl: true,\n        };\n        if (center) {\n          mapObj.center = center;\n        }\n        if (zoomLevel) {\n          mapObj.zoom = zoomLevel;\n        }\n        mapRef.current = new maplibreGl.Map(mapObj);\n        mapRef.current.addControl(\n          new maplibreGl.NavigationControl({\n            visualizePitch: true,\n            showZoom: true,\n            showCompass: true,\n          }),\n          'bottom-right',\n        );\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\n      });\n    }\n  }, [svgWidth, center, zoomLevel, layerIdList, mapStyle, excludeLayers, selectedLayer]);\n  useEffect(() => {\n    if (mapRef.current) {\n      if (mapStyleData) {\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        const mapStyleObj: any = {\n          ...mapStyleData,\n          layers: filterData(mapStyleData.layers, [\n            {\n              column: 'id',\n              excludeValues: [\n                ...excludeLayers,\n                ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n              ],\n            },\n          ]),\n        };\n        mapRef.current.setStyle(mapStyleObj);\n      } else\n        fetchAndParseJSON(mapStyle).then((d) => {\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          const mapStyleObj: any = {\n            ...d,\n            layers: filterData(d.layers, [\n              {\n                column: 'id',\n                excludeValues: [\n                  ...excludeLayers,\n                  ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n                ],\n              },\n            ]),\n          };\n          mapRef.current.setStyle(mapStyleObj);\n        });\n    }\n  }, [excludeLayers, layerIdList, mapStyle, mapStyleData, selectedLayer]);\n  return (\n    <GraphArea ref={graphDiv}>\n      {svgWidth && svgHeight ? (\n        <div\n          style={{\n            width: svgWidth,\n            height: svgHeight,\n          }}\n        >\n          <div ref={mapContainer} className='map maplibre-show-control w-full h-full' />\n          {mapLegend ? (\n            <div className='absolute left-[22px] bottom-13'>\n              {showLegend ? (\n                <>\n                  <button\n                    type='button'\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]'\n                    onClick={() => {\n                      setShowLegend(false);\n                    }}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        setShowLegend(false);\n                      }\n                    }}\n                  >\n                    <X />\n                  </button>\n                  <div\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\n                    // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n                    dangerouslySetInnerHTML={\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\n                    }\n                  >\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\n                  </div>\n                </>\n              ) : (\n                <button\n                  type='button'\n                  className='p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button'\n                  onClick={() => {\n                    setShowLegend(true);\n                  }}\n                >\n                  <ExpandIcon />\n                </button>\n              )}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n    </GraphArea>\n  );\n}\n","import { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\nimport { Spacer } from '@undp/design-system-react/Spacer';\nimport flattenDeep from 'lodash.flattendeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  Languages,\n  MapLegendDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { MapEl } from './MapEl';\n\ninterface Props {\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n\n  // Graph Parameters\n  /** URL for mapStyle JSON  */\n  mapStyle: string;\n  /** Starting center point of the map */\n  center?: [number, number];\n  /** Starting zoom level of the map */\n  zoomLevel?: number;\n  /** List of the layers that the user select and switch between sing a drop down */\n  layerSelection: { layerID: string[]; name: string }[];\n  /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */\n  mapLegend?: MapLegendDataType[];\n  /** List of layer IDs to be excluded from the visualization */\n  excludeLayers?: string[];\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Theme for the UI elements */\n  uiMode?: 'light' | 'normal';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\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 */\nexport function GeoHubMapWithLayerSelection(props: Props) {\n  const {\n    mapStyle,\n    graphTitle,\n    height,\n    width,\n    relativeHeight,\n    sources,\n    graphDescription,\n    footNote,\n    padding,\n    backgroundColor = false,\n    center,\n    zoomLevel,\n    graphID,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    layerSelection,\n    excludeLayers = [],\n    ariaLabel,\n    uiMode = 'normal',\n    styles,\n    classNames,\n    mapLegend = [],\n  } = props;\n\n  const [selectedLayer, setSelectedLayer] = useState(layerSelection[0].layerID);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setSelectedLayer(layerSelection[0].layerID);\n  }, [layerSelection]);\n\n  const filterConfig = useMemo(\n    () => ({\n      ignoreCase: true,\n      ignoreAccents: true,\n      trim: true,\n    }),\n    [],\n  );\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n        />\n      ) : null}\n      <DropdownSelect\n        options={layerSelection.map((d) => ({\n          label: d.name,\n          value: d.layerID,\n        }))}\n        size='sm'\n        isClearable={false}\n        variant={uiMode}\n        isRtl={language === 'he' || language === 'ar'}\n        isSearchable\n        filterOption={createFilter(filterConfig)}\n        defaultValue={{\n          label: layerSelection[0].name,\n          value: layerSelection[0].layerID,\n        }}\n        controlShouldRenderValue\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        onChange={(el: any) => {\n          if (el) setSelectedLayer(el.value);\n        }}\n      />\n      <Spacer size='lg' />\n      <MapEl\n        mapStyle={mapStyle}\n        center={center}\n        zoomLevel={zoomLevel}\n        selectedLayer={selectedLayer}\n        layerIdList={flattenDeep(layerSelection.map((d) => d.layerID))}\n        excludeLayers={excludeLayers}\n        mapLegend={\n          (mapLegend as MapLegendDataType[]).find(\n            (d) =>\n              d.mapStyleName === layerSelection.find((el) => el.layerID === selectedLayer)?.name,\n          )?.legend\n        }\n      />\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"6rBAsBA,SAAA,EAAA,EAAA,k3EAgKA,CC3GA,SAAgB,EAA4B,EAAc,CACxD,GAAM,CACJ,WACA,aACA,SACA,QACA,iBACA,UACA,mBACA,WACA,UACA,kBAAkB,GAClB,SACA,YACA,UACA,WAAW,KACX,YAAY,EACZ,QAAQ,QACR,iBACA,gBAAgB,CAAC,EACjB,YACA,SAAS,SACT,SACA,aACA,YAAY,CAAC,GACX,EAEE,CAAC,EAAe,IAAA,EAAA,EAAA,UAA6B,EAAe,GAAG,OAAO,EACtE,GAAA,EAAA,EAAA,QAAwC,IAAI,GAElD,EAAA,EAAA,eAAgB,CACd,EAAiB,EAAe,GAAG,OAAO,CAC5C,EAAG,CAAC,CAAc,CAAC,EAEnB,IAAM,GAAA,EAAA,EAAA,cACG,CACL,WAAY,GACZ,cAAe,GACf,KAAM,EACR,GACA,CAAC,CACH,EACA,OACE,EAAA,EAAA,MAAC,EAAA,EAAD,CACE,UAAW,GAAY,eACvB,MAAO,GAAQ,eACf,GAAI,EACJ,IAAK,EACL,aAAY,EACK,kBACV,QACG,WACC,YACJ,QACC,SACQ,iBACP,mBAbX,CAeG,GAAc,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CACN,MAAO,GAAQ,MACf,YAAa,GAAQ,WACvB,EACA,WAAY,CACV,MAAO,GAAY,MACnB,YAAa,GAAY,WAC3B,EACY,aACM,mBACX,OACR,CAAA,EACC,MACJ,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,QAAS,EAAe,IAAK,IAAO,CAClC,MAAO,EAAE,KACT,MAAO,EAAE,OACX,EAAE,EACF,KAAK,KACL,YAAa,GACb,QAAS,EACT,MAAO,IAAa,MAAQ,IAAa,KACzC,aAAA,GACA,cAAA,EAAA,EAAA,cAA2B,CAAY,EACvC,aAAc,CACZ,MAAO,EAAe,GAAG,KACzB,MAAO,EAAe,GAAG,OAC3B,EACA,yBAAA,GAEA,SAAW,GAAY,CACjB,GAAI,EAAiB,EAAG,KAAK,CACnC,CACD,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,KAAK,IAAM,CAAA,GACnB,EAAA,EAAA,KAAC,EAAD,CACY,WACF,SACG,YACI,gBACf,aAAA,EAAA,EAAA,SAAyB,EAAe,IAAK,GAAM,EAAE,OAAO,CAAC,EAC9C,gBACf,UACG,EAAkC,KAChC,GACC,EAAE,eAAiB,EAAe,KAAM,GAAO,EAAG,UAAY,CAAa,GAAG,IAClF,GAAG,MAEN,CAAA,EACA,GAAW,GACV,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAQ,CAAE,SAAU,GAAQ,SAAU,OAAQ,GAAQ,MAAO,EAC7D,WAAY,CACV,SAAU,GAAY,SACtB,OAAQ,GAAY,MACtB,EACS,UACC,WACH,OACR,CAAA,EACC,IACU,GAEpB"}

package/dist/MapWithLayerSelection-D67zxor8.js

@@ -0,0 +1,210 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { i as n, m as r } from "./Icons-BLXwPP3h.js";
+import { t as i } from "./lodash.flattendeep-a__mQ60W.js";
+import { GraphFooter as a } from "./GraphFooter.js";
+import { GraphHeader as o } from "./GraphHeader.js";
+import { r as s } from "./fetchAndParseData-C50SqMPu.js";
+import { t as c } from "./filterData-Dp_HZ71j.js";
+import { n as l, t as u } from "./GraphContainer-DgEB1AVN.js";
+import { t as d } from "./string2HTML-CvbtZnul.js";
+import { t as f } from "./select-0Z0HV7nm.js";
+/* empty css                     */
+import p, { useEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { DropdownSelect as v, createFilter as y } from "@undp/design-system-react/DropdownSelect";
+import { Spacer as b } from "@undp/design-system-react/Spacer";
+import x from "maplibre-gl";
+import * as S from "pmtiles";
+//#region src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/MapEl.tsx
+var C = /* @__PURE__ */ e(i(), 1), w = t();
+function T(e) {
+	let { mapStyle: t, center: i, zoomLevel: a, selectedLayer: o, layerIdList: l, excludeLayers: h, mapLegend: v } = e, [y, b] = _(0), [C, T] = _(0), [E, D] = _(!0), [O, k] = _(void 0), A = g(null), j = g(null), M = g(null);
+	return m(() => {
+		let e = new ResizeObserver((e) => {
+			b(e[0].target.clientWidth || 620), T(e[0].target.clientHeight || 480);
+		});
+		return A.current && e.observe(A.current), () => e.disconnect();
+	}, []), m(() => {
+		j.current && y && !M.current && s(t).then((e) => {
+			k(e), f(j.current).selectAll("div").remove();
+			let t = new S.Protocol();
+			x.addProtocol("pmtiles", t.tile);
+			let n = {
+				container: j.current,
+				style: {
+					...e,
+					layers: c(e.layers, [{
+						column: "id",
+						excludeValues: [...h, ...l.filter((e) => o.indexOf(e) === -1)]
+					}])
+				},
+				attributionControl: !0
+			};
+			i && (n.center = i), a && (n.zoom = a), M.current = new x.Map(n), M.current.addControl(new x.NavigationControl({
+				visualizePitch: !0,
+				showZoom: !0,
+				showCompass: !0
+			}), "bottom-right"), M.current.addControl(new x.ScaleControl(), "bottom-left");
+		});
+	}, [
+		y,
+		i,
+		a,
+		l,
+		t,
+		h,
+		o
+	]), m(() => {
+		if (M.current) if (O) {
+			let e = {
+				...O,
+				layers: c(O.layers, [{
+					column: "id",
+					excludeValues: [...h, ...l.filter((e) => o.indexOf(e) === -1)]
+				}])
+			};
+			M.current.setStyle(e);
+		} else s(t).then((e) => {
+			let t = {
+				...e,
+				layers: c(e.layers, [{
+					column: "id",
+					excludeValues: [...h, ...l.filter((e) => o.indexOf(e) === -1)]
+				}])
+			};
+			M.current.setStyle(t);
+		});
+	}, [
+		h,
+		l,
+		t,
+		O,
+		o
+	]), /* @__PURE__ */ (0, w.jsx)(u, {
+		ref: A,
+		children: y && C ? /* @__PURE__ */ (0, w.jsxs)("div", {
+			style: {
+				width: y,
+				height: C
+			},
+			children: [/* @__PURE__ */ (0, w.jsx)("div", {
+				ref: j,
+				className: "map maplibre-show-control w-full h-full"
+			}), v ? /* @__PURE__ */ (0, w.jsx)("div", {
+				className: "absolute left-[22px] bottom-13",
+				children: E ? /* @__PURE__ */ (0, w.jsxs)(w.Fragment, { children: [/* @__PURE__ */ (0, w.jsx)("button", {
+					type: "button",
+					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: () => {
+						D(!1);
+					},
+					onKeyDown: (e) => {
+						e.key === "Enter" && D(!1);
+					},
+					children: /* @__PURE__ */ (0, w.jsx)(r, {})
+				}), /* @__PURE__ */ (0, w.jsx)("div", {
+					className: "color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",
+					dangerouslySetInnerHTML: typeof v == "string" ? { __html: d(v) } : void 0,
+					children: p.isValidElement(v) ? v : null
+				})] }) : /* @__PURE__ */ (0, w.jsx)("button", {
+					type: "button",
+					className: "p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button",
+					onClick: () => {
+						D(!0);
+					},
+					children: /* @__PURE__ */ (0, w.jsx)(n, {})
+				})
+			}) : null]
+		}) : null
+	});
+}
+//#endregion
+//#region src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/index.tsx
+function E(e) {
+	let { mapStyle: t, graphTitle: n, height: r, width: i, relativeHeight: s, sources: c, graphDescription: u, footNote: d, padding: f, backgroundColor: p = !1, center: x, zoomLevel: S, graphID: E, language: D = "en", minHeight: O = 0, theme: k = "light", layerSelection: A, excludeLayers: j = [], ariaLabel: M, uiMode: N = "normal", styles: P, classNames: F, mapLegend: I = [] } = e, [L, R] = _(A[0].layerID), z = g(null);
+	m(() => {
+		R(A[0].layerID);
+	}, [A]);
+	let B = h(() => ({
+		ignoreCase: !0,
+		ignoreAccents: !0,
+		trim: !0
+	}), []);
+	return /* @__PURE__ */ (0, w.jsxs)(l, {
+		className: F?.graphContainer,
+		style: P?.graphContainer,
+		id: E,
+		ref: z,
+		"aria-label": M,
+		backgroundColor: p,
+		theme: k,
+		language: D,
+		minHeight: O,
+		width: i,
+		height: r,
+		relativeHeight: s,
+		padding: f,
+		children: [
+			n || u ? /* @__PURE__ */ (0, w.jsx)(o, {
+				styles: {
+					title: P?.title,
+					description: P?.description
+				},
+				classNames: {
+					title: F?.title,
+					description: F?.description
+				},
+				graphTitle: n,
+				graphDescription: u,
+				width: i
+			}) : null,
+			/* @__PURE__ */ (0, w.jsx)(v, {
+				options: A.map((e) => ({
+					label: e.name,
+					value: e.layerID
+				})),
+				size: "sm",
+				isClearable: !1,
+				variant: N,
+				isRtl: D === "he" || D === "ar",
+				isSearchable: !0,
+				filterOption: y(B),
+				defaultValue: {
+					label: A[0].name,
+					value: A[0].layerID
+				},
+				controlShouldRenderValue: !0,
+				onChange: (e) => {
+					e && R(e.value);
+				}
+			}),
+			/* @__PURE__ */ (0, w.jsx)(b, { size: "lg" }),
+			/* @__PURE__ */ (0, w.jsx)(T, {
+				mapStyle: t,
+				center: x,
+				zoomLevel: S,
+				selectedLayer: L,
+				layerIdList: (0, C.default)(A.map((e) => e.layerID)),
+				excludeLayers: j,
+				mapLegend: I.find((e) => e.mapStyleName === A.find((e) => e.layerID === L)?.name)?.legend
+			}),
+			c || d ? /* @__PURE__ */ (0, w.jsx)(a, {
+				styles: {
+					footnote: P?.footnote,
+					source: P?.source
+				},
+				classNames: {
+					footnote: F?.footnote,
+					source: F?.source
+				},
+				sources: c,
+				footNote: d,
+				width: i
+			}) : null
+		]
+	});
+}
+//#endregion
+export { E as t };
+
+//# sourceMappingURL=MapWithLayerSelection-D67zxor8.js.map

package/dist/MapWithLayerSelection-D67zxor8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapWithLayerSelection-D67zxor8.js","names":[],"sources":["../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/MapEl.tsx","../src/Components/Graphs/Maps/GeoHubMaps/MapWithLayerSelection/index.tsx"],"sourcesContent":["import maplibreGl from 'maplibre-gl';\nimport * as pmtiles from 'pmtiles';\nimport { useEffect, useRef, useState } from 'react';\nimport 'maplibre-gl/dist/maplibre-gl.css';\nimport { select } from 'd3-selection';\nimport React from 'react';\nimport { GraphArea } from '@/Components/Elements/GraphContainer';\nimport { ExpandIcon, X } from '@/Components/Icons';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { string2HTML } from '@/Utils/string2HTML';\nimport { filterData } from '@/Utils/transformData/filterData';\n\ninterface Props {\n  mapStyle: string;\n  center?: [number, number];\n  zoomLevel?: number;\n  selectedLayer: string[];\n  layerIdList: string[];\n  excludeLayers: string[];\n  mapLegend?: string | React.ReactNode;\n}\n\nexport function MapEl(props: Props) {\n  const { mapStyle, center, zoomLevel, selectedLayer, layerIdList, excludeLayers, mapLegend } =\n    props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [showLegend, setShowLegend] = useState(true);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mapStyleData, setMapStyleData] = useState<any>(undefined);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const mapContainer = useRef<HTMLDivElement>(null);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const mapRef = useRef<any>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n  useEffect(() => {\n    if (mapContainer.current && svgWidth && !mapRef.current) {\n      fetchAndParseJSON(mapStyle).then((d) => {\n        setMapStyleData(d);\n        const mapDiv = select(mapContainer.current);\n        mapDiv.selectAll('div').remove();\n        const protocol = new pmtiles.Protocol();\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        const mapObj: any = {\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          container: mapContainer.current as any,\n          style: {\n            ...d,\n            layers: filterData(d.layers, [\n              {\n                column: 'id',\n                excludeValues: [\n                  ...excludeLayers,\n                  ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n                ],\n              },\n            ]),\n          },\n          attributionControl: true,\n        };\n        if (center) {\n          mapObj.center = center;\n        }\n        if (zoomLevel) {\n          mapObj.zoom = zoomLevel;\n        }\n        mapRef.current = new maplibreGl.Map(mapObj);\n        mapRef.current.addControl(\n          new maplibreGl.NavigationControl({\n            visualizePitch: true,\n            showZoom: true,\n            showCompass: true,\n          }),\n          'bottom-right',\n        );\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\n      });\n    }\n  }, [svgWidth, center, zoomLevel, layerIdList, mapStyle, excludeLayers, selectedLayer]);\n  useEffect(() => {\n    if (mapRef.current) {\n      if (mapStyleData) {\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        const mapStyleObj: any = {\n          ...mapStyleData,\n          layers: filterData(mapStyleData.layers, [\n            {\n              column: 'id',\n              excludeValues: [\n                ...excludeLayers,\n                ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n              ],\n            },\n          ]),\n        };\n        mapRef.current.setStyle(mapStyleObj);\n      } else\n        fetchAndParseJSON(mapStyle).then((d) => {\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          const mapStyleObj: any = {\n            ...d,\n            layers: filterData(d.layers, [\n              {\n                column: 'id',\n                excludeValues: [\n                  ...excludeLayers,\n                  ...layerIdList.filter((el) => selectedLayer.indexOf(el) === -1),\n                ],\n              },\n            ]),\n          };\n          mapRef.current.setStyle(mapStyleObj);\n        });\n    }\n  }, [excludeLayers, layerIdList, mapStyle, mapStyleData, selectedLayer]);\n  return (\n    <GraphArea ref={graphDiv}>\n      {svgWidth && svgHeight ? (\n        <div\n          style={{\n            width: svgWidth,\n            height: svgHeight,\n          }}\n        >\n          <div ref={mapContainer} className='map maplibre-show-control w-full h-full' />\n          {mapLegend ? (\n            <div className='absolute left-[22px] bottom-13'>\n              {showLegend ? (\n                <>\n                  <button\n                    type='button'\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]'\n                    onClick={() => {\n                      setShowLegend(false);\n                    }}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        setShowLegend(false);\n                      }\n                    }}\n                  >\n                    <X />\n                  </button>\n                  <div\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\n                    // biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: Allow setInnerHTML here\n                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Allow setInnerHTML here\n                    dangerouslySetInnerHTML={\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\n                    }\n                  >\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\n                  </div>\n                </>\n              ) : (\n                <button\n                  type='button'\n                  className='p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button'\n                  onClick={() => {\n                    setShowLegend(true);\n                  }}\n                >\n                  <ExpandIcon />\n                </button>\n              )}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n    </GraphArea>\n  );\n}\n","import { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\nimport { Spacer } from '@undp/design-system-react/Spacer';\nimport flattenDeep from 'lodash.flattendeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  Languages,\n  MapLegendDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { MapEl } from './MapEl';\n\ninterface Props {\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n\n  // Graph Parameters\n  /** URL for mapStyle JSON  */\n  mapStyle: string;\n  /** Starting center point of the map */\n  center?: [number, number];\n  /** Starting zoom level of the map */\n  zoomLevel?: number;\n  /** List of the layers that the user select and switch between sing a drop down */\n  layerSelection: { layerID: string[]; name: string }[];\n  /** Defines the legend for the map. mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the layerSelection. */\n  mapLegend?: MapLegendDataType[];\n  /** List of layer IDs to be excluded from the visualization */\n  excludeLayers?: string[];\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Theme for the UI elements */\n  uiMode?: 'light' | 'normal';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\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 */\nexport function GeoHubMapWithLayerSelection(props: Props) {\n  const {\n    mapStyle,\n    graphTitle,\n    height,\n    width,\n    relativeHeight,\n    sources,\n    graphDescription,\n    footNote,\n    padding,\n    backgroundColor = false,\n    center,\n    zoomLevel,\n    graphID,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    layerSelection,\n    excludeLayers = [],\n    ariaLabel,\n    uiMode = 'normal',\n    styles,\n    classNames,\n    mapLegend = [],\n  } = props;\n\n  const [selectedLayer, setSelectedLayer] = useState(layerSelection[0].layerID);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setSelectedLayer(layerSelection[0].layerID);\n  }, [layerSelection]);\n\n  const filterConfig = useMemo(\n    () => ({\n      ignoreCase: true,\n      ignoreAccents: true,\n      trim: true,\n    }),\n    [],\n  );\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n        />\n      ) : null}\n      <DropdownSelect\n        options={layerSelection.map((d) => ({\n          label: d.name,\n          value: d.layerID,\n        }))}\n        size='sm'\n        isClearable={false}\n        variant={uiMode}\n        isRtl={language === 'he' || language === 'ar'}\n        isSearchable\n        filterOption={createFilter(filterConfig)}\n        defaultValue={{\n          label: layerSelection[0].name,\n          value: layerSelection[0].layerID,\n        }}\n        controlShouldRenderValue\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n        onChange={(el: any) => {\n          if (el) setSelectedLayer(el.value);\n        }}\n      />\n      <Spacer size='lg' />\n      <MapEl\n        mapStyle={mapStyle}\n        center={center}\n        zoomLevel={zoomLevel}\n        selectedLayer={selectedLayer}\n        layerIdList={flattenDeep(layerSelection.map((d) => d.layerID))}\n        excludeLayers={excludeLayers}\n        mapLegend={\n          (mapLegend as MapLegendDataType[]).find(\n            (d) =>\n              d.mapStyleName === layerSelection.find((el) => el.layerID === selectedLayer)?.name,\n          )?.legend\n        }\n      />\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,SAAA,EAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKA;;;AC3GA,SAAgB,EAA4B,GAAc;CACxD,IAAM,EACJ,aACA,eACA,WACA,UACA,mBACA,YACA,qBACA,aACA,YACA,qBAAkB,IAClB,WACA,cACA,YACA,cAAW,MACX,eAAY,GACZ,WAAQ,SACR,mBACA,mBAAgB,CAAC,GACjB,cACA,YAAS,UACT,WACA,eACA,eAAY,CAAC,MACX,GAEE,CAAC,GAAe,KAAoB,EAAS,EAAe,GAAG,OAAO,GACtE,IAAiB,EAAuB,IAAI;CAElD,QAAgB;EACd,EAAiB,EAAe,GAAG,OAAO;CAC5C,GAAG,CAAC,CAAc,CAAC;CAEnB,IAAM,IAAe,SACZ;EACL,YAAY;EACZ,eAAe;EACf,MAAM;CACR,IACA,CAAC,CACH;CACA,OACE,iBAAA,GAAA,EAAA,MAAC,GAAD;EACE,WAAW,GAAY;EACvB,OAAO,GAAQ;EACf,IAAI;EACJ,KAAK;EACL,cAAY;EACK;EACV;EACG;EACC;EACJ;EACC;EACQ;EACP;YAbX;GAeG,KAAc,IACb,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,QAAQ;KACN,OAAO,GAAQ;KACf,aAAa,GAAQ;IACvB;IACA,YAAY;KACV,OAAO,GAAY;KACnB,aAAa,GAAY;IAC3B;IACY;IACM;IACX;GACR,CAAA,IACC;GACJ,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,SAAS,EAAe,KAAK,OAAO;KAClC,OAAO,EAAE;KACT,OAAO,EAAE;IACX,EAAE;IACF,MAAK;IACL,aAAa;IACb,SAAS;IACT,OAAO,MAAa,QAAQ,MAAa;IACzC,cAAA;IACA,cAAc,EAAa,CAAY;IACvC,cAAc;KACZ,OAAO,EAAe,GAAG;KACzB,OAAO,EAAe,GAAG;IAC3B;IACA,0BAAA;IAEA,WAAW,MAAY;KACrB,AAAI,KAAI,EAAiB,EAAG,KAAK;IACnC;GACD,CAAA;GACD,iBAAA,GAAA,EAAA,KAAC,GAAD,EAAQ,MAAK,KAAM,CAAA;GACnB,iBAAA,GAAA,EAAA,KAAC,GAAD;IACY;IACF;IACG;IACI;IACf,cAAA,GAAA,EAAA,SAAyB,EAAe,KAAK,MAAM,EAAE,OAAO,CAAC;IAC9C;IACf,WACG,EAAkC,MAChC,MACC,EAAE,iBAAiB,EAAe,MAAM,MAAO,EAAG,YAAY,CAAa,GAAG,IAClF,GAAG;GAEN,CAAA;GACA,KAAW,IACV,iBAAA,GAAA,EAAA,KAAC,GAAD;IACE,QAAQ;KAAE,UAAU,GAAQ;KAAU,QAAQ,GAAQ;IAAO;IAC7D,YAAY;KACV,UAAU,GAAY;KACtB,QAAQ,GAAY;IACtB;IACS;IACC;IACH;GACR,CAAA,IACC;EACU;;AAEpB"}

package/dist/MultiGraphDashboard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./compiler-runtime-oPPev21o.cjs"),o=require("react"),P=require("./index-CyZ1lmi_.cjs"),b=require("./index-BS2TADPj.cjs"),x=require("@undp/design-system-react/DropdownSelect"),U=require("@undp/design-system-react/Label"),T=require("@undp/design-system-react/CheckboxGroup"),F=require("@undp/design-system-react/RadioGroup"),W=require("./GraphContainer-gaG9TSy4.cjs"),I=require("./SingleGraphDashboard.cjs"),m=require("./fetchAndParseData-QTF6tjij.cjs"),z=require("./getUniqValue-NX8DgwND.cjs"),J=require("./GraphHeader.cjs"),B=require("./filterData-T5DQBE9b.cjs"),q=require("./transformDataForSelect-YmStusCI.cjs"),j=g=>g.map(t=>t.columnWidth||1).reduce((t,f)=>t+f,0),K=["barChart","choroplethMap","biVariateChoroplethMap","circlePacking","treeMap"];function Q(g){const{dashboardID:S,dashboardLayout:s,dataSettings:t,filters:f,debugMode:p,theme:w="light",readableHeader:A,dataFilters:G,noOfFiltersPerRow:v=4,filterPosition:D,uiMode:h="normal",graphStyles:$,graphClassNames:O}=g,[R,y]=o.useState(void 0),[c,N]=o.useState(void 0),[n,V]=o.useState([]),E={ignoreCase:!0,ignoreAccents:!0,trim:!0},C=o.useEffectEvent(()=>{const a=(f||[]).map(r=>({filter:r.column,label:r.label||`Filter by ${r.column}`,singleSelect:r.singleSelect,clearable:r.clearable,ui:r.ui,defaultValue:q.transformDefaultValue(r.defaultValue),value:q.transformDefaultValue(r.defaultValue),availableValues:z.getUniqValue(c,r.column).filter(e=>!r.excludeValues?.includes(`${e}`)).map(e=>({value:e,label:e})),allowSelectAll:r.allowSelectAll,width:r.width}));V(a)}),k=o.useEffectEvent(()=>{if(!c||n.length===0)y(c);else{const a=c.filter(r=>n.every(e=>e.value&&b.flattenDeep([e.value]).length>0?P.intersection(b.flattenDeep([r[e.filter]]),b.flattenDeep([e.value]).map(i=>i.value)).length>0:!0));y(a)}});o.useEffect(()=>{k()},[n,c]),o.useEffect(()=>{(async()=>{try{const r=t.dataURL?typeof t.dataURL=="string"?t.fileType==="json"?await m.fetchAndParseJSON(t.dataURL,t.columnsToArray,t.dataTransformation,p):t.fileType==="api"?await m.fetchAndTransformDataFromAPI(t.dataURL,t.apiHeaders,t.columnsToArray,t.dataTransformation,p):await m.fetchAndParseCSV(t.dataURL,t.dataTransformation,t.columnsToArray,p,t.delimiter,!0):await m.fetchAndParseMultipleDataSources(t.dataURL,t.idColumnTitle):await m.transformColumnsToArray(t.data,t.columnsToArray);N(r)}catch(r){console.error("Data fetching error:",r)}})(),C()},[t,p]),o.useEffect(()=>{C()},[f,c]);const d=(a,r)=>{V(e=>e.map(i=>i.filter===a?{...i,value:r}:i))};return l.jsxRuntimeExports.jsxs(W.GraphContainer,{id:S,"aria-label":"This is a dashboard",backgroundColor:s.backgroundColor??!1,theme:w||"light",language:s.language||"en",padding:s.padding,children:[s.title||s.description?l.jsxRuntimeExports.jsx(J.GraphHeader,{graphTitle:s.title,graphDescription:s.description,isDashboard:!0}):null,l.jsxRuntimeExports.jsxs("div",{className:"flex gap-4 flex-wrap",children:[n.length!==0?l.jsxRuntimeExports.jsx("div",{className:"flex-grow flex-shrink-0",style:{width:D==="side"?"280px":"100%"},children:l.jsxRuntimeExports.jsx("div",{className:"flex flex-wrap items-start gap-4 w-full sticky top-4",children:n?.map((a,r)=>l.jsxRuntimeExports.jsxs("div",{style:{width:a.width||`calc(${100/v}% - ${(v-1)/v}rem)`,flexGrow:a.width?0:1,flexShrink:a.ui!=="radio"||a.width?0:1,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(U.Label,{className:"mb-2",children:a.label}),a.singleSelect?a.ui!=="radio"?l.jsxRuntimeExports.jsx(x.DropdownSelect,{options:a.availableValues,variant:h,isClearable:a.clearable===void 0?!0:a.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:x.createFilter(E),onChange:e=>{d(a.filter,e)},value:a.value,defaultValue:a.defaultValue}):l.jsxRuntimeExports.jsx(F.RadioGroup,{variant:h,defaultValue:a.defaultValue.value,onValueChange:e=>{d(a.filter,a.availableValues.filter(i=>i.value===e))},children:a.availableValues.map((e,i)=>l.jsxRuntimeExports.jsx(F.RadioGroupItem,{label:`${e.label}`,value:`${e.value}`},i))}):l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[a.ui!=="radio"?l.jsxRuntimeExports.jsx(x.DropdownSelect,{options:a.availableValues,variant:h,size:"sm",isMulti:!0,isClearable:a.clearable===void 0?!0:a.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:x.createFilter(E),onChange:e=>{d(a.filter,e)},value:a.value,defaultValue:a.defaultValue}):l.jsxRuntimeExports.jsx(T.CheckboxGroup,{variant:h,defaultValue:a.defaultValue?a.defaultValue.map(e=>`${e.value}`):[],value:a.value?a.value.map(e=>`${e.value}`):void 0,onValueChange:e=>{d(a.filter,a.availableValues.filter(i=>e.indexOf(`${i.value}`)!==-1))},children:a.availableValues.map((e,i)=>l.jsxRuntimeExports.jsx(T.CheckboxGroupItem,{label:`${e.label}`,value:`${e.value}`},i))}),a.allowSelectAll?l.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",onClick:()=>{d(a.filter,a.availableValues)},children:"Select all options"}):null]})]},r))})}):null,l.jsxRuntimeExports.jsx("div",{className:"flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]",style:{width:D==="side"?"calc(100% - 280px - 1rem)":"100%"},children:s.rows.map((a,r)=>l.jsxRuntimeExports.jsx("div",{className:"flex flex-wrap items-stretch gap-4 w-full h-auto",style:{minHeight:`${a.height||0}px`},children:a.columns.map((e,i)=>l.jsxRuntimeExports.jsx("div",{className:"flex bg-transparent grow min-w-60",style:{width:`calc(${100*(e.columnWidth||1)/j(a.columns)}% - ${(j(a.columns)-(e.columnWidth||1))/j(a.columns)}rem)`,minHeight:"inherit"},children:l.jsxRuntimeExports.jsx(I.SingleGraphDashboard,{graphType:e.graphType,dataFilters:e.dataFilters,uiMode:h,graphSettings:{...e.settings||{},width:void 0,height:void 0,minHeight:void 0,relativeHeight:void 0,resetSelectionOnDoubleClick:e.attachedFilter?!1:e.settings?.resetSelectionOnDoubleClick,styles:e.settings?.styles||$,classNames:e.settings?.classNames||O,radius:e.graphType==="donutChart"?void 0:e.settings?.radius,size:e.graphType==="unitChart"?e.settings?.size:void 0,language:e.settings?.language||s.language,theme:e.settings?.theme||w},dataSettings:{data:R?B.filterData(R,G||[]):void 0},updateFilters:e.attachedFilter&&K.indexOf(e.graphType)!==-1&&n.findIndex(u=>u.filter===e.attachedFilter)!==-1?u=>{const M=n.findIndex(L=>L.filter===e.attachedFilter),H=u?n[M].singleSelect?{value:u,label:u}:[{value:u,label:u}]:void 0;d(e.attachedFilter,H)}:void 0,dataTransform:e.dataTransform,dataSelectionOptions:e.dataSelectionOptions,advancedDataSelectionOptions:e.advancedDataSelectionOptions,graphDataConfiguration:e.graphDataConfiguration,debugMode:p,readableHeader:A||[]})},i))},r))})]})]})}exports.MultiGraphDashboard=Q;
-//# sourceMappingURL=MultiGraphDashboard.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./lodash.flattendeep-_PlS_1wX.cjs`),r=require(`./lodash.intersection-BDR4j58n.cjs`),i=require(`./GraphHeader.cjs`),a=require(`./fetchAndParseData-Dlq4UzdG.cjs`),o=require(`./getUniqValue-BItnnZEr.cjs`),s=require(`./filterData-B2pPOkwy.cjs`),c=require(`./transformDataForSelect-Bmaowc2Z.cjs`),l=require(`./GraphContainer-7xAPK4Tb.cjs`),u=require(`./SingleGraphDashboard.cjs`);let d=require(`react`),f=require(`@undp/design-system-react/CheckboxGroup`),p=require(`@undp/design-system-react/DropdownSelect`),m=require(`@undp/design-system-react/Label`),h=require(`@undp/design-system-react/RadioGroup`);var g=e.a(n.t(),1),_=e.a(r.t(),1),v=t.t(),y=e=>e.map(e=>e.columnWidth||1).reduce((e,t)=>e+t,0),b=[`barChart`,`choroplethMap`,`biVariateChoroplethMap`,`circlePacking`,`treeMap`];function x(e){let{dashboardID:t,dashboardLayout:n,dataSettings:r,filters:x,debugMode:S,theme:C=`light`,readableHeader:w,dataFilters:T,noOfFiltersPerRow:E=4,filterPosition:D,uiMode:O=`normal`,graphStyles:k,graphClassNames:A}=e,[j,M]=(0,d.useState)(void 0),[N,P]=(0,d.useState)(void 0),[F,I]=(0,d.useState)([]),L={ignoreCase:!0,ignoreAccents:!0,trim:!0},R=(0,d.useEffectEvent)(()=>{I((x||[]).map(e=>({filter:e.column,label:e.label||`Filter by ${e.column}`,singleSelect:e.singleSelect,clearable:e.clearable,ui:e.ui,defaultValue:c.t(e.defaultValue),value:c.t(e.defaultValue),availableValues:o.t(N,e.column).filter(t=>!e.excludeValues?.includes(`${t}`)).map(e=>({value:e,label:e})),allowSelectAll:e.allowSelectAll,width:e.width})))}),z=(0,d.useEffectEvent)(()=>{!N||F.length===0?M(N):M(N.filter(e=>F.every(t=>t.value&&(0,g.default)([t.value]).length>0?(0,_.default)((0,g.default)([e[t.filter]]),(0,g.default)([t.value]).map(e=>e.value)).length>0:!0)))});(0,d.useEffect)(()=>{z()},[F,N]),(0,d.useEffect)(()=>{(async()=>{try{P(r.dataURL?typeof r.dataURL==`string`?r.fileType===`json`?await a.r(r.dataURL,r.columnsToArray,r.dataTransformation,S):r.fileType===`api`?await a.a(r.dataURL,r.apiHeaders,r.columnsToArray,r.dataTransformation,S):await a.t(r.dataURL,r.dataTransformation,r.columnsToArray,S,r.delimiter,!0):await a.i(r.dataURL,r.idColumnTitle):await a.o(r.data,r.columnsToArray))}catch(e){console.error(`Data fetching error:`,e)}})(),R()},[r,S]),(0,d.useEffect)(()=>{R()},[x,N]);let B=(e,t)=>{I(n=>n.map(n=>n.filter===e?{...n,value:t}:n))};return(0,v.jsxs)(l.n,{id:t,"aria-label":`This is a dashboard`,backgroundColor:n.backgroundColor??!1,theme:C||`light`,language:n.language||`en`,padding:n.padding,children:[n.title||n.description?(0,v.jsx)(i.GraphHeader,{graphTitle:n.title,graphDescription:n.description,isDashboard:!0}):null,(0,v.jsxs)(`div`,{className:`flex gap-4 flex-wrap`,children:[F.length===0?null:(0,v.jsx)(`div`,{className:`flex-grow flex-shrink-0`,style:{width:D===`side`?`280px`:`100%`},children:(0,v.jsx)(`div`,{className:`flex flex-wrap items-start gap-4 w-full sticky top-4`,children:F?.map((e,t)=>(0,v.jsxs)(`div`,{style:{width:e.width||`calc(${100/E}% - ${(E-1)/E}rem)`,flexGrow:+!e.width,flexShrink:e.ui!==`radio`||e.width?0:1,minWidth:`240px`},children:[(0,v.jsx)(m.Label,{className:`mb-2`,children:e.label}),e.singleSelect?e.ui===`radio`?(0,v.jsx)(h.RadioGroup,{variant:O,defaultValue:e.defaultValue.value,onValueChange:t=>{B(e.filter,e.availableValues.filter(e=>e.value===t))},children:e.availableValues.map(e=>(0,v.jsx)(h.RadioGroupItem,{label:`${e.label}`,value:`${e.value}`},e.value))}):(0,v.jsx)(p.DropdownSelect,{options:e.availableValues,variant:O,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,p.createFilter)(L),onChange:t=>{B(e.filter,t)},value:e.value,defaultValue:e.defaultValue}):(0,v.jsxs)(v.Fragment,{children:[e.ui===`radio`?(0,v.jsx)(f.CheckboxGroup,{variant:O,defaultValue:e.defaultValue?e.defaultValue.map(e=>`${e.value}`):[],value:e.value?e.value.map(e=>`${e.value}`):void 0,onValueChange:t=>{B(e.filter,e.availableValues.filter(e=>t.indexOf(`${e.value}`)!==-1))},children:e.availableValues.map(e=>(0,v.jsx)(f.CheckboxGroupItem,{label:`${e.label}`,value:`${e.value}`},e.value))}):(0,v.jsx)(p.DropdownSelect,{options:e.availableValues,variant:O,size:`sm`,isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,p.createFilter)(L),onChange:t=>{B(e.filter,t)},value:e.value,defaultValue:e.defaultValue}),e.allowSelectAll?(0,v.jsx)(`button`,{type:`button`,className:`bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400`,onClick:()=>{B(e.filter,e.availableValues)},children:`Select all options`}):null]})]},t))})}),(0,v.jsx)(`div`,{className:`flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]`,style:{width:D===`side`?`calc(100% - 280px - 1rem)`:`100%`},children:n.rows.map((e,t)=>(0,v.jsx)(`div`,{className:`flex flex-wrap items-stretch gap-4 w-full h-auto`,style:{minHeight:`${e.height||0}px`},children:e.columns.map((t,r)=>(0,v.jsx)(`div`,{className:`flex bg-transparent grow min-w-60`,style:{width:`calc(${100*(t.columnWidth||1)/y(e.columns)}% - ${(y(e.columns)-(t.columnWidth||1))/y(e.columns)}rem)`,minHeight:`inherit`},children:(0,v.jsx)(u.SingleGraphDashboard,{graphType:t.graphType,dataFilters:t.dataFilters,uiMode:O,graphSettings:{...t.settings||{},width:void 0,height:void 0,minHeight:void 0,relativeHeight:void 0,resetSelectionOnDoubleClick:t.attachedFilter?!1:t.settings?.resetSelectionOnDoubleClick,styles:t.settings?.styles||k,classNames:t.settings?.classNames||A,radius:t.graphType===`donutChart`?void 0:t.settings?.radius,size:t.graphType===`unitChart`?t.settings?.size:void 0,language:t.settings?.language||n.language,theme:t.settings?.theme||C},dataSettings:{data:j?s.t(j,T||[]):void 0},updateFilters:t.attachedFilter&&b.indexOf(t.graphType)!==-1&&F.findIndex(e=>e.filter===t.attachedFilter)!==-1?e=>{let n=F.findIndex(e=>e.filter===t.attachedFilter),r=e?F[n].singleSelect?{value:e,label:e}:[{value:e,label:e}]:void 0;B(t.attachedFilter,r)}:void 0,dataTransform:t.dataTransform,dataSelectionOptions:t.dataSelectionOptions,advancedDataSelectionOptions:t.advancedDataSelectionOptions,graphDataConfiguration:t.graphDataConfiguration,debugMode:S,readableHeader:w||[]})},r))},t))})]})]})}exports.MultiGraphDashboard=x;
+//# sourceMappingURL=MultiGraphDashboard.cjs.map