@undp/data-viz 2.6.0 → 2.6.1

package/dist/MultiLineChart-CQK9Ovk8.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`),u=require(`./init-BTypmXMF.cjs`),te=require(`./linear-B93YyHf_.cjs`),d=require(`./time-B9tsaA4g.cjs`),f=require(`./proxy-DaRMphjR.cjs`),ne=require(`./use-in-view-C4EPQfwM.cjs`),re=require(`./Axis-BbfI4T5K.cjs`),ie=require(`./AxisTitle-Co2DmqOy.cjs`),ae=require(`./numberFormattingFunction-Caf5NyIo.cjs`),oe=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),se=require(`./YTicksAndGridLines-CRW_R845.cjs`),ce=require(`./ReferenceLine-Dltt-xtO.cjs`),le=require(`./Tooltip-CO_iOj_w.cjs`),ue=require(`./line-DoUnRqpS.cjs`),p=require(`./step-C_FLQezZ.cjs`),de=require(`./generateRandomString-GzIwYnol.cjs`),fe=require(`./getNoOfTicks-CwG9lMmQ.cjs`),pe=require(`./select-CZVfejpg.cjs`),me=require(`./pointer-nSSkgdlX.cjs`),m=require(`./getLineEndPoint-CahgY2dz.cjs`),he=require(`./HighlightArea-CJ2XwY67.cjs`);let h=require(`@undp/design-system-react/cn`),g=require(`react`);var ge=e.a(l.t(),1),_=t.t();function v(e){let{data:t,width:n,height:r,lineColors:i,dateFormat:a,noOfXTicks:s,labels:l,rightMargin:ee,topMargin:de,bottomMargin:fe,suffix:v,prefix:y,leftMargin:b,tooltip:_e,onSeriesMouseOver:x,showValues:S,showColorLegendAtTop:C,refValues:w,highlightAreaSettings:T,minValue:E,maxValue:D,highlightedLines:O,animate:k,rtl:A,strokeWidth:ve,showDots:ye,annotations:be,customHighlightAreaSettings:xe,yAxisTitle:j,noOfYTicks:Se,minDate:M,maxDate:N,curveType:P,styles:F,classNames:I,dimmedOpacity:L,precision:R,customLayers:Ce,dashedLines:z,dashSettings:B,labelsToBeHidden:V,revealClipId:we,locale:H,naLabel:Te,padZeros:U}=e,Ee=(0,g.useRef)(null),W=ne.t(Ee,{once:k.once,amount:k.amount}),[G,De]=(0,g.useState)(!1);(0,g.useEffect)(()=>{if(W&&!G){let e=setTimeout(()=>{De(!0)},(k.duration+.5)*1e3);return()=>clearTimeout(e)}},[W,G,k.duration]);let Oe=P===`linear`?ue.i:P===`step`?p.r:P===`stepAfter`?p.t:P===`stepBefore`?p.n:p.i,[K,ke]=(0,g.useState)(void 0),[Ae,je]=(0,g.useState)(void 0),[Me,Ne]=(0,g.useState)(void 0),q={top:de,bottom:fe,left:j?b+30:b,right:ee},Pe=(0,g.useRef)(null),J=(0,ge.default)(t.map(e=>({...e,date:c.t(`${e.date}`,a,new Date)})),[`date`],[`asc`]),Fe=J[0].y.map((e,t)=>J.map(e=>({...e,y:e.y[t]})).filter(e=>!o.t(e.y))),Ie=T.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:c.t(`${e.coordinates[0]}`,a,new Date),e.coordinates[1]===null?null:c.t(`${e.coordinates[1]}`,a,new Date)]})),Le=xe.map(e=>({...e,coordinates:e.coordinates.map((e,t)=>t%2==0?c.t(`${e}`,a,new Date):e)})),Y=n-q.left-q.right,X=r-q.top-q.bottom,Re=M?c.t(`${M}`,a,new Date):J[0].date,ze=N?c.t(`${N}`,a,new Date):J[J.length-1].date,Z=o.t(E)?Math.min(...J.map(e=>Math.min(...e.y.filter(e=>!o.t(e)))))?Math.min(...J.map(e=>Math.min(...e.y.filter(e=>!o.t(e)))))>0?0:Math.min(...J.map(e=>Math.min(...e.y.filter(e=>!o.t(e))))):0:E,Be=Math.max(...J.map(e=>Math.max(...e.y.filter(e=>!o.t(e)))))?Math.max(...J.map(e=>Math.max(...e.y.filter(e=>!o.t(e))))):0,Q=d.t().domain([Re,ze]).range([0,Y]),$=te.t().domain([o.t(E)?Z:E,o.t(D)?Be>0?Be:0:D]).range([X,0]).nice(),Ve=ue.t().x(e=>Q(e.date)).y(e=>$(e.y)).curve(Oe),He=$.ticks(Se),Ue=Q.ticks(s);return(0,g.useEffect)(()=>{pe.t(Pe.current).on(`mousemove`,e=>{let t=J[u.n(J.map(e=>e.date),Q.invert(me.t(e)[0]),0)];ke(t||J[J.length-1]),Ne(e.clientY),je(e.clientX),x?.(t||J[J.length-1])}).on(`mouseout`,()=>{ke(void 0),je(void 0),Ne(void 0)}),x?.(void 0)},[Q,J,x]),(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(f.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:Ee,children:(0,_.jsxs)(`g`,{transform:`translate(${q.left},${q.top})`,children:[(0,_.jsx)(`defs`,{children:(0,_.jsx)(`clipPath`,{id:we,children:(0,_.jsx)(f.t.rect,{x:0,y:0,height:X,variants:{initial:{width:0},whileInView:{width:Y,transition:{duration:k.duration}}},initial:`initial`,animate:W?`whileInView`:`initial`})})}),(0,_.jsx)(he.t,{areaSettings:Ie,width:Y,height:X,scale:Q,animate:k,isInView:W}),(0,_.jsx)(m.n,{areaSettings:Le,scaleX:Q,scaleY:$,animate:k,isInView:W}),(0,_.jsxs)(`g`,{children:[(0,_.jsx)(se.t,{values:He.filter(e=>e!==0),y:He.filter(e=>e!==0).map(e=>$(e)),x1:0-b,x2:Y+q.right,styles:{gridLines:F?.yAxis?.gridLines,labels:F?.yAxis?.labels},classNames:{gridLines:I?.yAxis?.gridLines,labels:I?.yAxis?.labels},suffix:v,prefix:y,labelType:`secondary`,showGridLines:!0,labelPos:`vertical`,precision:R,locale:H,padZeros:U}),(0,_.jsx)(re.t,{y1:$(Z<0?0:Z),y2:$(Z<0?0:Z),x1:0-b,x2:Y+q.right,label:ae.t(Z<0?0:Z,void 0,R,y,v,H,U),labelPos:{x:0-b,y:$(Z<0?0:Z),dx:0,dy:Be<0?`1em`:-5},classNames:{axis:I?.xAxis?.axis,label:I?.yAxis?.labels},styles:{axis:F?.xAxis?.axis,label:F?.yAxis?.labels}}),(0,_.jsx)(ie.t,{x:0-b-15,y:X/2,style:F?.yAxis?.title,className:I?.yAxis?.title,text:j,rotate90:!0})]}),(0,_.jsx)(`g`,{children:(0,_.jsx)(oe.t,{values:Ue.map(e=>c.n(e,a)),x:Ue.map(e=>Q(e)),y1:0,y2:X,styles:{gridLines:F?.xAxis?.gridLines,labels:F?.xAxis?.labels},classNames:{gridLines:(0,h.cn)(`opacity-0`,I?.xAxis?.gridLines),labels:(0,h.cn)(`fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs`,I?.xAxis?.labels)},suffix:v,prefix:y,labelType:`primary`,showGridLines:!0,precision:R,locale:H,padZeros:U})}),Ce.filter(e=>e.position===`before`).map(e=>e.layer),(0,_.jsxs)(`g`,{children:[Fe.map((e,t)=>(0,_.jsxs)(f.t.g,{exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{opacity:O&&O.indexOf(l[t])===-1?L:1},whileInView:{opacity:O&&O.indexOf(l[t])===-1?L:1,transition:{duration:k.duration}}},initial:`initial`,animate:W?`whileInView`:`initial`,children:[(0,_.jsx)(f.t.path,{style:{fill:`none`,strokeWidth:ve},clipPath:`url(#${we})`,exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{...z.length===0?{pathLength:0}:{},d:Ve(e.filter(e=>!o.t(e.y)))||``,opacity:1,stroke:i[t]},whileInView:{...z.length===0?{pathLength:1}:{},d:Ve(e.filter(e=>!o.t(e.y)))||``,opacity:1,stroke:i[t],transition:{duration:k.duration}}},strokeDasharray:z.includes(l[t])?B[t%B.length]:void 0,initial:`initial`,animate:W?`whileInView`:`initial`}),e.map((e,n)=>(0,_.jsx)(`g`,{children:o.t(e.y)?null:(0,_.jsxs)(_.Fragment,{children:[ye?(0,_.jsx)(f.t.circle,{r:Y/J.length<5?0:Y/J.length<20?2:4,exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{opacity:0,fill:i[t],cx:Q(e.date),cy:$(e.y)},whileInView:{opacity:1,fill:i[t],transition:{duration:G?k.duration:.5,delay:G?0:k.duration},cx:Q(e.date),cy:$(e.y)}},initial:`initial`,animate:W?`whileInView`:`initial`}):null,S?(0,_.jsx)(f.t.text,{dy:-8,style:{textAnchor:`middle`,...F?.graphObjectValues||{}},className:(0,h.cn)(`graph-value text-xs font-bold`,I?.graphObjectValues),exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{opacity:0,fill:i[t],x:Q(e.date),y:$(e.y)},whileInView:{opacity:1,fill:i[t],x:Q(e.date),y:$(e.y),transition:{duration:G?k.duration:.5,delay:G?0:k.duration}}},initial:`initial`,animate:W?`whileInView`:`initial`,children:ae.t(e.y,Te,R,y,v,H,U)}):null]})},n)),C||V.includes(l[t])?null:(0,_.jsx)(f.t.text,{className:`text-xs`,dx:5,dy:4,exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{opacity:0,fill:i[t],x:Q(e[e.length-1].date),y:$(e[e.length-1].y)},whileInView:{opacity:1,fill:i[t],x:Q(e[e.length-1].date),y:$(e[e.length-1].y),transition:{duration:G?k.duration:.5,delay:G?0:k.duration}}},initial:`initial`,animate:W?`whileInView`:`initial`,children:l[t]})]},l[t])),K?(0,_.jsx)(`line`,{y1:0,y2:X,x1:Q(K.date),x2:Q(K.date),className:(0,h.cn)(`undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100`,I?.mouseOverLine),style:F?.mouseOverLine}):null]}),w?.map(e=>(0,_.jsx)(ce.n,{text:e.text,color:e.color,y:$(e.value),x1:0-b,x2:Y+q.right,classNames:e.classNames,styles:e.styles,animate:k,isInView:W},e.text)),(0,_.jsx)(`g`,{children:be.map(e=>{let t=m.t({x:e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date)):0,y:e.yCoordinate?$(e.yCoordinate):0},o.t(e.connectorRadius)?3.5:e.connectorRadius),n=e.showConnector?{y1:t.y,x1:t.x,y2:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?$(e.yCoordinate):0,cx:e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date)):0,circleRadius:o.t(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,r={y:e.yCoordinate?$(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:A?0:e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:A?e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date))+(e.xOffset||0):0+(e.xOffset||0):Y+q.right-(e.xCoordinate?Q(c.t(`${e.xCoordinate}`,a,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return(0,_.jsx)(m.r,{color:e.color,connectorsSettings:n,labelSettings:r,text:e.text,classNames:e.classNames,styles:e.styles,animate:k,isInView:W},e.text)})}),Ce.filter(e=>e.position===`after`).map(e=>e.layer),(0,_.jsx)(`rect`,{ref:Pe,style:{fill:`none`,pointerEvents:`all`},width:Y,height:X})]})}),K&&_e&&Ae&&Me?(0,_.jsx)(le.t,{data:K,body:_e,xPos:Ae,yPos:Me,backgroundStyle:F?.tooltip,className:I?.tooltip}):null]})}function y(e){let{data:t,graphTitle:o,lineColors:c=n.Colors.light.categoricalColors.colors,sources:l,graphDescription:u,height:te,width:d,footNote:f,noOfXTicks:ne=10,dateFormat:re=`yyyy`,labels:ie,padding:ae,showValues:oe=!1,backgroundColor:se=!1,leftMargin:ce=30,rightMargin:le=50,topMargin:ue=20,bottomMargin:p=25,tooltip:pe,relativeHeight:me,onSeriesMouseOver:m,showColorLegendAtTop:he=!1,refValues:h=[],highlightAreaSettings:ge=[],graphID:y,minValue:b,maxValue:_e,highlightedLines:x,graphDownload:S=!1,dataDownload:C=!1,animate:w=!1,language:T=`en`,colorLegendTitle:E,minHeight:D=0,strokeWidth:O=2,showDots:k=!0,annotations:A=[],customHighlightAreaSettings:ve=[],theme:ye=`light`,ariaLabel:be,yAxisTitle:xe,noOfYTicks:j=5,minDate:Se,maxDate:M,curveType:N=`curve`,styles:P,classNames:F,dimmedOpacity:I=.3,customLayers:L=[],dashedLines:R=[],dashSettings:Ce=[`5 5`],labelsToBeHidden:z=[],showColorScale:B=!0,numberDisplayOptions:V,naLabel:we=`NA`}=e,[H,Te]=(0,g.useState)(0),[U,Ee]=(0,g.useState)(0),W=(0,g.useRef)(null),G=(0,g.useRef)(null);return(0,g.useEffect)(()=>{let e=new ResizeObserver(e=>{Te(e[0].target.clientWidth||620),Ee(e[0].target.clientHeight||480)});return W.current&&e.observe(W.current),()=>e.disconnect()},[]),(0,_.jsxs)(s.n,{className:F?.graphContainer,style:P?.graphContainer,id:y,ref:G,"aria-label":be,backgroundColor:se,theme:ye,language:T,minHeight:D,width:d,height:te,relativeHeight:me,padding:ae,children:[o||u||S||C?(0,_.jsx)(a.GraphHeader,{styles:{title:P?.title,description:P?.description},classNames:{title:F?.title,description:F?.description},graphTitle:o,graphDescription:u,width:d,graphDownload:S?G:void 0,dataDownload:C?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,he&&B&&t.length>0?(0,_.jsx)(r.ColorLegend,{colorDomain:ie,colorLegendTitle:E,labelsToBeHidden:z,colors:c,showNAColor:!1,className:F?.colorLegend}):null,(0,_.jsxs)(s.t,{ref:W,children:[t.length===0&&(0,_.jsx)(ee.t,{}),H&&U&&t.length>0?(0,_.jsx)(v,{data:t,lineColors:c,width:H,height:U,dateFormat:re,noOfXTicks:ne??fe.t(H),leftMargin:ce,rightMargin:le,topMargin:ue,bottomMargin:p,labels:ie,tooltip:pe,onSeriesMouseOver:m,showColorLegendAtTop:B?he:!0,showValues:oe,highlightAreaSettings:ge,refValues:h,minValue:b,maxValue:_e,highlightedLines:x,animate:w===!0?{duration:.5,once:!0,amount:.5}:w||{duration:0,once:!0,amount:0},rtl:T===`he`||T===`ar`,strokeWidth:O,showDots:k,annotations:A,customHighlightAreaSettings:ve,yAxisTitle:xe,noOfYTicks:j,minDate:Se,maxDate:M,curveType:N,styles:P,classNames:F,dimmedOpacity:I,customLayers:L,labelsToBeHidden:z,dashedLines:R,dashSettings:Ce,revealClipId:de.t(8),naLabel:we,locale:V?.locale||`en`,padZeros:V?.padZeros||!1,suffix:V?.suffix||``,prefix:V?.prefix||``,precision:V?.precision??2}):null]}),l||f?(0,_.jsx)(i.GraphFooter,{styles:{footnote:P?.footnote,source:P?.source},classNames:{footnote:F?.footnote,source:F?.source},sources:l,footNote:f,width:d}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});
+//# sourceMappingURL=MultiLineChart-CQK9Ovk8.cjs.map

package/dist/MultiLineChart-CQK9Ovk8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLineChart-CQK9Ovk8.cjs","names":[],"sources":["../src/Components/Graphs/LineCharts/MultiLineChart/Graph.tsx","../src/Components/Graphs/LineCharts/MultiLineChart/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 { Annotation } from '@/Components/Elements/Annotations';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YTicksAndGridLines } from '@/Components/Elements/Axes/YTicksAndGridLines';\nimport { HighlightArea } from '@/Components/Elements/HighlightArea';\nimport { CustomArea } from '@/Components/Elements/HighlightArea/customArea';\nimport { RefLineY } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  MultiLineChartDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getLineEndPoint } from '@/Utils/getLineEndPoint';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: MultiLineChartDataType[];\n  lineColors: string[];\n  width: number;\n  height: number;\n  dateFormat: string;\n  noOfXTicks: number;\n  labels: (string | number)[];\n  topMargin: number;\n  bottomMargin: number;\n  leftMargin: number;\n  rightMargin: number;\n  suffix: string;\n  prefix: string;\n  showValues: boolean;\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  showColorLegendAtTop: boolean;\n  highlightAreaSettings: HighlightAreaSettingsDataType[];\n  refValues: ReferenceDataType[];\n  maxValue?: number;\n  minValue?: number;\n  highlightedLines?: (string | number)[];\n  animate: AnimateDataType;\n  rtl: boolean;\n  strokeWidth: number;\n  showDots: boolean;\n  annotations: AnnotationSettingsDataType[];\n  customHighlightAreaSettings: CustomHighlightAreaSettingsDataType[];\n  yAxisTitle?: string;\n  noOfYTicks: number;\n  minDate?: string | number;\n  maxDate?: string | number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  dimmedOpacity: number;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  dashedLines: (string | number)[];\n  dashSettings: string[];\n  labelsToBeHidden: (string | number)[];\n  revealClipId: string;\n  locale: string;\n  naLabel: string;\n  padZeros: boolean;\n}\n\ninterface FormattedDataType {\n  y: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColors,\n    dateFormat,\n    noOfXTicks,\n    labels,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    suffix,\n    prefix,\n    leftMargin,\n    tooltip,\n    onSeriesMouseOver,\n    showValues,\n    showColorLegendAtTop,\n    refValues,\n    highlightAreaSettings,\n    minValue,\n    maxValue,\n    highlightedLines,\n    animate,\n    rtl,\n    strokeWidth,\n    showDots,\n    annotations,\n    customHighlightAreaSettings,\n    yAxisTitle,\n    noOfYTicks,\n    minDate,\n    maxDate,\n    curveType,\n    styles,\n    classNames,\n    dimmedOpacity,\n    precision,\n    customLayers,\n    dashedLines,\n    dashSettings,\n    labelsToBeHidden,\n    revealClipId,\n    locale,\n    naLabel,\n    padZeros,\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: yAxisTitle ? leftMargin + 30 : leftMargin,\n    right: rightMargin,\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 dataArray = dataFormatted[0].y.map((_d, i) => {\n    return dataFormatted\n      .map((el) => ({\n        ...el,\n        y: el.y[i],\n      }))\n      .filter((el) => !checkIfNullOrUndefined(el.y));\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 customHighlightAreaSettingsFormatted = customHighlightAreaSettings.map((d) => ({\n    ...d,\n    coordinates: d.coordinates.map((el, j) =>\n      j % 2 === 0 ? parse(`${el}`, dateFormat, new Date()) : (el as number),\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 minParam: number = checkIfNullOrUndefined(minValue)\n    ? Math.min(\n        ...dataFormatted.map((d) =>\n          Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n        ),\n      )\n      ? Math.min(\n          ...dataFormatted.map((d) =>\n            Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n          ),\n        ) > 0\n        ? 0\n        : Math.min(\n            ...dataFormatted.map((d) =>\n              Math.min(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n            ),\n          )\n      : 0\n    : (minValue as number);\n  const maxParam: number = Math.max(\n    ...dataFormatted.map((d) =>\n      Math.max(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n    ),\n  )\n    ? Math.max(\n        ...dataFormatted.map((d) =>\n          Math.max(...(d.y.filter((el) => !checkIfNullOrUndefined(el)) as number[])),\n        ),\n      )\n    : 0;\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear()\n    .domain([\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const lineShape = line<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y((d) => y(d.y))\n    .curve(curve);\n\n  const yTicks = y.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      setEventY(event.clientY);\n      setEventX(event.clientX);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\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          <defs>\n            <clipPath id={revealClipId}>\n              <motion.rect\n                x={0}\n                y={0}\n                height={graphHeight}\n                variants={{\n                  initial: { width: 0 },\n                  whileInView: {\n                    width: graphWidth,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n              />\n            </clipPath>\n          </defs>\n          <HighlightArea\n            areaSettings={highlightAreaSettingsFormatted}\n            width={graphWidth}\n            height={graphHeight}\n            scale={x}\n            animate={animate}\n            isInView={isInView}\n          />\n          <CustomArea\n            areaSettings={customHighlightAreaSettingsFormatted}\n            scaleX={x}\n            scaleY={y}\n            animate={animate}\n            isInView={isInView}\n          />\n          <g>\n            <YTicksAndGridLines\n              values={yTicks.filter((d) => d !== 0)}\n              y={yTicks.filter((d) => d !== 0).map((d) => y(d))}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              styles={{\n                gridLines: styles?.yAxis?.gridLines,\n                labels: styles?.yAxis?.labels,\n              }}\n              classNames={{\n                gridLines: classNames?.yAxis?.gridLines,\n                labels: classNames?.yAxis?.labels,\n              }}\n              suffix={suffix}\n              prefix={prefix}\n              labelType='secondary'\n              showGridLines\n              labelPos='vertical'\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n            <Axis\n              y1={y(minParam < 0 ? 0 : minParam)}\n              y2={y(minParam < 0 ? 0 : minParam)}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              label={numberFormattingFunction(\n                minParam < 0 ? 0 : minParam,\n                undefined,\n                precision,\n                prefix,\n                suffix,\n                locale,\n                padZeros,\n              )}\n              labelPos={{\n                x: 0 - leftMargin,\n                y: y(minParam < 0 ? 0 : minParam),\n                dx: 0,\n                dy: maxParam < 0 ? '1em' : -5,\n              }}\n              classNames={{\n                axis: classNames?.xAxis?.axis,\n                label: classNames?.yAxis?.labels,\n              }}\n              styles={{\n                axis: styles?.xAxis?.axis,\n                label: styles?.yAxis?.labels,\n              }}\n            />\n            <AxisTitle\n              x={0 - leftMargin - 15}\n              y={graphHeight / 2}\n              style={styles?.yAxis?.title}\n              className={classNames?.yAxis?.title}\n              text={yAxisTitle}\n              rotate90\n            />\n          </g>\n          <g>\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              suffix={suffix}\n              prefix={prefix}\n              labelType='primary'\n              showGridLines\n              precision={precision}\n              locale={locale}\n              padZeros={padZeros}\n            />\n          </g>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            {dataArray.map((d, i) => (\n              <motion.g\n                key={labels[i]}\n                exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                variants={{\n                  initial: {\n                    opacity: highlightedLines\n                      ? highlightedLines.indexOf(labels[i]) !== -1\n                        ? 1\n                        : dimmedOpacity\n                      : 1,\n                  },\n                  whileInView: {\n                    opacity: highlightedLines\n                      ? highlightedLines.indexOf(labels[i]) !== -1\n                        ? 1\n                        : dimmedOpacity\n                      : 1,\n                    transition: { duration: animate.duration },\n                  },\n                }}\n                initial='initial'\n                animate={isInView ? 'whileInView' : 'initial'}\n              >\n                <motion.path\n                  style={{\n                    fill: 'none',\n                    strokeWidth,\n                  }}\n                  clipPath={`url(#${revealClipId})`}\n                  exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                  variants={{\n                    initial: {\n                      ...(dashedLines.length === 0 ? { pathLength: 0 } : {}),\n                      d:\n                        lineShape(\n                          d.filter((el): el is FormattedDataType => !checkIfNullOrUndefined(el.y)),\n                        ) || '',\n                      opacity: 1,\n                      stroke: lineColors[i],\n                    },\n                    whileInView: {\n                      ...(dashedLines.length === 0 ? { pathLength: 1 } : {}),\n                      d:\n                        lineShape(\n                          d.filter((el): el is FormattedDataType => !checkIfNullOrUndefined(el.y)),\n                        ) || '',\n                      opacity: 1,\n                      stroke: lineColors[i],\n                      transition: { duration: animate.duration },\n                    },\n                  }}\n                  strokeDasharray={\n                    dashedLines.includes(labels[i])\n                      ? dashSettings[i % dashSettings.length]\n                      : undefined\n                  }\n                  initial='initial'\n                  animate={isInView ? 'whileInView' : 'initial'}\n                />\n                {d.map((el, j) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  <g key={j}>\n                    {!checkIfNullOrUndefined(el.y) ? (\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                                fill: lineColors[i],\n                                cx: x(el.date),\n                                cy: y(el.y as number),\n                              },\n                              whileInView: {\n                                opacity: 1,\n                                fill: lineColors[i],\n                                transition: {\n                                  duration: hasAnimatedOnce ? animate.duration : 0.5,\n                                  delay: hasAnimatedOnce ? 0 : animate.duration,\n                                },\n                                cx: x(el.date),\n                                cy: y(el.y as number),\n                              },\n                            }}\n                            initial='initial'\n                            animate={isInView ? 'whileInView' : 'initial'}\n                          />\n                        ) : null}\n                        {showValues ? (\n                          <motion.text\n                            dy={-8}\n                            style={{\n                              textAnchor: 'middle',\n                              ...(styles?.graphObjectValues || {}),\n                            }}\n                            className={cn(\n                              'graph-value text-xs font-bold',\n                              classNames?.graphObjectValues,\n                            )}\n                            exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                            variants={{\n                              initial: {\n                                opacity: 0,\n                                fill: lineColors[i],\n                                x: x(el.date),\n                                y: y(el.y as number),\n                              },\n                              whileInView: {\n                                opacity: 1,\n                                fill: lineColors[i],\n                                x: x(el.date),\n                                y: y(el.y 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                              el.y,\n                              naLabel,\n                              precision,\n                              prefix,\n                              suffix,\n                              locale,\n                              padZeros,\n                            )}\n                          </motion.text>\n                        ) : null}\n                      </>\n                    ) : null}\n                  </g>\n                ))}\n                {showColorLegendAtTop || labelsToBeHidden.includes(labels[i]) ? null : (\n                  <motion.text\n                    className='text-xs'\n                    dx={5}\n                    dy={4}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    variants={{\n                      initial: {\n                        opacity: 0,\n                        fill: lineColors[i],\n                        x: x(d[d.length - 1].date),\n                        y: y(d[d.length - 1].y as number),\n                      },\n                      whileInView: {\n                        opacity: 1,\n                        fill: lineColors[i],\n                        x: x(d[d.length - 1].date),\n                        y: y(d[d.length - 1].y 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                    {labels[i]}\n                  </motion.text>\n                )}\n              </motion.g>\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          {refValues?.map((el) => (\n            <RefLineY\n              key={el.text}\n              text={el.text}\n              color={el.color}\n              y={y(el.value as number)}\n              x1={0 - leftMargin}\n              x2={graphWidth + margin.right}\n              classNames={el.classNames}\n              styles={el.styles}\n              animate={animate}\n              isInView={isInView}\n            />\n          ))}\n          <g>\n            {annotations.map((d) => {\n              const endPoints = getLineEndPoint(\n                {\n                  x: d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0),\n                  y: d.yCoordinate\n                    ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                    : 0 + (d.yOffset || 0) - 8,\n                },\n                {\n                  x: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                  y: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                },\n                checkIfNullOrUndefined(d.connectorRadius) ? 3.5 : (d.connectorRadius as number),\n              );\n              const connectorSettings = d.showConnector\n                ? {\n                    y1: endPoints.y,\n                    x1: endPoints.x,\n                    y2: d.yCoordinate\n                      ? y(d.yCoordinate as number) + (d.yOffset || 0)\n                      : 0 + (d.yOffset || 0),\n                    x2: d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0),\n                    cy: d.yCoordinate ? y(d.yCoordinate as number) : 0,\n                    cx: d.xCoordinate ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) : 0,\n                    circleRadius: checkIfNullOrUndefined(d.connectorRadius)\n                      ? 3.5\n                      : (d.connectorRadius as number),\n                    strokeWidth: d.showConnector === true ? 2 : Math.min(d.showConnector || 0, 1),\n                  }\n                : undefined;\n              const labelSettings = {\n                y: d.yCoordinate\n                  ? y(d.yCoordinate as number) + (d.yOffset || 0) - 8\n                  : 0 + (d.yOffset || 0) - 8,\n                x: rtl\n                  ? 0\n                  : d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0),\n                width: rtl\n                  ? d.xCoordinate\n                    ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                    : 0 + (d.xOffset || 0)\n                  : graphWidth +\n                    margin.right -\n                    (d.xCoordinate\n                      ? x(parse(`${d.xCoordinate}`, dateFormat, new Date())) + (d.xOffset || 0)\n                      : 0 + (d.xOffset || 0)),\n                maxWidth: d.maxWidth,\n                fontWeight: d.fontWeight,\n                align: d.align,\n              };\n              return (\n                <Annotation\n                  key={d.text}\n                  color={d.color}\n                  connectorsSettings={connectorSettings}\n                  labelSettings={labelSettings}\n                  text={d.text}\n                  classNames={d.classNames}\n                  styles={d.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              );\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  AnnotationSettingsDataType,\n  ClassNameObject,\n  CurveTypes,\n  CustomHighlightAreaSettingsDataType,\n  CustomLayerDataType,\n  HighlightAreaSettingsDataType,\n  Languages,\n  MultiLineChartDataType,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { generateRandomString } from '@/Utils/generateRandomString';\nimport { getNoOfTicks } from '@/Utils/getNoOfTicks';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: MultiLineChartDataType[];\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 of the lines */\n  lineColors?: string[];\n  /** Toggle the visibility of color legend between the top of the graphs and next to the line */\n  showColorLegendAtTop?: boolean;\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  /** Array of labels of line which are dashed */\n  dashedLines?: (string | number)[];\n  /** Array of dash settings that define the dash style for the dashed line. If the length of the array is less than length of dashedLines then it loop around. */\n  dashSettings?: string[];\n  /** Defines which labels are hidden from the color scale and the graph */\n  labelsToBeHidden?: (string | 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 for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\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  /** Toggle visibility of color scale. */\n  showColorScale?: 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  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Title for the Y-axis */\n  yAxisTitle?: string;\n  /** Labels for the lines  */\n  labels: (string | number)[];\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedLines?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\n  /** Annotations on the chart */\n  annotations?: AnnotationSettingsDataType[];\n  /** Highlighted area(square) on the chart  */\n  highlightAreaSettings?: HighlightAreaSettingsDataType[];\n  /** Highlighted area(custom shape) on the chart  */\n  customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: 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 MultiLineChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    lineColors = Colors.light.categoricalColors.colors,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    noOfXTicks = 10,\n    dateFormat = 'yyyy',\n    labels,\n    padding,\n    showValues = false,\n    backgroundColor = false,\n    leftMargin = 30,\n    rightMargin = 50,\n    topMargin = 20,\n    bottomMargin = 25,\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    showColorLegendAtTop = false,\n    refValues = [],\n    highlightAreaSettings = [],\n    graphID,\n    minValue,\n    maxValue,\n    highlightedLines,\n    graphDownload = false,\n    dataDownload = false,\n    animate = false,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    strokeWidth = 2,\n    showDots = true,\n    annotations = [],\n    customHighlightAreaSettings = [],\n    theme = 'light',\n    ariaLabel,\n    yAxisTitle,\n    noOfYTicks = 5,\n    minDate,\n    maxDate,\n    curveType = 'curve',\n    styles,\n    classNames,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    dashedLines = [],\n    dashSettings = ['5 5'],\n    labelsToBeHidden = [],\n    showColorScale = true,\n    numberDisplayOptions,\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      {showColorLegendAtTop && showColorScale && data.length > 0 ? (\n        <ColorLegend\n          colorDomain={labels}\n          colorLegendTitle={colorLegendTitle}\n          labelsToBeHidden={labelsToBeHidden}\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            lineColors={lineColors}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            noOfXTicks={noOfXTicks ?? getNoOfTicks(svgWidth)}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            labels={labels}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            showColorLegendAtTop={showColorScale ? showColorLegendAtTop : true}\n            showValues={showValues}\n            highlightAreaSettings={highlightAreaSettings}\n            refValues={refValues}\n            minValue={minValue}\n            maxValue={maxValue}\n            highlightedLines={highlightedLines}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            rtl={language === 'he' || language === 'ar'}\n            strokeWidth={strokeWidth}\n            showDots={showDots}\n            annotations={annotations}\n            customHighlightAreaSettings={customHighlightAreaSettings}\n            yAxisTitle={yAxisTitle}\n            noOfYTicks={noOfYTicks}\n            minDate={minDate}\n            maxDate={maxDate}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            dimmedOpacity={dimmedOpacity}\n            customLayers={customLayers}\n            labelsToBeHidden={labelsToBeHidden}\n            dashedLines={dashedLines}\n            dashSettings={dashSettings}\n            revealClipId={generateRandomString(8)}\n            naLabel={naLabel}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\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/MultiLineChart.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./compiler-runtime-oPPev21o.cjs"),S=require("react"),b=require("./parse-xYI9yrvL.cjs"),Te=require("@undp/design-system-react/cn"),Ke=require("./index-Cno4Q0YE.cjs"),We=require("./numberFormattingFunction-u2iNHL_c.cjs"),Qe=require("./Tooltip-DwUFLDrj.cjs"),C=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Pe=require("./customArea-BCGIYDQa.cjs"),_e=require("./AxisTitle-CyFFbdNU.cjs"),ti=require("./Axis-DY7jsk1Y.cjs"),ei=require("./XTicksAndGridLines-BO6KJc8d.cjs"),ii=require("./ReferenceLine-CxITVT1K.cjs"),ni=require("./YTicksAndGridLines-C7glLI5b.cjs"),oi=require("./index-BaXzoD4r.cjs"),si=require("./time-CkcKbhwe.cjs"),ri=require("./linear-CgUCbw9F.cjs"),Ye=require("./line-DaEMhXmx.cjs"),De=require("./step-BZ3C8QFW.cjs"),ai=require("./select-Bnfk0lJx.cjs"),Vt=require("./proxy-QMeVVqam.cjs"),li=require("./init-DU0ybBc_.cjs"),ci=require("./pointer-Dkq5NV1q.cjs"),ui=require("./use-in-view-DjR_gqJP.cjs"),di=require("./GraphFooter.cjs"),fi=require("./GraphHeader.cjs"),xi=require("./ColorLegend.cjs"),mi=require("./Colors.cjs"),pi=require("./EmptyState-BoaUUuo6.cjs"),hi=require("./generateRandomString-B5zBiJzS.cjs"),Xe=require("./GraphContainer-gaG9TSy4.cjs"),gi=require("./getNoOfTicks-C_1CFXv_.cjs");function yi(i){const t=s.compilerRuntimeExports.c(155),{data:y,width:st,height:Ht,lineColors:E,dateFormat:r,noOfXTicks:se,labels:w,rightMargin:rt,topMargin:Ft,bottomMargin:Ut,suffix:L,prefix:H,leftMargin:N,tooltip:bt,onSeriesMouseOver:Gt,showValues:he,showColorLegendAtTop:ge,refValues:Ct,highlightAreaSettings:Et,minValue:F,maxValue:at,highlightedLines:Lt,animate:o,rtl:T,strokeWidth:re,showDots:ae,annotations:At,customHighlightAreaSettings:kt,yAxisTitle:St,noOfYTicks:ye,minDate:le,maxDate:ce,curveType:lt,styles:v,classNames:j,dimmedOpacity:ue,precision:D,customLayers:I,dashedLines:Pt,dashSettings:Wt,labelsToBeHidden:de,revealClipId:Nt,locale:U,naLabel:fe,padZeros:z}=i,g=S.useRef(null);let x;t[0]!==o.amount||t[1]!==o.once?(x={once:o.once,amount:o.amount},t[0]=o.amount,t[1]=o.once,t[2]=x):x=t[2];const d=ui.useInView(g,x),[O,Yt]=S.useState(!1);let J,K;t[3]!==o.duration||t[4]!==O||t[5]!==d?(J=()=>{if(d&&!O){const n=setTimeout(()=>{Yt(!0)},(o.duration+.5)*1e3);return()=>clearTimeout(n)}},K=[d,O,o.duration],t[3]=o.duration,t[4]=O,t[5]=d,t[6]=J,t[7]=K):(J=t[6],K=t[7]),S.useEffect(J,K);const ve=lt==="linear"?Ye.curveLinear:lt==="step"?De.curveStep:lt==="stepAfter"?De.stepAfter:lt==="stepBefore"?De.stepBefore:De.monotoneX,[f,xe]=S.useState(void 0),[q,Xt]=S.useState(void 0),[ct,Bt]=S.useState(void 0),Tt=St?N+30:N;let ut;t[8]!==Ut||t[9]!==rt||t[10]!==Tt||t[11]!==Ft?(ut={top:Ft,bottom:Ut,left:Tt,right:rt},t[8]=Ut,t[9]=rt,t[10]=Tt,t[11]=Ft,t[12]=ut):ut=t[12];const p=ut,dt=S.useRef(null);let ft;t[13]!==r?(ft=n=>({...n,date:b.parse(`${n.date}`,r,new Date)}),t[13]=r,t[14]=ft):ft=t[14];const u=Ke.orderBy(y.map(ft),["date"],["asc"]),Zt=u[0].y.map((n,e)=>u.map(m=>({...m,y:m.y[e]})).filter(Vi));let xt;if(t[15]!==r||t[16]!==Et){let n;t[18]!==r?(n=e=>({...e,coordinates:[e.coordinates[0]===null?null:b.parse(`${e.coordinates[0]}`,r,new Date),e.coordinates[1]===null?null:b.parse(`${e.coordinates[1]}`,r,new Date)]}),t[18]=r,t[19]=n):n=t[19],xt=Et.map(n),t[15]=r,t[16]=Et,t[17]=xt}else xt=t[17];const mt=xt;let pt;if(t[20]!==kt||t[21]!==r){let n;t[23]!==r?(n=e=>({...e,coordinates:e.coordinates.map((m,ot)=>ot%2===0?b.parse(`${m}`,r,new Date):m)}),t[23]=r,t[24]=n):n=t[24],pt=kt.map(n),t[20]=kt,t[21]=r,t[22]=pt}else pt=t[22];const zt=pt,c=st-p.left-p.right,h=Ht-p.top-p.bottom,Q=le?b.parse(`${le}`,r,new Date):u[0].date,me=ce?b.parse(`${ce}`,r,new Date):u[u.length-1].date,R=C.checkIfNullOrUndefined(F)?Math.min(...u.map(Mi))?Math.min(...u.map(Ii))>0?0:Math.min(...u.map(Ti)):0:F,_=Math.max(...u.map(Si))?Math.max(...u.map(Ai)):0,a=si.time().domain([Q,me]).range([0,c]);let ht;t[25]!==R||t[26]!==F?(ht=C.checkIfNullOrUndefined(F)?R:F,t[25]=R,t[26]=F,t[27]=ht):ht=t[27];let tt;t[28]!==_||t[29]!==at?(tt=C.checkIfNullOrUndefined(at)?_>0?_:0:at,t[28]=_,t[29]=at,t[30]=tt):tt=t[30];const l=ri.linear().domain([ht,tt]).range([h,0]).nice(),Jt=Ye.line().x(n=>a(n.date)).y(n=>l(n.y)).curve(ve),Kt=l.ticks(ye),Qt=a.ticks(se);S.useEffect(()=>{const n=m=>{const ot=u[li.bisectCenter(u.map(Li),a.invert(ci.pointer(m)[0]),0)];xe(ot||u[u.length-1]),Bt(m.clientY),Xt(m.clientX),Gt?.(ot||u[u.length-1])},e=()=>{xe(void 0),Xt(void 0),Bt(void 0)};ai.select(dt.current).on("mousemove",n).on("mouseout",e),Gt?.(void 0)},[a,u,Gt]);let gt;t[31]===Symbol.for("react.memo_cache_sentinel")?(gt={width:0},t[31]=gt):gt=t[31];let M;t[32]!==o.duration?(M={duration:o.duration},t[32]=o.duration,t[33]=M):M=t[33];let G;t[34]!==c||t[35]!==M?(G={initial:gt,whileInView:{width:c,transition:M}},t[34]=c,t[35]=M,t[36]=G):G=t[36];const yt=d?"whileInView":"initial";let P;t[37]!==h||t[38]!==G||t[39]!==yt?(P=s.jsxRuntimeExports.jsx(Vt.motion.rect,{x:0,y:0,height:h,variants:G,initial:"initial",animate:yt}),t[37]=h,t[38]=G,t[39]=yt,t[40]=P):P=t[40];let et;t[41]!==Nt||t[42]!==P?(et=s.jsxRuntimeExports.jsx("defs",{children:s.jsxRuntimeExports.jsx("clipPath",{id:Nt,children:P})}),t[41]=Nt,t[42]=P,t[43]=et):et=t[43];let vt;t[44]!==o||t[45]!==h||t[46]!==c||t[47]!==mt||t[48]!==d||t[49]!==a?(vt=s.jsxRuntimeExports.jsx(oi.HighlightArea,{areaSettings:mt,width:c,height:h,scale:a,animate:o,isInView:d}),t[44]=o,t[45]=h,t[46]=c,t[47]=mt,t[48]=d,t[49]=a,t[50]=vt):vt=t[50];const jt=v?.yAxis?.gridLines,W=v?.yAxis?.labels;let $;t[51]!==jt||t[52]!==W?($={gridLines:jt,labels:W},t[51]=jt,t[52]=W,t[53]=$):$=t[53];const Dt=j?.yAxis?.gridLines,it=j?.yAxis?.labels;let _t;t[54]!==Dt||t[55]!==it?(_t={gridLines:Dt,labels:it},t[54]=Dt,t[55]=it,t[56]=_t):_t=t[56];const wt=l(R<0?0:R),pe=l(R<0?0:R),It=0-N,te=c+p.right,Ot=R<0?0:R;let V;t[57]!==U||t[58]!==z||t[59]!==D||t[60]!==H||t[61]!==L||t[62]!==Ot?(V=We.numberFormattingFunction(Ot,void 0,D,H,L,U,z),t[57]=U,t[58]=z,t[59]=D,t[60]=H,t[61]=L,t[62]=Ot,t[63]=V):V=t[63];const qt=0-N,Mt=l(R<0?0:R),Y=_<0?"1em":-5;let A;t[64]!==qt||t[65]!==Mt||t[66]!==Y?(A={x:qt,y:Mt,dx:0,dy:Y},t[64]=qt,t[65]=Mt,t[66]=Y,t[67]=A):A=t[67];const X=j?.xAxis?.axis,B=j?.yAxis?.labels;let k;t[68]!==X||t[69]!==B?(k={axis:X,label:B},t[68]=X,t[69]=B,t[70]=k):k=t[70];const Z=v?.xAxis?.axis,Rt=v?.yAxis?.labels;let nt;t[71]!==Z||t[72]!==Rt?(nt={axis:Z,label:Rt},t[71]=Z,t[72]=Rt,t[73]=nt):nt=t[73];let $t;t[74]!==wt||t[75]!==pe||t[76]!==It||t[77]!==te||t[78]!==V||t[79]!==A||t[80]!==k||t[81]!==nt?($t=s.jsxRuntimeExports.jsx(ti.Axis,{y1:wt,y2:pe,x1:It,x2:te,label:V,labelPos:A,classNames:k,styles:nt}),t[74]=wt,t[75]=pe,t[76]=It,t[77]=te,t[78]=V,t[79]=A,t[80]=k,t[81]=nt,t[82]=$t):$t=t[82];const Ie=0-N-15,qe=h/2,Me=v?.yAxis?.title,$e=j?.yAxis?.title;let je;t[83]!==Ie||t[84]!==qe||t[85]!==Me||t[86]!==$e||t[87]!==St?(je=s.jsxRuntimeExports.jsx(_e.AxisTitle,{x:Ie,y:qe,style:Me,className:$e,text:St,rotate90:!0}),t[83]=Ie,t[84]=qe,t[85]=Me,t[86]=$e,t[87]=St,t[88]=je):je=t[88];let we;t[89]!==r?(we=n=>b.format(n,r),t[89]=r,t[90]=we):we=t[90];const Be=Qt.map(we),Ze=Qt.map(n=>a(n)),Ve=v?.xAxis?.gridLines,He=v?.xAxis?.labels;let Oe;t[91]!==Ve||t[92]!==He?(Oe={gridLines:Ve,labels:He},t[91]=Ve,t[92]=He,t[93]=Oe):Oe=t[93];const Fe=j?.xAxis?.gridLines;let ee;t[94]!==Fe?(ee=Te.cn("opacity-0",Fe),t[94]=Fe,t[95]=ee):ee=t[95];const Ue=j?.xAxis?.labels;let ie;t[96]!==Ue?(ie=Te.cn("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",Ue),t[96]=Ue,t[97]=ie):ie=t[97];let Re;t[98]!==ee||t[99]!==ie?(Re={gridLines:ee,labels:ie},t[98]=ee,t[99]=ie,t[100]=Re):Re=t[100];let be;t[101]!==I?(be=I.filter(bi).map(Ri),t[101]=I,t[102]=be):be=t[102];const Ge=Zt.map((n,e)=>s.jsxRuntimeExports.jsxs(Vt.motion.g,{exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:Lt?Lt.indexOf(w[e])!==-1?1:ue:1},whileInView:{opacity:Lt?Lt.indexOf(w[e])!==-1?1:ue:1,transition:{duration:o.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:[s.jsxRuntimeExports.jsx(Vt.motion.path,{style:{fill:"none",strokeWidth:re},clipPath:`url(#${Nt})`,exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{...Pt.length===0?{pathLength:0}:{},d:Jt(n.filter(Oi))||"",opacity:1,stroke:E[e]},whileInView:{...Pt.length===0?{pathLength:1}:{},d:Jt(n.filter(wi))||"",opacity:1,stroke:E[e],transition:{duration:o.duration}}},strokeDasharray:Pt.includes(w[e])?Wt[e%Wt.length]:void 0,initial:"initial",animate:d?"whileInView":"initial"}),n.map((m,ot)=>s.jsxRuntimeExports.jsx("g",{children:C.checkIfNullOrUndefined(m.y)?null:s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[ae?s.jsxRuntimeExports.jsx(Vt.motion.circle,{r:c/u.length<5?0:c/u.length<20?2:4,exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:0,fill:E[e],cx:a(m.date),cy:l(m.y)},whileInView:{opacity:1,fill:E[e],transition:{duration:O?o.duration:.5,delay:O?0:o.duration},cx:a(m.date),cy:l(m.y)}},initial:"initial",animate:d?"whileInView":"initial"}):null,he?s.jsxRuntimeExports.jsx(Vt.motion.text,{dy:-8,style:{textAnchor:"middle",...v?.graphObjectValues||{}},className:Te.cn("graph-value text-xs font-bold",j?.graphObjectValues),exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:0,fill:E[e],x:a(m.date),y:l(m.y)},whileInView:{opacity:1,fill:E[e],x:a(m.date),y:l(m.y),transition:{duration:O?o.duration:.5,delay:O?0:o.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:We.numberFormattingFunction(m.y,fe,D,H,L,U,z)}):null]})},ot)),ge||de.includes(w[e])?null:s.jsxRuntimeExports.jsx(Vt.motion.text,{className:"text-xs",dx:5,dy:4,exit:{opacity:0,transition:{duration:o.duration}},variants:{initial:{opacity:0,fill:E[e],x:a(n[n.length-1].date),y:l(n[n.length-1].y)},whileInView:{opacity:1,fill:E[e],x:a(n[n.length-1].date),y:l(n[n.length-1].y),transition:{duration:O?o.duration:.5,delay:O?0:o.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:w[e]})]},w[e]));let ne;t[103]!==j?.mouseOverLine||t[104]!==h||t[105]!==f||t[106]!==v?.mouseOverLine||t[107]!==a?(ne=f?s.jsxRuntimeExports.jsx("line",{y1:0,y2:h,x1:a(f.date),x2:a(f.date),className:Te.cn("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",j?.mouseOverLine),style:v?.mouseOverLine}):null,t[103]=j?.mouseOverLine,t[104]=h,t[105]=f,t[106]=v?.mouseOverLine,t[107]=a,t[108]=ne):ne=t[108];let Ce;t[109]!==Ge||t[110]!==ne?(Ce=s.jsxRuntimeExports.jsxs("g",{children:[Ge,ne]}),t[109]=Ge,t[110]=ne,t[111]=Ce):Ce=t[111];let Ee;t[112]!==o||t[113]!==c||t[114]!==d||t[115]!==N||t[116]!==p.right||t[117]!==Ct||t[118]!==l?(Ee=Ct?s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:Ct.map((n,e)=>s.jsxRuntimeExports.jsx(ii.RefLineY,{text:n.text,color:n.color,y:l(n.value),x1:0-N,x2:c+p.right,classNames:n.classNames,styles:n.styles,animate:o,isInView:d},e))}):null,t[112]=o,t[113]=c,t[114]=d,t[115]=N,t[116]=p.right,t[117]=Ct,t[118]=l,t[119]=Ee):Ee=t[119];let oe;if(t[120]!==o||t[121]!==At||t[122]!==r||t[123]!==c||t[124]!==d||t[125]!==p.right||t[126]!==T||t[127]!==a||t[128]!==l){let n;t[130]!==o||t[131]!==r||t[132]!==c||t[133]!==d||t[134]!==p.right||t[135]!==T||t[136]!==a||t[137]!==l?(n=(e,m)=>{const ot=Pe.getLineEndPoint({x:e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?l(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date)):0,y:e.yCoordinate?l(e.yCoordinate):0},C.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),ze=e.showConnector?{y1:ot.y,x1:ot.x,y2:e.yCoordinate?l(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?l(e.yCoordinate):0,cx:e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date)):0,circleRadius:C.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,Je={y:e.yCoordinate?l(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:T?0:e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:T?e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0):c+p.right-(e.xCoordinate?a(b.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return s.jsxRuntimeExports.jsx(Pe.Annotation,{color:e.color,connectorsSettings:ze,labelSettings:Je,text:e.text,classNames:e.classNames,styles:e.styles,animate:o,isInView:d},m)},t[130]=o,t[131]=r,t[132]=c,t[133]=d,t[134]=p.right,t[135]=T,t[136]=a,t[137]=l,t[138]=n):n=t[138],oe=At.map(n),t[120]=o,t[121]=At,t[122]=r,t[123]=c,t[124]=d,t[125]=p.right,t[126]=T,t[127]=a,t[128]=l,t[129]=oe}else oe=t[129];let Le;t[139]!==oe?(Le=s.jsxRuntimeExports.jsx("g",{children:oe}),t[139]=oe,t[140]=Le):Le=t[140];let Ae;t[141]!==I?(Ae=I.filter(ji).map(vi),t[141]=I,t[142]=Ae):Ae=t[142];let ke;t[143]===Symbol.for("react.memo_cache_sentinel")?(ke={fill:"none",pointerEvents:"all"},t[143]=ke):ke=t[143];let Se;t[144]!==dt||t[145]!==h||t[146]!==c?(Se=s.jsxRuntimeExports.jsx("rect",{ref:dt,style:ke,width:c,height:h}),t[144]=dt,t[145]=h,t[146]=c,t[147]=Se):Se=t[147];let Ne;return t[148]!==j?.tooltip||t[149]!==q||t[150]!==ct||t[151]!==f||t[152]!==v?.tooltip||t[153]!==bt?(Ne=f&&bt&&q&&ct?s.jsxRuntimeExports.jsx(Qe.Tooltip,{data:f,body:bt,xPos:q,yPos:ct,backgroundStyle:v?.tooltip,className:j?.tooltip}):null,t[148]=j?.tooltip,t[149]=q,t[150]=ct,t[151]=f,t[152]=v?.tooltip,t[153]=bt,t[154]=Ne):Ne=t[154],s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(Vt.motion.svg,{width:`${st}px`,height:`${Ht}px`,viewBox:`0 0 ${st} ${Ht}`,direction:"ltr",ref:g,children:s.jsxRuntimeExports.jsxs("g",{transform:`translate(${p.left},${p.top})`,children:[et,vt,s.jsxRuntimeExports.jsx(Pe.CustomArea,{areaSettings:zt,scaleX:a,scaleY:l,animate:o,isInView:d}),s.jsxRuntimeExports.jsxs("g",{children:[s.jsxRuntimeExports.jsx(ni.YTicksAndGridLines,{values:Kt.filter(Ei),y:Kt.filter(Ci).map(n=>l(n)),x1:0-N,x2:c+p.right,styles:$,classNames:_t,suffix:L,prefix:H,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:D,locale:U,padZeros:z}),$t,je]}),s.jsxRuntimeExports.jsx("g",{children:s.jsxRuntimeExports.jsx(ei.XTicksAndGridLines,{values:Be,x:Ze,y1:0,y2:h,styles:Oe,classNames:Re,suffix:L,prefix:H,labelType:"primary",showGridLines:!0,precision:D,locale:U,padZeros:z})}),be,Ce,Ee,Le,Ae,Se]})}),Ne]})}function vi(i){return i.layer}function ji(i){return i.position==="after"}function wi(i){return!C.checkIfNullOrUndefined(i.y)}function Oi(i){return!C.checkIfNullOrUndefined(i.y)}function Ri(i){return i.layer}function bi(i){return i.position==="before"}function Ci(i){return i!==0}function Ei(i){return i!==0}function Li(i){return i.date}function Ai(i){return Math.max(...i.y.filter(ki))}function ki(i){return!C.checkIfNullOrUndefined(i)}function Si(i){return Math.max(...i.y.filter(Ni))}function Ni(i){return!C.checkIfNullOrUndefined(i)}function Ti(i){return Math.min(...i.y.filter(Di))}function Di(i){return!C.checkIfNullOrUndefined(i)}function Ii(i){return Math.min(...i.y.filter(qi))}function qi(i){return!C.checkIfNullOrUndefined(i)}function Mi(i){return Math.min(...i.y.filter($i))}function $i(i){return!C.checkIfNullOrUndefined(i)}function Vi(i){return!C.checkIfNullOrUndefined(i.y)}function Hi(i){const t=s.compilerRuntimeExports.c(114),{data:y,graphTitle:st,lineColors:Ht,sources:E,graphDescription:r,height:se,width:w,footNote:rt,noOfXTicks:Ft,dateFormat:Ut,labels:L,padding:H,showValues:N,backgroundColor:bt,leftMargin:Gt,rightMargin:he,topMargin:ge,bottomMargin:Ct,tooltip:Et,relativeHeight:F,onSeriesMouseOver:at,showColorLegendAtTop:Lt,refValues:o,highlightAreaSettings:T,graphID:re,minValue:ae,maxValue:At,highlightedLines:kt,graphDownload:St,dataDownload:ye,animate:le,language:ce,colorLegendTitle:lt,minHeight:v,strokeWidth:j,showDots:ue,annotations:D,customHighlightAreaSettings:I,theme:Pt,ariaLabel:Wt,yAxisTitle:de,noOfYTicks:Nt,minDate:U,maxDate:fe,curveType:z,styles:g,classNames:x,dimmedOpacity:d,customLayers:O,dashedLines:Yt,dashSettings:J,labelsToBeHidden:K,showColorScale:ve,numberDisplayOptions:f,naLabel:xe}=i,q=Ht===void 0?mi.Colors.light.categoricalColors.colors:Ht,Xt=Ft===void 0?10:Ft,ct=Ut===void 0?"yyyy":Ut,Bt=N===void 0?!1:N,Tt=bt===void 0?!1:bt,ut=Gt===void 0?30:Gt,p=he===void 0?50:he,dt=ge===void 0?20:ge,ft=Ct===void 0?25:Ct,u=Lt===void 0?!1:Lt;let Zt;t[0]!==o?(Zt=o===void 0?[]:o,t[0]=o,t[1]=Zt):Zt=t[1];const xt=Zt;let mt;t[2]!==T?(mt=T===void 0?[]:T,t[2]=T,t[3]=mt):mt=t[3];const pt=mt,zt=St===void 0?!1:St,c=ye===void 0?!1:ye,h=le===void 0?!1:le,Q=ce===void 0?"en":ce,me=v===void 0?0:v,R=j===void 0?2:j,_=ue===void 0?!0:ue;let a;t[4]!==D?(a=D===void 0?[]:D,t[4]=D,t[5]=a):a=t[5];const ht=a;let tt;t[6]!==I?(tt=I===void 0?[]:I,t[6]=I,t[7]=tt):tt=t[7];const l=tt,Jt=Pt===void 0?"light":Pt,Kt=Nt===void 0?5:Nt,Qt=z===void 0?"curve":z,gt=d===void 0?.3:d;let M;t[8]!==O?(M=O===void 0?[]:O,t[8]=O,t[9]=M):M=t[9];const G=M;let yt;t[10]!==Yt?(yt=Yt===void 0?[]:Yt,t[10]=Yt,t[11]=yt):yt=t[11];const P=yt;let et;t[12]!==J?(et=J===void 0?["5 5"]:J,t[12]=J,t[13]=et):et=t[13];const vt=et;let jt;t[14]!==K?(jt=K===void 0?[]:K,t[14]=K,t[15]=jt):jt=t[15];const W=jt,$=ve===void 0?!0:ve,Dt=xe===void 0?"NA":xe,[it,_t]=S.useState(0),[wt,pe]=S.useState(0),It=S.useRef(null),te=S.useRef(null);let Ot,V;t[16]===Symbol.for("react.memo_cache_sentinel")?(Ot=()=>{const nt=new ResizeObserver($t=>{_t($t[0].target.clientWidth||620),pe($t[0].target.clientHeight||480)});return It.current&&nt.observe(It.current),()=>nt.disconnect()},V=[],t[16]=Ot,t[17]=V):(Ot=t[16],V=t[17]),S.useEffect(Ot,V);const qt=x?.graphContainer,Mt=g?.graphContainer;let Y;t[18]!==x?.description||t[19]!==x?.title||t[20]!==y||t[21]!==c||t[22]!==r||t[23]!==zt||t[24]!==st||t[25]!==g?.description||t[26]!==g?.title||t[27]!==w?(Y=st||r||zt||c?s.jsxRuntimeExports.jsx(fi.GraphHeader,{styles:{title:g?.title,description:g?.description},classNames:{title:x?.title,description:x?.description},graphTitle:st,graphDescription:r,width:w,graphDownload:zt?te:void 0,dataDownload:c?y.map(Wi).filter(Pi).length>0?y.map(Gi).filter(Ui):y.filter(Fi):null}):null,t[18]=x?.description,t[19]=x?.title,t[20]=y,t[21]=c,t[22]=r,t[23]=zt,t[24]=st,t[25]=g?.description,t[26]=g?.title,t[27]=w,t[28]=Y):Y=t[28];let A;t[29]!==x?.colorLegend||t[30]!==lt||t[31]!==y.length||t[32]!==L||t[33]!==W||t[34]!==q||t[35]!==u||t[36]!==$?(A=u&&$&&y.length>0?s.jsxRuntimeExports.jsx(xi.ColorLegend,{colorDomain:L,colorLegendTitle:lt,labelsToBeHidden:W,colors:q,showNAColor:!1,className:x?.colorLegend}):null,t[29]=x?.colorLegend,t[30]=lt,t[31]=y.length,t[32]=L,t[33]=W,t[34]=q,t[35]=u,t[36]=$,t[37]=A):A=t[37];let X;t[38]!==y.length?(X=y.length===0&&s.jsxRuntimeExports.jsx(pi.EmptyState,{}),t[38]=y.length,t[39]=X):X=t[39];let B;t[40]!==h||t[41]!==ht||t[42]!==ft||t[43]!==x||t[44]!==Qt||t[45]!==l||t[46]!==G||t[47]!==vt||t[48]!==P||t[49]!==y||t[50]!==ct||t[51]!==gt||t[52]!==pt||t[53]!==kt||t[54]!==L||t[55]!==W||t[56]!==Q||t[57]!==ut||t[58]!==q||t[59]!==fe||t[60]!==At||t[61]!==U||t[62]!==ae||t[63]!==Dt||t[64]!==Xt||t[65]!==Kt||t[66]!==f?.locale||t[67]!==f?.padZeros||t[68]!==f?.precision||t[69]!==f?.prefix||t[70]!==f?.suffix||t[71]!==at||t[72]!==xt||t[73]!==p||t[74]!==u||t[75]!==$||t[76]!==_||t[77]!==Bt||t[78]!==R||t[79]!==g||t[80]!==wt||t[81]!==it||t[82]!==Et||t[83]!==dt||t[84]!==de?(B=it&&wt&&y.length>0?s.jsxRuntimeExports.jsx(yi,{data:y,lineColors:q,width:it,height:wt,dateFormat:ct,noOfXTicks:Xt??gi.getNoOfTicks(it),leftMargin:ut,rightMargin:p,topMargin:dt,bottomMargin:ft,labels:L,tooltip:Et,onSeriesMouseOver:at,showColorLegendAtTop:$?u:!0,showValues:Bt,highlightAreaSettings:pt,refValues:xt,minValue:ae,maxValue:At,highlightedLines:kt,animate:h===!0?{duration:.5,once:!0,amount:.5}:h||{duration:0,once:!0,amount:0},rtl:Q==="he"||Q==="ar",strokeWidth:R,showDots:_,annotations:ht,customHighlightAreaSettings:l,yAxisTitle:de,noOfYTicks:Kt,minDate:U,maxDate:fe,curveType:Qt,styles:g,classNames:x,dimmedOpacity:gt,customLayers:G,labelsToBeHidden:W,dashedLines:P,dashSettings:vt,revealClipId:hi.generateRandomString(8),naLabel:Dt,locale:f?.locale||"en",padZeros:f?.padZeros||!1,suffix:f?.suffix||"",prefix:f?.prefix||"",precision:f?.precision??2}):null,t[40]=h,t[41]=ht,t[42]=ft,t[43]=x,t[44]=Qt,t[45]=l,t[46]=G,t[47]=vt,t[48]=P,t[49]=y,t[50]=ct,t[51]=gt,t[52]=pt,t[53]=kt,t[54]=L,t[55]=W,t[56]=Q,t[57]=ut,t[58]=q,t[59]=fe,t[60]=At,t[61]=U,t[62]=ae,t[63]=Dt,t[64]=Xt,t[65]=Kt,t[66]=f?.locale,t[67]=f?.padZeros,t[68]=f?.precision,t[69]=f?.prefix,t[70]=f?.suffix,t[71]=at,t[72]=xt,t[73]=p,t[74]=u,t[75]=$,t[76]=_,t[77]=Bt,t[78]=R,t[79]=g,t[80]=wt,t[81]=it,t[82]=Et,t[83]=dt,t[84]=de,t[85]=B):B=t[85];let k;t[86]!==X||t[87]!==B?(k=s.jsxRuntimeExports.jsxs(Xe.GraphArea,{ref:It,children:[X,B]}),t[86]=X,t[87]=B,t[88]=k):k=t[88];let Z;t[89]!==x?.footnote||t[90]!==x?.source||t[91]!==rt||t[92]!==E||t[93]!==g?.footnote||t[94]!==g?.source||t[95]!==w?(Z=E||rt?s.jsxRuntimeExports.jsx(di.GraphFooter,{styles:{footnote:g?.footnote,source:g?.source},classNames:{footnote:x?.footnote,source:x?.source},sources:E,footNote:rt,width:w}):null,t[89]=x?.footnote,t[90]=x?.source,t[91]=rt,t[92]=E,t[93]=g?.footnote,t[94]=g?.source,t[95]=w,t[96]=Z):Z=t[96];let Rt;return t[97]!==Wt||t[98]!==Tt||t[99]!==re||t[100]!==se||t[101]!==Q||t[102]!==me||t[103]!==H||t[104]!==F||t[105]!==qt||t[106]!==Mt||t[107]!==Y||t[108]!==A||t[109]!==k||t[110]!==Z||t[111]!==Jt||t[112]!==w?(Rt=s.jsxRuntimeExports.jsxs(Xe.GraphContainer,{className:qt,style:Mt,id:re,ref:te,"aria-label":Wt,backgroundColor:Tt,theme:Jt,language:Q,minHeight:me,width:w,height:se,relativeHeight:F,padding:H,children:[Y,A,k,Z]}),t[97]=Wt,t[98]=Tt,t[99]=re,t[100]=se,t[101]=Q,t[102]=me,t[103]=H,t[104]=F,t[105]=qt,t[106]=Mt,t[107]=Y,t[108]=A,t[109]=k,t[110]=Z,t[111]=Jt,t[112]=w,t[113]=Rt):Rt=t[113],Rt}function Fi(i){return i!==void 0}function Ui(i){return i!==void 0}function Gi(i){return i.data}function Pi(i){return i!==void 0}function Wi(i){return i.data}exports.MultiLineChart=Hi;
-//# sourceMappingURL=MultiLineChart.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./MultiLineChart-CQK9Ovk8.cjs`);exports.MultiLineChart=e.t;

package/dist/MultiLineChart.d.ts

@@ -1,255 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AnimateDataType {
-    duration: number;
-    once: boolean;
-    amount: 'some' | 'all' | number;
-}
-
-declare interface AnnotationSettingsDataType {
-    text: string;
-    maxWidth?: number;
-    xCoordinate?: number | string;
-    yCoordinate?: number | string;
-    xOffset?: number;
-    yOffset?: number;
-    align?: 'center' | 'left' | 'right';
-    color?: string;
-    fontWeight?: 'regular' | 'bold' | 'medium';
-    showConnector?: boolean | number;
-    connectorRadius?: number;
-    classNames?: {
-        connector?: string;
-        text?: string;
-    };
-    styles?: {
-        connector?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-}
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
-
-declare interface CustomHighlightAreaSettingsDataType {
-    coordinates: (number | string)[];
-    closePath?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-    color?: string;
-    strokeWidth?: number;
-}
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-declare interface HighlightAreaSettingsDataType {
-    coordinates: [number | string | null, number | string | null];
-    style?: React.CSSProperties;
-    className?: string;
-    color?: string;
-    strokeWidth?: number;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-export declare function MultiLineChart(props: Props): JSX.Element;
-
-declare interface MultiLineChartDataType {
-    date: number | string;
-    y: (number | null)[];
-    data?: object;
-}
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: MultiLineChartDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Array of colors of the lines */
-    lineColors?: string[];
-    /** Toggle the visibility of color legend between the top of the graphs and next to the line */
-    showColorLegendAtTop?: boolean;
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Array of labels of line which are dashed */
-    dashedLines?: (string | number)[];
-    /** Array of dash settings that define the dash style for the dashed line. If the length of the array is less than length of dashedLines then it loop around. */
-    dashSettings?: string[];
-    /** Defines which labels are hidden from the color scale and the graph */
-    labelsToBeHidden?: (string | number)[];
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Maximum value for the chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Reference values for comparison */
-    refValues?: ReferenceDataType[];
-    /** Maximum value of the date for the chart */
-    maxDate?: string | number;
-    /** Minimum value of the date for the chart */
-    minDate?: string | number;
-    /** No. of ticks on the x-axis  */
-    noOfXTicks?: number;
-    /** No. of ticks on the y-axis  */
-    noOfYTicks?: number;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Toggle visibility of dots on the line */
-    showDots?: boolean;
-    /** Toggle visibility of color scale. */
-    showColorScale?: boolean;
-    /** Stroke width of the line */
-    strokeWidth?: number;
-    /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */
-    animate?: boolean | AnimateDataType;
-    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
-    dateFormat?: string;
-    /** Title for the Y-axis */
-    yAxisTitle?: string;
-    /** Labels for the lines  */
-    labels: (string | number)[];
-    /** Data points to highlight. Use the label value from data to highlight the data point */
-    highlightedLines?: (string | number)[];
-    /** Defines the opacity of the non-highlighted data */
-    dimmedOpacity?: number;
-    /** Annotations on the chart */
-    annotations?: AnnotationSettingsDataType[];
-    /** Highlighted area(square) on the chart  */
-    highlightAreaSettings?: HighlightAreaSettingsDataType[];
-    /** Highlighted area(custom shape) on the chart  */
-    customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
-    /** Curve type for the line */
-    curveType?: CurveTypes;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Defines how “NA” values should be displayed/labelled in the graph */
-    naLabel?: string;
-    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
-    customLayers?: CustomLayerDataType[];
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** 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 */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface ReferenceDataType {
-    value: number | null;
-    text: string;
-    color?: string;
-    styles?: {
-        line?: React.CSSProperties;
-        text?: React.CSSProperties;
-    };
-    classNames?: {
-        line?: string;
-        text?: string;
-    };
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/LineCharts/MultiLineChart/index'
+export {}