@undp/data-viz 1.3.0 → 1.3.1

package/dist/SparkLine.js

@@ -1,2 +1,321 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-BHm2KTjD-D8FylaKc.cjs"),l=require("react"),X=require("./Typography-CDR-DAHH.cjs"),V=require("./parse-hMnG_lRV.cjs"),Q=require("./index-BzeLQvXk.cjs"),Z=require("./Tooltip-BM18N_3l.cjs"),z=require("./checkIfNullOrUndefined.js"),_=require("./time-Byw_jYQ7.cjs"),ee=require("./linear-BVckp9RD.cjs"),te=require("./area-D3Qx7k7K.cjs"),K=require("./line-DHV4JwCR.cjs"),P=require("./step-BZ3C8QFW.cjs"),re=require("./select-Bnfk0lJx.cjs"),se=require("./init-DU0ybBc_.cjs"),ie=require("./pointer-Dkq5NV1q.cjs"),oe=require("./GraphFooter.js"),ne=require("./GraphHeader.js"),ae=require("./Colors.js"),le=require("./generateRandomString-B5zBiJzS.cjs");function ce(F){const{data:y,width:c,height:R,lineColor:d,dateFormat:x,areaId:u,leftMargin:s,rightMargin:N,topMargin:L,bottomMargin:W,tooltip:b,onSeriesMouseOver:o,minValue:D,maxValue:k,curveType:v,styles:w,classNames:q,customLayers:m}=F,C=v==="linear"?K.curveLinear:v==="step"?P.curveStep:v==="stepAfter"?P.stepAfter:v==="stepBefore"?P.stepBefore:P.monotoneX,[h,O]=l.useState(void 0),[H,M]=l.useState(void 0),[S,j]=l.useState(void 0),n={top:L,bottom:W,left:s,right:N},T=l.useRef(null),t=Q.sortBy(y.map(e=>({...e,date:V.parse(`${e.date}`,x,new Date)})),"date"),A=c-n.left-n.right,i=R-n.top-n.bottom,p=t[0].date,B=t[t.length-1].date,g=Math.min(...t.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.min(...t.map(e=>e.y).filter(e=>e!=null))>0?0:Math.min(...t.map(e=>e.y).filter(e=>e!=null)):0,$=Math.max(...t.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.max(...t.map(e=>e.y).filter(e=>e!=null)):0,a=_.time().domain([p,B]).range([0,A]),E=ee.linear().domain([z.checkIfNullOrUndefined(D)?g:D,z.checkIfNullOrUndefined(k)?$>0?$:0:k]).range([i,0]).nice(),f=te.area().x(e=>a(e.date)).y1(e=>E(e.y)).y0(i).curve(C),G=K.line().x(e=>a(e.date)).y(e=>E(e.y)).curve(C);return l.useEffect(()=>{const e=Y=>{const U=t[se.bisectCenter(t.map(J=>J.date),a.invert(ie.pointer(Y)[0]),1)];O(U||t[t.length-1]),o?.(U||t[t.length-1]),j(Y.clientY),M(Y.clientX)},I=()=>{O(void 0),o?.(void 0),M(void 0),j(void 0)};re.select(T.current).on("mousemove",e).on("mouseout",I),o?.(void 0)},[a,t,o]),r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs("svg",{width:`${c}px`,height:`${R}px`,viewBox:`0 0 ${c} ${R}`,direction:"ltr",children:[u?r.jsxRuntimeExports.jsxs("linearGradient",{id:u,x1:"0",x2:"0",y1:"0",y2:"1",children:[r.jsxRuntimeExports.jsx("stop",{style:{stopColor:d},stopOpacity:"0.1",offset:"0%"}),r.jsxRuntimeExports.jsx("stop",{style:{stopColor:d},stopOpacity:"0",offset:"100%"})]}):null,r.jsxRuntimeExports.jsxs("g",{transform:`translate(${n.left},${n.top})`,children:[m.filter(e=>e.position==="before").map(e=>e.layer),r.jsxRuntimeExports.jsxs("g",{children:[r.jsxRuntimeExports.jsx("text",{className:X.cnExports.cn("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",q?.xAxis?.labels),y:i,x:a(t[t.length-1].date),style:{textAnchor:"end",...w?.xAxis?.labels},dy:"1em",children:V.format(t[t.length-1].date,x)}),r.jsxRuntimeExports.jsx("text",{y:i,x:a(t[0].date),style:{textAnchor:"start",...w?.xAxis?.labels},className:X.cnExports.cn("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",q?.xAxis?.labels),dy:"1em",children:V.format(t[0].date,x)})]}),r.jsxRuntimeExports.jsxs("g",{children:[r.jsxRuntimeExports.jsx("path",{d:f(t)||"",style:{fill:`url(#${u})`,clipPath:"url(#clip)"}}),r.jsxRuntimeExports.jsx("path",{d:G(t)||"",style:{stroke:d,fill:"none",strokeWidth:2}}),h?r.jsxRuntimeExports.jsx("circle",{y1:0,cy:E(h.y),cx:a(h.date),r:5,style:{fill:d}}):null]}),m.filter(e=>e.position==="after").map(e=>e.layer),r.jsxRuntimeExports.jsx("rect",{ref:T,style:{fill:"none",pointerEvents:"all"},width:A,height:i})]})]}),h&&b&&H&&S?r.jsxRuntimeExports.jsx(Z.Tooltip,{data:h,body:b,xPos:H,yPos:S,backgroundStyle:w?.tooltip,className:q?.tooltip}):null]})}function xe(F){const{data:y,graphTitle:c,lineColor:R,sources:d,graphDescription:x,height:u,width:s,footNote:N,dateFormat:L="yyyy",area:W=!1,padding:b,backgroundColor:o,leftMargin:D=5,rightMargin:k=5,topMargin:v=10,bottomMargin:w=20,tooltip:q,relativeHeight:m,onSeriesMouseOver:C,graphID:h,minValue:O,maxValue:H,graphDownload:M=!1,dataDownload:S=!1,language:j="en",minHeight:n=0,theme:T="light",ariaLabel:t,curveType:A="curve",styles:i,classNames:p,customLayers:B=[]}=F,[g,$]=l.useState(0),[a,E]=l.useState(0),f=l.useRef(null),G=l.useRef(null);return l.useEffect(()=>{const e=new ResizeObserver(I=>{$(s||I[0].target.clientWidth||620),E(u||I[0].target.clientHeight||480)});return f.current&&(E(f.current.clientHeight||480),$(f.current.clientWidth||620),s||e.observe(f.current)),()=>e.disconnect()},[s,u]),r.jsxRuntimeExports.jsx("div",{className:`${T||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:j==="he"||j==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:X.cnExports.cn(`${o?o===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${j||"en"}`,p?.graphContainer),style:{...i?.graphContainer||{},...o&&o!==!0?{backgroundColor:o}:{}},id:h,ref:G,"aria-label":t||`${c?`The graph shows ${c}. `:""}This is a line chart that show trends over time.${x?` ${x}`:""}`,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:o?b||"1rem":b||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[c||x||M||S?r.jsxRuntimeExports.jsx(ne.GraphHeader,{styles:{title:i?.title,description:i?.description},classNames:{title:p?.title,description:p?.description},graphTitle:c,graphDescription:x,width:s,graphDownload:M?G.current:void 0,dataDownload:S?y.map(e=>e.data).filter(e=>e!==void 0).length>0?y.map(e=>e.data).filter(e=>e!==void 0):y.filter(e=>e!==void 0):null}):null,r.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:f,"aria-label":"Graph area",children:(s||g)&&(u||a)?r.jsxRuntimeExports.jsx(ce,{data:y,lineColor:R||ae.Colors.primaryColors["blue-600"],width:s||g,height:Math.max(n,u||(m?n?(s||g)*m>n?(s||g)*m:n:(s||g)*m:a)),dateFormat:L,areaId:W?le.generateRandomString(8):void 0,leftMargin:D,rightMargin:k,topMargin:v,bottomMargin:w,tooltip:q,onSeriesMouseOver:C,minValue:O,maxValue:H,curveType:A,styles:i,classNames:p,customLayers:B}):null}),d||N?r.jsxRuntimeExports.jsx(oe.GraphFooter,{styles:{footnote:i?.footnote,source:i?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:d,footNote:N,width:s}):null]})})})})}exports.SparkLine=xe;
+import { j as r, m as V } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as S, useRef as X, useEffect as J } from "react";
+import { p as Q, f as U } from "./parse-DlCRUFh_.js";
+import { s as Z } from "./index-DxagiOHo.js";
+import { T as _ } from "./Tooltip-DyM5snqx.js";
+import { c as q } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { t as ee } from "./time-BzJP5SPC.js";
+import { a as te } from "./linear-DUdu7l2G.js";
+import { a as re } from "./area-BE2wo7fv.js";
+import { c as ae, l as oe } from "./line-CPfhohvF.js";
+import { c as ie, s as se, a as le, m as ne } from "./step-BrDul-H4.js";
+import { s as me } from "./select-DKy99ogv.js";
+import { a as ce } from "./init-BhZylTFx.js";
+import { p as de } from "./pointer-CWRWOsrb.js";
+import { GraphFooter as pe } from "./GraphFooter.js";
+import { GraphHeader as he } from "./GraphHeader.js";
+import { Colors as fe } from "./Colors.js";
+import { g as ge } from "./generateRandomString-za3IQGfQ.js";
+function xe(E) {
+  const {
+    data: u,
+    width: n,
+    height: b,
+    lineColor: p,
+    dateFormat: m,
+    areaId: c,
+    leftMargin: a,
+    rightMargin: k,
+    topMargin: F,
+    bottomMargin: L,
+    tooltip: w,
+    onSeriesMouseOver: i,
+    minValue: A,
+    maxValue: O,
+    curveType: y,
+    styles: M,
+    classNames: $,
+    customLayers: h
+  } = E, H = y === "linear" ? ae : y === "step" ? ie : y === "stepAfter" ? se : y === "stepBefore" ? le : ne, [f, T] = S(void 0), [G, N] = S(void 0), [D, v] = S(void 0), s = {
+    top: F,
+    bottom: L,
+    left: a,
+    right: k
+  }, I = X(null), t = Z(
+    u.map((e) => ({
+      ...e,
+      date: Q(`${e.date}`, m, /* @__PURE__ */ new Date())
+    })),
+    "date"
+  ), P = n - s.left - s.right, o = b - s.top - s.bottom, d = t[0].date, Y = t[t.length - 1].date, g = Math.min(...t.map((e) => e.y).filter((e) => e != null)) !== 1 / 0 ? Math.min(...t.map((e) => e.y).filter((e) => e != null)) > 0 ? 0 : Math.min(...t.map((e) => e.y).filter((e) => e != null)) : 0, C = Math.max(...t.map((e) => e.y).filter((e) => e != null)) !== 1 / 0 ? Math.max(...t.map((e) => e.y).filter((e) => e != null)) : 0, l = ee().domain([d, Y]).range([0, P]), j = te().domain([
+    q(A) ? g : A,
+    q(O) ? C > 0 ? C : 0 : O
+  ]).range([o, 0]).nice(), x = re().x((e) => l(e.date)).y1((e) => j(e.y)).y0(o).curve(H), R = oe().x((e) => l(e.date)).y((e) => j(e.y)).curve(H);
+  return J(() => {
+    const e = (B) => {
+      const z = t[ce(
+        t.map((K) => K.date),
+        l.invert(de(B)[0]),
+        1
+      )];
+      T(z || t[t.length - 1]), i?.(z || t[t.length - 1]), v(B.clientY), N(B.clientX);
+    }, W = () => {
+      T(void 0), i?.(void 0), N(void 0), v(void 0);
+    };
+    me(I.current).on("mousemove", e).on("mouseout", W), i?.(void 0);
+  }, [l, t, i]), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsxs(
+      "svg",
+      {
+        width: `${n}px`,
+        height: `${b}px`,
+        viewBox: `0 0 ${n} ${b}`,
+        direction: "ltr",
+        children: [
+          c ? /* @__PURE__ */ r.jsxs("linearGradient", { id: c, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ r.jsx("stop", { style: { stopColor: p }, stopOpacity: "0.1", offset: "0%" }),
+            /* @__PURE__ */ r.jsx("stop", { style: { stopColor: p }, stopOpacity: "0", offset: "100%" })
+          ] }) : null,
+          /* @__PURE__ */ r.jsxs("g", { transform: `translate(${s.left},${s.top})`, children: [
+            h.filter((e) => e.position === "before").map((e) => e.layer),
+            /* @__PURE__ */ r.jsxs("g", { children: [
+              /* @__PURE__ */ r.jsx(
+                "text",
+                {
+                  className: V(
+                    "xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",
+                    $?.xAxis?.labels
+                  ),
+                  y: o,
+                  x: l(t[t.length - 1].date),
+                  style: {
+                    textAnchor: "end",
+                    ...M?.xAxis?.labels
+                  },
+                  dy: "1em",
+                  children: U(t[t.length - 1].date, m)
+                }
+              ),
+              /* @__PURE__ */ r.jsx(
+                "text",
+                {
+                  y: o,
+                  x: l(t[0].date),
+                  style: {
+                    textAnchor: "start",
+                    ...M?.xAxis?.labels
+                  },
+                  className: V(
+                    "xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",
+                    $?.xAxis?.labels
+                  ),
+                  dy: "1em",
+                  children: U(t[0].date, m)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r.jsxs("g", { children: [
+              /* @__PURE__ */ r.jsx(
+                "path",
+                {
+                  d: x(t) || "",
+                  style: {
+                    fill: `url(#${c})`,
+                    clipPath: "url(#clip)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ r.jsx(
+                "path",
+                {
+                  d: R(t) || "",
+                  style: {
+                    stroke: p,
+                    fill: "none",
+                    strokeWidth: 2
+                  }
+                }
+              ),
+              f ? /* @__PURE__ */ r.jsx(
+                "circle",
+                {
+                  y1: 0,
+                  cy: j(f.y),
+                  cx: l(f.date),
+                  r: 5,
+                  style: { fill: p }
+                }
+              ) : null
+            ] }),
+            h.filter((e) => e.position === "after").map((e) => e.layer),
+            /* @__PURE__ */ r.jsx(
+              "rect",
+              {
+                ref: I,
+                style: {
+                  fill: "none",
+                  pointerEvents: "all"
+                },
+                width: P,
+                height: o
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    f && w && G && D ? /* @__PURE__ */ r.jsx(
+      _,
+      {
+        data: f,
+        body: w,
+        xPos: G,
+        yPos: D,
+        backgroundStyle: M?.tooltip,
+        className: $?.tooltip
+      }
+    ) : null
+  ] });
+}
+function Ie(E) {
+  const {
+    data: u,
+    graphTitle: n,
+    lineColor: b,
+    sources: p,
+    graphDescription: m,
+    height: c,
+    width: a,
+    footNote: k,
+    dateFormat: F = "yyyy",
+    area: L = !1,
+    padding: w,
+    backgroundColor: i,
+    leftMargin: A = 5,
+    rightMargin: O = 5,
+    topMargin: y = 10,
+    bottomMargin: M = 20,
+    tooltip: $,
+    relativeHeight: h,
+    onSeriesMouseOver: H,
+    graphID: f,
+    minValue: T,
+    maxValue: G,
+    graphDownload: N = !1,
+    dataDownload: D = !1,
+    language: v = "en",
+    minHeight: s = 0,
+    theme: I = "light",
+    ariaLabel: t,
+    curveType: P = "curve",
+    styles: o,
+    classNames: d,
+    customLayers: Y = []
+  } = E, [g, C] = S(0), [l, j] = S(0), x = X(null), R = X(null);
+  return J(() => {
+    const e = new ResizeObserver((W) => {
+      C(a || W[0].target.clientWidth || 620), j(c || W[0].target.clientHeight || 480);
+    });
+    return x.current && (j(x.current.clientHeight || 480), C(x.current.clientWidth || 620), a || e.observe(x.current)), () => e.disconnect();
+  }, [a, c]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${I || "light"} flex  ${a ? "w-fit grow-0" : "w-full grow"}`,
+      dir: v === "he" || v === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: V(
+            `${i ? i === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${v || "en"}`,
+            d?.graphContainer
+          ),
+          style: {
+            ...o?.graphContainer || {},
+            ...i && i !== !0 ? { backgroundColor: i } : {}
+          },
+          id: f,
+          ref: R,
+          "aria-label": t || `${n ? `The graph shows ${n}. ` : ""}This is a line chart that show trends over time.${m ? ` ${m}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: i ? w || "1rem" : w || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                n || m || N || D ? /* @__PURE__ */ r.jsx(
+                  he,
+                  {
+                    styles: {
+                      title: o?.title,
+                      description: o?.description
+                    },
+                    classNames: {
+                      title: d?.title,
+                      description: d?.description
+                    },
+                    graphTitle: n,
+                    graphDescription: m,
+                    width: a,
+                    graphDownload: N ? R.current : void 0,
+                    dataDownload: D ? u.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? u.map((e) => e.data).filter((e) => e !== void 0) : u.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx(
+                  "div",
+                  {
+                    className: "flex flex-col grow justify-center leading-0",
+                    ref: x,
+                    "aria-label": "Graph area",
+                    children: (a || g) && (c || l) ? /* @__PURE__ */ r.jsx(
+                      xe,
+                      {
+                        data: u,
+                        lineColor: b || fe.primaryColors["blue-600"],
+                        width: a || g,
+                        height: Math.max(
+                          s,
+                          c || (h ? s ? (a || g) * h > s ? (a || g) * h : s : (a || g) * h : l)
+                        ),
+                        dateFormat: F,
+                        areaId: L ? ge(8) : void 0,
+                        leftMargin: A,
+                        rightMargin: O,
+                        topMargin: y,
+                        bottomMargin: M,
+                        tooltip: $,
+                        onSeriesMouseOver: H,
+                        minValue: T,
+                        maxValue: G,
+                        curveType: P,
+                        styles: o,
+                        classNames: d,
+                        customLayers: Y
+                      }
+                    ) : null
+                  }
+                ),
+                p || k ? /* @__PURE__ */ r.jsx(
+                  pe,
+                  {
+                    styles: { footnote: o?.footnote, source: o?.source },
+                    classNames: {
+                      footnote: d?.footnote,
+                      source: d?.source
+                    },
+                    sources: p,
+                    footNote: k,
+                    width: a
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Ie as SparkLine
+};
 //# sourceMappingURL=SparkLine.js.map

package/dist/SparkLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"SparkLine.js","sources":["../src/Components/Graphs/LineCharts/SparkLine/Graph.tsx","../src/Components/Graphs/LineCharts/SparkLine/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\nimport {\r\n  line,\r\n  curveMonotoneX,\r\n  area,\r\n  curveLinear,\r\n  curveStep,\r\n  curveStepAfter,\r\n  curveStepBefore,\r\n} from 'd3-shape';\r\nimport { scaleLinear, scaleTime } from 'd3-scale';\r\nimport { format } from 'date-fns/format';\r\nimport { parse } from 'date-fns/parse';\r\nimport { bisectCenter } from 'd3-array';\r\nimport { pointer, select } from 'd3-selection';\r\nimport sortBy from 'lodash.sortby';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  CurveTypes,\r\n  CustomLayerDataType,\r\n  LineChartDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\n\r\ninterface Props {\r\n  data: LineChartDataType[];\r\n  lineColor: string;\r\n  width: number;\r\n  height: number;\r\n  dateFormat: string;\r\n  areaId?: string;\r\n  leftMargin: number;\r\n  rightMargin: number;\r\n  topMargin: number;\r\n  bottomMargin: number;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  maxValue?: number;\r\n  minValue?: number;\r\n  curveType: CurveTypes;\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  customLayers: CustomLayerDataType[];\r\n}\r\n\r\ninterface FormattedDataType {\r\n  y: number;\r\n  date: Date;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const {\r\n    data,\r\n    width,\r\n    height,\r\n    lineColor,\r\n    dateFormat,\r\n    areaId,\r\n    leftMargin,\r\n    rightMargin,\r\n    topMargin,\r\n    bottomMargin,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    minValue,\r\n    maxValue,\r\n    curveType,\r\n    styles,\r\n    classNames,\r\n    customLayers,\r\n  } = props;\r\n  const curve =\r\n    curveType === 'linear'\r\n      ? curveLinear\r\n      : curveType === 'step'\r\n        ? curveStep\r\n        : curveType === 'stepAfter'\r\n          ? curveStepAfter\r\n          : curveType === 'stepBefore'\r\n            ? curveStepBefore\r\n            : curveMonotoneX;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\r\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\r\n  const margin = {\r\n    top: topMargin,\r\n    bottom: bottomMargin,\r\n    left: leftMargin,\r\n    right: rightMargin,\r\n  };\r\n  const MouseoverRectRef = useRef(null);\r\n  const dataFormatted = sortBy(\r\n    data.map(d => ({\r\n      ...d,\r\n      date: parse(`${d.date}`, dateFormat, new Date()),\r\n    })),\r\n    'date',\r\n  );\r\n  const graphWidth = width - margin.left - margin.right;\r\n  const graphHeight = height - margin.top - margin.bottom;\r\n  const minYear = dataFormatted[0].date;\r\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\r\n  const minParam: number =\r\n    Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) !== Infinity\r\n      ? Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) > 0\r\n        ? 0\r\n        : Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null))\r\n      : 0;\r\n  const maxParam: number =\r\n    Math.max(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) !== Infinity\r\n      ? Math.max(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null))\r\n      : 0;\r\n\r\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\r\n  const y = scaleLinear()\r\n    .domain([\r\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\r\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\r\n    ])\r\n    .range([graphHeight, 0])\r\n    .nice();\r\n\r\n  const mainGraphArea = area<FormattedDataType>()\r\n    .x(d => x(d.date))\r\n    .y1(d => y(d.y))\r\n    .y0(graphHeight)\r\n    .curve(curve);\r\n  const lineShape = line<FormattedDataType>()\r\n    .x(d => x(d.date))\r\n    .y(d => y(d.y))\r\n    .curve(curve);\r\n  useEffect(() => {\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    const mousemove = (event: any) => {\r\n      const selectedData =\r\n        dataFormatted[\r\n          bisectCenter(\r\n            dataFormatted.map(d => d.date),\r\n            x.invert(pointer(event)[0]),\r\n            1,\r\n          )\r\n        ];\r\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\r\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\r\n      setEventY(event.clientY);\r\n      setEventX(event.clientX);\r\n    };\r\n    const mouseout = () => {\r\n      setMouseOverData(undefined);\r\n      onSeriesMouseOver?.(undefined);\r\n      setEventX(undefined);\r\n      setEventY(undefined);\r\n    };\r\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\r\n    onSeriesMouseOver?.(undefined);\r\n  }, [x, dataFormatted, onSeriesMouseOver]);\r\n  return (\r\n    <>\r\n      <svg\r\n        width={`${width}px`}\r\n        height={`${height}px`}\r\n        viewBox={`0 0 ${width} ${height}`}\r\n        direction='ltr'\r\n      >\r\n        {areaId ? (\r\n          <linearGradient id={areaId} x1='0' x2='0' y1='0' y2='1'>\r\n            <stop style={{ stopColor: lineColor }} stopOpacity='0.1' offset='0%' />\r\n            <stop style={{ stopColor: lineColor }} stopOpacity='0' offset='100%' />\r\n          </linearGradient>\r\n        ) : null}\r\n        <g transform={`translate(${margin.left},${margin.top})`}>\r\n          {customLayers.filter(d => d.position === 'before').map(d => d.layer)}\r\n          <g>\r\n            <text\r\n              className={cn(\r\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\r\n                classNames?.xAxis?.labels,\r\n              )}\r\n              y={graphHeight}\r\n              x={x(dataFormatted[dataFormatted.length - 1].date)}\r\n              style={{\r\n                textAnchor: 'end',\r\n                ...styles?.xAxis?.labels,\r\n              }}\r\n              dy='1em'\r\n            >\r\n              {format(dataFormatted[dataFormatted.length - 1].date, dateFormat)}\r\n            </text>\r\n            <text\r\n              y={graphHeight}\r\n              x={x(dataFormatted[0].date)}\r\n              style={{\r\n                textAnchor: 'start',\r\n                ...styles?.xAxis?.labels,\r\n              }}\r\n              className={cn(\r\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\r\n                classNames?.xAxis?.labels,\r\n              )}\r\n              dy='1em'\r\n            >\r\n              {format(dataFormatted[0].date, dateFormat)}\r\n            </text>\r\n          </g>\r\n          <g>\r\n            <path\r\n              d={mainGraphArea(dataFormatted) || ''}\r\n              style={{\r\n                fill: `url(#${areaId})`,\r\n                clipPath: 'url(#clip)',\r\n              }}\r\n            />\r\n            <path\r\n              d={lineShape(dataFormatted) || ''}\r\n              style={{\r\n                stroke: lineColor,\r\n                fill: 'none',\r\n                strokeWidth: 2,\r\n              }}\r\n            />\r\n            {mouseOverData ? (\r\n              <circle\r\n                y1={0}\r\n                cy={y(mouseOverData.y)}\r\n                cx={x(mouseOverData.date)}\r\n                r={5}\r\n                style={{ fill: lineColor }}\r\n              />\r\n            ) : null}\r\n          </g>\r\n          {customLayers.filter(d => d.position === 'after').map(d => d.layer)}\r\n          <rect\r\n            ref={MouseoverRectRef}\r\n            style={{\r\n              fill: 'none',\r\n              pointerEvents: 'all',\r\n            }}\r\n            width={graphWidth}\r\n            height={graphHeight}\r\n          />\r\n        </g>\r\n      </svg>\r\n      {mouseOverData && tooltip && eventX && eventY ? (\r\n        <Tooltip\r\n          data={mouseOverData}\r\n          body={tooltip}\r\n          xPos={eventX}\r\n          yPos={eventY}\r\n          backgroundStyle={styles?.tooltip}\r\n          className={classNames?.tooltip}\r\n        />\r\n      ) : null}\r\n    </>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport {\r\n  Languages,\r\n  LineChartDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  CurveTypes,\r\n  CustomLayerDataType,\r\n} from '@/Types';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { generateRandomString } from '@/Utils/generateRandomString';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: LineChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the lines */\r\n  lineColor?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Left margin of the graph */\r\n  leftMargin?: number;\r\n  /** Right margin of the graph */\r\n  rightMargin?: number;\r\n  /** Top margin of the graph */\r\n  topMargin?: number;\r\n  /** Bottom margin of the graph */\r\n  bottomMargin?: number;\r\n\r\n  // Values and Ticks\r\n  /** Maximum value for the chart */\r\n  maxValue?: number;\r\n  /** Minimum value for the chart */\r\n  minValue?: number;\r\n\r\n  // Graph Parameters\r\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\r\n  dateFormat?: string;\r\n  /** Toggles the visibility of the area below the line */\r\n  area?: boolean;\r\n  /** Curve type for the line */\r\n  curveType?: CurveTypes;\r\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\r\n  customLayers?: CustomLayerDataType[];\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse over event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function SparkLine(props: Props) {\r\n  const {\r\n    data,\r\n    graphTitle,\r\n    lineColor,\r\n    sources,\r\n    graphDescription,\r\n    height,\r\n    width,\r\n    footNote,\r\n    dateFormat = 'yyyy',\r\n    area = false,\r\n    padding,\r\n    backgroundColor,\r\n    leftMargin = 5,\r\n    rightMargin = 5,\r\n    topMargin = 10,\r\n    bottomMargin = 20,\r\n    tooltip,\r\n    relativeHeight,\r\n    onSeriesMouseOver,\r\n    graphID,\r\n    minValue,\r\n    maxValue,\r\n    graphDownload = false,\r\n    dataDownload = false,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    curveType = 'curve',\r\n    styles,\r\n    classNames,\r\n    customLayers = [],\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a line chart that show trends over time.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            <div\r\n              className='flex flex-col grow justify-center leading-0'\r\n              ref={graphDiv}\r\n              aria-label='Graph area'\r\n            >\r\n              {(width || svgWidth) && (height || svgHeight) ? (\r\n                <Graph\r\n                  data={data}\r\n                  lineColor={lineColor || Colors.primaryColors['blue-600']}\r\n                  width={width || svgWidth}\r\n                  height={Math.max(\r\n                    minHeight,\r\n                    height ||\r\n                      (relativeHeight\r\n                        ? minHeight\r\n                          ? (width || svgWidth) * relativeHeight > minHeight\r\n                            ? (width || svgWidth) * relativeHeight\r\n                            : minHeight\r\n                          : (width || svgWidth) * relativeHeight\r\n                        : svgHeight),\r\n                  )}\r\n                  dateFormat={dateFormat}\r\n                  areaId={area ? generateRandomString(8) : undefined}\r\n                  leftMargin={leftMargin}\r\n                  rightMargin={rightMargin}\r\n                  topMargin={topMargin}\r\n                  bottomMargin={bottomMargin}\r\n                  tooltip={tooltip}\r\n                  onSeriesMouseOver={onSeriesMouseOver}\r\n                  minValue={minValue}\r\n                  maxValue={maxValue}\r\n                  curveType={curveType}\r\n                  styles={styles}\r\n                  classNames={classNames}\r\n                  customLayers={customLayers}\r\n                />\r\n              ) : null}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Graph","props","data","width","height","lineColor","dateFormat","areaId","leftMargin","rightMargin","topMargin","bottomMargin","tooltip","onSeriesMouseOver","minValue","maxValue","curveType","styles","classNames","customLayers","curve","curveLinear","curveStep","curveStepAfter","curveStepBefore","curveMonotoneX","mouseOverData","setMouseOverData","useState","eventX","setEventX","eventY","setEventY","margin","MouseoverRectRef","useRef","dataFormatted","sortBy","d","parse","graphWidth","graphHeight","minYear","maxYear","minParam","maxParam","x","scaleTime","y","scaleLinear","checkIfNullOrUndefined","mainGraphArea","area","lineShape","line","useEffect","mousemove","event","selectedData","bisectCenter","pointer","mouseout","select","jsxs","Fragment","jsx","cn","format","Tooltip","SparkLine","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","relativeHeight","graphID","graphDownload","dataDownload","language","minHeight","theme","ariaLabel","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","graphParentDiv","resizeObserver","entries","GraphHeader","Colors","generateRandomString","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"SparkLine.js","sources":["../src/Components/Graphs/LineCharts/SparkLine/Graph.tsx","../src/Components/Graphs/LineCharts/SparkLine/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\nimport {\r\n  line,\r\n  curveMonotoneX,\r\n  area,\r\n  curveLinear,\r\n  curveStep,\r\n  curveStepAfter,\r\n  curveStepBefore,\r\n} from 'd3-shape';\r\nimport { scaleLinear, scaleTime } from 'd3-scale';\r\nimport { format } from 'date-fns/format';\r\nimport { parse } from 'date-fns/parse';\r\nimport { bisectCenter } from 'd3-array';\r\nimport { pointer, select } from 'd3-selection';\r\nimport sortBy from 'lodash.sortby';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  CurveTypes,\r\n  CustomLayerDataType,\r\n  LineChartDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\n\r\ninterface Props {\r\n  data: LineChartDataType[];\r\n  lineColor: string;\r\n  width: number;\r\n  height: number;\r\n  dateFormat: string;\r\n  areaId?: string;\r\n  leftMargin: number;\r\n  rightMargin: number;\r\n  topMargin: number;\r\n  bottomMargin: number;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n  maxValue?: number;\r\n  minValue?: number;\r\n  curveType: CurveTypes;\r\n  styles?: StyleObject;\r\n  classNames?: ClassNameObject;\r\n  customLayers: CustomLayerDataType[];\r\n}\r\n\r\ninterface FormattedDataType {\r\n  y: number;\r\n  date: Date;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const {\r\n    data,\r\n    width,\r\n    height,\r\n    lineColor,\r\n    dateFormat,\r\n    areaId,\r\n    leftMargin,\r\n    rightMargin,\r\n    topMargin,\r\n    bottomMargin,\r\n    tooltip,\r\n    onSeriesMouseOver,\r\n    minValue,\r\n    maxValue,\r\n    curveType,\r\n    styles,\r\n    classNames,\r\n    customLayers,\r\n  } = props;\r\n  const curve =\r\n    curveType === 'linear'\r\n      ? curveLinear\r\n      : curveType === 'step'\r\n        ? curveStep\r\n        : curveType === 'stepAfter'\r\n          ? curveStepAfter\r\n          : curveType === 'stepBefore'\r\n            ? curveStepBefore\r\n            : curveMonotoneX;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\r\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\r\n  const margin = {\r\n    top: topMargin,\r\n    bottom: bottomMargin,\r\n    left: leftMargin,\r\n    right: rightMargin,\r\n  };\r\n  const MouseoverRectRef = useRef(null);\r\n  const dataFormatted = sortBy(\r\n    data.map(d => ({\r\n      ...d,\r\n      date: parse(`${d.date}`, dateFormat, new Date()),\r\n    })),\r\n    'date',\r\n  );\r\n  const graphWidth = width - margin.left - margin.right;\r\n  const graphHeight = height - margin.top - margin.bottom;\r\n  const minYear = dataFormatted[0].date;\r\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\r\n  const minParam: number =\r\n    Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) !== Infinity\r\n      ? Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) > 0\r\n        ? 0\r\n        : Math.min(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null))\r\n      : 0;\r\n  const maxParam: number =\r\n    Math.max(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null)) !== Infinity\r\n      ? Math.max(...dataFormatted.map(d => d.y).filter(d => d !== undefined && d !== null))\r\n      : 0;\r\n\r\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\r\n  const y = scaleLinear()\r\n    .domain([\r\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\r\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\r\n    ])\r\n    .range([graphHeight, 0])\r\n    .nice();\r\n\r\n  const mainGraphArea = area<FormattedDataType>()\r\n    .x(d => x(d.date))\r\n    .y1(d => y(d.y))\r\n    .y0(graphHeight)\r\n    .curve(curve);\r\n  const lineShape = line<FormattedDataType>()\r\n    .x(d => x(d.date))\r\n    .y(d => y(d.y))\r\n    .curve(curve);\r\n  useEffect(() => {\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    const mousemove = (event: any) => {\r\n      const selectedData =\r\n        dataFormatted[\r\n          bisectCenter(\r\n            dataFormatted.map(d => d.date),\r\n            x.invert(pointer(event)[0]),\r\n            1,\r\n          )\r\n        ];\r\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\r\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\r\n      setEventY(event.clientY);\r\n      setEventX(event.clientX);\r\n    };\r\n    const mouseout = () => {\r\n      setMouseOverData(undefined);\r\n      onSeriesMouseOver?.(undefined);\r\n      setEventX(undefined);\r\n      setEventY(undefined);\r\n    };\r\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\r\n    onSeriesMouseOver?.(undefined);\r\n  }, [x, dataFormatted, onSeriesMouseOver]);\r\n  return (\r\n    <>\r\n      <svg\r\n        width={`${width}px`}\r\n        height={`${height}px`}\r\n        viewBox={`0 0 ${width} ${height}`}\r\n        direction='ltr'\r\n      >\r\n        {areaId ? (\r\n          <linearGradient id={areaId} x1='0' x2='0' y1='0' y2='1'>\r\n            <stop style={{ stopColor: lineColor }} stopOpacity='0.1' offset='0%' />\r\n            <stop style={{ stopColor: lineColor }} stopOpacity='0' offset='100%' />\r\n          </linearGradient>\r\n        ) : null}\r\n        <g transform={`translate(${margin.left},${margin.top})`}>\r\n          {customLayers.filter(d => d.position === 'before').map(d => d.layer)}\r\n          <g>\r\n            <text\r\n              className={cn(\r\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\r\n                classNames?.xAxis?.labels,\r\n              )}\r\n              y={graphHeight}\r\n              x={x(dataFormatted[dataFormatted.length - 1].date)}\r\n              style={{\r\n                textAnchor: 'end',\r\n                ...styles?.xAxis?.labels,\r\n              }}\r\n              dy='1em'\r\n            >\r\n              {format(dataFormatted[dataFormatted.length - 1].date, dateFormat)}\r\n            </text>\r\n            <text\r\n              y={graphHeight}\r\n              x={x(dataFormatted[0].date)}\r\n              style={{\r\n                textAnchor: 'start',\r\n                ...styles?.xAxis?.labels,\r\n              }}\r\n              className={cn(\r\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\r\n                classNames?.xAxis?.labels,\r\n              )}\r\n              dy='1em'\r\n            >\r\n              {format(dataFormatted[0].date, dateFormat)}\r\n            </text>\r\n          </g>\r\n          <g>\r\n            <path\r\n              d={mainGraphArea(dataFormatted) || ''}\r\n              style={{\r\n                fill: `url(#${areaId})`,\r\n                clipPath: 'url(#clip)',\r\n              }}\r\n            />\r\n            <path\r\n              d={lineShape(dataFormatted) || ''}\r\n              style={{\r\n                stroke: lineColor,\r\n                fill: 'none',\r\n                strokeWidth: 2,\r\n              }}\r\n            />\r\n            {mouseOverData ? (\r\n              <circle\r\n                y1={0}\r\n                cy={y(mouseOverData.y)}\r\n                cx={x(mouseOverData.date)}\r\n                r={5}\r\n                style={{ fill: lineColor }}\r\n              />\r\n            ) : null}\r\n          </g>\r\n          {customLayers.filter(d => d.position === 'after').map(d => d.layer)}\r\n          <rect\r\n            ref={MouseoverRectRef}\r\n            style={{\r\n              fill: 'none',\r\n              pointerEvents: 'all',\r\n            }}\r\n            width={graphWidth}\r\n            height={graphHeight}\r\n          />\r\n        </g>\r\n      </svg>\r\n      {mouseOverData && tooltip && eventX && eventY ? (\r\n        <Tooltip\r\n          data={mouseOverData}\r\n          body={tooltip}\r\n          xPos={eventX}\r\n          yPos={eventY}\r\n          backgroundStyle={styles?.tooltip}\r\n          className={classNames?.tooltip}\r\n        />\r\n      ) : null}\r\n    </>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport {\r\n  Languages,\r\n  LineChartDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  CurveTypes,\r\n  CustomLayerDataType,\r\n} from '@/Types';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { generateRandomString } from '@/Utils/generateRandomString';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: LineChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the lines */\r\n  lineColor?: string;\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Left margin of the graph */\r\n  leftMargin?: number;\r\n  /** Right margin of the graph */\r\n  rightMargin?: number;\r\n  /** Top margin of the graph */\r\n  topMargin?: number;\r\n  /** Bottom margin of the graph */\r\n  bottomMargin?: number;\r\n\r\n  // Values and Ticks\r\n  /** Maximum value for the chart */\r\n  maxValue?: number;\r\n  /** Minimum value for the chart */\r\n  minValue?: number;\r\n\r\n  // Graph Parameters\r\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\r\n  dateFormat?: string;\r\n  /** Toggles the visibility of the area below the line */\r\n  area?: boolean;\r\n  /** Curve type for the line */\r\n  curveType?: CurveTypes;\r\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\r\n  customLayers?: CustomLayerDataType[];\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Interactions and Callbacks\r\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  tooltip?: string | ((_d: any) => React.ReactNode);\r\n  /** Callback for mouse over event */\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onSeriesMouseOver?: (_d: any) => void;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function SparkLine(props: Props) {\r\n  const {\r\n    data,\r\n    graphTitle,\r\n    lineColor,\r\n    sources,\r\n    graphDescription,\r\n    height,\r\n    width,\r\n    footNote,\r\n    dateFormat = 'yyyy',\r\n    area = false,\r\n    padding,\r\n    backgroundColor,\r\n    leftMargin = 5,\r\n    rightMargin = 5,\r\n    topMargin = 10,\r\n    bottomMargin = 20,\r\n    tooltip,\r\n    relativeHeight,\r\n    onSeriesMouseOver,\r\n    graphID,\r\n    minValue,\r\n    maxValue,\r\n    graphDownload = false,\r\n    dataDownload = false,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    curveType = 'curve',\r\n    styles,\r\n    classNames,\r\n    customLayers = [],\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a line chart that show trends over time.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription || graphDownload || dataDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            <div\r\n              className='flex flex-col grow justify-center leading-0'\r\n              ref={graphDiv}\r\n              aria-label='Graph area'\r\n            >\r\n              {(width || svgWidth) && (height || svgHeight) ? (\r\n                <Graph\r\n                  data={data}\r\n                  lineColor={lineColor || Colors.primaryColors['blue-600']}\r\n                  width={width || svgWidth}\r\n                  height={Math.max(\r\n                    minHeight,\r\n                    height ||\r\n                      (relativeHeight\r\n                        ? minHeight\r\n                          ? (width || svgWidth) * relativeHeight > minHeight\r\n                            ? (width || svgWidth) * relativeHeight\r\n                            : minHeight\r\n                          : (width || svgWidth) * relativeHeight\r\n                        : svgHeight),\r\n                  )}\r\n                  dateFormat={dateFormat}\r\n                  areaId={area ? generateRandomString(8) : undefined}\r\n                  leftMargin={leftMargin}\r\n                  rightMargin={rightMargin}\r\n                  topMargin={topMargin}\r\n                  bottomMargin={bottomMargin}\r\n                  tooltip={tooltip}\r\n                  onSeriesMouseOver={onSeriesMouseOver}\r\n                  minValue={minValue}\r\n                  maxValue={maxValue}\r\n                  curveType={curveType}\r\n                  styles={styles}\r\n                  classNames={classNames}\r\n                  customLayers={customLayers}\r\n                />\r\n              ) : null}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Graph","props","data","width","height","lineColor","dateFormat","areaId","leftMargin","rightMargin","topMargin","bottomMargin","tooltip","onSeriesMouseOver","minValue","maxValue","curveType","styles","classNames","customLayers","curve","curveLinear","curveStep","curveStepAfter","curveStepBefore","curveMonotoneX","mouseOverData","setMouseOverData","useState","eventX","setEventX","eventY","setEventY","margin","MouseoverRectRef","useRef","dataFormatted","sortBy","d","parse","graphWidth","graphHeight","minYear","maxYear","minParam","maxParam","x","scaleTime","y","scaleLinear","checkIfNullOrUndefined","mainGraphArea","area","lineShape","line","useEffect","mousemove","event","selectedData","bisectCenter","pointer","mouseout","select","jsxs","Fragment","jsx","cn","format","Tooltip","SparkLine","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","relativeHeight","graphID","graphDownload","dataDownload","language","minHeight","theme","ariaLabel","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","graphParentDiv","resizeObserver","entries","GraphHeader","Colors","generateRandomString","GraphFooter"],"mappings":";;;;;;;;;;;;;;;;;;AAwDO,SAASA,GAAMC,GAAc;AAClC,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IACElB,GACEmB,IACJJ,MAAc,WACVK,KACAL,MAAc,SACZM,KACAN,MAAc,cACZO,KACAP,MAAc,eACZQ,KACAC,IAEN,CAACC,GAAeC,CAAgB,IAAIC,EAAc,MAAS,GAC3D,CAACC,GAAQC,CAAS,IAAIF,EAA6B,MAAS,GAC5D,CAACG,GAAQC,CAAS,IAAIJ,EAA6B,MAAS,GAC5DK,IAAS;AAAA,IACb,KAAKvB;AAAA,IACL,QAAQC;AAAA,IACR,MAAMH;AAAA,IACN,OAAOC;AAAA,EAAA,GAEHyB,IAAmBC,EAAO,IAAI,GAC9BC,IAAgBC;AAAA,IACpBnC,EAAK,IAAI,CAAAoC,OAAM;AAAA,MACb,GAAGA;AAAA,MACH,MAAMC,EAAM,GAAGD,EAAE,IAAI,IAAIhC,GAAY,oBAAI,KAAA,CAAM;AAAA,IAAA,EAC/C;AAAA,IACF;AAAA,EAAA,GAEIkC,IAAarC,IAAQ8B,EAAO,OAAOA,EAAO,OAC1CQ,IAAcrC,IAAS6B,EAAO,MAAMA,EAAO,QAC3CS,IAAUN,EAAc,CAAC,EAAE,MAC3BO,IAAUP,EAAcA,EAAc,SAAS,CAAC,EAAE,MAClDQ,IACJ,KAAK,IAAI,GAAGR,EAAc,IAAI,CAAAE,MAAKA,EAAE,CAAC,EAAE,OAAO,CAAAA,MAAwBA,KAAM,IAAI,CAAC,MAAM,QACpF,KAAK,IAAI,GAAGF,EAAc,IAAI,CAAAE,MAAKA,EAAE,CAAC,EAAE,OAAO,CAAAA,MAAwBA,KAAM,IAAI,CAAC,IAAI,IACpF,IACA,KAAK,IAAI,GAAGF,EAAc,IAAI,CAAAE,MAAKA,EAAE,CAAC,EAAE,OAAO,CAAAA,MAAwBA,KAAM,IAAI,CAAC,IACpF,GACAO,IACJ,KAAK,IAAI,GAAGT,EAAc,IAAI,CAAAE,MAAKA,EAAE,CAAC,EAAE,OAAO,CAAAA,MAAwBA,KAAM,IAAI,CAAC,MAAM,QACpF,KAAK,IAAI,GAAGF,EAAc,IAAI,OAAKE,EAAE,CAAC,EAAE,OAAO,OAAwBA,KAAM,IAAI,CAAC,IAClF,GAEAQ,IAAIC,KAAY,OAAO,CAACL,GAASC,CAAO,CAAC,EAAE,MAAM,CAAC,GAAGH,CAAU,CAAC,GAChEQ,IAAIC,GAAA,EACP,OAAO;AAAA,IACNC,EAAuBpC,CAAQ,IAAI8B,IAAY9B;AAAA,IAC/CoC,EAAuBnC,CAAQ,IAAK8B,IAAW,IAAIA,IAAW,IAAM9B;AAAA,EAAA,CACrE,EACA,MAAM,CAAC0B,GAAa,CAAC,CAAC,EACtB,KAAA,GAEGU,IAAgBC,KACnB,EAAE,OAAKN,EAAER,EAAE,IAAI,CAAC,EAChB,GAAG,CAAAA,MAAKU,EAAEV,EAAE,CAAC,CAAC,EACd,GAAGG,CAAW,EACd,MAAMrB,CAAK,GACRiC,IAAYC,KACf,EAAE,CAAAhB,MAAKQ,EAAER,EAAE,IAAI,CAAC,EAChB,EAAE,OAAKU,EAAEV,EAAE,CAAC,CAAC,EACb,MAAMlB,CAAK;AACd,SAAAmC,EAAU,MAAM;AAEd,UAAMC,IAAY,CAACC,MAAe;AAChC,YAAMC,IACJtB,EACEuB;AAAA,QACEvB,EAAc,IAAI,CAAAE,MAAKA,EAAE,IAAI;AAAA,QAC7BQ,EAAE,OAAOc,GAAQH,CAAK,EAAE,CAAC,CAAC;AAAA,QAC1B;AAAA,MAAA,CAEJ;AACF,MAAA9B,EAAiB+B,KAAgBtB,EAAcA,EAAc,SAAS,CAAC,CAAC,GACxEvB,IAAoB6C,KAAgBtB,EAAcA,EAAc,SAAS,CAAC,CAAC,GAC3EJ,EAAUyB,EAAM,OAAO,GACvB3B,EAAU2B,EAAM,OAAO;AAAA,IACzB,GACMI,IAAW,MAAM;AACrB,MAAAlC,EAAiB,MAAS,GAC1Bd,IAAoB,MAAS,GAC7BiB,EAAU,MAAS,GACnBE,EAAU,MAAS;AAAA,IACrB;AACA,IAAA8B,GAAO5B,EAAiB,OAAO,EAAE,GAAG,aAAasB,CAAS,EAAE,GAAG,YAAYK,CAAQ,GACnFhD,IAAoB,MAAS;AAAA,EAC/B,GAAG,CAACiC,GAAGV,GAAevB,CAAiB,CAAC,GAEtCkD,gBAAAA,EAAAA,KAAAC,YAAA,EACE,UAAA;AAAA,IAAAD,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,GAAG5D,CAAK;AAAA,QACf,QAAQ,GAAGC,CAAM;AAAA,QACjB,SAAS,OAAOD,CAAK,IAAIC,CAAM;AAAA,QAC/B,WAAU;AAAA,QAET,UAAA;AAAA,UAAAG,IACCwD,gBAAAA,EAAAA,KAAC,kBAAA,EAAe,IAAIxD,GAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAClD,UAAA;AAAA,YAAA0D,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAO,EAAE,WAAW5D,KAAa,aAAY,OAAM,QAAO,KAAA,CAAK;AAAA,YACrE4D,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAO,EAAE,WAAW5D,KAAa,aAAY,KAAI,QAAO,OAAA,CAAO;AAAA,UAAA,EAAA,CACvE,IACE;AAAA,UACJ0D,gBAAAA,EAAAA,KAAC,OAAE,WAAW,aAAa9B,EAAO,IAAI,IAAIA,EAAO,GAAG,KACjD,UAAA;AAAA,YAAAd,EAAa,OAAO,OAAKmB,EAAE,aAAa,QAAQ,EAAE,IAAI,CAAAA,MAAKA,EAAE,KAAK;AAAA,mCAClE,KAAA,EACC,UAAA;AAAA,cAAA2B,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC;AAAAA,oBACT;AAAA,oBACAhD,GAAY,OAAO;AAAA,kBAAA;AAAA,kBAErB,GAAGuB;AAAA,kBACH,GAAGK,EAAEV,EAAcA,EAAc,SAAS,CAAC,EAAE,IAAI;AAAA,kBACjD,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,GAAGnB,GAAQ,OAAO;AAAA,kBAAA;AAAA,kBAEpB,IAAG;AAAA,kBAEF,YAAOmB,EAAcA,EAAc,SAAS,CAAC,EAAE,MAAM9B,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAElE2D,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAGxB;AAAA,kBACH,GAAGK,EAAEV,EAAc,CAAC,EAAE,IAAI;AAAA,kBAC1B,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,GAAGnB,GAAQ,OAAO;AAAA,kBAAA;AAAA,kBAEpB,WAAWiD;AAAAA,oBACT;AAAA,oBACAhD,GAAY,OAAO;AAAA,kBAAA;AAAA,kBAErB,IAAG;AAAA,kBAEF,UAAAiD,EAAO/B,EAAc,CAAC,EAAE,MAAM9B,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3C,GACF;AAAA,mCACC,KAAA,EACC,UAAA;AAAA,cAAA2D,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAGd,EAAcf,CAAa,KAAK;AAAA,kBACnC,OAAO;AAAA,oBACL,MAAM,QAAQ7B,CAAM;AAAA,oBACpB,UAAU;AAAA,kBAAA;AAAA,gBACZ;AAAA,cAAA;AAAA,cAEF0D,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,GAAGZ,EAAUjB,CAAa,KAAK;AAAA,kBAC/B,OAAO;AAAA,oBACL,QAAQ/B;AAAA,oBACR,MAAM;AAAA,oBACN,aAAa;AAAA,kBAAA;AAAA,gBACf;AAAA,cAAA;AAAA,cAEDqB,IACCuC,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,IAAIjB,EAAEtB,EAAc,CAAC;AAAA,kBACrB,IAAIoB,EAAEpB,EAAc,IAAI;AAAA,kBACxB,GAAG;AAAA,kBACH,OAAO,EAAE,MAAMrB,EAAA;AAAA,gBAAU;AAAA,cAAA,IAEzB;AAAA,YAAA,GACN;AAAA,YACCc,EAAa,OAAO,CAAAmB,MAAKA,EAAE,aAAa,OAAO,EAAE,IAAI,CAAAA,MAAKA,EAAE,KAAK;AAAA,YAClE2B,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK/B;AAAA,gBACL,OAAO;AAAA,kBACL,MAAM;AAAA,kBACN,eAAe;AAAA,gBAAA;AAAA,gBAEjB,OAAOM;AAAA,gBACP,QAAQC;AAAA,cAAA;AAAA,YAAA;AAAA,UACV,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDf,KAAiBd,KAAWiB,KAAUE,IACrCkC,gBAAAA,EAAAA;AAAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAM1C;AAAA,QACN,MAAMd;AAAA,QACN,MAAMiB;AAAA,QACN,MAAME;AAAA,QACN,iBAAiBd,GAAQ;AAAA,QACzB,WAAWC,GAAY;AAAA,MAAA;AAAA,IAAA,IAEvB;AAAA,EAAA,GACN;AAEJ;AC9JO,SAASmD,GAAUpE,GAAc;AACtC,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,YAAAoE;AAAA,IACA,WAAAjE;AAAA,IACA,SAAAkE;AAAA,IACA,kBAAAC;AAAA,IACA,QAAApE;AAAA,IACA,OAAAD;AAAA,IACA,UAAAsE;AAAA,IACA,YAAAnE,IAAa;AAAA,IACb,MAAA8C,IAAO;AAAA,IACP,SAAAsB;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAnE,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,SAAAC;AAAA,IACA,gBAAAgE;AAAA,IACA,mBAAA/D;AAAA,IACA,SAAAgE;AAAA,IACA,UAAA/D;AAAA,IACA,UAAAC;AAAA,IACA,eAAA+D,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,WAAAnE,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC,IAAe,CAAA;AAAA,EAAC,IACdlB,GAEE,CAACmF,GAAUC,CAAW,IAAIzD,EAAS,CAAC,GACpC,CAAC0D,GAAWC,CAAY,IAAI3D,EAAS,CAAC,GAEtC4D,IAAWrD,EAAuB,IAAI,GACtCsD,IAAiBtD,EAAuB,IAAI;AAClD,SAAAoB,EAAU,MAAM;AACd,UAAMmC,IAAiB,IAAI,eAAe,CAAAC,MAAW;AACnD,MAAAN,EAAYlF,KAASwF,EAAQ,CAAC,EAAE,OAAO,eAAe,GAAG,GACzDJ,EAAanF,KAAUuF,EAAQ,CAAC,EAAE,OAAO,gBAAgB,GAAG;AAAA,IAC9D,CAAC;AACD,WAAIH,EAAS,YACXD,EAAaC,EAAS,QAAQ,gBAAgB,GAAG,GACjDH,EAAYG,EAAS,QAAQ,eAAe,GAAG,GAC1CrF,KAAOuF,EAAe,QAAQF,EAAS,OAAO,IAE9C,MAAME,EAAe,WAAA;AAAA,EAC9B,GAAG,CAACvF,GAAOC,CAAM,CAAC,GAGhB6D,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGiB,KAAS,OAAO,UAAU/E,IAAQ,iBAAiB,aAAa;AAAA,MAC9E,KAAK6E,MAAa,QAAQA,MAAa,OAAO,QAAQ;AAAA,MAEtD,UAAAf,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAAA,YACT,GACGS,IAEGA,MAAoB,KAClB,kDACA,KAHF,iBAIN,gDAAgDK,KAAY,IAAI;AAAA,YAChE9D,GAAY;AAAA,UAAA;AAAA,UAEd,OAAO;AAAA,YACL,GAAID,GAAQ,kBAAkB,CAAA;AAAA,YAC9B,GAAI0D,KAAmBA,MAAoB,KAAO,EAAE,iBAAAA,EAAA,IAAoB,CAAA;AAAA,UAAC;AAAA,UAE3E,IAAIE;AAAA,UACJ,KAAKY;AAAA,UACL,cACEN,KACA,GACEb,IAAa,mBAAmBA,CAAU,OAAO,EACnD,mDACEE,IAAmB,IAAIA,CAAgB,KAAK,EAC9C;AAAA,UAGF,UAAAP,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,SAASU,IAAkBD,KAAW,SAASA,KAAW,EAAA;AAAA,cAEnE,UAAAX,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,mDACZ,UAAA;AAAA,gBAAAO,KAAcE,KAAoBM,KAAiBC,IAClDd,gBAAAA,EAAAA;AAAAA,kBAAC2B;AAAA,kBAAA;AAAA,oBACC,QAAQ;AAAA,sBACN,OAAO3E,GAAQ;AAAA,sBACf,aAAaA,GAAQ;AAAA,oBAAA;AAAA,oBAEvB,YAAY;AAAA,sBACV,OAAOC,GAAY;AAAA,sBACnB,aAAaA,GAAY;AAAA,oBAAA;AAAA,oBAE3B,YAAAoD;AAAA,oBACA,kBAAAE;AAAA,oBACA,OAAArE;AAAA,oBACA,eAAe2E,IAAgBW,EAAe,UAAU;AAAA,oBACxD,cACEV,IACI7E,EAAK,IAAI,CAAAoC,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,EAAE,SAAS,IAC1DpC,EAAK,IAAI,CAAAoC,MAAKA,EAAE,IAAI,EAAE,OAAO,CAAAA,MAAKA,MAAM,MAAS,IACjDpC,EAAK,OAAO,CAAAoC,MAAKA,MAAM,MAAS,IAClC;AAAA,kBAAA;AAAA,gBAAA,IAGN;AAAA,gBACJ2B,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,KAAKuB;AAAA,oBACL,cAAW;AAAA,oBAET,WAAArF,KAASiF,OAAchF,KAAUkF,KACjCrB,gBAAAA,EAAAA;AAAAA,sBAACjE;AAAA,sBAAA;AAAA,wBACC,MAAAE;AAAA,wBACA,WAAWG,KAAawF,GAAO,cAAc,UAAU;AAAA,wBACvD,OAAO1F,KAASiF;AAAA,wBAChB,QAAQ,KAAK;AAAA,0BACXH;AAAA,0BACA7E,MACGwE,IACGK,KACG9E,KAASiF,KAAYR,IAAiBK,KACpC9E,KAASiF,KAAYR,IACtBK,KACD9E,KAASiF,KAAYR,IACxBU;AAAA,wBAAA;AAAA,wBAER,YAAAhF;AAAA,wBACA,QAAQ8C,IAAO0C,GAAqB,CAAC,IAAI;AAAA,wBACzC,YAAAtF;AAAA,wBACA,aAAAC;AAAA,wBACA,WAAAC;AAAA,wBACA,cAAAC;AAAA,wBACA,SAAAC;AAAA,wBACA,mBAAAC;AAAA,wBACA,UAAAC;AAAA,wBACA,UAAAC;AAAA,wBACA,WAAAC;AAAA,wBACA,QAAAC;AAAA,wBACA,YAAAC;AAAA,wBACA,cAAAC;AAAA,sBAAA;AAAA,oBAAA,IAEA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAELoD,KAAWE,IACVR,gBAAAA,EAAAA;AAAAA,kBAAC8B;AAAA,kBAAA;AAAA,oBACC,QAAQ,EAAE,UAAU9E,GAAQ,UAAU,QAAQA,GAAQ,OAAA;AAAA,oBACtD,YAAY;AAAA,sBACV,UAAUC,GAAY;AAAA,sBACtB,QAAQA,GAAY;AAAA,oBAAA;AAAA,oBAEtB,SAAAqD;AAAA,oBACA,UAAAE;AAAA,oBACA,OAAAtE;AAAA,kBAAA;AAAA,gBAAA,IAEA;AAAA,cAAA,EAAA,CACN;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/Spinner-C85UF28E.js

@@ -0,0 +1,30 @@
+import { a as r, m as a, b as s } from "./index-CHPV5EwG-BPSP-7Jg.js";
+const m = s("animate-spin border-[5px] rounded-full inline-block box-border", {
+  variants: {
+    variant: {
+      red: "border-accent-dark-red dark:border-accent-red border-b-primary-gray-300 dark:border-b-primary-gray-550",
+      blue: "border-primary-blue-600 dark:border-primary-blue-500 border-b-primary-gray-300 dark:border-b-primary-gray-550",
+      black: "border-primary-gray-600 dark:border-primary-gray-200 border-b-primary-gray-300 dark:border-b-primary-gray-550",
+      custom: "border-custom-color-600 border-b-primary-gray-300 dark:border-b-primary-gray-550"
+    },
+    size: {
+      sm: "border-[2px] h-6 w-6",
+      base: "border-[4px] h-8 w-8",
+      lg: "border-[6px] h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "base",
+    variant: "blue"
+  }
+});
+function n({ size: e, variant: d, show: b = !0, children: o, className: i }) {
+  return /* @__PURE__ */ r.jsxs("span", { className: a("flex-col items-center justify-center", b ? "flex" : "hidden"), children: [
+    /* @__PURE__ */ r.jsx("div", { className: a(m({ variant: d, size: e }), i) }),
+    o
+  ] });
+}
+export {
+  n as y
+};
+//# sourceMappingURL=Spinner-C85UF28E.js.map

package/dist/Spinner-C85UF28E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner-C85UF28E.js","sources":["../node_modules/@undp/design-system-react/dist/Spinner.js"],"sourcesContent":["import { j as r } from \"./jsx-runtime-OVHDjVDe.js\";\nimport { c as s } from \"./index-CHPV5EwG.js\";\nimport { c as a } from \"./utils-D_Pof5Gy.js\";\nconst m = s(\"animate-spin border-[5px] rounded-full inline-block box-border\", {\n  variants: {\n    variant: {\n      red: \"border-accent-dark-red dark:border-accent-red border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      blue: \"border-primary-blue-600 dark:border-primary-blue-500 border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      black: \"border-primary-gray-600 dark:border-primary-gray-200 border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      custom: \"border-custom-color-600 border-b-primary-gray-300 dark:border-b-primary-gray-550\"\n    },\n    size: {\n      sm: \"border-[2px] h-6 w-6\",\n      base: \"border-[4px] h-8 w-8\",\n      lg: \"border-[6px] h-12 w-12\"\n    }\n  },\n  defaultVariants: {\n    size: \"base\",\n    variant: \"blue\"\n  }\n});\nfunction y({ size: e, variant: d, show: o = !0, children: b, className: i }) {\n  return /* @__PURE__ */ r.jsxs(\"span\", { className: a(\"flex-col items-center justify-center\", o ? \"flex\" : \"hidden\"), children: [\n    /* @__PURE__ */ r.jsx(\"div\", { className: a(m({ variant: d, size: e }), i) }),\n    b\n  ] });\n}\nexport {\n  y as Spinner\n};\n//# sourceMappingURL=Spinner.js.map\n"],"names":["s","y","o","b","r","a"],"mappings":";AAGA,MAAM,IAAIA,EAAE,kEAAkE;AAAA,EAC5E,UAAU;AAAA,IACR,SAAS;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACd;AAAA,IACI,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,IACV;AAAA,EACA;AAAA,EACE,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EACb;AACA,CAAC;AACD,SAASC,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,MAAMC,IAAI,IAAI,UAAUC,GAAG,WAAW,EAAC,GAAI;AAC3E,SAAuBC,gBAAAA,EAAE,KAAK,QAAQ,EAAE,WAAWC,EAAE,wCAAwCH,IAAI,SAAS,QAAQ,GAAG,UAAU;AAAA,IAC7GE,gBAAAA,EAAE,IAAI,OAAO,EAAE,WAAWC,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAC,CAAE,GAAG,CAAC,EAAC,CAAE;AAAA,IAC5EF;AAAA,EACJ,GAAK;AACL;","x_google_ignoreList":[0]}

package/dist/Spinner-DA6Z5E4n.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),o=r.j("animate-spin border-[5px] rounded-full inline-block box-border",{variants:{variant:{red:"border-accent-dark-red dark:border-accent-red border-b-primary-gray-300 dark:border-b-primary-gray-550",blue:"border-primary-blue-600 dark:border-primary-blue-500 border-b-primary-gray-300 dark:border-b-primary-gray-550",black:"border-primary-gray-600 dark:border-primary-gray-200 border-b-primary-gray-300 dark:border-b-primary-gray-550",custom:"border-custom-color-600 border-b-primary-gray-300 dark:border-b-primary-gray-550"},size:{sm:"border-[2px] h-6 w-6",base:"border-[4px] h-8 w-8",lg:"border-[6px] h-12 w-12"}},defaultVariants:{size:"base",variant:"blue"}});function s({size:e,variant:a,show:d=!0,children:b,className:i}){return r.ae.jsxs("span",{className:r.mo("flex-col items-center justify-center",d?"flex":"hidden"),children:[r.ae.jsx("div",{className:r.mo(o({variant:a,size:e}),i)}),b]})}exports.y=s;
+//# sourceMappingURL=Spinner-DA6Z5E4n.cjs.map

package/dist/Spinner-DA6Z5E4n.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner-DA6Z5E4n.cjs","sources":["../node_modules/@undp/design-system-react/dist/Spinner.js"],"sourcesContent":["import { j as r } from \"./jsx-runtime-OVHDjVDe.js\";\nimport { c as s } from \"./index-CHPV5EwG.js\";\nimport { c as a } from \"./utils-D_Pof5Gy.js\";\nconst m = s(\"animate-spin border-[5px] rounded-full inline-block box-border\", {\n  variants: {\n    variant: {\n      red: \"border-accent-dark-red dark:border-accent-red border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      blue: \"border-primary-blue-600 dark:border-primary-blue-500 border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      black: \"border-primary-gray-600 dark:border-primary-gray-200 border-b-primary-gray-300 dark:border-b-primary-gray-550\",\n      custom: \"border-custom-color-600 border-b-primary-gray-300 dark:border-b-primary-gray-550\"\n    },\n    size: {\n      sm: \"border-[2px] h-6 w-6\",\n      base: \"border-[4px] h-8 w-8\",\n      lg: \"border-[6px] h-12 w-12\"\n    }\n  },\n  defaultVariants: {\n    size: \"base\",\n    variant: \"blue\"\n  }\n});\nfunction y({ size: e, variant: d, show: o = !0, children: b, className: i }) {\n  return /* @__PURE__ */ r.jsxs(\"span\", { className: a(\"flex-col items-center justify-center\", o ? \"flex\" : \"hidden\"), children: [\n    /* @__PURE__ */ r.jsx(\"div\", { className: a(m({ variant: d, size: e }), i) }),\n    b\n  ] });\n}\nexport {\n  y as Spinner\n};\n//# sourceMappingURL=Spinner.js.map\n"],"names":["m","s","y","d","o","r","a"],"mappings":"8DAGMA,EAAIC,EAAAA,EAAE,iEAAkE,CAC5E,SAAU,CACR,QAAS,CACP,IAAK,yGACL,KAAM,gHACN,MAAO,gHACP,OAAQ,kFACd,EACI,KAAM,CACJ,GAAI,uBACJ,KAAM,uBACN,GAAI,wBACV,CACA,EACE,gBAAiB,CACf,KAAM,OACN,QAAS,MACb,CACA,CAAC,EACD,SAASC,EAAE,CAAE,KAAM,EAAG,QAASC,EAAG,KAAMC,EAAI,GAAI,SAAU,EAAG,UAAW,CAAC,EAAI,CAC3E,OAAuBC,KAAE,KAAK,OAAQ,CAAE,UAAWC,EAAAA,GAAE,uCAAwCF,EAAI,OAAS,QAAQ,EAAG,SAAU,CAC7GC,EAAAA,GAAE,IAAI,MAAO,CAAE,UAAWC,EAAAA,GAAEN,EAAE,CAAE,QAASG,EAAG,KAAM,CAAC,CAAE,EAAG,CAAC,CAAC,CAAE,EAC5E,CACJ,EAAK,CACL","x_google_ignoreList":[0]}

package/dist/StatCardFromData.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),y=require("./index-C21TvELx.cjs"),E=require("./Typography-k-kOjICQ.cjs"),R=require("./GraphFooter.cjs"),k=require("./GraphHeader.cjs"),m=require("./numberFormattingFunction-02t-wJta.cjs");function T(S){const{year:d,data:t,graphTitle:x,suffix:i="",sources:h,prefix:s="",graphDescription:c,footNote:f,padding:j,backgroundColor:g=!1,graphID:$,aggregationMethod:o="count",language:u="en",countOnly:p,theme:A="light",ariaLabel:G,textBackground:b=!1,headingFontSize:F="4.375rem",centerAlign:v=!1,verticalAlign:N="center",layout:w="primary",styles:n,classNames:a,precision:l=2}=S;return r.jsxRuntimeExports.jsx("div",{className:`${A||"light"} flex w-full`,dir:u==="he"||u==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:r.mo(`${g?g===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}flex flex-col w-full h-inherit ${u||"en"}`,a?.graphContainer),style:{...n?.graphContainer||{},...g&&g!==!0?{backgroundColor:g}:{}},id:$,"aria-label":G||`${x?`The graph shows ${x}. `:""}This is a statistic card.${c?` ${c}`:""}`,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:g?j||"1rem":j||0},children:w!=="secondary"?r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-12 justify-between grow",children:[x||c?r.jsxRuntimeExports.jsx(k.GraphHeader,{styles:{title:n?.title,description:n?.description},classNames:{title:a?.title,description:a?.description},graphTitle:x,graphDescription:c}):null,r.jsxRuntimeExports.jsx("div",{className:`flex flex-col justify-between grow ${N==="top"?"justify-start":N==="bottom"?"justify-end":"justify-center"}`,children:r.jsxRuntimeExports.jsxs(E.h,{marginBottom:"base",className:`leading-none text-outline font-heading ${v?"text-center":u==="he"||u==="ar"?"text-right":"text-left"} ${b?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:F,letterSpacing:"0.05rem"},children:[t.filter(e=>typeof e.value=="string").length>0||o==="count"?p&&p?.length!==0?t.filter(e=>p.indexOf(e.value)!==-1).length:t.length:o==="sum"?m.numberFormattingFunction(y.sum(t.map(e=>e.value)),"NA",l,s,i):o==="average"?m.numberFormattingFunction(parseFloat((y.sum(t.map(e=>e.value))/t.length).toFixed(2)),"NA",l,s,i):o==="max"?m.numberFormattingFunction(Math.max(...t.map(e=>e.value).filter(e=>e!==void 0)),"NA",l,s,i):m.numberFormattingFunction(Math.min(...t.map(e=>e.value).filter(e=>e!==void 0)),"NA",l,s,i)," ",d?r.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",d,")"]}):null]})}),h||f?r.jsxRuntimeExports.jsx(R.GraphFooter,{styles:{footnote:n?.footnote,source:n?.source},classNames:{footnote:a?.footnote,source:a?.source},sources:h,footNote:f}):null]}):r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-center",children:[r.jsxRuntimeExports.jsxs(E.h,{marginBottom:w==="secondary"?"none":"base",className:`leading-none text-outline font-heading ${v?"text-center":u==="he"||u==="ar"?"text-right":"text-left"} ${b?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:F,letterSpacing:"0.05rem"},children:[t.filter(e=>typeof e.value=="string").length>0||o==="count"?p&&p?.length!==0?t.filter(e=>p.indexOf(e.value)!==-1).length:t.length:o==="sum"?m.numberFormattingFunction(y.sum(t.map(e=>e.value)),"NA",l,s,i):o==="average"?m.numberFormattingFunction(parseFloat((y.sum(t.map(e=>e.value))/t.length).toFixed(2)),"NA",l,s,i):o==="max"?m.numberFormattingFunction(Math.max(...t.map(e=>e.value).filter(e=>e!==void 0)),"NA",l,s,i):m.numberFormattingFunction(Math.min(...t.map(e=>e.value).filter(e=>e!==void 0)),"NA",l,s,i)," ",d?r.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",d,")"]}):null]}),x||c?r.jsxRuntimeExports.jsx(k.GraphHeader,{styles:{title:n?.title,description:n?.description},classNames:{title:a?.title,description:a?.description},graphTitle:x,graphDescription:c}):null,h||f?r.jsxRuntimeExports.jsx(R.GraphFooter,{styles:{footnote:n?.footnote,source:n?.source},classNames:{footnote:a?.footnote,source:a?.source},sources:h,footNote:f}):null]})})})})}exports.StatCardFromData=T;
+//# sourceMappingURL=StatCardFromData.cjs.map

