@undp/data-viz 2.6.0 → 2.6.1

package/dist/SimpleLineChart.js

@@ -1,527 +1,2 @@
-import { c as Ne, j as n } from "./compiler-runtime-qHgugrLy.js";
-import { useRef as ge, useState as Yt, useEffect as Te } from "react";
-import { p as C, f as Fe } from "./parse-Dv4of-PN.js";
-import { l as Ie, a as We } from "./simple-statistics-flVzqVtt.js";
-import { cn as de } from "@undp/design-system-react/cn";
-import { o as Ye } from "./index-BZQYSqar.js";
-import { n as Me } from "./numberFormattingFunction-BUUV_luR.js";
-import { T as Xe } from "./Tooltip-DO56mY4b.js";
-import { c as dt } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { g as Ge, A as Pe, C as Ee } from "./customArea-Dixg0NtQ.js";
-import { A as Ze } from "./Axis-RRx-0Rlw.js";
-import { A as Be } from "./AxisTitle-B9F80_Z0.js";
-import { X as ze } from "./XTicksAndGridLines-obTK2e7G.js";
-import { a as Ue } from "./ReferenceLine-NF4g3Reh.js";
-import { R as qe } from "./RegressionLine-BQ6h-NZP.js";
-import { Y as Je } from "./YTicksAndGridLines-wtuAKNeT.js";
-import { H as Ke } from "./index-CmkqqFRG.js";
-import { t as Qe } from "./time-vyz6Y89P.js";
-import { a as _e } from "./linear-DNXM5Pdl.js";
-import { l as ti, c as ei } from "./line-DFlZsxI1.js";
-import { c as ii, s as oi, a as ni, m as si } from "./step-BrDul-H4.js";
-import { s as ai } from "./select-DKy99ogv.js";
-import { m as qt } from "./proxy-D31SA_aE.js";
-import { a as ri } from "./init-BhZylTFx.js";
-import { p as li } from "./pointer-CWRWOsrb.js";
-import { u as ci } from "./use-in-view-Co5SmzfT.js";
-import { GraphFooter as mi } from "./GraphFooter.js";
-import { GraphHeader as fi } from "./GraphHeader.js";
-import { Colors as ui } from "./Colors.js";
-import { E as pi } from "./EmptyState-prZ8OnEs.js";
-import { a as xi, G as di } from "./GraphContainer-DcOM2CI6.js";
-import { g as gi } from "./getNoOfTicks-CpmRjcRF.js";
-function hi(i) {
-  const t = Ne.c(112), {
-    data: y,
-    width: Z,
-    height: ot,
-    lineColor: $,
-    suffix: O,
-    prefix: S,
-    dateFormat: o,
-    highlightAreaSettings: B,
-    showValues: Jt,
-    noOfXTicks: Kt,
-    rightMargin: gt,
-    leftMargin: j,
-    topMargin: ht,
-    bottomMargin: yt,
-    tooltip: nt,
-    onSeriesMouseOver: vt,
-    refValues: Xt,
-    minValue: wt,
-    maxValue: z,
-    animate: s,
-    rtl: st,
-    strokeWidth: at,
-    showDots: Gt,
-    annotations: Pt,
-    customHighlightAreaSettings: rt,
-    regressionLine: lt,
-    yAxisTitle: ct,
-    noOfYTicks: Qt,
-    maxDate: Et,
-    minDate: Zt,
-    curveType: H,
-    styles: x,
-    classNames: d,
-    precision: F,
-    customLayers: D,
-    locale: L,
-    padZeros: I
-  } = i, bt = ge(null);
-  let mt;
-  t[0] !== s.amount || t[1] !== s.once ? (mt = {
-    once: s.once,
-    amount: s.amount
-  }, t[0] = s.amount, t[1] = s.once, t[2] = mt) : mt = t[2];
-  const p = ci(bt, mt), [k, _t] = Yt(!1);
-  let m, f;
-  t[3] !== s.duration || t[4] !== k || t[5] !== p ? (m = () => {
-    if (p && !k) {
-      const e = setTimeout(() => {
-        _t(!0);
-      }, (s.duration + 0.5) * 1e3);
-      return () => clearTimeout(e);
-    }
-  }, f = [p, k, s.duration], t[3] = s.duration, t[4] = k, t[5] = p, t[6] = m, t[7] = f) : (m = t[6], f = t[7]), Te(m, f);
-  const Ct = H === "linear" ? ei : H === "step" ? ii : H === "stepAfter" ? oi : H === "stepBefore" ? ni : si, [l, At] = Yt(void 0), [U, Ot] = Yt(void 0), [q, jt] = Yt(void 0), ft = ct ? j + 30 : j;
-  let J;
-  t[8] !== yt || t[9] !== gt || t[10] !== ft || t[11] !== ht ? (J = {
-    top: ht,
-    bottom: yt,
-    left: ft,
-    right: gt
-  }, t[8] = yt, t[9] = gt, t[10] = ft, t[11] = ht, t[12] = J) : J = t[12];
-  const v = J, W = ge(null);
-  let K;
-  t[13] !== o ? (K = (e) => ({
-    ...e,
-    date: C(`${e.date}`, o, /* @__PURE__ */ new Date())
-  }), t[13] = o, t[14] = K) : K = t[14];
-  const r = Ye(y.map(K), ["date"], ["asc"]);
-  let Y;
-  if (t[15] !== o || t[16] !== B) {
-    let e;
-    t[18] !== o ? (e = (g) => ({
-      ...g,
-      coordinates: [g.coordinates[0] === null ? null : C(`${g.coordinates[0]}`, o, /* @__PURE__ */ new Date()), g.coordinates[1] === null ? null : C(`${g.coordinates[1]}`, o, /* @__PURE__ */ new Date())]
-    }), t[18] = o, t[19] = e) : e = t[19], Y = B.map(e), t[15] = o, t[16] = B, t[17] = Y;
-  } else
-    Y = t[17];
-  const Q = Y;
-  let A;
-  if (t[20] !== rt || t[21] !== o) {
-    let e;
-    t[23] !== o ? (e = (g) => ({
-      ...g,
-      coordinates: g.coordinates.map((E, Wt) => Wt % 2 === 0 ? C(`${E}`, o, /* @__PURE__ */ new Date()) : E)
-    }), t[23] = o, t[24] = e) : e = t[24], A = rt.map(e), t[20] = rt, t[21] = o, t[22] = A;
-  } else
-    A = t[22];
-  const Dt = A, u = Z - v.left - v.right, h = ot - v.top - v.bottom, Bt = Zt ? C(`${Zt}`, o, /* @__PURE__ */ new Date()) : r[0].date, zt = Et ? C(`${Et}`, o, /* @__PURE__ */ new Date()) : r[r.length - 1].date, w = dt(wt) ? Math.min(...r.map(Ri).filter(Vi)) !== 1 / 0 ? Math.min(...r.map(Ni).filter(Mi)) > 0 ? 0 : Math.min(...r.map(Ti).filter(Si)) : 0 : wt, X = Math.max(...r.map($i).filter(ki)) !== 1 / 0 ? Math.max(...r.map(Li).filter(Di)) : 0, a = Qe().domain([Bt, zt]).range([0, u]);
-  let _;
-  t[25] !== X || t[26] !== z ? (_ = dt(z) ? X > 0 ? X : 0 : z, t[25] = X, t[26] = z, t[27] = _) : _ = t[27];
-  const c = _e().domain([w, _]).range([h, 0]).nice(), Lt = ti().x((e) => a(e.date)).y((e) => c(e.y)).curve(Ct), kt = c.ticks(Qt), $t = a.ticks(Kt);
-  Te(() => {
-    const e = (E) => {
-      const Wt = r[ri(r.map(ji), a.invert(li(E)[0]), 0)];
-      At(Wt || r[r.length - 1]), vt?.(Wt || r[r.length - 1]), jt(E.clientY), Ot(E.clientX);
-    }, g = () => {
-      At(void 0), Ot(void 0), jt(void 0), vt?.(void 0);
-    };
-    ai(W.current).on("mousemove", e).on("mouseout", g);
-  }, [a, r, vt]);
-  const St = Ie(r.filter(Oi).map((e) => [a(e.date), c(e.y)])), Tt = We(St);
-  let T;
-  t[28] !== s || t[29] !== h || t[30] !== u || t[31] !== Q || t[32] !== p || t[33] !== a ? (T = /* @__PURE__ */ n.jsx(Ke, { areaSettings: Q, width: u, height: h, scale: a, animate: s, isInView: p }), t[28] = s, t[29] = h, t[30] = u, t[31] = Q, t[32] = p, t[33] = a, t[34] = T) : T = t[34];
-  const Ut = x?.yAxis?.gridLines, tt = x?.yAxis?.labels;
-  let Mt;
-  t[35] !== Ut || t[36] !== tt ? (Mt = {
-    gridLines: Ut,
-    labels: tt
-  }, t[35] = Ut, t[36] = tt, t[37] = Mt) : Mt = t[37];
-  const ut = d?.yAxis?.gridLines, Nt = d?.yAxis?.labels;
-  let G;
-  t[38] !== ut || t[39] !== Nt ? (G = {
-    gridLines: ut,
-    labels: Nt
-  }, t[38] = ut, t[39] = Nt, t[40] = G) : G = t[40];
-  const et = c(w < 0 ? 0 : w), pt = c(w < 0 ? 0 : w), xt = 0 - j, M = u + v.right, N = w < 0 ? 0 : w;
-  let b;
-  t[41] !== L || t[42] !== I || t[43] !== F || t[44] !== S || t[45] !== O || t[46] !== N ? (b = Me(N, void 0, F, S, O, L, I), t[41] = L, t[42] = I, t[43] = F, t[44] = S, t[45] = O, t[46] = N, t[47] = b) : b = t[47];
-  const V = 0 - j, R = c(w < 0 ? 0 : w), it = X < 0 ? "1em" : -5;
-  let P;
-  t[48] !== V || t[49] !== R || t[50] !== it ? (P = {
-    x: V,
-    y: R,
-    dx: 0,
-    dy: it
-  }, t[48] = V, t[49] = R, t[50] = it, t[51] = P) : P = t[51];
-  const Vt = d?.xAxis?.axis, he = d?.yAxis?.labels;
-  let Rt;
-  t[52] !== Vt || t[53] !== he ? (Rt = {
-    axis: Vt,
-    label: he
-  }, t[52] = Vt, t[53] = he, t[54] = Rt) : Rt = t[54];
-  const ye = x?.xAxis?.axis, ve = x?.yAxis?.labels;
-  let Ht;
-  t[55] !== ye || t[56] !== ve ? (Ht = {
-    axis: ye,
-    label: ve
-  }, t[55] = ye, t[56] = ve, t[57] = Ht) : Ht = t[57];
-  let te;
-  t[58] !== et || t[59] !== pt || t[60] !== xt || t[61] !== M || t[62] !== b || t[63] !== P || t[64] !== Rt || t[65] !== Ht ? (te = /* @__PURE__ */ n.jsx(Ze, { y1: et, y2: pt, x1: xt, x2: M, label: b, labelPos: P, classNames: Rt, styles: Ht }), t[58] = et, t[59] = pt, t[60] = xt, t[61] = M, t[62] = b, t[63] = P, t[64] = Rt, t[65] = Ht, t[66] = te) : te = t[66];
-  const we = 0 - j - 15, be = h / 2, Ce = x?.yAxis?.title, Ae = d?.yAxis?.title;
-  let ee;
-  t[67] !== we || t[68] !== be || t[69] !== Ce || t[70] !== Ae || t[71] !== ct ? (ee = /* @__PURE__ */ n.jsx(Be, { x: we, y: be, style: Ce, className: Ae, text: ct, rotate90: !0 }), t[67] = we, t[68] = be, t[69] = Ce, t[70] = Ae, t[71] = ct, t[72] = ee) : ee = t[72];
-  let ie;
-  t[73] !== o ? (ie = (e) => Fe(e, o), t[73] = o, t[74] = ie) : ie = t[74];
-  const Ve = $t.map(ie), Re = $t.map((e) => a(e)), Oe = x?.xAxis?.gridLines, je = x?.xAxis?.labels;
-  let oe;
-  t[75] !== Oe || t[76] !== je ? (oe = {
-    gridLines: Oe,
-    labels: je
-  }, t[75] = Oe, t[76] = je, t[77] = oe) : oe = t[77];
-  const De = d?.xAxis?.gridLines;
-  let Ft;
-  t[78] !== De ? (Ft = de("opacity-0", De), t[78] = De, t[79] = Ft) : Ft = t[79];
-  const Le = d?.xAxis?.labels;
-  let It;
-  t[80] !== Le ? (It = de("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs", Le), t[80] = Le, t[81] = It) : It = t[81];
-  let ne;
-  t[82] !== Ft || t[83] !== It ? (ne = {
-    gridLines: Ft,
-    labels: It
-  }, t[82] = Ft, t[83] = It, t[84] = ne) : ne = t[84];
-  let se;
-  t[85] !== D ? (se = D.filter(bi).map(wi), t[85] = D, t[86] = se) : se = t[86];
-  let ae;
-  t[87] !== $ || t[88] !== at ? (ae = {
-    stroke: $,
-    fill: "none",
-    strokeWidth: at
-  }, t[87] = $, t[88] = at, t[89] = ae) : ae = t[89];
-  let re;
-  t[90] !== s.duration ? (re = {
-    opacity: 0,
-    transition: {
-      duration: s.duration
-    }
-  }, t[90] = s.duration, t[91] = re) : re = t[91];
-  const ke = r.map((e, g) => /* @__PURE__ */ n.jsx(qt.g, { children: dt(e.y) ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    Gt ? /* @__PURE__ */ n.jsx(qt.circle, { r: u / r.length < 5 ? 0 : u / r.length < 20 ? 2 : 4, exit: {
-      opacity: 0,
-      transition: {
-        duration: s.duration
-      }
-    }, variants: {
-      initial: {
-        opacity: 0,
-        cx: a(e.date),
-        cy: c(e.y),
-        fill: $
-      },
-      whileInView: {
-        opacity: 1,
-        fill: $,
-        transition: {
-          duration: k ? s.duration : 0.5,
-          delay: k ? 0 : s.duration
-        },
-        cx: a(e.date),
-        cy: c(e.y)
-      }
-    }, initial: "initial", animate: p ? "whileInView" : "initial" }) : null,
-    Jt ? /* @__PURE__ */ n.jsx(qt.text, { dy: -8, style: {
-      textAnchor: "middle",
-      ...x?.graphObjectValues || {}
-    }, className: de("graph-value text-xs font-bold", d?.graphObjectValues), exit: {
-      opacity: 0,
-      transition: {
-        duration: s.duration
-      }
-    }, variants: {
-      initial: {
-        opacity: 0,
-        x: a(e.date),
-        y: c(e.y)
-      },
-      whileInView: {
-        opacity: 1,
-        x: a(e.date),
-        y: c(e.y),
-        transition: {
-          duration: k ? s.duration : 0.5,
-          delay: k ? 0 : s.duration
-        }
-      }
-    }, initial: "initial", animate: p ? "whileInView" : "initial", children: Me(e.y, void 0, F, S, O, L, I) }) : null
-  ] }) }, g));
-  let le;
-  t[92] !== ke ? (le = /* @__PURE__ */ n.jsx("g", { children: ke }), t[92] = ke, t[93] = le) : le = t[93];
-  const $e = Pt.map((e, g) => {
-    const E = Ge({
-      x: e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
-      y: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8
-    }, {
-      x: e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) : 0,
-      y: e.yCoordinate ? c(e.yCoordinate) : 0
-    }, dt(e.connectorRadius) ? 3.5 : e.connectorRadius), Wt = e.showConnector ? {
-      y1: E.y,
-      x1: E.x,
-      y2: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) : 0 + (e.yOffset || 0),
-      x2: e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
-      cy: e.yCoordinate ? c(e.yCoordinate) : 0,
-      cx: e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) : 0,
-      circleRadius: dt(e.connectorRadius) ? 3.5 : e.connectorRadius,
-      strokeWidth: e.showConnector === !0 ? 2 : Math.min(e.showConnector || 0, 1)
-    } : void 0, He = {
-      y: e.yCoordinate ? c(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8,
-      x: st ? 0 : e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
-      width: st ? e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : u + v.right - (e.xCoordinate ? a(C(`${e.xCoordinate}`, o, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
-      maxWidth: e.maxWidth,
-      fontWeight: e.fontWeight,
-      align: e.align
-    };
-    return /* @__PURE__ */ n.jsx(Pe, { color: e.color, connectorsSettings: Wt, labelSettings: He, text: e.text, classNames: e.classNames, styles: e.styles, animate: s, isInView: p }, g);
-  });
-  let ce;
-  t[94] !== $e ? (ce = /* @__PURE__ */ n.jsx("g", { children: $e }), t[94] = $e, t[95] = ce) : ce = t[95];
-  const Se = lt ? /* @__PURE__ */ n.jsx(qe, { x1: 0, x2: u, y1: Tt(0), y2: Tt(u), graphHeight: h, graphWidth: u, className: d?.regLine, style: x?.regLine, color: typeof lt == "string" ? lt : void 0, animate: s, isInView: p }) : null;
-  let me;
-  t[96] !== Se ? (me = /* @__PURE__ */ n.jsx("g", { children: Se }), t[96] = Se, t[97] = me) : me = t[97];
-  let fe;
-  t[98] !== D ? (fe = D.filter(vi).map(yi), t[98] = D, t[99] = fe) : fe = t[99];
-  let ue;
-  t[100] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (ue = {
-    fill: "none",
-    pointerEvents: "all"
-  }, t[100] = ue) : ue = t[100];
-  let pe;
-  t[101] !== W || t[102] !== h || t[103] !== u ? (pe = /* @__PURE__ */ n.jsx("rect", { ref: W, style: ue, width: u, height: h }), t[101] = W, t[102] = h, t[103] = u, t[104] = pe) : pe = t[104];
-  let xe;
-  return t[105] !== d?.tooltip || t[106] !== U || t[107] !== q || t[108] !== l || t[109] !== x?.tooltip || t[110] !== nt ? (xe = l && nt && U && q ? /* @__PURE__ */ n.jsx(Xe, { data: l, body: nt, xPos: U, yPos: q, backgroundStyle: x?.tooltip, className: d?.tooltip }) : null, t[105] = d?.tooltip, t[106] = U, t[107] = q, t[108] = l, t[109] = x?.tooltip, t[110] = nt, t[111] = xe) : xe = t[111], /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    /* @__PURE__ */ n.jsx(qt.svg, { width: `${Z}px`, height: `${ot}px`, viewBox: `0 0 ${Z} ${ot}`, direction: "ltr", ref: bt, children: /* @__PURE__ */ n.jsxs("g", { transform: `translate(${v.left},${v.top})`, children: [
-      T,
-      /* @__PURE__ */ n.jsx(Ee, { areaSettings: Dt, scaleX: a, scaleY: c, animate: s, isInView: p }),
-      /* @__PURE__ */ n.jsxs("g", { children: [
-        /* @__PURE__ */ n.jsx(Je, { values: kt.filter(Ai), y: kt.filter(Ci).map((e) => c(e)), x1: 0 - j, x2: u + v.right, styles: Mt, classNames: G, suffix: O, prefix: S, labelType: "secondary", showGridLines: !0, labelPos: "vertical", precision: F, locale: L, padZeros: I }),
-        te,
-        ee
-      ] }),
-      /* @__PURE__ */ n.jsx(ze, { values: Ve, x: Re, y1: 0, y2: h, styles: oe, classNames: ne, suffix: O, prefix: S, labelType: "primary", showGridLines: !0, precision: F, locale: L, padZeros: I }),
-      se,
-      /* @__PURE__ */ n.jsxs("g", { children: [
-        /* @__PURE__ */ n.jsx(qt.path, { style: ae, exit: re, variants: {
-          initial: {
-            pathLength: 0,
-            d: Lt(r) || "",
-            opacity: 1
-          },
-          whileInView: {
-            pathLength: 1,
-            d: Lt(r) || "",
-            opacity: 1,
-            transition: {
-              duration: s.duration
-            }
-          }
-        }, initial: "initial", animate: p ? "whileInView" : "initial" }),
-        l ? /* @__PURE__ */ n.jsx("line", { y1: 0, y2: h, x1: a(l.date), x2: a(l.date), className: de("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100", d?.mouseOverLine), style: x?.mouseOverLine }) : null
-      ] }),
-      le,
-      Xt ? /* @__PURE__ */ n.jsx(n.Fragment, { children: Xt.map((e, g) => /* @__PURE__ */ n.jsx(Ue, { text: e.text, color: e.color, y: c(e.value), x1: 0 - j, x2: u + v.right, classNames: e.classNames, styles: e.styles, animate: s, isInView: p }, g)) }) : null,
-      ce,
-      me,
-      fe,
-      pe
-    ] }) }),
-    xe
-  ] });
-}
-function yi(i) {
-  return i.layer;
-}
-function vi(i) {
-  return i.position === "after";
-}
-function wi(i) {
-  return i.layer;
-}
-function bi(i) {
-  return i.position === "before";
-}
-function Ci(i) {
-  return i !== 0;
-}
-function Ai(i) {
-  return i !== 0;
-}
-function Oi(i) {
-  return !dt(i.date) && !dt(i.y);
-}
-function ji(i) {
-  return i.date;
-}
-function Di(i) {
-  return i != null;
-}
-function Li(i) {
-  return i.y;
-}
-function ki(i) {
-  return i != null;
-}
-function $i(i) {
-  return i.y;
-}
-function Si(i) {
-  return i != null;
-}
-function Ti(i) {
-  return i.y;
-}
-function Mi(i) {
-  return i != null;
-}
-function Ni(i) {
-  return i.y;
-}
-function Vi(i) {
-  return i != null;
-}
-function Ri(i) {
-  return i.y;
-}
-function wo(i) {
-  const t = Ne.c(90), {
-    data: y,
-    graphTitle: Z,
-    lineColor: ot,
-    sources: $,
-    graphDescription: O,
-    height: S,
-    width: o,
-    footNote: B,
-    noOfXTicks: Jt,
-    dateFormat: Kt,
-    showValues: gt,
-    padding: j,
-    backgroundColor: ht,
-    leftMargin: yt,
-    rightMargin: nt,
-    topMargin: vt,
-    bottomMargin: Xt,
-    relativeHeight: wt,
-    tooltip: z,
-    onSeriesMouseOver: s,
-    highlightAreaSettings: st,
-    graphID: at,
-    minValue: Gt,
-    maxValue: Pt,
-    maxDate: rt,
-    minDate: lt,
-    graphDownload: ct,
-    dataDownload: Qt,
-    animate: Et,
-    language: Zt,
-    refValues: H,
-    minHeight: x,
-    strokeWidth: d,
-    showDots: F,
-    annotations: D,
-    customHighlightAreaSettings: L,
-    theme: I,
-    ariaLabel: bt,
-    regressionLine: mt,
-    yAxisTitle: p,
-    noOfYTicks: k,
-    curveType: _t,
-    styles: m,
-    classNames: f,
-    customLayers: Ct,
-    numberDisplayOptions: l
-  } = i, At = Jt === void 0 ? 10 : Jt, U = Kt === void 0 ? "yyyy" : Kt, Ot = gt === void 0 ? !1 : gt, q = ht === void 0 ? !1 : ht, jt = yt === void 0 ? 30 : yt, ft = nt === void 0 ? 30 : nt, J = vt === void 0 ? 20 : vt, v = Xt === void 0 ? 25 : Xt;
-  let W;
-  t[0] !== st ? (W = st === void 0 ? [] : st, t[0] = st, t[1] = W) : W = t[1];
-  const K = W, r = ct === void 0 ? !1 : ct, Y = Qt === void 0 ? !1 : Qt, Q = Et === void 0 ? !1 : Et, A = Zt === void 0 ? "en" : Zt;
-  let Dt;
-  t[2] !== H ? (Dt = H === void 0 ? [] : H, t[2] = H, t[3] = Dt) : Dt = t[3];
-  const u = Dt, h = x === void 0 ? 0 : x, Bt = d === void 0 ? 2 : d, zt = F === void 0 ? !0 : F;
-  let w;
-  t[4] !== D ? (w = D === void 0 ? [] : D, t[4] = D, t[5] = w) : w = t[5];
-  const X = w;
-  let a;
-  t[6] !== L ? (a = L === void 0 ? [] : L, t[6] = L, t[7] = a) : a = t[7];
-  const _ = a, c = I === void 0 ? "light" : I, Lt = mt === void 0 ? !1 : mt, kt = k === void 0 ? 5 : k, $t = _t === void 0 ? "curve" : _t;
-  let St;
-  t[8] !== Ct ? (St = Ct === void 0 ? [] : Ct, t[8] = Ct, t[9] = St) : St = t[9];
-  const Tt = St, [T, Ut] = Yt(0), [tt, Mt] = Yt(0), ut = ge(null), Nt = ge(null);
-  let G, et;
-  t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (G = () => {
-    const P = new ResizeObserver((Vt) => {
-      Ut(Vt[0].target.clientWidth || 620), Mt(Vt[0].target.clientHeight || 480);
-    });
-    return ut.current && P.observe(ut.current), () => P.disconnect();
-  }, et = [], t[10] = G, t[11] = et) : (G = t[10], et = t[11]), Te(G, et);
-  const pt = f?.graphContainer, xt = m?.graphContainer;
-  let M;
-  t[12] !== f?.description || t[13] !== f?.title || t[14] !== y || t[15] !== Y || t[16] !== O || t[17] !== r || t[18] !== Z || t[19] !== m?.description || t[20] !== m?.title || t[21] !== o ? (M = Z || O || r || Y ? /* @__PURE__ */ n.jsx(fi, { styles: {
-    title: m?.title,
-    description: m?.description
-  }, classNames: {
-    title: f?.title,
-    description: f?.description
-  }, graphTitle: Z, graphDescription: O, width: o, graphDownload: r ? Nt : void 0, dataDownload: Y ? y.map(Yi).filter(Wi).length > 0 ? y.map(Ii).filter(Fi) : y.filter(Hi) : null }) : null, t[12] = f?.description, t[13] = f?.title, t[14] = y, t[15] = Y, t[16] = O, t[17] = r, t[18] = Z, t[19] = m?.description, t[20] = m?.title, t[21] = o, t[22] = M) : M = t[22];
-  let N;
-  t[23] !== y.length ? (N = y.length === 0 && /* @__PURE__ */ n.jsx(pi, {}), t[23] = y.length, t[24] = N) : N = t[24];
-  let b;
-  t[25] !== Q || t[26] !== X || t[27] !== v || t[28] !== f || t[29] !== $t || t[30] !== _ || t[31] !== Tt || t[32] !== y || t[33] !== U || t[34] !== K || t[35] !== A || t[36] !== jt || t[37] !== ot || t[38] !== rt || t[39] !== Pt || t[40] !== lt || t[41] !== Gt || t[42] !== At || t[43] !== kt || t[44] !== l?.locale || t[45] !== l?.padZeros || t[46] !== l?.precision || t[47] !== l?.prefix || t[48] !== l?.suffix || t[49] !== s || t[50] !== u || t[51] !== Lt || t[52] !== ft || t[53] !== zt || t[54] !== Ot || t[55] !== Bt || t[56] !== m || t[57] !== tt || t[58] !== T || t[59] !== z || t[60] !== J || t[61] !== p ? (b = T && tt && y.length > 0 ? /* @__PURE__ */ n.jsx(hi, { data: y, lineColor: ot || ui.primaryColors["blue-600"], width: T, height: tt, dateFormat: U, showValues: Ot, noOfXTicks: At ?? gi(T), leftMargin: jt, rightMargin: ft, topMargin: J, bottomMargin: v, tooltip: z, highlightAreaSettings: K, onSeriesMouseOver: s, refValues: u, minValue: Gt, maxValue: Pt, animate: Q === !0 ? {
-    duration: 0.5,
-    once: !0,
-    amount: 0.5
-  } : Q || {
-    duration: 0,
-    once: !0,
-    amount: 0
-  }, rtl: A === "he" || A === "ar", strokeWidth: Bt, showDots: zt, annotations: X, customHighlightAreaSettings: _, regressionLine: Lt, yAxisTitle: p, noOfYTicks: kt, maxDate: rt, minDate: lt, curveType: $t, styles: m, classNames: f, customLayers: Tt, locale: l?.locale || "en", padZeros: l?.padZeros || !1, suffix: l?.suffix || "", prefix: l?.prefix || "", precision: l?.precision ?? 2 }) : null, t[25] = Q, t[26] = X, t[27] = v, t[28] = f, t[29] = $t, t[30] = _, t[31] = Tt, t[32] = y, t[33] = U, t[34] = K, t[35] = A, t[36] = jt, t[37] = ot, t[38] = rt, t[39] = Pt, t[40] = lt, t[41] = Gt, t[42] = At, t[43] = kt, t[44] = l?.locale, t[45] = l?.padZeros, t[46] = l?.precision, t[47] = l?.prefix, t[48] = l?.suffix, t[49] = s, t[50] = u, t[51] = Lt, t[52] = ft, t[53] = zt, t[54] = Ot, t[55] = Bt, t[56] = m, t[57] = tt, t[58] = T, t[59] = z, t[60] = J, t[61] = p, t[62] = b) : b = t[62];
-  let V;
-  t[63] !== N || t[64] !== b ? (V = /* @__PURE__ */ n.jsxs(xi, { ref: ut, children: [
-    N,
-    b
-  ] }), t[63] = N, t[64] = b, t[65] = V) : V = t[65];
-  let R;
-  t[66] !== f?.footnote || t[67] !== f?.source || t[68] !== B || t[69] !== $ || t[70] !== m?.footnote || t[71] !== m?.source || t[72] !== o ? (R = $ || B ? /* @__PURE__ */ n.jsx(mi, { styles: {
-    footnote: m?.footnote,
-    source: m?.source
-  }, classNames: {
-    footnote: f?.footnote,
-    source: f?.source
-  }, sources: $, footNote: B, width: o }) : null, t[66] = f?.footnote, t[67] = f?.source, t[68] = B, t[69] = $, t[70] = m?.footnote, t[71] = m?.source, t[72] = o, t[73] = R) : R = t[73];
-  let it;
-  return t[74] !== bt || t[75] !== q || t[76] !== at || t[77] !== S || t[78] !== A || t[79] !== h || t[80] !== j || t[81] !== wt || t[82] !== pt || t[83] !== xt || t[84] !== M || t[85] !== V || t[86] !== R || t[87] !== c || t[88] !== o ? (it = /* @__PURE__ */ n.jsxs(di, { className: pt, style: xt, id: at, ref: Nt, "aria-label": bt, backgroundColor: q, theme: c, language: A, minHeight: h, width: o, height: S, relativeHeight: wt, padding: j, children: [
-    M,
-    V,
-    R
-  ] }), t[74] = bt, t[75] = q, t[76] = at, t[77] = S, t[78] = A, t[79] = h, t[80] = j, t[81] = wt, t[82] = pt, t[83] = xt, t[84] = M, t[85] = V, t[86] = R, t[87] = c, t[88] = o, t[89] = it) : it = t[89], it;
-}
-function Hi(i) {
-  return i !== void 0;
-}
-function Fi(i) {
-  return i !== void 0;
-}
-function Ii(i) {
-  return i.data;
-}
-function Wi(i) {
-  return i !== void 0;
-}
-function Yi(i) {
-  return i.data;
-}
-export {
-  wo as SimpleLineChart
-};
-//# sourceMappingURL=SimpleLineChart.js.map
+import { t as e } from "./LineChart-BEUT_K-o.js";
+export { e as SimpleLineChart };

