@undp/data-viz 2.5.4 → 2.6.1

package/dist/DualAxisLineChart-CUD-jRfN.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),r=require(`./ColorLegend.cjs`),i=require(`./GraphFooter.cjs`),a=require(`./GraphHeader.cjs`),o=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),s=require(`./GraphContainer-7xAPK4Tb.cjs`),c=require(`./parse-C718o4YM.cjs`),l=require(`./lodash.orderby-Us2PHq2D.cjs`),ee=require(`./EmptyState-Bq7ZJmZB.cjs`),te=require(`./init-BTypmXMF.cjs`),u=require(`./linear-B93YyHf_.cjs`),ne=require(`./time-B9tsaA4g.cjs`),d=require(`./proxy-DaRMphjR.cjs`),re=require(`./use-in-view-C4EPQfwM.cjs`),f=require(`./Axis-BbfI4T5K.cjs`),p=require(`./AxisTitle-Co2DmqOy.cjs`),m=require(`./numberFormattingFunction-Caf5NyIo.cjs`),ie=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),ae=require(`./Tooltip-CO_iOj_w.cjs`),h=require(`./line-DoUnRqpS.cjs`),g=require(`./step-C_FLQezZ.cjs`),oe=require(`./getNoOfTicks-CwG9lMmQ.cjs`),se=require(`./select-CZVfejpg.cjs`),ce=require(`./pointer-nSSkgdlX.cjs`),_=require(`./HighlightArea-CJ2XwY67.cjs`);let v=require(`@undp/design-system-react/cn`),y=require(`react`);var le=e.a(l.t(),1),b=t.t();function ue(e){let{data:t,width:n,height:r,lineColors:i,labels:a,sameAxes:s,dateFormat:l,showValues:ee,noOfXTicks:oe,rightMargin:ue,leftMargin:de,topMargin:fe,bottomMargin:pe,tooltip:me,highlightAreaSettings:he,onSeriesMouseOver:x,animate:S,strokeWidth:C,showDots:w,noOfYTicks:T,leftLineNumberDisplayOptions:E,rightLineNumberDisplayOptions:D,minDate:O,maxDate:k,curveType:A,styles:j,classNames:M,customLayers:N,showAxisLabels:P,naLabel:F}=e,I=(0,y.useRef)(null),L=re.t(I,{once:S.once,amount:S.amount}),[R,ge]=(0,y.useState)(!1);(0,y.useEffect)(()=>{if(L&&!R){let e=setTimeout(()=>{ge(!0)},(S.duration+.5)*1e3);return()=>clearTimeout(e)}},[L,R,S.duration]);let z=A===`linear`?h.i:A===`step`?g.r:A===`stepAfter`?g.t:A===`stepBefore`?g.n:g.i,[B,_e]=(0,y.useState)(void 0),[V,ve]=(0,y.useState)(void 0),[H,U]=(0,y.useState)(void 0),W={top:fe,bottom:pe,left:de+50,right:ue+65},ye=(0,y.useRef)(null),G=(0,le.default)(t.map(e=>({...e,date:c.t(`${e.date}`,l,new Date)})),[`date`],[`asc`]),be=he.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:c.t(`${e.coordinates[0]}`,l,new Date),e.coordinates[1]===null?null:c.t(`${e.coordinates[1]}`,l,new Date)]})),K=n-W.left-W.right,q=r-W.top-W.bottom,xe=O?c.t(`${O}`,l,new Date):G[0].date,Se=k?c.t(`${k}`,l,new Date):G[G.length-1].date,Ce=Math.min(...G.map(e=>e.y1).filter(e=>e!=null))===1/0||Math.min(...G.map(e=>e.y2).filter(e=>e!=null))>0?0:Math.min(...G.map(e=>e.y1).filter(e=>e!=null)),we=Math.min(...G.map(e=>e.y2).filter(e=>e!=null))===1/0||Math.min(...G.map(e=>e.y2).filter(e=>e!=null))>0?0:Math.min(...G.map(e=>e.y2).filter(e=>e!=null)),J=Math.max(...G.map(e=>e.y1).filter(e=>e!=null))===1/0?0:Math.max(...G.map(e=>e.y1).filter(e=>e!=null)),Y=Math.max(...G.map(e=>e.y2).filter(e=>e!=null))===1/0?0:Math.max(...G.map(e=>e.y2).filter(e=>e!=null)),Te=Ce<we?Ce:we,X=J>Y?J:Y,Z=ne.t().domain([xe,Se]).range([0,K]),Q=u.t().domain([s?Te:Ce,s?X>0?X:0:J>0?J:0]).range([q,0]).nice(),$=u.t().domain([s?Te:we,s?X>0?X:0:Y>0?Y:0]).range([q,0]).nice(),Ee=h.t().defined(e=>!o.t(e.y1)).x(e=>Z(e.date)).y(e=>Q(e.y1)).curve(z),De=h.t().defined(e=>!o.t(e.y2)).x(e=>Z(e.date)).y(e=>$(e.y2)).curve(z),Oe=Q.ticks(T),ke=$.ticks(T),Ae=Z.ticks(oe);return(0,y.useEffect)(()=>{se.t(ye.current).on(`mousemove`,e=>{let t=G[te.n(G.map(e=>e.date),Z.invert(ce.t(e)[0]),0)];_e(t||G[G.length-1]),x?.(t||G[G.length-1]),U(e.clientY),ve(e.clientX)}).on(`mouseout`,()=>{_e(void 0),ve(void 0),U(void 0),x?.(void 0)})},[Z,G,x]),(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(d.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:I,children:(0,b.jsxs)(`g`,{transform:`translate(${W.left},${W.top})`,children:[(0,b.jsx)(_.t,{areaSettings:be,width:K,height:q,scale:Z,animate:S,isInView:L}),(0,b.jsxs)(`g`,{children:[Oe.map((e,t)=>(0,b.jsxs)(`g`,{children:[(0,b.jsx)(`line`,{y1:Q(e),y2:Q(e),x1:-15,x2:-20,style:{stroke:i[0],strokeWidth:1,...j?.yAxis?.gridLines||{}},className:M?.yAxis?.gridLines}),(0,b.jsx)(`text`,{x:-25,y:Q(e),dy:`0.33em`,className:(0,v.cn)(`text-xs`,M?.yAxis?.labels),style:{textAnchor:`end`,fill:i[0],...j?.yAxis?.labels||{}},children:m.t(e,void 0,E?.precision,E?.prefix,E?.suffix,E?.locale,E?.padZeros)})]},t)),(0,b.jsx)(f.t,{y1:0,y2:q,x1:-15,x2:-15,classNames:{axis:M?.xAxis?.axis},styles:{axis:{stroke:i[0],...j?.xAxis?.axis||{}}}}),P?(0,b.jsx)(p.t,{x:10-W.left,y:q/2,style:{fill:i[0],...j?.yAxis?.title||{}},className:M?.yAxis?.title,text:a[0].length>100?`${a[0].substring(0,100)}...`:a[0],rotate90:!0}):null]}),(0,b.jsxs)(`g`,{children:[ke.map((e,t)=>(0,b.jsxs)(`g`,{children:[(0,b.jsx)(`line`,{y1:$(e),y2:$(e),x1:K+15,x2:K+20,style:{stroke:i[1],strokeWidth:1,...j?.yAxis?.gridLines||{}},className:M?.yAxis?.gridLines}),(0,b.jsx)(`text`,{x:K+25,y:$(e),dy:`0.33em`,dx:-2,style:{textAnchor:`start`,fill:i[1],...j?.yAxis?.labels||{}},className:(0,v.cn)(`text-xs`,M?.yAxis?.labels),children:m.t(e,void 0,D?.precision,D?.prefix,D?.suffix,D?.locale,D?.padZeros)})]},t)),(0,b.jsx)(f.t,{y1:0,y2:q,x1:K+15,x2:K+15,classNames:{axis:M?.xAxis?.axis},styles:{axis:{stroke:i[1],...j?.xAxis?.axis||{}}}}),P?(0,b.jsx)(p.t,{x:K+W.right-15,y:q/2,style:{fill:i[1],...j?.yAxis?.title||{}},className:M?.yAxis?.title,text:a[1].length>100?`${a[1].substring(0,100)}...`:a[1],rotate90:!0}):null]}),(0,b.jsxs)(`g`,{children:[(0,b.jsx)(f.t,{y1:q,y2:q,x1:-15,x2:K+15,classNames:{axis:M?.xAxis?.axis},styles:{axis:j?.xAxis?.axis}}),(0,b.jsx)(ie.t,{values:Ae.map(e=>c.n(e,l)),x:Ae.map(e=>Z(e)),y1:0,y2:q,styles:{gridLines:j?.xAxis?.gridLines,labels:j?.xAxis?.labels},classNames:{gridLines:(0,v.cn)(`opacity-0`,M?.xAxis?.gridLines),labels:(0,v.cn)(`fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs`,M?.xAxis?.labels)},labelType:`primary`,showGridLines:!0,padZeros:!1})]}),N.filter(e=>e.position===`before`).map(e=>e.layer),(0,b.jsxs)(`g`,{children:[(0,b.jsx)(d.t.path,{style:{stroke:i[0],strokeWidth:C,fill:`none`},exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{pathLength:0,d:Ee(G.filter(e=>!o.t(e.y1)))||``,opacity:1},whileInView:{pathLength:1,d:Ee(G.filter(e=>!o.t(e.y1)))||``,opacity:1,transition:{duration:S.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`}),(0,b.jsx)(d.t.path,{d:De(G.filter(e=>!o.t(e.y2)))||``,style:{stroke:i[1],strokeWidth:C,fill:`none`},exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{pathLength:0,d:De(G.filter(e=>!o.t(e.y2)))||``,opacity:1},whileInView:{pathLength:1,d:De(G.filter(e=>!o.t(e.y2)))||``,opacity:1,transition:{duration:S.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`}),B?(0,b.jsx)(`line`,{y1:0,y2:q,x1:Z(B.date),x2:Z(B.date),className:(0,v.cn)(`undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100`,M?.mouseOverLine),style:j?.mouseOverLine}):null]}),(0,b.jsx)(`g`,{children:G.map((e,t)=>(0,b.jsxs)(d.t.g,{children:[o.t(e.y1)?null:(0,b.jsxs)(b.Fragment,{children:[w?(0,b.jsx)(d.t.circle,{r:K/G.length<5?0:K/G.length<20?2:4,exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{opacity:0,cx:Z(e.date),cy:Q(e.y1),fill:i[0]},whileInView:{opacity:1,fill:i[0],transition:{duration:R?S.duration:.5,delay:R?0:S.duration},cx:Z(e.date),cy:Q(e.y1)}},initial:`initial`,animate:L?`whileInView`:`initial`}):null,ee?(0,b.jsx)(d.t.text,{dy:o.t(e.y2)||e.y2<e.y1?-8:`1em`,style:{textAnchor:`middle`,...j?.graphObjectValues||{}},className:(0,v.cn)(`graph-value graph-value-line-1 text-xs font-bold`,M?.graphObjectValues),exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{opacity:0,x:Z(e.date),y:$(e.y1),fill:i[0]},whileInView:{opacity:1,x:Z(e.date),fill:i[0],y:$(e.y1),transition:{duration:R?S.duration:.5,delay:R?0:S.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`,children:m.t(e.y1,F,E?.precision??2,E?.prefix,E?.suffix,E?.locale,E?.padZeros)}):null]}),o.t(e.y2)?null:(0,b.jsxs)(b.Fragment,{children:[w?(0,b.jsx)(d.t.circle,{r:K/G.length<5?0:K/G.length<20?2:4,exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{opacity:0,cx:Z(e.date),cy:$(e.y2),fill:i[1]},whileInView:{opacity:1,transition:{duration:R?S.duration:.5,delay:R?0:S.duration},fill:i[1],cx:Z(e.date),cy:$(e.y2)}},initial:`initial`,animate:L?`whileInView`:`initial`}):null,ee?(0,b.jsx)(d.t.text,{dy:o.t(e.y1)||e.y1<e.y2?-8:`1em`,style:{textAnchor:`middle`,...j?.graphObjectValues||{}},className:(0,v.cn)(`graph-value graph-value-line-2 text-xs font-bold`,M?.graphObjectValues),exit:{opacity:0,transition:{duration:S.duration}},variants:{initial:{opacity:0,x:Z(e.date),y:$(e.y2),fill:i[1]},whileInView:{opacity:1,x:Z(e.date),y:$(e.y2),fill:i[1],transition:{duration:R?S.duration:.5,delay:R?0:S.duration}}},initial:`initial`,animate:L?`whileInView`:`initial`,children:m.t(e.y2,F,D?.precision??2,D?.prefix,D?.suffix,D?.locale,D?.padZeros)}):null]})]},t))}),N.filter(e=>e.position===`after`).map(e=>e.layer),(0,b.jsx)(`rect`,{ref:ye,style:{fill:`none`,pointerEvents:`all`},width:K,height:q})]})}),B&&me&&V&&H?(0,b.jsx)(ae.t,{data:B,body:me,xPos:V,yPos:H,backgroundStyle:j?.tooltip,className:M?.tooltip}):null]})}function de(e){let{data:t,graphTitle:o,sources:c,graphDescription:l,height:te,width:u,footNote:ne,noOfXTicks:d,dateFormat:re=`yyyy`,showValues:f=!1,padding:p,lineColors:m=[n.Colors.light.categoricalColors.colors[0],n.Colors.light.categoricalColors.colors[1]],sameAxes:ie=!1,backgroundColor:ae=!1,leftMargin:h=80,rightMargin:g=80,topMargin:se=20,bottomMargin:ce=25,labels:_,rightLineNumberDisplayOptions:v,leftLineNumberDisplayOptions:le,tooltip:de,highlightAreaSettings:fe=[],relativeHeight:pe,onSeriesMouseOver:me,graphID:he,graphDownload:x=!1,dataDownload:S=!1,animate:C=!1,strokeWidth:w=2,showDots:T=!0,language:E=`en`,showColorScale:D=!0,minHeight:O=0,colorLegendTitle:k,theme:A=`light`,ariaLabel:j,noOfYTicks:M=5,maxDate:N,minDate:P,curveType:F=`curve`,styles:I,classNames:L,customLayers:R=[],showAxisLabels:ge=!0,naLabel:z=`NA`}=e,[B,_e]=(0,y.useState)(0),[V,ve]=(0,y.useState)(0),H=(0,y.useRef)(null),U=(0,y.useRef)(null);return(0,y.useEffect)(()=>{let e=new ResizeObserver(e=>{_e(e[0].target.clientWidth||620),ve(e[0].target.clientHeight||480)});return H.current&&e.observe(H.current),()=>e.disconnect()},[]),(0,b.jsxs)(s.n,{className:L?.graphContainer,style:I?.graphContainer,id:he,ref:U,"aria-label":j,backgroundColor:ae,theme:A,language:E,minHeight:O,width:u,height:te,relativeHeight:pe,padding:p,children:[o||l||x||S?(0,b.jsx)(a.GraphHeader,{styles:{title:I?.title,description:I?.description},classNames:{title:L?.title,description:L?.description},graphTitle:o,graphDescription:l,width:u,graphDownload:x?U:void 0,dataDownload:S?t.map(e=>e.data).filter(e=>e!==void 0).length>0?t.map(e=>e.data).filter(e=>e!==void 0):t.filter(e=>e!==void 0):null}):null,D&&_.length>0?(0,b.jsx)(r.ColorLegend,{colorDomain:_,colorLegendTitle:k,colors:m,showNAColor:!1,className:L?.colorLegend}):null,(0,b.jsxs)(s.t,{ref:H,children:[t.length===0&&(0,b.jsx)(ee.t,{}),B&&V&&t.length>0?(0,b.jsx)(ue,{data:t,sameAxes:ie,lineColors:m,width:B,height:V,dateFormat:re,showValues:f,noOfXTicks:d??oe.t(B),leftMargin:h,rightMargin:g,topMargin:se,bottomMargin:ce,labels:_,highlightAreaSettings:fe,tooltip:de,onSeriesMouseOver:me,animate:C===!0?{duration:.5,once:!0,amount:.5}:C||{duration:0,once:!0,amount:0},strokeWidth:w,showDots:T,noOfYTicks:M,leftLineNumberDisplayOptions:le,rightLineNumberDisplayOptions:v,minDate:P,maxDate:N,curveType:F,styles:I,classNames:L,customLayers:R,showAxisLabels:ge,naLabel:z}):null]}),c||ne?(0,b.jsx)(i.GraphFooter,{styles:{footnote:I?.footnote,source:I?.source},classNames:{footnote:L?.footnote,source:L?.source},sources:c,footNote:ne,width:u}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return de}});
+//# sourceMappingURL=DualAxisLineChart-CUD-jRfN.cjs.map

package/dist/DualAxisLineChart-CUD-jRfN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualAxisLineChart-CUD-jRfN.cjs","names":[],"sources":["../src/Components/Graphs/LineCharts/DualAxisLineChart/Graph.tsx","../src/Components/Graphs/LineCharts/DualAxisLineChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { motion, useInView } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  DualAxisLineChartDataType,\n  HighlightAreaSettingsDataType,\n  NumberFormatOptions,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: DualAxisLineChartDataType[];\n  lineColors: [string, string];\n  labels: [string, string];\n  width: number;\n  height: number;\n  dateFormat: string;\n  showValues: boolean;\n  noOfXTicks: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  sameAxes: boolean;\n  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  animate: AnimateDataType;\n  strokeWidth: number;\n  showDots: boolean;\n  noOfYTicks: number;\n  minDate?: string | number;\n  maxDate?: string | number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  customLayers: CustomLayerDataType[];\n  showAxisLabels: boolean;\n  leftLineNumberDisplayOptions?: NumberFormatOptions;\n  rightLineNumberDisplayOptions?: NumberFormatOptions;\n  naLabel: string;\n}\n\ninterface FormattedDataType {\n  y1: number;\n  y2: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColors,\n    labels,\n    sameAxes,\n    dateFormat,\n    showValues,\n    noOfXTicks,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    highlightAreaSettings,\n    onSeriesMouseOver,\n    animate,\n    strokeWidth,\n    showDots,\n    noOfYTicks,\n    leftLineNumberDisplayOptions,\n    rightLineNumberDisplayOptions,\n    minDate,\n    maxDate,\n    curveType,\n    styles,\n    classNames,\n    customLayers,\n    showAxisLabels,\n    naLabel,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const [hasAnimatedOnce, setHasAnimatedOnce] = useState(false);\n\n  useEffect(() => {\n    if (isInView && !hasAnimatedOnce) {\n      const timeout = setTimeout(\n        () => {\n          setHasAnimatedOnce(true);\n        },\n        (animate.duration + 0.5) * 1000,\n      );\n      return () => clearTimeout(timeout);\n    }\n  }, [isInView, hasAnimatedOnce, animate.duration]);\n  const curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin + 50,\n    right: rightMargin + 65,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const highlightAreaSettingsFormatted = highlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: [\n      d.coordinates[0] === null ? null : parse(`${d.coordinates[0]}`, dateFormat, new Date()),\n      d.coordinates[1] === null ? null : parse(`${d.coordinates[1]}`, dateFormat, new Date()),\n    ],\n  }));\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = minDate ? parse(`${minDate}`, dateFormat, new Date()) : dataFormatted[0].date;\n  const maxYear = maxDate\n    ? parse(`${maxDate}`, dateFormat, new Date())\n    : dataFormatted[dataFormatted.length - 1].date;\n  const minParam1 =\n    Math.min(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const minParam2 =\n    Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam1 =\n    Math.max(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y1).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam2 =\n    Math.max(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y2).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\n  const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n\n  const y1 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam1,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n  const y2 = scaleLinear()\n    .domain([\n      sameAxes ? minParam : minParam2,\n      sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape1 = line<FormattedDataType>()\n    .defined((d) => !checkIfNullOrUndefined(d.y1))\n    .x((d) => x(d.date))\n    .y((d) => y1(d.y1))\n    .curve(curve);\n\n  const lineShape2 = line<FormattedDataType>()\n    .defined((d) => !checkIfNullOrUndefined(d.y2))\n    .x((d) => x(d.date))\n    .y((d) => y2(d.y2))\n    .curve(curve);\n  const y1Ticks = y1.ticks(noOfYTicks);\n  const y2Ticks = y2.ticks(noOfYTicks);\n  const xTicks = x.ticks(noOfXTicks);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n      onSeriesMouseOver?.(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n  }, [x, dataFormatted, onSeriesMouseOver]);\n\n  return (\n    <>\n      <motion.svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n        ref={svgRef}\n      >\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          <HighlightArea\n            areaSettings={highlightAreaSettingsFormatted}\n            width={graphWidth}\n            height={graphHeight}\n            scale={x}\n            animate={animate}\n            isInView={isInView}\n          />\n          <g>\n            {y1Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y1(d)}\n                  y2={y1(d)}\n                  x1={-15}\n                  x2={-20}\n                  style={{\n                    stroke: lineColors[0],\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={0 - 25}\n                  y={y1(d)}\n                  dy='0.33em'\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                  style={{\n                    textAnchor: 'end',\n                    fill: lineColors[0],\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    undefined,\n                    leftLineNumberDisplayOptions?.precision,\n                    leftLineNumberDisplayOptions?.prefix,\n                    leftLineNumberDisplayOptions?.suffix,\n                    leftLineNumberDisplayOptions?.locale,\n                    leftLineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={-15}\n              x2={-15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColors[0], ...(styles?.xAxis?.axis || {}) } }}\n            />\n\n            {showAxisLabels ? (\n              <AxisTitle\n                x={10 - margin.left}\n                y={graphHeight / 2}\n                style={{ fill: lineColors[0], ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={labels[0].length > 100 ? `${labels[0].substring(0, 100)}...` : labels[0]}\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            {y2Ticks.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <g key={i}>\n                <line\n                  y1={y2(d)}\n                  y2={y2(d)}\n                  x1={graphWidth + 15}\n                  x2={graphWidth + 20}\n                  style={{\n                    stroke: lineColors[1],\n                    strokeWidth: 1,\n                    ...(styles?.yAxis?.gridLines || {}),\n                  }}\n                  className={classNames?.yAxis?.gridLines}\n                />\n                <text\n                  x={graphWidth + 25}\n                  y={y2(d)}\n                  dy='0.33em'\n                  dx={-2}\n                  style={{\n                    textAnchor: 'start',\n                    fill: lineColors[1],\n                    ...(styles?.yAxis?.labels || {}),\n                  }}\n                  className={cn('text-xs', classNames?.yAxis?.labels)}\n                >\n                  {numberFormattingFunction(\n                    d,\n                    undefined,\n                    rightLineNumberDisplayOptions?.precision,\n                    rightLineNumberDisplayOptions?.prefix,\n                    rightLineNumberDisplayOptions?.suffix,\n                    rightLineNumberDisplayOptions?.locale,\n                    rightLineNumberDisplayOptions?.padZeros,\n                  )}\n                </text>\n              </g>\n            ))}\n            <Axis\n              y1={0}\n              y2={graphHeight}\n              x1={graphWidth + 15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: { stroke: lineColors[1], ...(styles?.xAxis?.axis || {}) } }}\n            />\n            {showAxisLabels ? (\n              <AxisTitle\n                x={graphWidth + margin.right - 15}\n                y={graphHeight / 2}\n                style={{ fill: lineColors[1], ...(styles?.yAxis?.title || {}) }}\n                className={classNames?.yAxis?.title}\n                text={labels[1].length > 100 ? `${labels[1].substring(0, 100)}...` : labels[1]}\n                rotate90\n              />\n            ) : null}\n          </g>\n          <g>\n            <Axis\n              y1={graphHeight}\n              y2={graphHeight}\n              x1={-15}\n              x2={graphWidth + 15}\n              classNames={{ axis: classNames?.xAxis?.axis }}\n              styles={{ axis: styles?.xAxis?.axis }}\n            />\n            <XTicksAndGridLines\n              values={xTicks.map((d) => format(d, dateFormat))}\n              x={xTicks.map((d) => x(d))}\n              y1={0}\n              y2={graphHeight}\n              styles={{\n                gridLines: styles?.xAxis?.gridLines,\n                labels: styles?.xAxis?.labels,\n              }}\n              classNames={{\n                gridLines: cn('opacity-0', classNames?.xAxis?.gridLines),\n                labels: cn(\n                  'fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs',\n                  classNames?.xAxis?.labels,\n                ),\n              }}\n              labelType='primary'\n              showGridLines\n              padZeros={false}\n            />\n          </g>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            <motion.path\n              style={{\n                stroke: lineColors[0],\n                strokeWidth,\n                fill: 'none',\n              }}\n              exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              variants={{\n                initial: {\n                  pathLength: 0,\n                  d:\n                    lineShape1(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y1),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                },\n                whileInView: {\n                  pathLength: 1,\n                  d:\n                    lineShape1(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y1),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n            />\n            <motion.path\n              d={\n                lineShape2(\n                  dataFormatted.filter(\n                    (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                  ),\n                ) || ''\n              }\n              style={{\n                stroke: lineColors[1],\n                strokeWidth,\n                fill: 'none',\n              }}\n              exit={{ opacity: 0, transition: { duration: animate.duration } }}\n              variants={{\n                initial: {\n                  pathLength: 0,\n                  d:\n                    lineShape2(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                },\n                whileInView: {\n                  pathLength: 1,\n                  d:\n                    lineShape2(\n                      dataFormatted.filter(\n                        (el): el is FormattedDataType => !checkIfNullOrUndefined(el.y2),\n                      ),\n                    ) || '',\n                  opacity: 1,\n                  transition: { duration: animate.duration },\n                },\n              }}\n              initial='initial'\n              animate={isInView ? 'whileInView' : 'initial'}\n            />\n            {mouseOverData ? (\n              <line\n                y1={0}\n                y2={graphHeight}\n                x1={x(mouseOverData.date)}\n                x2={x(mouseOverData.date)}\n                className={cn(\n                  'undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100',\n                  classNames?.mouseOverLine,\n                )}\n                style={styles?.mouseOverLine}\n              />\n            ) : null}\n          </g>\n          <g>\n            {dataFormatted.map((d, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n              <motion.g key={i}>\n                {!checkIfNullOrUndefined(d.y1) ? (\n                  <>\n                    {showDots ? (\n                      <motion.circle\n                        r={\n                          graphWidth / dataFormatted.length < 5\n                            ? 0\n                            : graphWidth / dataFormatted.length < 20\n                              ? 2\n                              : 4\n                        }\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            cx: x(d.date),\n                            cy: y1(d.y1 as number),\n                            fill: lineColors[0],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            fill: lineColors[0],\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                            cx: x(d.date),\n                            cy: y1(d.y1 as number),\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        dy={\n                          checkIfNullOrUndefined(d.y2)\n                            ? -8\n                            : (d.y2 as number) < (d.y1 as number)\n                              ? -8\n                              : '1em'\n                        }\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn(\n                          'graph-value graph-value-line-1 text-xs font-bold',\n                          classNames?.graphObjectValues,\n                        )}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            x: x(d.date),\n                            y: y2(d.y1 as number),\n                            fill: lineColors[0],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            x: x(d.date),\n                            fill: lineColors[0],\n                            y: y2(d.y1 as number),\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.y1,\n                          naLabel,\n                          leftLineNumberDisplayOptions?.precision ?? 2,\n                          leftLineNumberDisplayOptions?.prefix,\n                          leftLineNumberDisplayOptions?.suffix,\n                          leftLineNumberDisplayOptions?.locale,\n                          leftLineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </>\n                ) : null}\n                {!checkIfNullOrUndefined(d.y2) ? (\n                  <>\n                    {showDots ? (\n                      <motion.circle\n                        r={\n                          graphWidth / dataFormatted.length < 5\n                            ? 0\n                            : graphWidth / dataFormatted.length < 20\n                              ? 2\n                              : 4\n                        }\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            cx: x(d.date),\n                            cy: y2(d.y2 as number),\n                            fill: lineColors[1],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                            fill: lineColors[1],\n                            cx: x(d.date),\n                            cy: y2(d.y2 as number),\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        dy={\n                          checkIfNullOrUndefined(d.y1)\n                            ? -8\n                            : (d.y1 as number) < (d.y2 as number)\n                              ? -8\n                              : '1em'\n                        }\n                        style={{\n                          textAnchor: 'middle',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn(\n                          'graph-value graph-value-line-2 text-xs font-bold',\n                          classNames?.graphObjectValues,\n                        )}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            x: x(d.date),\n                            y: y2(d.y2 as number),\n                            fill: lineColors[1],\n                          },\n                          whileInView: {\n                            opacity: 1,\n                            x: x(d.date),\n                            y: y2(d.y2 as number),\n                            fill: lineColors[1],\n                            transition: {\n                              duration: hasAnimatedOnce ? animate.duration : 0.5,\n                              delay: hasAnimatedOnce ? 0 : animate.duration,\n                            },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.y2,\n                          naLabel,\n                          rightLineNumberDisplayOptions?.precision ?? 2,\n                          rightLineNumberDisplayOptions?.prefix,\n                          rightLineNumberDisplayOptions?.suffix,\n                          rightLineNumberDisplayOptions?.locale,\n                          rightLineNumberDisplayOptions?.padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </>\n                ) : null}\n              </motion.g>\n            ))}\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n          <rect\n            ref={MouseoverRectRef}\n            style={{\n              fill: 'none',\n              pointerEvents: 'all',\n            }}\n            width={graphWidth}\n            height={graphHeight}\n          />\n        </g>\n      </motion.svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  DualAxisLineChartDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  NumberFormatOptions,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { getNoOfTicks } from '@/Utils/getNoOfTicks';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: DualAxisLineChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Array of colors for the 2 lines */\n  lineColors?: [string, string];\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n\n  // Values and Ticks\n  /** Maximum value of the date for the chart */\n  maxDate?: string | number;\n  /** Minimum value of the date for the chart */\n  minDate?: string | number;\n  /** No. of ticks on the x-axis  */\n  noOfXTicks?: number;\n  /** No. of ticks on the y-axis  */\n  noOfYTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of dots on the line */\n  showDots?: boolean;\n  /** Stroke width of the line */\n  strokeWidth?: number;\n  /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */\n  animate?: boolean | AnimateDataType;\n  /** Enables same axis for the 2 lines */\n  sameAxes?: boolean;\n  /** Toggle visibility of color scale. */\n  showColorScale?: boolean;\n  /** Toggle visibility of labels of the axis. */\n  showAxisLabels?: boolean;\n  /** Labels for the lines  */\n  labels: [string, string];\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for left line. */\n  leftLineNumberDisplayOptions?: NumberFormatOptions;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for right line. */\n  rightLineNumberDisplayOptions?: NumberFormatOptions;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function DualAxisLineChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks,\n    dateFormat = 'yyyy',\n    showValues = false,\n    padding,\n    lineColors = [\n      Colors.light.categoricalColors.colors[0],\n      Colors.light.categoricalColors.colors[1],\n    ],\n    sameAxes = false,\n    backgroundColor = false,\n    leftMargin = 80,\n    rightMargin = 80,\n    topMargin = 20,\n    bottomMargin = 25,\n    labels,\n    rightLineNumberDisplayOptions,\n    leftLineNumberDisplayOptions,\n    tooltip,\n    highlightAreaSettings = [],\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    graphDownload = false,\n    dataDownload = false,\n    animate = false,\n    strokeWidth = 2,\n    showDots = true,\n    language = 'en',\n    showColorScale = true,\n    minHeight = 0,\n    colorLegendTitle,\n    theme = 'light',\n    ariaLabel,\n    noOfYTicks = 5,\n    maxDate,\n    minDate,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n    showAxisLabels = true,\n    naLabel = 'NA',\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {showColorScale && labels.length > 0 ? (\n        <ColorLegend\n          colorDomain={labels}\n          colorLegendTitle={colorLegendTitle}\n          colors={lineColors}\n          showNAColor={false}\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            sameAxes={sameAxes}\n            lineColors={lineColors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            showValues={showValues}\n            noOfXTicks={noOfXTicks ?? getNoOfTicks(svgWidth)}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            labels={labels}\n            highlightAreaSettings={highlightAreaSettings}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            strokeWidth={strokeWidth}\n            showDots={showDots}\n            noOfYTicks={noOfYTicks}\n            leftLineNumberDisplayOptions={leftLineNumberDisplayOptions}\n            rightLineNumberDisplayOptions={rightLineNumberDisplayOptions}\n            minDate={minDate}\n            maxDate={maxDate}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n            showAxisLabels={showAxisLabels}\n            naLabel={naLabel}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/DualAxisLineChart-DzVs-ftM.js

@@ -0,0 +1,518 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { ColorLegend as r } from "./ColorLegend.js";
+import { GraphFooter as i } from "./GraphFooter.js";
+import { GraphHeader as a } from "./GraphHeader.js";
+import { t as o } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as s, t as c } from "./GraphContainer-DgEB1AVN.js";
+import { n as l, t as u } from "./parse-5MWhaq6h.js";
+import { t as d } from "./lodash.orderby-Dn2sr3tw.js";
+import { t as ee } from "./EmptyState-DBmT1Adf.js";
+import { n as f } from "./init-CT6uqW57.js";
+import { t as p } from "./linear-BkosG4OK.js";
+import { t as te } from "./time-BSWvT9ln.js";
+import { t as m } from "./proxy-BiRrIImK.js";
+import { t as ne } from "./use-in-view-CjlKdln1.js";
+import { t as h } from "./Axis-B3ai1eeP.js";
+import { t as g } from "./AxisTitle-DqJw_G-f.js";
+import { t as _ } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as re } from "./XTicksAndGridLines-B2XZgwzW.js";
+import { t as ie } from "./Tooltip-Y6uTGwkF.js";
+import { i as ae, t as oe } from "./line-6wslDyQb.js";
+import { i as se, n as v, r as ce, t as le } from "./step-Bxl4gFpO.js";
+import { t as ue } from "./getNoOfTicks-Bz_9Xmc6.js";
+import { t as de } from "./select-0Z0HV7nm.js";
+import { t as fe } from "./pointer-CoEekBJE.js";
+import { t as pe } from "./HighlightArea-BljOOgRP.js";
+import { cn as y } from "@undp/design-system-react/cn";
+import { useEffect as b, useRef as x, useState as S } from "react";
+//#region src/Components/Graphs/LineCharts/DualAxisLineChart/Graph.tsx
+var me = /* @__PURE__ */ e(d(), 1), C = t();
+function he(e) {
+	let { data: t, width: n, height: r, lineColors: i, labels: a, sameAxes: s, dateFormat: c, showValues: d, noOfXTicks: ee, rightMargin: ue, leftMargin: he, topMargin: w, bottomMargin: T, tooltip: E, highlightAreaSettings: ge, onSeriesMouseOver: D, animate: O, strokeWidth: k, showDots: A, noOfYTicks: j, leftLineNumberDisplayOptions: M, rightLineNumberDisplayOptions: N, minDate: P, maxDate: F, curveType: I, styles: L, classNames: R, customLayers: z, showAxisLabels: _e, naLabel: ve } = e, ye = x(null), B = ne(ye, {
+		once: O.once,
+		amount: O.amount
+	}), [V, be] = S(!1);
+	b(() => {
+		if (B && !V) {
+			let e = setTimeout(() => {
+				be(!0);
+			}, (O.duration + .5) * 1e3);
+			return () => clearTimeout(e);
+		}
+	}, [
+		B,
+		V,
+		O.duration
+	]);
+	let xe = I === "linear" ? ae : I === "step" ? ce : I === "stepAfter" ? le : I === "stepBefore" ? v : se, [H, U] = S(void 0), [Se, Ce] = S(void 0), [we, Te] = S(void 0), W = {
+		top: w,
+		bottom: T,
+		left: he + 50,
+		right: ue + 65
+	}, Ee = x(null), G = (0, me.default)(t.map((e) => ({
+		...e,
+		date: u(`${e.date}`, c, /* @__PURE__ */ new Date())
+	})), ["date"], ["asc"]), De = ge.map((e) => ({
+		...e,
+		coordinates: [e.coordinates[0] === null ? null : u(`${e.coordinates[0]}`, c, /* @__PURE__ */ new Date()), e.coordinates[1] === null ? null : u(`${e.coordinates[1]}`, c, /* @__PURE__ */ new Date())]
+	})), K = n - W.left - W.right, q = r - W.top - W.bottom, Oe = P ? u(`${P}`, c, /* @__PURE__ */ new Date()) : G[0].date, ke = F ? u(`${F}`, c, /* @__PURE__ */ new Date()) : G[G.length - 1].date, Ae = Math.min(...G.map((e) => e.y1).filter((e) => e != null)) === Infinity || Math.min(...G.map((e) => e.y2).filter((e) => e != null)) > 0 ? 0 : Math.min(...G.map((e) => e.y1).filter((e) => e != null)), je = Math.min(...G.map((e) => e.y2).filter((e) => e != null)) === Infinity || Math.min(...G.map((e) => e.y2).filter((e) => e != null)) > 0 ? 0 : Math.min(...G.map((e) => e.y2).filter((e) => e != null)), J = Math.max(...G.map((e) => e.y1).filter((e) => e != null)) === Infinity ? 0 : Math.max(...G.map((e) => e.y1).filter((e) => e != null)), Y = Math.max(...G.map((e) => e.y2).filter((e) => e != null)) === Infinity ? 0 : Math.max(...G.map((e) => e.y2).filter((e) => e != null)), Me = Ae < je ? Ae : je, X = J > Y ? J : Y, Z = te().domain([Oe, ke]).range([0, K]), Q = p().domain([s ? Me : Ae, s ? X > 0 ? X : 0 : J > 0 ? J : 0]).range([q, 0]).nice(), $ = p().domain([s ? Me : je, s ? X > 0 ? X : 0 : Y > 0 ? Y : 0]).range([q, 0]).nice(), Ne = oe().defined((e) => !o(e.y1)).x((e) => Z(e.date)).y((e) => Q(e.y1)).curve(xe), Pe = oe().defined((e) => !o(e.y2)).x((e) => Z(e.date)).y((e) => $(e.y2)).curve(xe), Fe = Q.ticks(j), Ie = $.ticks(j), Le = Z.ticks(ee);
+	return b(() => {
+		de(Ee.current).on("mousemove", (e) => {
+			let t = G[f(G.map((e) => e.date), Z.invert(fe(e)[0]), 0)];
+			U(t || G[G.length - 1]), D?.(t || G[G.length - 1]), Te(e.clientY), Ce(e.clientX);
+		}).on("mouseout", () => {
+			U(void 0), Ce(void 0), Te(void 0), D?.(void 0);
+		});
+	}, [
+		Z,
+		G,
+		D
+	]), /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [/* @__PURE__ */ (0, C.jsx)(m.svg, {
+		width: `${n}px`,
+		height: `${r}px`,
+		viewBox: `0 0 ${n} ${r}`,
+		direction: "ltr",
+		ref: ye,
+		children: /* @__PURE__ */ (0, C.jsxs)("g", {
+			transform: `translate(${W.left},${W.top})`,
+			children: [
+				/* @__PURE__ */ (0, C.jsx)(pe, {
+					areaSettings: De,
+					width: K,
+					height: q,
+					scale: Z,
+					animate: O,
+					isInView: B
+				}),
+				/* @__PURE__ */ (0, C.jsxs)("g", { children: [
+					Fe.map((e, t) => /* @__PURE__ */ (0, C.jsxs)("g", { children: [/* @__PURE__ */ (0, C.jsx)("line", {
+						y1: Q(e),
+						y2: Q(e),
+						x1: -15,
+						x2: -20,
+						style: {
+							stroke: i[0],
+							strokeWidth: 1,
+							...L?.yAxis?.gridLines || {}
+						},
+						className: R?.yAxis?.gridLines
+					}), /* @__PURE__ */ (0, C.jsx)("text", {
+						x: -25,
+						y: Q(e),
+						dy: "0.33em",
+						className: y("text-xs", R?.yAxis?.labels),
+						style: {
+							textAnchor: "end",
+							fill: i[0],
+							...L?.yAxis?.labels || {}
+						},
+						children: _(e, void 0, M?.precision, M?.prefix, M?.suffix, M?.locale, M?.padZeros)
+					})] }, t)),
+					/* @__PURE__ */ (0, C.jsx)(h, {
+						y1: 0,
+						y2: q,
+						x1: -15,
+						x2: -15,
+						classNames: { axis: R?.xAxis?.axis },
+						styles: { axis: {
+							stroke: i[0],
+							...L?.xAxis?.axis || {}
+						} }
+					}),
+					_e ? /* @__PURE__ */ (0, C.jsx)(g, {
+						x: 10 - W.left,
+						y: q / 2,
+						style: {
+							fill: i[0],
+							...L?.yAxis?.title || {}
+						},
+						className: R?.yAxis?.title,
+						text: a[0].length > 100 ? `${a[0].substring(0, 100)}...` : a[0],
+						rotate90: !0
+					}) : null
+				] }),
+				/* @__PURE__ */ (0, C.jsxs)("g", { children: [
+					Ie.map((e, t) => /* @__PURE__ */ (0, C.jsxs)("g", { children: [/* @__PURE__ */ (0, C.jsx)("line", {
+						y1: $(e),
+						y2: $(e),
+						x1: K + 15,
+						x2: K + 20,
+						style: {
+							stroke: i[1],
+							strokeWidth: 1,
+							...L?.yAxis?.gridLines || {}
+						},
+						className: R?.yAxis?.gridLines
+					}), /* @__PURE__ */ (0, C.jsx)("text", {
+						x: K + 25,
+						y: $(e),
+						dy: "0.33em",
+						dx: -2,
+						style: {
+							textAnchor: "start",
+							fill: i[1],
+							...L?.yAxis?.labels || {}
+						},
+						className: y("text-xs", R?.yAxis?.labels),
+						children: _(e, void 0, N?.precision, N?.prefix, N?.suffix, N?.locale, N?.padZeros)
+					})] }, t)),
+					/* @__PURE__ */ (0, C.jsx)(h, {
+						y1: 0,
+						y2: q,
+						x1: K + 15,
+						x2: K + 15,
+						classNames: { axis: R?.xAxis?.axis },
+						styles: { axis: {
+							stroke: i[1],
+							...L?.xAxis?.axis || {}
+						} }
+					}),
+					_e ? /* @__PURE__ */ (0, C.jsx)(g, {
+						x: K + W.right - 15,
+						y: q / 2,
+						style: {
+							fill: i[1],
+							...L?.yAxis?.title || {}
+						},
+						className: R?.yAxis?.title,
+						text: a[1].length > 100 ? `${a[1].substring(0, 100)}...` : a[1],
+						rotate90: !0
+					}) : null
+				] }),
+				/* @__PURE__ */ (0, C.jsxs)("g", { children: [/* @__PURE__ */ (0, C.jsx)(h, {
+					y1: q,
+					y2: q,
+					x1: -15,
+					x2: K + 15,
+					classNames: { axis: R?.xAxis?.axis },
+					styles: { axis: L?.xAxis?.axis }
+				}), /* @__PURE__ */ (0, C.jsx)(re, {
+					values: Le.map((e) => l(e, c)),
+					x: Le.map((e) => Z(e)),
+					y1: 0,
+					y2: q,
+					styles: {
+						gridLines: L?.xAxis?.gridLines,
+						labels: L?.xAxis?.labels
+					},
+					classNames: {
+						gridLines: y("opacity-0", R?.xAxis?.gridLines),
+						labels: y("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs", R?.xAxis?.labels)
+					},
+					labelType: "primary",
+					showGridLines: !0,
+					padZeros: !1
+				})] }),
+				z.filter((e) => e.position === "before").map((e) => e.layer),
+				/* @__PURE__ */ (0, C.jsxs)("g", { children: [
+					/* @__PURE__ */ (0, C.jsx)(m.path, {
+						style: {
+							stroke: i[0],
+							strokeWidth: k,
+							fill: "none"
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: O.duration }
+						},
+						variants: {
+							initial: {
+								pathLength: 0,
+								d: Ne(G.filter((e) => !o(e.y1))) || "",
+								opacity: 1
+							},
+							whileInView: {
+								pathLength: 1,
+								d: Ne(G.filter((e) => !o(e.y1))) || "",
+								opacity: 1,
+								transition: { duration: O.duration }
+							}
+						},
+						initial: "initial",
+						animate: B ? "whileInView" : "initial"
+					}),
+					/* @__PURE__ */ (0, C.jsx)(m.path, {
+						d: Pe(G.filter((e) => !o(e.y2))) || "",
+						style: {
+							stroke: i[1],
+							strokeWidth: k,
+							fill: "none"
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: O.duration }
+						},
+						variants: {
+							initial: {
+								pathLength: 0,
+								d: Pe(G.filter((e) => !o(e.y2))) || "",
+								opacity: 1
+							},
+							whileInView: {
+								pathLength: 1,
+								d: Pe(G.filter((e) => !o(e.y2))) || "",
+								opacity: 1,
+								transition: { duration: O.duration }
+							}
+						},
+						initial: "initial",
+						animate: B ? "whileInView" : "initial"
+					}),
+					H ? /* @__PURE__ */ (0, C.jsx)("line", {
+						y1: 0,
+						y2: q,
+						x1: Z(H.date),
+						x2: Z(H.date),
+						className: y("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100", R?.mouseOverLine),
+						style: L?.mouseOverLine
+					}) : null
+				] }),
+				/* @__PURE__ */ (0, C.jsx)("g", { children: G.map((e, t) => /* @__PURE__ */ (0, C.jsxs)(m.g, { children: [o(e.y1) ? null : /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [A ? /* @__PURE__ */ (0, C.jsx)(m.circle, {
+					r: K / G.length < 5 ? 0 : K / G.length < 20 ? 2 : 4,
+					exit: {
+						opacity: 0,
+						transition: { duration: O.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							cx: Z(e.date),
+							cy: Q(e.y1),
+							fill: i[0]
+						},
+						whileInView: {
+							opacity: 1,
+							fill: i[0],
+							transition: {
+								duration: V ? O.duration : .5,
+								delay: V ? 0 : O.duration
+							},
+							cx: Z(e.date),
+							cy: Q(e.y1)
+						}
+					},
+					initial: "initial",
+					animate: B ? "whileInView" : "initial"
+				}) : null, d ? /* @__PURE__ */ (0, C.jsx)(m.text, {
+					dy: o(e.y2) || e.y2 < e.y1 ? -8 : "1em",
+					style: {
+						textAnchor: "middle",
+						...L?.graphObjectValues || {}
+					},
+					className: y("graph-value graph-value-line-1 text-xs font-bold", R?.graphObjectValues),
+					exit: {
+						opacity: 0,
+						transition: { duration: O.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							x: Z(e.date),
+							y: $(e.y1),
+							fill: i[0]
+						},
+						whileInView: {
+							opacity: 1,
+							x: Z(e.date),
+							fill: i[0],
+							y: $(e.y1),
+							transition: {
+								duration: V ? O.duration : .5,
+								delay: V ? 0 : O.duration
+							}
+						}
+					},
+					initial: "initial",
+					animate: B ? "whileInView" : "initial",
+					children: _(e.y1, ve, M?.precision ?? 2, M?.prefix, M?.suffix, M?.locale, M?.padZeros)
+				}) : null] }), o(e.y2) ? null : /* @__PURE__ */ (0, C.jsxs)(C.Fragment, { children: [A ? /* @__PURE__ */ (0, C.jsx)(m.circle, {
+					r: K / G.length < 5 ? 0 : K / G.length < 20 ? 2 : 4,
+					exit: {
+						opacity: 0,
+						transition: { duration: O.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							cx: Z(e.date),
+							cy: $(e.y2),
+							fill: i[1]
+						},
+						whileInView: {
+							opacity: 1,
+							transition: {
+								duration: V ? O.duration : .5,
+								delay: V ? 0 : O.duration
+							},
+							fill: i[1],
+							cx: Z(e.date),
+							cy: $(e.y2)
+						}
+					},
+					initial: "initial",
+					animate: B ? "whileInView" : "initial"
+				}) : null, d ? /* @__PURE__ */ (0, C.jsx)(m.text, {
+					dy: o(e.y1) || e.y1 < e.y2 ? -8 : "1em",
+					style: {
+						textAnchor: "middle",
+						...L?.graphObjectValues || {}
+					},
+					className: y("graph-value graph-value-line-2 text-xs font-bold", R?.graphObjectValues),
+					exit: {
+						opacity: 0,
+						transition: { duration: O.duration }
+					},
+					variants: {
+						initial: {
+							opacity: 0,
+							x: Z(e.date),
+							y: $(e.y2),
+							fill: i[1]
+						},
+						whileInView: {
+							opacity: 1,
+							x: Z(e.date),
+							y: $(e.y2),
+							fill: i[1],
+							transition: {
+								duration: V ? O.duration : .5,
+								delay: V ? 0 : O.duration
+							}
+						}
+					},
+					initial: "initial",
+					animate: B ? "whileInView" : "initial",
+					children: _(e.y2, ve, N?.precision ?? 2, N?.prefix, N?.suffix, N?.locale, N?.padZeros)
+				}) : null] })] }, t)) }),
+				z.filter((e) => e.position === "after").map((e) => e.layer),
+				/* @__PURE__ */ (0, C.jsx)("rect", {
+					ref: Ee,
+					style: {
+						fill: "none",
+						pointerEvents: "all"
+					},
+					width: K,
+					height: q
+				})
+			]
+		})
+	}), H && E && Se && we ? /* @__PURE__ */ (0, C.jsx)(ie, {
+		data: H,
+		body: E,
+		xPos: Se,
+		yPos: we,
+		backgroundStyle: L?.tooltip,
+		className: R?.tooltip
+	}) : null] });
+}
+//#endregion
+//#region src/Components/Graphs/LineCharts/DualAxisLineChart/index.tsx
+function w(e) {
+	let { data: t, graphTitle: o, sources: l, graphDescription: u, height: d, width: f, footNote: p, noOfXTicks: te, dateFormat: m = "yyyy", showValues: ne = !1, padding: h, lineColors: g = [n.light.categoricalColors.colors[0], n.light.categoricalColors.colors[1]], sameAxes: _ = !1, backgroundColor: re = !1, leftMargin: ie = 80, rightMargin: ae = 80, topMargin: oe = 20, bottomMargin: se = 25, labels: v, rightLineNumberDisplayOptions: ce, leftLineNumberDisplayOptions: le, tooltip: de, highlightAreaSettings: fe = [], relativeHeight: pe, onSeriesMouseOver: y, graphID: me, graphDownload: w = !1, dataDownload: T = !1, animate: E = !1, strokeWidth: ge = 2, showDots: D = !0, language: O = "en", showColorScale: k = !0, minHeight: A = 0, colorLegendTitle: j, theme: M = "light", ariaLabel: N, noOfYTicks: P = 5, maxDate: F, minDate: I, curveType: L = "curve", styles: R, classNames: z, customLayers: _e = [], showAxisLabels: ve = !0, naLabel: ye = "NA" } = e, [B, V] = S(0), [be, xe] = S(0), H = x(null), U = x(null);
+	return b(() => {
+		let e = new ResizeObserver((e) => {
+			V(e[0].target.clientWidth || 620), xe(e[0].target.clientHeight || 480);
+		});
+		return H.current && e.observe(H.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, C.jsxs)(s, {
+		className: z?.graphContainer,
+		style: R?.graphContainer,
+		id: me,
+		ref: U,
+		"aria-label": N,
+		backgroundColor: re,
+		theme: M,
+		language: O,
+		minHeight: A,
+		width: f,
+		height: d,
+		relativeHeight: pe,
+		padding: h,
+		children: [
+			o || u || w || T ? /* @__PURE__ */ (0, C.jsx)(a, {
+				styles: {
+					title: R?.title,
+					description: R?.description
+				},
+				classNames: {
+					title: z?.title,
+					description: z?.description
+				},
+				graphTitle: o,
+				graphDescription: u,
+				width: f,
+				graphDownload: w ? U : void 0,
+				dataDownload: T ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			k && v.length > 0 ? /* @__PURE__ */ (0, C.jsx)(r, {
+				colorDomain: v,
+				colorLegendTitle: j,
+				colors: g,
+				showNAColor: !1,
+				className: z?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, C.jsxs)(c, {
+				ref: H,
+				children: [t.length === 0 && /* @__PURE__ */ (0, C.jsx)(ee, {}), B && be && t.length > 0 ? /* @__PURE__ */ (0, C.jsx)(he, {
+					data: t,
+					sameAxes: _,
+					lineColors: g,
+					width: B,
+					height: be,
+					dateFormat: m,
+					showValues: ne,
+					noOfXTicks: te ?? ue(B),
+					leftMargin: ie,
+					rightMargin: ae,
+					topMargin: oe,
+					bottomMargin: se,
+					labels: v,
+					highlightAreaSettings: fe,
+					tooltip: de,
+					onSeriesMouseOver: y,
+					animate: E === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : E || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					strokeWidth: ge,
+					showDots: D,
+					noOfYTicks: P,
+					leftLineNumberDisplayOptions: le,
+					rightLineNumberDisplayOptions: ce,
+					minDate: I,
+					maxDate: F,
+					curveType: L,
+					styles: R,
+					classNames: z,
+					customLayers: _e,
+					showAxisLabels: ve,
+					naLabel: ye
+				}) : null]
+			}),
+			l || p ? /* @__PURE__ */ (0, C.jsx)(i, {
+				styles: {
+					footnote: R?.footnote,
+					source: R?.source
+				},
+				classNames: {
+					footnote: z?.footnote,
+					source: z?.source
+				},
+				sources: l,
+				footNote: p,
+				width: f
+			}) : null
+		]
+	});
+}
+//#endregion
+export { w as t };
+
+//# sourceMappingURL=DualAxisLineChart-DzVs-ftM.js.map