@undp/data-viz 1.3.0 → 1.4.0

package/dist/AreaChart.js

@@ -1,2 +1,531 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),h=require("react"),se=require("./Typography-CDR-DAHH.cjs"),u=require("./parse-hMnG_lRV.cjs"),he=require("./index-BzeLQvXk.cjs"),me=require("./index-C21TvELx.cjs"),fe=require("./numberFormattingFunction.js"),ye=require("./Tooltip-BM18N_3l.cjs"),ee=require("./checkIfNullOrUndefined.js"),pe=require("./customArea-B47Ew5cT.cjs"),je=require("./AxisTitle-BY8MI9jC.cjs"),ve=require("./Axis-BlyBRMNw.cjs"),we=require("./XTicksAndGridLines-DuK35ROS.cjs"),Re=require("./ReferenceLine-Bsb5jeE4.cjs"),Ee=require("./YTicksAndGridLines-CtLvzExe.cjs"),Ae=require("./index-BYroABPm.cjs"),G=require("./use-in-view-Dl1CsAIo.cjs"),be=require("./time-Byw_jYQ7.cjs"),Ce=require("./linear-BVckp9RD.cjs"),Oe=require("./area-D3Qx7k7K.cjs"),qe=require("./line-DHV4JwCR.cjs"),te=require("./step-BZ3C8QFW.cjs"),$e=require("./select-Bnfk0lJx.cjs"),Ne=require("./index-a2C2Bqn2.cjs"),Se=require("./init-DU0ybBc_.cjs"),ke=require("./pointer-Dkq5NV1q.cjs"),Te=require("./GraphFooter.js"),Le=require("./GraphHeader.js"),De=require("./ColorLegend.js"),Me=require("./Colors.js"),Fe=require("./EmptyState-BQguKAp5.cjs");function He(ie){const{data:w,width:R,height:q,colors:I,dateFormat:o,noOfXTicks:$,rightMargin:l,leftMargin:f,topMargin:re,bottomMargin:oe,yAxisTitle:P,tooltip:D,onSeriesMouseOver:m,highlightAreaSettings:ne,refValues:V,minValue:Y,maxValue:W,rtl:X,annotations:ae,customHighlightAreaSettings:le,noOfYTicks:N,prefix:M,suffix:F,curveType:S,styles:p,classNames:g,precision:k,customLayers:H,animate:y}=ie,E=h.useRef(null),j=G.useInView(E,{once:y.once,amount:y.amount}),ce=S==="linear"?qe.curveLinear:S==="step"?te.curveStep:S==="stepAfter"?te.stepAfter:S==="stepBefore"?te.stepBefore:te.monotoneX,[C,B]=h.useState(void 0),[U,_]=h.useState(void 0),[z,K]=h.useState(void 0),d={top:re,bottom:oe,left:P?f+30:f,right:l},J=h.useRef(null),i=he.sortBy(w.map(e=>({...e,date:u.parse(`${e.date}`,o,new Date)})),"date"),A=ne.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:u.parse(`${e.coordinates[0]}`,o,new Date),e.coordinates[1]===null?null:u.parse(`${e.coordinates[1]}`,o,new Date)]})),xe=le.map(e=>({...e,coordinates:e.coordinates.map((n,a)=>a%2===0?u.parse(`${n}`,o,new Date):n)})),ue=i[0].y.map((e,n)=>i.map(a=>({date:a.date,y0:n===0?0:me.sum(a.y.filter((L,O)=>O<n)),y1:me.sum(a.y.filter((L,O)=>O<=n))}))),v=R-d.left-d.right,c=q-d.top-d.bottom,Q=i[0].date,Z=i[i.length-1].date,x=ee.checkIfNullOrUndefined(Y)?0:Y,b=ee.checkIfNullOrUndefined(W)?Math.max(...w.map(e=>me.sum(e.y)||0)):W,r=be.time().domain([Q,Z]).range([0,v]),s=Ce.linear().domain([x,b]).range([c,0]).nice(),T=Oe.area().x(e=>r(e.date)).y0(e=>s(e.y0)).y1(e=>s(e.y1)).curve(ce),ge=s.ticks(N),de=r.ticks($);return h.useEffect(()=>{const e=a=>{const L=i[Se.bisectCenter(i.map(O=>O.date),r.invert(ke.pointer(a)[0]),1)];B(L||i[i.length-1]),m?.(L||i[i.length-1]),K(a.clientY),_(a.clientX)},n=()=>{B(void 0),_(void 0),K(void 0),m?.(void 0)};$e.select(J.current).on("mousemove",e).on("mouseout",n),m?.(void 0)},[r,i,m]),t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(G.motion.svg,{width:`${R}px`,height:`${q}px`,viewBox:`0 0 ${R} ${q}`,direction:"ltr",ref:E,children:t.jsxRuntimeExports.jsx(Ne.AnimatePresence,{children:t.jsxRuntimeExports.jsxs(G.motion.g,{transform:`translate(${d.left},${d.top})`,children:[t.jsxRuntimeExports.jsx(Ae.HighlightArea,{areaSettings:A,width:v,height:c,scale:r,animate:y,isInView:j}),t.jsxRuntimeExports.jsx(pe.CustomArea,{animate:y,areaSettings:xe,scaleX:r,scaleY:s,isInView:j}),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(Ee.YTicksAndGridLines,{values:ge.filter(e=>e!==0),y:ge.filter(e=>e!==0).map(e=>s(e)),x1:0-f,x2:v+d.right,styles:{gridLines:p?.yAxis?.gridLines,labels:p?.yAxis?.labels},classNames:{gridLines:g?.yAxis?.gridLines,labels:g?.yAxis?.labels},suffix:F,prefix:M,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:k}),t.jsxRuntimeExports.jsx(ve.Axis,{y1:s(x<0?0:x),y2:s(x<0?0:x),x1:0-f,x2:v+d.right,label:fe.numberFormattingFunction(x<0?0:x,"NA",k,M,F),labelPos:{x:0-f,dx:0,dy:b<0?"1em":-5,y:s(x<0?0:x)},classNames:{axis:g?.xAxis?.axis,label:g?.yAxis?.labels},styles:{axis:p?.xAxis?.axis,label:p?.yAxis?.labels}}),t.jsxRuntimeExports.jsx(je.AxisTitle,{x:0-f-15,y:c/2,style:p?.yAxis?.title,className:g?.yAxis?.title,text:P,rotate90:!0})]}),t.jsxRuntimeExports.jsx(we.XTicksAndGridLines,{values:de.map(e=>u.format(e,o)),x:de.map(e=>r(e)),y1:0,y2:c,styles:{gridLines:p?.xAxis?.gridLines,labels:p?.xAxis?.labels},classNames:{gridLines:se.cnExports.cn("opacity-0",g?.xAxis?.gridLines),labels:se.cnExports.cn("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[8px] sm:text-[9px] md:text-[10px] lg:text-xs",g?.xAxis?.labels)},suffix:F,prefix:M,labelType:"primary",showGridLines:!0,precision:k}),H.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs(G.motion.g,{children:[ue.map((e,n)=>t.jsxRuntimeExports.jsx(G.motion.path,{d:T(e),exit:{opacity:0,transition:{duration:y.duration}},variants:{initial:{d:T(e.map(a=>({...a,y0:0,y1:0}))),opacity:0},whileInView:{d:T(e),opacity:1,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial",style:{fill:I[n],opacity:.8}},n)),C?t.jsxRuntimeExports.jsx("line",{y1:0,y2:c,x1:r(C.date),x2:r(C.date),className:se.cnExports.cn("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",g?.mouseOverLine),style:p?.mouseOverLine}):null]}),V?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:V.map((e,n)=>t.jsxRuntimeExports.jsx(Re.RefLineY,{text:e.text,color:e.color,y:s(e.value),x1:0-f,x2:v+d.right,classNames:e.classNames,styles:e.styles,animate:y,isInView:j},n))}):null,t.jsxRuntimeExports.jsx("g",{children:ae.map((e,n)=>{const a=pe.getLineEndPoint({x:e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?s(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date)):0,y:e.yCoordinate?s(e.yCoordinate):0},ee.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),L=e.showConnector?{y1:a.y,x1:a.x,y2:e.yCoordinate?s(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date))+(e.xOffset||0):0+(e.xOffset||0),cx:e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date)):0,cy:e.yCoordinate?s(e.yCoordinate):0,circleRadius:ee.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,O={y:e.yCoordinate?s(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:X?0:e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:X?e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date))+(e.xOffset||0):0+(e.xOffset||0):v-(e.xCoordinate?r(u.parse(`${e.xCoordinate}`,o,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return t.jsxRuntimeExports.jsx(pe.Annotation,{color:e.color,connectorsSettings:L,labelSettings:O,text:e.text,classNames:e.classNames,styles:e.styles,animate:y,isInView:j},n)})}),H.filter(e=>e.position==="after").map(e=>e.layer),t.jsxRuntimeExports.jsx("rect",{ref:J,style:{fill:"none",pointerEvents:"all"},width:v,height:c})]})})}),C&&D&&U&&z?t.jsxRuntimeExports.jsx(ye.Tooltip,{data:C,body:D,xPos:U,yPos:z,backgroundStyle:p?.tooltip,className:g?.tooltip}):null]})}function Ge(ie){const{data:w,graphTitle:R,colors:q=Me.Colors.light.categoricalColors.colors,sources:I,graphDescription:o,height:$,width:l,footNote:f,noOfXTicks:re=10,dateFormat:oe="yyyy",colorDomain:P,padding:D,backgroundColor:m=!1,colorLegendTitle:ne,leftMargin:V=50,rightMargin:Y=20,topMargin:W=20,bottomMargin:X=25,highlightAreaSettings:ae=[],tooltip:le,relativeHeight:N,onSeriesMouseOver:M,refValues:F=[],graphID:S,minValue:p,maxValue:g,graphDownload:k=!1,dataDownload:H=!1,showColorScale:y=!0,language:E="en",minHeight:j=0,annotations:ce=[],customHighlightAreaSettings:C=[],theme:B="light",ariaLabel:U,yAxisTitle:_,noOfYTicks:z=5,prefix:K="",suffix:d="",curveType:J="curve",styles:i,classNames:A,precision:xe=2,customLayers:ue=[],animate:v=!1}=ie,[c,Q]=h.useState(0),[Z,x]=h.useState(0),b=h.useRef(null),r=h.useRef(null);return h.useEffect(()=>{const s=new ResizeObserver(T=>{Q(l||T[0].target.clientWidth||620),x($||T[0].target.clientHeight||480)});return b.current&&(x(b.current.clientHeight||480),Q(b.current.clientWidth||620),l||s.observe(b.current)),()=>s.disconnect()},[l,$]),t.jsxRuntimeExports.jsx("div",{className:`${B||"light"} flex  ${l?"w-fit grow-0":"w-full grow"}`,dir:E==="he"||E==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:se.cnExports.cn(`${m?m===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${E||"en"}`,A?.graphContainer),style:{...i?.graphContainer||{},...m&&m!==!0?{backgroundColor:m}:{}},id:S,ref:r,"aria-label":U||`${R?`The graph shows ${R}. `:""}This is a stacked area chart that shows trends over time.${o?` ${o}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:m?D||"1rem":D||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[R||o||k||H?t.jsxRuntimeExports.jsx(Le.GraphHeader,{styles:{title:i?.title,description:i?.description},classNames:{title:A?.title,description:A?.description},graphTitle:R,graphDescription:o,width:l,graphDownload:k?r.current:void 0,dataDownload:H?w.map(s=>s.data).filter(s=>s!==void 0).length>0?w.map(s=>s.data).filter(s=>s!==void 0):w.filter(s=>s!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:w.length===0?t.jsxRuntimeExports.jsx(Fe.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[y!==!1?t.jsxRuntimeExports.jsx(De.ColorLegend,{colorDomain:P,colors:q,colorLegendTitle:ne,showNAColor:!1}):null,t.jsxRuntimeExports.jsx("div",{className:"w-full grow leading-0",ref:b,"aria-label":"Graph area",children:(l||c)&&($||Z)?t.jsxRuntimeExports.jsx(He,{data:w,colors:q,width:l||c,height:Math.max(j,$||(N?j?(l||c)*N>j?(l||c)*N:j:(l||c)*N:Z)),dateFormat:oe,noOfXTicks:re,leftMargin:V,rightMargin:Y,topMargin:W,bottomMargin:X,tooltip:le,onSeriesMouseOver:M,highlightAreaSettings:ae,refValues:F,minValue:p,maxValue:g,rtl:E==="he"||E==="ar",annotations:ce,customHighlightAreaSettings:C,yAxisTitle:_,noOfYTicks:z,prefix:K,suffix:d,curveType:J,styles:i,classNames:A,precision:xe,customLayers:ue,animate:v===!0?{duration:.5,once:!0,amount:.5}:v||{duration:0,once:!0,amount:0}}):null})]})}),I||f?t.jsxRuntimeExports.jsx(Te.GraphFooter,{styles:{footnote:i?.footnote,source:i?.source},classNames:{footnote:A?.footnote,source:A?.source},sources:I,footNote:f,width:l}):null]})})})})}exports.AreaChart=Ge;
+import { j as t, m as te } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as ae, useState as P, useEffect as he } from "react";
+import { p as h, f as ue } from "./parse-DlCRUFh_.js";
+import { s as de } from "./index-DxagiOHo.js";
+import { s as fe } from "./index-D7ltPi18.js";
+import { n as ye } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as ve } from "./Tooltip-DyM5snqx.js";
+import { c as Z } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { C as we, g as Ae, A as Ce } from "./customArea-CaxScFmW.js";
+import { A as be } from "./AxisTitle-BmHLMRJZ.js";
+import { A as je } from "./Axis-Ddg-seDi.js";
+import { X as Oe } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { R as $e } from "./ReferenceLine-C1GpoG9d.js";
+import { Y as Ne } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { H as De } from "./index-n_RI8T0n.js";
+import { u as Le } from "./use-in-view-BAHrBy6b.js";
+import { t as ke } from "./time-BzJP5SPC.js";
+import { a as Se } from "./linear-DUdu7l2G.js";
+import { a as Te } from "./area-BE2wo7fv.js";
+import { c as Me } from "./line-CPfhohvF.js";
+import { c as He, s as Re, a as Fe, m as Ye } from "./step-BrDul-H4.js";
+import { s as Pe } from "./select-DKy99ogv.js";
+import { m as ee } from "./proxy-DJxJg1kD.js";
+import { A as Ve } from "./index-BxAUvrua.js";
+import { a as We } from "./init-BhZylTFx.js";
+import { p as Xe } from "./pointer-CWRWOsrb.js";
+import { GraphFooter as Ee } from "./GraphFooter.js";
+import { GraphHeader as Ge } from "./GraphHeader.js";
+import { ColorLegend as Ie } from "./ColorLegend.js";
+import { Colors as Be } from "./Colors.js";
+import { E as _e } from "./EmptyState-DdTp-Mdn.js";
+function ze(oe) {
+  const {
+    data: w,
+    width: A,
+    height: N,
+    colors: V,
+    dateFormat: i,
+    noOfXTicks: D,
+    rightMargin: l,
+    leftMargin: u,
+    topMargin: se,
+    bottomMargin: ie,
+    yAxisTitle: W,
+    tooltip: H,
+    onSeriesMouseOver: x,
+    highlightAreaSettings: re,
+    refValues: X,
+    minValue: E,
+    maxValue: G,
+    rtl: I,
+    annotations: ne,
+    customHighlightAreaSettings: le,
+    noOfYTicks: L,
+    prefix: R,
+    suffix: F,
+    curveType: k,
+    styles: f,
+    classNames: g,
+    precision: S,
+    customLayers: Y,
+    animate: d
+  } = oe, C = ae(null), y = Le(C, {
+    once: d.once,
+    amount: d.amount
+  }), ce = k === "linear" ? Me : k === "step" ? He : k === "stepAfter" ? Re : k === "stepBefore" ? Fe : Ye, [O, B] = P(void 0), [_, z] = P(void 0), [U, q] = P(void 0), p = {
+    top: se,
+    bottom: ie,
+    left: W ? u + 30 : u,
+    right: l
+  }, J = ae(null), o = de(
+    w.map((e) => ({
+      ...e,
+      date: h(`${e.date}`, i, /* @__PURE__ */ new Date())
+    })),
+    "date"
+  ), b = re.map((e) => ({
+    ...e,
+    coordinates: [
+      e.coordinates[0] === null ? null : h(`${e.coordinates[0]}`, i, /* @__PURE__ */ new Date()),
+      e.coordinates[1] === null ? null : h(`${e.coordinates[1]}`, i, /* @__PURE__ */ new Date())
+    ]
+  })), me = le.map((e) => ({
+    ...e,
+    coordinates: e.coordinates.map(
+      (r, n) => n % 2 === 0 ? h(`${r}`, i, /* @__PURE__ */ new Date()) : r
+    )
+  })), xe = o[0].y.map((e, r) => o.map((n) => ({
+    date: n.date,
+    y0: r === 0 ? 0 : fe(n.y.filter((M, $) => $ < r)),
+    y1: fe(n.y.filter((M, $) => $ <= r))
+  }))), v = A - p.left - p.right, c = N - p.top - p.bottom, K = o[0].date, Q = o[o.length - 1].date, m = Z(E) ? 0 : E, j = Z(G) ? Math.max(...w.map((e) => fe(e.y) || 0)) : G, s = ke().domain([K, Q]).range([0, v]), a = Se().domain([m, j]).range([c, 0]).nice(), T = Te().x((e) => s(e.date)).y0((e) => a(e.y0)).y1((e) => a(e.y1)).curve(ce), ge = a.ticks(L), pe = s.ticks(D);
+  return he(() => {
+    const e = (n) => {
+      const M = o[We(
+        o.map(($) => $.date),
+        s.invert(Xe(n)[0]),
+        1
+      )];
+      B(M || o[o.length - 1]), x?.(M || o[o.length - 1]), q(n.clientY), z(n.clientX);
+    }, r = () => {
+      B(void 0), z(void 0), q(void 0), x?.(void 0);
+    };
+    Pe(J.current).on("mousemove", e).on("mouseout", r), x?.(void 0);
+  }, [s, o, x]), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      ee.svg,
+      {
+        width: `${A}px`,
+        height: `${N}px`,
+        viewBox: `0 0 ${A} ${N}`,
+        direction: "ltr",
+        ref: C,
+        children: /* @__PURE__ */ t.jsx(Ve, { children: /* @__PURE__ */ t.jsxs(ee.g, { transform: `translate(${p.left},${p.top})`, children: [
+          /* @__PURE__ */ t.jsx(
+            De,
+            {
+              areaSettings: b,
+              width: v,
+              height: c,
+              scale: s,
+              animate: d,
+              isInView: y
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            we,
+            {
+              animate: d,
+              areaSettings: me,
+              scaleX: s,
+              scaleY: a,
+              isInView: y
+            }
+          ),
+          /* @__PURE__ */ t.jsxs("g", { children: [
+            /* @__PURE__ */ t.jsx(
+              Ne,
+              {
+                values: ge.filter((e) => e !== 0),
+                y: ge.filter((e) => e !== 0).map((e) => a(e)),
+                x1: 0 - u,
+                x2: v + p.right,
+                styles: {
+                  gridLines: f?.yAxis?.gridLines,
+                  labels: f?.yAxis?.labels
+                },
+                classNames: {
+                  gridLines: g?.yAxis?.gridLines,
+                  labels: g?.yAxis?.labels
+                },
+                suffix: F,
+                prefix: R,
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: S
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              je,
+              {
+                y1: a(m < 0 ? 0 : m),
+                y2: a(m < 0 ? 0 : m),
+                x1: 0 - u,
+                x2: v + p.right,
+                label: ye(
+                  m < 0 ? 0 : m,
+                  "NA",
+                  S,
+                  R,
+                  F
+                ),
+                labelPos: {
+                  x: 0 - u,
+                  dx: 0,
+                  dy: j < 0 ? "1em" : -5,
+                  y: a(m < 0 ? 0 : m)
+                },
+                classNames: {
+                  axis: g?.xAxis?.axis,
+                  label: g?.yAxis?.labels
+                },
+                styles: {
+                  axis: f?.xAxis?.axis,
+                  label: f?.yAxis?.labels
+                }
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              be,
+              {
+                x: 0 - u - 15,
+                y: c / 2,
+                style: f?.yAxis?.title,
+                className: g?.yAxis?.title,
+                text: W,
+                rotate90: !0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            Oe,
+            {
+              values: pe.map((e) => ue(e, i)),
+              x: pe.map((e) => s(e)),
+              y1: 0,
+              y2: c,
+              styles: {
+                gridLines: f?.xAxis?.gridLines,
+                labels: f?.xAxis?.labels
+              },
+              classNames: {
+                gridLines: te("opacity-0", g?.xAxis?.gridLines),
+                labels: te(
+                  "fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[8px] sm:text-[9px] md:text-[10px] lg:text-xs",
+                  g?.xAxis?.labels
+                )
+              },
+              suffix: F,
+              prefix: R,
+              labelType: "primary",
+              showGridLines: !0,
+              precision: S
+            }
+          ),
+          Y.filter((e) => e.position === "before").map((e) => e.layer),
+          /* @__PURE__ */ t.jsxs(ee.g, { children: [
+            xe.map((e, r) => /* @__PURE__ */ t.jsx(
+              ee.path,
+              {
+                d: T(e),
+                exit: {
+                  opacity: 0,
+                  transition: { duration: d.duration }
+                },
+                variants: {
+                  initial: {
+                    d: T(
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      e.map((n) => ({ ...n, y0: 0, y1: 0 }))
+                    ),
+                    opacity: 0
+                  },
+                  whileInView: {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    d: T(e),
+                    opacity: 1,
+                    transition: { duration: d.duration }
+                  }
+                },
+                initial: "initial",
+                animate: y ? "whileInView" : "initial",
+                style: {
+                  fill: V[r],
+                  opacity: 0.8
+                }
+              },
+              r
+            )),
+            O ? /* @__PURE__ */ t.jsx(
+              "line",
+              {
+                y1: 0,
+                y2: c,
+                x1: s(O.date),
+                x2: s(O.date),
+                className: te(
+                  "undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",
+                  g?.mouseOverLine
+                ),
+                style: f?.mouseOverLine
+              }
+            ) : null
+          ] }),
+          X ? /* @__PURE__ */ t.jsx(t.Fragment, { children: X.map((e, r) => /* @__PURE__ */ t.jsx(
+            $e,
+            {
+              text: e.text,
+              color: e.color,
+              y: a(e.value),
+              x1: 0 - u,
+              x2: v + p.right,
+              classNames: e.classNames,
+              styles: e.styles,
+              animate: d,
+              isInView: y
+            },
+            r
+          )) }) : null,
+          /* @__PURE__ */ t.jsx("g", { children: ne.map((e, r) => {
+            const n = Ae(
+              {
+                x: e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+                y: e.yCoordinate ? a(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8
+              },
+              {
+                x: e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) : 0,
+                y: e.yCoordinate ? a(e.yCoordinate) : 0
+              },
+              Z(e.connectorRadius) ? 3.5 : e.connectorRadius
+            ), M = e.showConnector ? {
+              y1: n.y,
+              x1: n.x,
+              y2: e.yCoordinate ? a(e.yCoordinate) + (e.yOffset || 0) : 0 + (e.yOffset || 0),
+              x2: e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+              cx: e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) : 0,
+              cy: e.yCoordinate ? a(e.yCoordinate) : 0,
+              circleRadius: Z(e.connectorRadius) ? 3.5 : e.connectorRadius,
+              strokeWidth: e.showConnector === !0 ? 2 : Math.min(e.showConnector || 0, 1)
+            } : void 0, $ = {
+              y: e.yCoordinate ? a(e.yCoordinate) + (e.yOffset || 0) - 8 : 0 + (e.yOffset || 0) - 8,
+              x: I ? 0 : e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0),
+              width: I ? e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0) : v - (e.xCoordinate ? s(h(`${e.xCoordinate}`, i, /* @__PURE__ */ new Date())) + (e.xOffset || 0) : 0 + (e.xOffset || 0)),
+              maxWidth: e.maxWidth,
+              fontWeight: e.fontWeight,
+              align: e.align
+            };
+            return /* @__PURE__ */ t.jsx(
+              Ce,
+              {
+                color: e.color,
+                connectorsSettings: M,
+                labelSettings: $,
+                text: e.text,
+                classNames: e.classNames,
+                styles: e.styles,
+                animate: d,
+                isInView: y
+              },
+              r
+            );
+          }) }),
+          Y.filter((e) => e.position === "after").map((e) => e.layer),
+          /* @__PURE__ */ t.jsx(
+            "rect",
+            {
+              ref: J,
+              style: {
+                fill: "none",
+                pointerEvents: "all"
+              },
+              width: v,
+              height: c
+            }
+          )
+        ] }) })
+      }
+    ),
+    O && H && _ && U ? /* @__PURE__ */ t.jsx(
+      ve,
+      {
+        data: O,
+        body: H,
+        xPos: _,
+        yPos: U,
+        backgroundStyle: f?.tooltip,
+        className: g?.tooltip
+      }
+    ) : null
+  ] });
+}
+function Ot(oe) {
+  const {
+    data: w,
+    graphTitle: A,
+    colors: N = Be.light.categoricalColors.colors,
+    sources: V,
+    graphDescription: i,
+    height: D,
+    width: l,
+    footNote: u,
+    noOfXTicks: se = 10,
+    dateFormat: ie = "yyyy",
+    colorDomain: W,
+    padding: H,
+    backgroundColor: x = !1,
+    colorLegendTitle: re,
+    leftMargin: X = 50,
+    rightMargin: E = 20,
+    topMargin: G = 20,
+    bottomMargin: I = 25,
+    highlightAreaSettings: ne = [],
+    tooltip: le,
+    relativeHeight: L,
+    onSeriesMouseOver: R,
+    refValues: F = [],
+    graphID: k,
+    minValue: f,
+    maxValue: g,
+    graphDownload: S = !1,
+    dataDownload: Y = !1,
+    showColorScale: d = !0,
+    language: C = "en",
+    minHeight: y = 0,
+    annotations: ce = [],
+    customHighlightAreaSettings: O = [],
+    theme: B = "light",
+    ariaLabel: _,
+    yAxisTitle: z,
+    noOfYTicks: U = 5,
+    prefix: q = "",
+    suffix: p = "",
+    curveType: J = "curve",
+    styles: o,
+    classNames: b,
+    precision: me = 2,
+    customLayers: xe = [],
+    animate: v = !1
+  } = oe, [c, K] = P(0), [Q, m] = P(0), j = ae(null), s = ae(null);
+  return he(() => {
+    const a = new ResizeObserver((T) => {
+      K(l || T[0].target.clientWidth || 620), m(D || T[0].target.clientHeight || 480);
+    });
+    return j.current && (m(j.current.clientHeight || 480), K(j.current.clientWidth || 620), l || a.observe(j.current)), () => a.disconnect();
+  }, [l, D]), /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `${B || "light"} flex  ${l ? "w-fit grow-0" : "w-full grow"}`,
+      dir: C === "he" || C === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: te(
+            `${x ? x === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${C || "en"}`,
+            b?.graphContainer
+          ),
+          style: {
+            ...o?.graphContainer || {},
+            ...x && x !== !0 ? { backgroundColor: x } : {}
+          },
+          id: k,
+          ref: s,
+          "aria-label": _ || `${A ? `The graph shows ${A}. ` : ""}This is a stacked area chart that shows trends over time.${i ? ` ${i}` : ""}`,
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: x ? H || "1rem" : H || 0 },
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                A || i || S || Y ? /* @__PURE__ */ t.jsx(
+                  Ge,
+                  {
+                    styles: {
+                      title: o?.title,
+                      description: o?.description
+                    },
+                    classNames: {
+                      title: b?.title,
+                      description: b?.description
+                    },
+                    graphTitle: A,
+                    graphDescription: i,
+                    width: l,
+                    graphDownload: S ? s.current : void 0,
+                    dataDownload: Y ? w.map((a) => a.data).filter((a) => a !== void 0).length > 0 ? w.map((a) => a.data).filter((a) => a !== void 0) : w.filter((a) => a !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: w.length === 0 ? /* @__PURE__ */ t.jsx(_e, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                  d !== !1 ? /* @__PURE__ */ t.jsx(
+                    Ie,
+                    {
+                      colorDomain: W,
+                      colors: N,
+                      colorLegendTitle: re,
+                      showNAColor: !1
+                    }
+                  ) : null,
+                  /* @__PURE__ */ t.jsx("div", { className: "w-full grow leading-0", ref: j, "aria-label": "Graph area", children: (l || c) && (D || Q) ? /* @__PURE__ */ t.jsx(
+                    ze,
+                    {
+                      data: w,
+                      colors: N,
+                      width: l || c,
+                      height: Math.max(
+                        y,
+                        D || (L ? y ? (l || c) * L > y ? (l || c) * L : y : (l || c) * L : Q)
+                      ),
+                      dateFormat: ie,
+                      noOfXTicks: se,
+                      leftMargin: X,
+                      rightMargin: E,
+                      topMargin: G,
+                      bottomMargin: I,
+                      tooltip: le,
+                      onSeriesMouseOver: R,
+                      highlightAreaSettings: ne,
+                      refValues: F,
+                      minValue: f,
+                      maxValue: g,
+                      rtl: C === "he" || C === "ar",
+                      annotations: ce,
+                      customHighlightAreaSettings: O,
+                      yAxisTitle: z,
+                      noOfYTicks: U,
+                      prefix: q,
+                      suffix: p,
+                      curveType: J,
+                      styles: o,
+                      classNames: b,
+                      precision: me,
+                      customLayers: xe,
+                      animate: v === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : v || { duration: 0, once: !0, amount: 0 }
+                    }
+                  ) : null })
+                ] }) }),
+                V || u ? /* @__PURE__ */ t.jsx(
+                  Ee,
+                  {
+                    styles: { footnote: o?.footnote, source: o?.source },
+                    classNames: {
+                      footnote: b?.footnote,
+                      source: b?.source
+                    },
+                    sources: V,
+                    footNote: u,
+                    width: l
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Ot as AreaChart
+};
 //# sourceMappingURL=AreaChart.js.map