@undp/data-viz 1.3.0 → 1.4.0

package/dist/SimpleLineChart.js

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