@undp/data-viz 1.3.0 → 1.3.1

package/dist/DifferenceLineChart.js

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