@undp/data-viz 1.3.0 → 1.4.0

package/dist/MultiLineAltChart.js

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