@undp/data-viz 1.3.0 → 1.4.0

package/dist/MultiLineChart.js

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