package/dist/SimpleMap-DKkJMa4X.cjs

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

package/dist/SimpleMap-DKkJMa4X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleMap-DKkJMa4X.cjs","names":[],"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 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  includeLayers: string[];\n  excludeLayers: string[];\n  mapLegend?: string | React.ReactNode;\n}\n\nexport function GeoHubMultipleMap(props: Props) {\n  const { mapStyle, center, zoomLevel, includeLayers, excludeLayers, mapLegend } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [showLegend, setShowLegend] = useState(true);\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        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            includeLayers.length === 0 && excludeLayers.length === 0\n              ? d\n              : {\n                  ...d,\n                  layers: filterData(d.layers, [\n                    {\n                      column: 'id',\n                      includeValues: includeLayers,\n                      excludeValues: excludeLayers,\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, includeLayers, excludeLayers, mapStyle]);\n  useEffect(() => {\n    if (mapRef.current) {\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              includeValues: includeLayers,\n              excludeValues: excludeLayers,\n            },\n          ]),\n        };\n        mapRef.current.setStyle(mapStyleObj);\n      });\n    }\n  }, [excludeLayers, includeLayers, mapStyle]);\n  return (\n    <GraphArea ref={graphDiv}>\n      {svgWidth && svgHeight ? (\n        <div\n          style={{\n            width: svgWidth,\n            height: svgHeight,\n          }}\n        >\n          <div\n            ref={mapContainer}\n            className='map maplibre-show-control'\n            style={{ width: '100%', height: '100%' }}\n          />\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 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  mapLegend?: string | React.ReactNode;\n  includeLayers: string[];\n  excludeLayers: string[];\n}\n\nexport function GeoHubSingleMap(props: Props) {\n  const { mapStyle, center, zoomLevel, includeLayers, excludeLayers, mapLegend } = props;\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [showLegend, setShowLegend] = useState(true);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const mapContainer = useRef<HTMLDivElement>(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) {\n      fetchAndParseJSON(mapStyle).then((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            includeLayers.length === 0 && excludeLayers.length === 0\n              ? d\n              : {\n                  ...d,\n                  layers: filterData(d.layers, [\n                    {\n                      column: 'id',\n                      includeValues: includeLayers,\n                      excludeValues: excludeLayers,\n                    },\n                  ]),\n                },\n          attributionControl: true,\n        };\n        if (center) {\n          mapObj.center = center;\n        }\n        if (zoomLevel) {\n          mapObj.zoom = zoomLevel;\n        }\n        const map = new maplibreGl.Map(mapObj);\n        map.addControl(\n          new maplibreGl.NavigationControl({\n            visualizePitch: true,\n            showZoom: true,\n            showCompass: true,\n          }),\n          'bottom-right',\n        );\n        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\n      });\n    }\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\n  return (\n    <GraphArea ref={graphDiv}>\n      {svgWidth && svgHeight ? (\n        <div\n          style={{\n            width: svgWidth,\n            height: svgHeight,\n          }}\n        >\n          <div\n            ref={mapContainer}\n            className='map maplibre-show-control'\n            style={{ width: '100%', height: '100%' }}\n          />\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                  >\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 type React from 'react';\nimport { useRef, useState } from 'react';\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\n\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  Languages,\n  MapLegendDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\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. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\n  mapStyle: string | { style: string; name: string }[];\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. */\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\n  /** Starting center point of the map */\n  center?: [number, number];\n  /** Starting zoom level of the map */\n  zoomLevel?: number;\n  /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */\n  includeLayers?: string[];\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 GeoHubMap(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    includeLayers = [],\n    excludeLayers = [],\n    ariaLabel,\n    uiMode = 'normal',\n    styles,\n    classNames,\n    mapLegend,\n  } = props;\n\n  const [selectedMapStyle, setSelectedMapStyle] = useState<string | undefined>(undefined);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  const defaultMapStyleValue = typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style;\n\n  const filterConfig = {\n    ignoreCase: true,\n    ignoreAccents: true,\n    trim: true,\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      {typeof mapStyle === 'string' ? null : (\n        <DropdownSelect\n          options={mapStyle.map((d) => ({ label: d.name, value: d.style }))}\n          isClearable={false}\n          size='sm'\n          variant={uiMode}\n          isRtl={language === 'he' || language === 'ar'}\n          isSearchable\n          filterOption={createFilter(filterConfig)}\n          defaultValue={mapStyle.find((d) => d.style === defaultMapStyleValue)}\n          controlShouldRenderValue\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          onChange={(el: any) => {\n            if (el) setSelectedMapStyle(el.value);\n          }}\n        />\n      )}\n      {typeof mapStyle === 'string' ? (\n        <GeoHubSingleMap\n          mapStyle={mapStyle}\n          center={center}\n          zoomLevel={zoomLevel}\n          includeLayers={includeLayers}\n          excludeLayers={excludeLayers}\n          mapLegend={mapLegend as string | React.ReactNode | undefined}\n        />\n      ) : (\n        <GeoHubMultipleMap\n          mapStyle={selectedMapStyle || defaultMapStyleValue}\n          center={center}\n          zoomLevel={zoomLevel}\n          includeLayers={includeLayers}\n          excludeLayers={excludeLayers}\n          mapLegend={\n            ((mapLegend || []) as MapLegendDataType[]).find(\n              (d) =>\n                d.mapStyleName ===\n                mapStyle.find((el) => el.style === (selectedMapStyle || defaultMapStyleValue))\n                  ?.name,\n            )?.legend\n          }\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":"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"}