@undp/data-viz 1.3.0 → 1.4.0

package/dist/DualAxisLineChart.js

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