package/dist/StatCardFromData.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCardFromData.cjs","sources":["../src/Components/Graphs/StatCard/StatCardFromData.tsx"],"sourcesContent":["import sum from 'lodash.sum';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { H3 } from '@undp/design-system-react/Typography';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport {\r\n  Languages,\r\n  SourcesDataType,\r\n  StatCardsFromDataSheetDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: StatCardsFromDataSheetDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Defines the layout for the cards */\r\n  layout?: 'primary' | 'secondary';\r\n  /** Font size of the main text */\r\n  headingFontSize?: string;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Toggle the fill color of the main text. */\r\n  textBackground?: boolean;\r\n  /** Toggle is the text is center aligned. */\r\n  centerAlign?: boolean;\r\n  /** Vertical alignment of the main text */\r\n  verticalAlign?: 'center' | 'top' | 'bottom';\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Values and Ticks\r\n  /** Prefix for values */\r\n  prefix?: string;\r\n  /** Suffix for values */\r\n  suffix?: string;\r\n  /** Sub text next to main text */\r\n  year?: number | string;\r\n\r\n  // Graph Parameters\r\n  /** Data points that need to counted for aggregation.  */\r\n  countOnly?: (string | number)[];\r\n  /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */\r\n  aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function StatCardFromData(props: Props) {\r\n  const {\r\n    year,\r\n    data,\r\n    graphTitle,\r\n    suffix = '',\r\n    sources,\r\n    prefix = '',\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    aggregationMethod = 'count',\r\n    language = 'en',\r\n    countOnly,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    textBackground = false,\r\n    headingFontSize = '4.375rem',\r\n    centerAlign = false,\r\n    verticalAlign = 'center',\r\n    layout = 'primary',\r\n    styles,\r\n    classNames,\r\n    precision = 2,\r\n  } = props;\r\n\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex w-full`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }flex flex-col w-full h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}This is a statistic card.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          {layout !== 'secondary' ? (\r\n            <div className='flex flex-col w-full gap-12 justify-between grow'>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              <div\r\n                className={`flex flex-col justify-between grow ${\r\n                  verticalAlign === 'top'\r\n                    ? 'justify-start'\r\n                    : verticalAlign === 'bottom'\r\n                      ? 'justify-end'\r\n                      : 'justify-center'\r\n                }`}\r\n              >\r\n                <H3\r\n                  marginBottom='base'\r\n                  className={`leading-none text-outline font-heading ${\r\n                    centerAlign\r\n                      ? 'text-center'\r\n                      : language === 'he' || language === 'ar'\r\n                        ? 'text-right'\r\n                        : 'text-left'\r\n                  } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                  style={{\r\n                    fontSize: headingFontSize,\r\n                    letterSpacing: '0.05rem',\r\n                  }}\r\n                >\r\n                  {data.filter(d => typeof d.value === 'string').length > 0 ||\r\n                  aggregationMethod === 'count'\r\n                    ? countOnly && countOnly?.length !== 0\r\n                      ? data.filter(d => countOnly.indexOf(d.value) !== -1).length\r\n                      : data.length\r\n                    : aggregationMethod === 'sum'\r\n                      ? numberFormattingFunction(\r\n                          sum(data.map(d => d.value)),\r\n                          'NA',\r\n                          precision,\r\n                          prefix,\r\n                          suffix,\r\n                        )\r\n                      : aggregationMethod === 'average'\r\n                        ? numberFormattingFunction(\r\n                            parseFloat((sum(data.map(d => d.value)) / data.length).toFixed(2)),\r\n                            'NA',\r\n                            precision,\r\n                            prefix,\r\n                            suffix,\r\n                          )\r\n                        : aggregationMethod === 'max'\r\n                          ? numberFormattingFunction(\r\n                              Math.max(\r\n                                ...data\r\n                                  .map(d => d.value as number | undefined)\r\n                                  .filter(d => d !== undefined),\r\n                              ),\r\n                              'NA',\r\n                              precision,\r\n                              prefix,\r\n                              suffix,\r\n                            )\r\n                          : numberFormattingFunction(\r\n                              Math.min(\r\n                                ...data\r\n                                  .map(d => d.value as number | undefined)\r\n                                  .filter(d => d !== undefined),\r\n                              ),\r\n                              'NA',\r\n                              precision,\r\n                              prefix,\r\n                              suffix,\r\n                            )}{' '}\r\n                  {year ? (\r\n                    <span\r\n                      className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\r\n                      style={{\r\n                        marginLeft: '-8px',\r\n                        lineHeight: '1.09',\r\n                        textShadow: 'none',\r\n                        WebkitTextStrokeWidth: 0,\r\n                      }}\r\n                    >\r\n                      ({year})\r\n                    </span>\r\n                  ) : null}\r\n                </H3>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          ) : (\r\n            <div className='flex flex-col w-full gap-4 grow justify-center'>\r\n              <H3\r\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\r\n                className={`leading-none text-outline font-heading ${\r\n                  centerAlign\r\n                    ? 'text-center'\r\n                    : language === 'he' || language === 'ar'\r\n                      ? 'text-right'\r\n                      : 'text-left'\r\n                } ${textBackground ? 'text-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                style={{\r\n                  fontSize: headingFontSize,\r\n                  letterSpacing: '0.05rem',\r\n                }}\r\n              >\r\n                {data.filter(d => typeof d.value === 'string').length > 0 ||\r\n                aggregationMethod === 'count'\r\n                  ? countOnly && countOnly?.length !== 0\r\n                    ? data.filter(d => countOnly.indexOf(d.value) !== -1).length\r\n                    : data.length\r\n                  : aggregationMethod === 'sum'\r\n                    ? numberFormattingFunction(\r\n                        sum(data.map(d => d.value)),\r\n                        'NA',\r\n                        precision,\r\n                        prefix,\r\n                        suffix,\r\n                      )\r\n                    : aggregationMethod === 'average'\r\n                      ? numberFormattingFunction(\r\n                          parseFloat((sum(data.map(d => d.value)) / data.length).toFixed(2)),\r\n                          'NA',\r\n                          precision,\r\n                          prefix,\r\n                          suffix,\r\n                        )\r\n                      : aggregationMethod === 'max'\r\n                        ? numberFormattingFunction(\r\n                            Math.max(\r\n                              ...data\r\n                                .map(d => d.value as number | undefined)\r\n                                .filter(d => d !== undefined),\r\n                            ),\r\n                            'NA',\r\n                            precision,\r\n                            prefix,\r\n                            suffix,\r\n                          )\r\n                        : numberFormattingFunction(\r\n                            Math.min(\r\n                              ...data\r\n                                .map(d => d.value as number | undefined)\r\n                                .filter(d => d !== undefined),\r\n                            ),\r\n                            'NA',\r\n                            precision,\r\n                            prefix,\r\n                            suffix,\r\n                          )}{' '}\r\n                {year ? (\r\n                  <span\r\n                    className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\r\n                    style={{\r\n                      marginLeft: '-8px',\r\n                      lineHeight: '1.09',\r\n                      textShadow: 'none',\r\n                      WebkitTextStrokeWidth: 0,\r\n                    }}\r\n                  >\r\n                    ({year})\r\n                  </span>\r\n                ) : null}\r\n              </H3>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["StatCardFromData","props","year","data","graphTitle","suffix","sources","prefix","graphDescription","footNote","padding","backgroundColor","graphID","aggregationMethod","language","countOnly","theme","ariaLabel","textBackground","headingFontSize","centerAlign","verticalAlign","layout","styles","classNames","precision","jsx","cn","jsxs","GraphHeader","H3","d","numberFormattingFunction","sum","GraphFooter"],"mappings":"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"}