@undp/data-viz 2.6.0 → 2.6.1

package/dist/ButterflyChart-BBWBZXEc.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Icons-DXw7FqJ_.cjs`),r=require(`./Colors.cjs`),i=require(`./ColorLegend.cjs`),a=require(`./GraphFooter.cjs`),ee=require(`./GraphHeader.cjs`),o=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),s=require(`./GraphContainer-7xAPK4Tb.cjs`),c=require(`./parse-C718o4YM.cjs`),te=require(`./EmptyState-Bq7ZJmZB.cjs`),ne=require(`./ensureCompleteData-CqLz7Btq.cjs`),re=require(`./getSliderMarks-DCEGtxIl.cjs`),l=require(`./linear-B93YyHf_.cjs`),ie=require(`./band-BWpW41la.cjs`),u=require(`./fast-deep-equal-DN3ilkVq.cjs`),d=require(`./proxy-DaRMphjR.cjs`),f=require(`./AnimatePresence-CapU-Sxd.cjs`),ae=require(`./use-in-view-C4EPQfwM.cjs`),p=require(`./Axis-BbfI4T5K.cjs`),m=require(`./numberFormattingFunction-Caf5NyIo.cjs`),oe=require(`./XTicksAndGridLines-8v1W02Pd.cjs`),se=require(`./YAxesLabels-DKRDxuHA.cjs`),ce=require(`./DetailsModal-CtGqGcX9.cjs`),le=require(`./ReferenceLine-Dltt-xtO.cjs`),ue=require(`./Tooltip-CO_iOj_w.cjs`);let h=require(`@undp/design-system-react/cn`),g=require(`react`),de=require(`@undp/design-system-react/SliderUI`);var _=e.a(u.t(),1),v=t.t();function y(e){let{data:t,width:n,height:r,barColors:i,centerGap:a,refValues:ee,maxValue:o,minValue:s,showValues:c,axisTitles:te,rightMargin:ne,leftMargin:re,topMargin:u,bottomMargin:de,tooltip:y,onSeriesMouseOver:b,barPadding:fe,truncateBy:pe,onSeriesMouseClick:x,showTicks:S,suffix:C,prefix:w,resetSelectionOnDoubleClick:me,detailsOnClick:T,styles:E,classNames:D,noOfTicks:O,animate:k,precision:A,customLayers:j,minValueLeftBar:M,minValueRightBar:N,naLabel:P,hideAxisLine:F,locale:I,padZeros:L}=e,R=(0,g.useRef)(null),z=ae.t(R,{once:k.once,amount:k.amount}),[B,V]=(0,g.useState)(void 0),[H,U]=(0,g.useState)(void 0),[he,W]=(0,g.useState)(void 0),[ge,G]=(0,g.useState)(void 0),K={top:u,bottom:de,left:re,right:ne},q=n-K.left-K.right,J=r-K.top-K.bottom,Y=t.map((e,t)=>({...e,id:`${t}`})),X=ie.t().domain(Y.map(e=>`${e.id}`)).range([J,0]).paddingInner(fe),Z=l.t().domain([s,o]).range([0,(q-a)/2]).nice(),_e=Z.ticks(O),Q=l.t().domain([s,o]).range([(q-a)/2,0]).nice(),$=Q.ticks(O);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(d.t.svg,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,ref:R,children:(0,v.jsxs)(`g`,{transform:`translate(${K.left},${K.top})`,children:[j.filter(e=>e.position===`before`).map(e=>e.layer),(0,v.jsxs)(`g`,{transform:`translate(0,0)`,children:[S?(0,v.jsx)(oe.t,{values:$.filter(e=>e!==0),x:$.filter(e=>e!==0).map(e=>Q(e)),y1:0-u,y2:J+K.bottom,styles:{gridLines:E?.xAxis?.gridLines,labels:E?.xAxis?.labels},classNames:{gridLines:D?.xAxis?.gridLines,labels:D?.xAxis?.labels},suffix:C,prefix:w,labelType:`secondary`,showGridLines:!0,leftLabel:!0,precision:A,padZeros:L,locale:I}):null,(0,v.jsxs)(f.t,{children:[Y.map(e=>(0,v.jsxs)(d.t.g,{className:`undp-viz-g-with-hover`,opacity:.85,onMouseEnter:t=>{V(e),G(t.clientY),W(t.clientX),b?.(e)},onClick:()=>{(x||T)&&((0,_.default)(H,e)&&me?(U(void 0),x?.(void 0)):(U(e),x?.(e)))},onMouseMove:t=>{V(e),G(t.clientY),W(t.clientX)},onMouseLeave:()=>{V(void 0),W(void 0),G(void 0),b?.(void 0)},children:[e.leftBar?(0,v.jsx)(d.t.rect,{y:X(e.id),style:{fill:i[0]},height:X.bandwidth(),variants:{initial:{x:Q(0),width:0},whileInView:{x:e.leftBar<0?Q(0):Q(e.leftBar),width:e.leftBar<0?Q(e.leftBar)-Q(0):Q(0)-Q(e.leftBar),transition:{duration:k.duration}}},initial:`initial`,animate:z?`whileInView`:`initial`,exit:{x:Q(0),width:0,transition:{duration:k.duration}}}):null,c?(0,v.jsx)(d.t.text,{y:X(e.id)+X.bandwidth()/2,style:{textAnchor:e.leftBar&&e.leftBar>0?`end`:`start`,...E?.graphObjectValues||{}},dx:e.leftBar&&e.leftBar>0?-5:5,dy:`0.33em`,className:(0,h.cn)(`graph-value text-sm`,D?.graphObjectValues),exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{x:Q(0),opacity:0,fill:i[0]},whileInView:{x:e.leftBar?Q(e.leftBar):Q(M<0?0:M),opacity:1,fill:i[0],transition:{duration:k.duration}}},initial:`initial`,animate:z?`whileInView`:`initial`,children:m.t(e.leftBar,P,A,w,C,I,L)}):null]},e.label)),(0,v.jsx)(p.t,{hideAxisLine:F,y1:-2.5,y2:J+K.bottom,x1:Q(M<0?0:M),x2:Q(M<0?0:M),classNames:{axis:D?.yAxis?.axis},styles:{axis:E?.yAxis?.axis}}),ee?.map(e=>(0,v.jsx)(le.t,{text:e.text,color:e.color,x:Q(e.value),y1:0-K.top,y2:J+K.bottom,textSide:`left`,classNames:e.classNames,styles:e.styles,animate:k,isInView:z},e.text))]})]}),(0,v.jsxs)(`g`,{transform:`translate(${(q+a)/2},0)`,children:[S?(0,v.jsx)(oe.t,{values:_e.filter(e=>e!==0),x:_e.filter(e=>e!==0).map(e=>Z(e)),y1:0-u,y2:J+K.bottom,styles:{gridLines:E?.xAxis?.gridLines,labels:E?.xAxis?.labels},classNames:{gridLines:D?.xAxis?.gridLines,labels:D?.xAxis?.labels},suffix:C,prefix:w,labelType:`secondary`,showGridLines:!0,precision:A,padZeros:L,locale:I}):null,(0,v.jsxs)(f.t,{children:[Y.map(e=>(0,v.jsxs)(d.t.g,{className:`undp-viz-g-with-hover`,opacity:.85,onMouseEnter:t=>{V(e),G(t.clientY),W(t.clientX),b?.(e)},onClick:()=>{(x||T)&&((0,_.default)(H,e)&&me?(U(void 0),x?.(void 0)):(U(e),x?.(e)))},onMouseMove:t=>{V(e),G(t.clientY),W(t.clientX)},onMouseLeave:()=>{V(void 0),W(void 0),G(void 0),b?.(void 0)},children:[e.rightBar?(0,v.jsx)(d.t.rect,{y:X(e.id),style:{fill:i[1]},height:X.bandwidth(),exit:{x:Z(0),width:0,transition:{duration:k.duration}},variants:{initial:{x:Z(0),width:0},whileInView:{x:e.rightBar>=0?Z(0):Z(e.rightBar),width:e.rightBar>=0?Z(e.rightBar)-Z(0):Z(0)-Z(e.rightBar),transition:{duration:k.duration}}},initial:`initial`,animate:z?`whileInView`:`initial`}):null,c?(0,v.jsx)(d.t.text,{y:X(e.id)+X.bandwidth()/2,style:{textAnchor:e.rightBar&&e.rightBar<0?`end`:`start`,...E?.graphObjectValues||{}},className:(0,h.cn)(`graph-value text-sm`,D?.graphObjectValues),dx:e.rightBar&&e.rightBar<0?-5:5,dy:`0.33em`,exit:{opacity:0,transition:{duration:k.duration}},variants:{initial:{x:Z(0),opacity:0,fill:i[1]},whileInView:{x:e.rightBar?Z(e.rightBar):Z(N<0?0:N),opacity:1,fill:i[1],transition:{duration:k.duration}}},initial:`initial`,animate:z?`whileInView`:`initial`,children:m.t(e.rightBar,P,A,w,C,I,L)}):null]},e.label)),(0,v.jsx)(p.t,{hideAxisLine:F,y1:-2.5,y2:J+K.bottom,x1:Z(N<0?0:N),x2:Z(N<0?0:N),classNames:{axis:D?.yAxis?.axis},styles:{axis:E?.yAxis?.axis}}),ee?.map(e=>(0,v.jsx)(le.t,{text:e.text,color:e.color,x:Z(e.value),y1:0-K.top,y2:J+K.bottom,textSide:`right`,classNames:e.classNames,styles:e.styles,animate:k,isInView:z},e.text))]})]}),(0,v.jsx)(f.t,{children:(0,v.jsx)(d.t.g,{transform:`translate(${q/2},0)`,children:Y.map(e=>(0,v.jsx)(se.t,{value:`${e.label}`.length<pe?`${e.label}`:`${`${e.label}`.substring(0,pe)}...`,y:X(`${e.id}`),x:0-a/2,width:a,height:X.bandwidth(),alignment:`center`,style:E?.yAxis?.labels,className:D?.yAxis?.labels,animate:k,isInView:z},e.id))})}),(0,v.jsxs)(`g`,{transform:`translate(0,${J})`,children:[(0,v.jsx)(`text`,{style:{fill:i[0],textAnchor:`end`,...E?.yAxis?.title},className:(0,h.cn)(`text-base`,D?.yAxis?.title),x:q/2-a/2,y:0,dx:-5,dy:20,children:te[0]}),(0,v.jsx)(`text`,{style:{fill:i[1],textAnchor:`start`,...E?.yAxis?.title},className:(0,h.cn)(`text-base`,D?.yAxis?.title),x:q/2+a/2,y:0,dx:5,dy:20,children:te[1]})]}),j.filter(e=>e.position===`after`).map(e=>e.layer)]})}),B&&y&&he&&ge?(0,v.jsx)(ue.t,{data:B,body:y,xPos:he,yPos:ge,backgroundStyle:E?.tooltip,className:D?.tooltip}):null,T&&H!==void 0?(0,v.jsx)(ce.t,{body:T,data:H,setData:U,className:D?.modal}):null]})}function b(e,t,n,r){let i=e.map(e=>e[t]).filter(e=>!o.t(e));return{min:o.t(n)?Math.min(...i)>=0?0:Math.min(...i):n,max:o.t(r)?Math.max(...i)<0?0:Math.max(...i):r}}function fe(e){let{data:t,graphTitle:o,sources:l,graphDescription:ie,height:u,width:d,footNote:f,padding:ae,barColors:p=[r.Colors.light.categoricalColors.colors[0],r.Colors.light.categoricalColors.colors[1]],backgroundColor:m=!1,leftMargin:oe=20,rightMargin:se=20,topMargin:ce=25,bottomMargin:le=30,rightBarTitle:ue=`Right bar graph`,leftBarTitle:h=`Left bar graph`,tooltip:_,relativeHeight:fe,onSeriesMouseOver:pe,graphID:x,barPadding:S=.25,truncateBy:C=999,onSeriesMouseClick:w,centerGap:me=100,showValues:T=!0,maxValue:E,minValue:D,refValues:O=[],showTicks:k=!0,showColorScale:A=!1,graphDownload:j=!1,dataDownload:M=!1,language:N=`en`,colorLegendTitle:P,minHeight:F=0,theme:I=`light`,ariaLabel:L,resetSelectionOnDoubleClick:R=!0,detailsOnClick:z,styles:B,classNames:V,noOfTicks:H=5,animate:U=!1,customLayers:he=[],timeline:W={enabled:!1,autoplay:!1,showOnlyActiveDate:!0},naLabel:ge=`NA`,hideAxisLine:G=!1,numberDisplayOptions:K}=e,[q,J]=(0,g.useState)(0),[Y,X]=(0,g.useState)(0),[Z,_e]=(0,g.useState)(W.autoplay),Q=(0,g.useMemo)(()=>{let e=[...new Set(t.filter(e=>e.date).map(e=>c.t(`${e.date}`,W.dateFormat||`yyyy`,new Date).getTime()))];return e.sort((e,t)=>e-t),e},[t,W.dateFormat]),[$,ve]=(0,g.useState)(W.autoplay?0:Q.length-1),ye=(0,g.useRef)(null),be=(0,g.useRef)(null);(0,g.useEffect)(()=>{let e=new ResizeObserver(e=>{J(e[0].target.clientWidth||620),X(e[0].target.clientHeight||480)});return ye.current&&e.observe(ye.current),()=>e.disconnect()},[]),(0,g.useEffect)(()=>{let e=setInterval(()=>{ve(e=>e<Q.length-1?e+1:0)},(W.speed||2)*1e3);return Z||clearInterval(e),()=>clearInterval(e)},[Q,Z,W.speed]);let xe=re.t(Q,$,W.showOnlyActiveDate,W.dateFormat||`yyyy`);return(0,v.jsxs)(s.n,{className:V?.graphContainer,style:B?.graphContainer,id:x,ref:be,"aria-label":L,backgroundColor:m,theme:I,language:N,minHeight:F,width:d,height:u,relativeHeight:fe,padding:ae,children:[o||ie||j||M?(0,v.jsx)(ee.GraphHeader,{styles:{title:B?.title,description:B?.description},classNames:{title:V?.title,description:V?.description},graphTitle:o,graphDescription:ie,width:d,graphDownload:j?be:void 0,dataDownload:M?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,W.enabled&&Q.length>0&&xe?(0,v.jsxs)(`div`,{className:`flex gap-6 items-center`,dir:`ltr`,children:[(0,v.jsx)(`button`,{type:`button`,onClick:()=>{_e(!Z)},className:`p-0 border-0 cursor-pointer bg-transparent`,"aria-label":Z?`Click to pause animation`:`Click to play animation`,children:Z?(0,v.jsx)(n.l,{}):(0,v.jsx)(n.u,{})}),(0,v.jsx)(de.SliderUI,{min:Q[0],max:Q[Q.length-1],marks:xe,step:null,defaultValue:Q[Q.length-1],value:Q[$],onChangeComplete:e=>{ve(Q.indexOf(e))},onChange:e=>{ve(Q.indexOf(e))},"aria-label":`Time slider. Use arrow keys to adjust selected time period.`})]}):null,A&&t.length>0?(0,v.jsx)(i.ColorLegend,{colorLegendTitle:P,colorDomain:[h,ue],colors:p,showNAColor:!1,className:V?.colorLegend}):null,(0,v.jsxs)(s.t,{ref:ye,children:[t.length===0&&(0,v.jsx)(te.t,{}),q&&Y&&t.length>0?(0,v.jsx)(y,{hideAxisLine:G,data:ne.r(t,W.dateFormat||`yyyy`).filter(e=>W.enabled?`${e.date}`===c.n(new Date(Q[$]),W.dateFormat||`yyyy`):e),barColors:p,width:q,centerGap:me,height:Y,truncateBy:C,leftMargin:oe,rightMargin:se,topMargin:ce,bottomMargin:le,axisTitles:[h,ue],tooltip:_,onSeriesMouseOver:pe,barPadding:S,refValues:O,maxValue:Math.max(b(t,`leftBar`,D,E).max,b(t,`rightBar`,D,E).max),minValue:Math.min(b(t,`leftBar`,D,E).min,b(t,`rightBar`,D,E).min),minValueLeftBar:b(t,`leftBar`,D,E).min,minValueRightBar:b(t,`rightBar`,D,E).min,showValues:T,onSeriesMouseClick:w,showTicks:k,resetSelectionOnDoubleClick:R,detailsOnClick:z,styles:B,classNames:V,noOfTicks:H,animate:U===!0?{duration:.5,once:!0,amount:.5}:U||{duration:0,once:!0,amount:0},customLayers:he,naLabel:ge,locale:K?.locale||`en`,padZeros:K?.padZeros||!1,suffix:K?.suffix||``,prefix:K?.prefix||``,precision:K?.precision??2}):null]}),l||f?(0,v.jsx)(a.GraphFooter,{styles:{footnote:B?.footnote,source:B?.source},classNames:{footnote:V?.footnote,source:V?.source},sources:l,footNote:f,width:d}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return fe}});
+//# sourceMappingURL=ButterflyChart-BBWBZXEc.cjs.map

package/dist/ButterflyChart-BBWBZXEc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButterflyChart-BBWBZXEc.cjs","names":[],"sources":["../src/Components/Graphs/ButterflyChart/Graph.tsx","../src/Components/Graphs/ButterflyChart/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport isEqual from 'fast-deep-equal';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\nimport { Axis } from '@/Components/Elements/Axes/Axis';\nimport { XTicksAndGridLines } from '@/Components/Elements/Axes/XTicksAndGridLines';\nimport { YAxesLabels } from '@/Components/Elements/Axes/YAxesLabels';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { RefLineX } from '@/Components/Elements/ReferenceLine';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  AnimateDataType,\n  ButterflyChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  ReferenceDataType,\n  StyleObject,\n} from '@/Types';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: ButterflyChartDataType[];\n  barColors: [string, string];\n  centerGap: number;\n  refValues: ReferenceDataType[];\n  axisTitles: [string, string];\n  width: number;\n  height: number;\n  rightMargin: number;\n  leftMargin: number;\n  topMargin: number;\n  bottomMargin: number;\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  maxValue: number;\n  minValue: number;\n  barPadding: number;\n  truncateBy: number;\n  showValues: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  showTicks: boolean;\n  suffix: string;\n  prefix: string;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  noOfTicks: number;\n  animate: AnimateDataType;\n  precision: number;\n  customLayers: CustomLayerDataType[];\n  minValueLeftBar: number;\n  minValueRightBar: number;\n  naLabel: string;\n  hideAxisLine: boolean;\n  locale: string;\n  padZeros: boolean;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    barColors,\n    centerGap,\n    refValues,\n    maxValue,\n    minValue,\n    showValues,\n    axisTitles,\n    rightMargin,\n    leftMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    barPadding,\n    truncateBy,\n    onSeriesMouseClick,\n    showTicks,\n    suffix,\n    prefix,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    styles,\n    classNames,\n    noOfTicks,\n    animate,\n    precision,\n    customLayers,\n    minValueLeftBar,\n    minValueRightBar,\n    naLabel,\n    hideAxisLine,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n  const isInView = useInView(svgRef, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = 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,\n    right: rightMargin,\n  };\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\n  const y = scaleBand()\n    .domain(dataWithId.map((d) => `${d.id}`))\n    .range([graphHeight, 0])\n    .paddingInner(barPadding);\n  const xRightBar = scaleLinear()\n    .domain([minValue, maxValue])\n    .range([0, (graphWidth - centerGap) / 2])\n    .nice();\n  const xRightTicks = xRightBar.ticks(noOfTicks);\n  const xLeftBar = scaleLinear()\n    .domain([minValue, maxValue])\n    .range([(graphWidth - centerGap) / 2, 0])\n    .nice();\n  const xLeftTicks = xLeftBar.ticks(noOfTicks);\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          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g transform={`translate(${0},${0})`}>\n            {showTicks ? (\n              <XTicksAndGridLines\n                values={xLeftTicks.filter((d) => d !== 0)}\n                x={xLeftTicks.filter((d) => d !== 0).map((d) => xLeftBar(d))}\n                y1={0 - topMargin}\n                y2={graphHeight + margin.bottom}\n                styles={{\n                  gridLines: styles?.xAxis?.gridLines,\n                  labels: styles?.xAxis?.labels,\n                }}\n                classNames={{\n                  gridLines: classNames?.xAxis?.gridLines,\n                  labels: classNames?.xAxis?.labels,\n                }}\n                suffix={suffix}\n                prefix={prefix}\n                labelType='secondary'\n                showGridLines\n                leftLabel\n                precision={precision}\n                padZeros={padZeros}\n                locale={locale}\n              />\n            ) : null}\n            <AnimatePresence>\n              {dataWithId.map((d) => {\n                return (\n                  <motion.g\n                    className='undp-viz-g-with-hover'\n                    key={d.label}\n                    opacity={0.85}\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                  >\n                    {d.leftBar ? (\n                      <motion.rect\n                        y={y(d.id)}\n                        style={{ fill: barColors[0] }}\n                        height={y.bandwidth()}\n                        variants={{\n                          initial: {\n                            x: xLeftBar(0),\n                            width: 0,\n                          },\n                          whileInView: {\n                            x: d.leftBar < 0 ? xLeftBar(0) : xLeftBar(d.leftBar),\n                            width:\n                              d.leftBar < 0\n                                ? xLeftBar(d.leftBar) - xLeftBar(0)\n                                : xLeftBar(0) - xLeftBar(d.leftBar),\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        exit={{\n                          x: xLeftBar(0),\n                          width: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        y={(y(d.id) as number) + y.bandwidth() / 2}\n                        style={{\n                          textAnchor: d.leftBar ? (d.leftBar > 0 ? 'end' : 'start') : 'start',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        dx={d.leftBar ? (d.leftBar > 0 ? -5 : 5) : 5}\n                        dy='0.33em'\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        exit={{\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xLeftBar(0),\n                            opacity: 0,\n                            fill: barColors[0],\n                          },\n                          whileInView: {\n                            x: d.leftBar\n                              ? xLeftBar(d.leftBar)\n                              : xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar),\n                            opacity: 1,\n                            fill: barColors[0],\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.leftBar,\n                          naLabel,\n                          precision,\n                          prefix,\n                          suffix,\n                          locale,\n                          padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </motion.g>\n                );\n              })}\n              <Axis\n                hideAxisLine={hideAxisLine}\n                y1={-2.5}\n                y2={graphHeight + margin.bottom}\n                x1={xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar)}\n                x2={xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar)}\n                classNames={{ axis: classNames?.yAxis?.axis }}\n                styles={{ axis: styles?.yAxis?.axis }}\n              />\n              {refValues?.map((el) => (\n                <RefLineX\n                  key={el.text}\n                  text={el.text}\n                  color={el.color}\n                  x={xLeftBar(el.value as number)}\n                  y1={0 - margin.top}\n                  y2={graphHeight + margin.bottom}\n                  textSide='left'\n                  classNames={el.classNames}\n                  styles={el.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </AnimatePresence>\n          </g>\n          <g transform={`translate(${(graphWidth + centerGap) / 2},${0})`}>\n            {showTicks ? (\n              <XTicksAndGridLines\n                values={xRightTicks.filter((d) => d !== 0)}\n                x={xRightTicks.filter((d) => d !== 0).map((d) => xRightBar(d))}\n                y1={0 - topMargin}\n                y2={graphHeight + margin.bottom}\n                styles={{\n                  gridLines: styles?.xAxis?.gridLines,\n                  labels: styles?.xAxis?.labels,\n                }}\n                classNames={{\n                  gridLines: classNames?.xAxis?.gridLines,\n                  labels: classNames?.xAxis?.labels,\n                }}\n                suffix={suffix}\n                prefix={prefix}\n                labelType='secondary'\n                showGridLines\n                precision={precision}\n                padZeros={padZeros}\n                locale={locale}\n              />\n            ) : null}\n            <AnimatePresence>\n              {dataWithId.map((d) => {\n                return (\n                  <motion.g\n                    className='undp-viz-g-with-hover'\n                    key={d.label}\n                    opacity={0.85}\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                  >\n                    {d.rightBar ? (\n                      <motion.rect\n                        y={y(d.id)}\n                        style={{ fill: barColors[1] }}\n                        height={y.bandwidth()}\n                        exit={{\n                          x: xRightBar(0),\n                          width: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xRightBar(0),\n                            width: 0,\n                          },\n                          whileInView: {\n                            x: d.rightBar >= 0 ? xRightBar(0) : xRightBar(d.rightBar),\n                            width:\n                              d.rightBar >= 0\n                                ? xRightBar(d.rightBar) - xRightBar(0)\n                                : xRightBar(0) - xRightBar(d.rightBar),\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      />\n                    ) : null}\n                    {showValues ? (\n                      <motion.text\n                        y={(y(d.id) as number) + y.bandwidth() / 2}\n                        style={{\n                          textAnchor: d.rightBar ? (d.rightBar < 0 ? 'end' : 'start') : 'start',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        dx={d.rightBar ? (d.rightBar < 0 ? -5 : 5) : 5}\n                        dy='0.33em'\n                        exit={{\n                          opacity: 0,\n                          transition: { duration: animate.duration },\n                        }}\n                        variants={{\n                          initial: {\n                            x: xRightBar(0),\n                            opacity: 0,\n                            fill: barColors[1],\n                          },\n                          whileInView: {\n                            x: d.rightBar\n                              ? xRightBar(d.rightBar)\n                              : xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar),\n                            opacity: 1,\n                            fill: barColors[1],\n                            transition: { duration: animate.duration },\n                          },\n                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                      >\n                        {numberFormattingFunction(\n                          d.rightBar,\n                          naLabel,\n                          precision,\n                          prefix,\n                          suffix,\n                          locale,\n                          padZeros,\n                        )}\n                      </motion.text>\n                    ) : null}\n                  </motion.g>\n                );\n              })}\n              <Axis\n                hideAxisLine={hideAxisLine}\n                y1={-2.5}\n                y2={graphHeight + margin.bottom}\n                x1={xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar)}\n                x2={xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar)}\n                classNames={{ axis: classNames?.yAxis?.axis }}\n                styles={{ axis: styles?.yAxis?.axis }}\n              />\n              {refValues?.map((el) => (\n                <RefLineX\n                  key={el.text}\n                  text={el.text}\n                  color={el.color}\n                  x={xRightBar(el.value as number)}\n                  y1={0 - margin.top}\n                  y2={graphHeight + margin.bottom}\n                  textSide='right'\n                  classNames={el.classNames}\n                  styles={el.styles}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </AnimatePresence>\n          </g>\n          <AnimatePresence>\n            <motion.g transform={`translate(${graphWidth / 2},${0})`}>\n              {dataWithId.map((d) => (\n                <YAxesLabels\n                  key={d.id}\n                  value={\n                    `${d.label}`.length < truncateBy\n                      ? `${d.label}`\n                      : `${`${d.label}`.substring(0, truncateBy)}...`\n                  }\n                  y={y(`${d.id}`) as number}\n                  x={0 - centerGap / 2}\n                  width={centerGap}\n                  height={y.bandwidth()}\n                  alignment='center'\n                  style={styles?.yAxis?.labels}\n                  className={classNames?.yAxis?.labels}\n                  animate={animate}\n                  isInView={isInView}\n                />\n              ))}\n            </motion.g>\n          </AnimatePresence>\n          <g transform={`translate(${0},${graphHeight})`}>\n            <text\n              style={{\n                fill: barColors[0],\n                textAnchor: 'end',\n                ...styles?.yAxis?.title,\n              }}\n              className={cn('text-base', classNames?.yAxis?.title)}\n              x={graphWidth / 2 - centerGap / 2}\n              y={0}\n              dx={-5}\n              dy={20}\n            >\n              {axisTitles[0]}\n            </text>\n            <text\n              style={{\n                fill: barColors[1],\n                textAnchor: 'start',\n                ...styles?.yAxis?.title,\n              }}\n              className={cn('text-base', classNames?.yAxis?.title)}\n              x={graphWidth / 2 + centerGap / 2}\n              y={0}\n              dx={5}\n              dy={20}\n            >\n              {axisTitles[1]}\n            </text>\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\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      {detailsOnClick && mouseClickData !== undefined ? (\n        <DetailsModal\n          body={detailsOnClick}\n          data={mouseClickData}\n          setData={setMouseClickData}\n          className={classNames?.modal}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { SliderUI } from '@undp/design-system-react/SliderUI';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport { useEffect, useMemo, 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 { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  ButterflyChartDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  Languages,\n  NumberFormatOptions,\n  ReferenceDataType,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { ensureCompleteDataForButterFlyChart } from '@/Utils/ensureCompleteData';\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\nimport { Graph } from './Graph';\n\nfunction getMinMax(\n  data: ButterflyChartDataType[],\n  key: 'leftBar' | 'rightBar',\n  minValue?: number | null,\n  maxValue?: number | null,\n) {\n  const values = data.map((d) => d[key]).filter((v) => !checkIfNullOrUndefined(v)) as number[];\n\n  const min = !checkIfNullOrUndefined(minValue)\n    ? (minValue as number)\n    : Math.min(...values) >= 0\n      ? 0\n      : Math.min(...values);\n\n  const max = !checkIfNullOrUndefined(maxValue)\n    ? (maxValue as number)\n    : Math.max(...values) < 0\n      ? 0\n      : Math.max(...values);\n\n  return { min, max };\n}\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: ButterflyChartDataType[];\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  /** Color for the left and right bars */\n  barColors?: [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  /** Padding between bars */\n  barPadding?: number;\n  /** Spacing between the left and right bars */\n  centerGap?: 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  /** Truncate labels by specified length */\n  truncateBy?: number;\n  /** Reference values for comparison */\n  refValues?: ReferenceDataType[];\n  /** Number of ticks on the axis */\n  noOfTicks?: number;\n\n  // Graph Parameters\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of axis ticks */\n  showTicks?: boolean;\n  /** Toggle visibility of axis line for the  main axis */\n  hideAxisLine?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Title for the left bars */\n  leftBarTitle?: string;\n  /** Title for the right bars */\n  rightBarTitle?: string;\n  /** Defines how “NA” values should be displayed/labelled in the graph */\n  naLabel?: string;\n  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */\n  timeline?: TimelineDataType;\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: 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  /** Details displayed on the modal when user clicks of a data point. 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  detailsOnClick?: 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  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_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 ButterflyChart(props: Props) {\n  const {\n    data,\n    graphTitle,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    padding,\n    barColors = [\n      Colors.light.categoricalColors.colors[0],\n      Colors.light.categoricalColors.colors[1],\n    ],\n    backgroundColor = false,\n    leftMargin = 20,\n    rightMargin = 20,\n    topMargin = 25,\n    bottomMargin = 30,\n    rightBarTitle = 'Right bar graph',\n    leftBarTitle = 'Left bar graph',\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    barPadding = 0.25,\n    truncateBy = 999,\n    onSeriesMouseClick,\n    centerGap = 100,\n    showValues = true,\n    maxValue,\n    minValue,\n    refValues = [],\n    showTicks = true,\n    showColorScale = false,\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    colorLegendTitle,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    styles,\n    classNames,\n    noOfTicks = 5,\n    animate = false,\n    customLayers = [],\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    naLabel = 'NA',\n    hideAxisLine = false,\n    numberDisplayOptions,\n  } = props;\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [play, setPlay] = useState(timeline.autoplay);\n  const uniqDatesSorted = useMemo(() => {\n    const dates = [\n      ...new Set(\n        data\n          .filter((d) => d.date)\n          .map((d) => parse(`${d.date}`, timeline.dateFormat || 'yyyy', new Date()).getTime()),\n      ),\n    ];\n    dates.sort((a, b) => a - b);\n    return dates;\n  }, [data, timeline.dateFormat]);\n  const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\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  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setIndex((i) => (i < uniqDatesSorted.length - 1 ? i + 1 : 0));\n      },\n      (timeline.speed || 2) * 1000,\n    );\n    if (!play) clearInterval(interval);\n    return () => clearInterval(interval);\n  }, [uniqDatesSorted, play, timeline.speed]);\n\n  const markObj = getSliderMarks(\n    uniqDatesSorted,\n    index,\n    timeline.showOnlyActiveDate,\n    timeline.dateFormat || 'yyyy',\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      {timeline.enabled && uniqDatesSorted.length > 0 && markObj ? (\n        <div className='flex gap-6 items-center' dir='ltr'>\n          <button\n            type='button'\n            onClick={() => {\n              setPlay(!play);\n            }}\n            className='p-0 border-0 cursor-pointer bg-transparent'\n            aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\n          >\n            {play ? <Pause /> : <Play />}\n          </button>\n          <SliderUI\n            min={uniqDatesSorted[0]}\n            max={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            marks={markObj}\n            step={null}\n            defaultValue={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            value={uniqDatesSorted[index]}\n            onChangeComplete={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            onChange={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            aria-label='Time slider. Use arrow keys to adjust selected time period.'\n          />\n        </div>\n      ) : null}\n      {showColorScale && data.length > 0 ? (\n        <ColorLegend\n          colorLegendTitle={colorLegendTitle}\n          colorDomain={[leftBarTitle, rightBarTitle]}\n          colors={barColors}\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            hideAxisLine={hideAxisLine}\n            data={ensureCompleteDataForButterFlyChart(data, timeline.dateFormat || 'yyyy').filter(\n              (d) =>\n                timeline.enabled\n                  ? `${d.date}` ===\n                    format(new Date(uniqDatesSorted[index]), timeline.dateFormat || 'yyyy')\n                  : d,\n            )}\n            barColors={barColors}\n            width={svgWidth}\n            centerGap={centerGap}\n            height={svgHeight}\n            truncateBy={truncateBy}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            axisTitles={[leftBarTitle, rightBarTitle]}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            barPadding={barPadding}\n            refValues={refValues}\n            maxValue={Math.max(\n              getMinMax(data, 'leftBar', minValue, maxValue).max,\n              getMinMax(data, 'rightBar', minValue, maxValue).max,\n            )}\n            minValue={Math.min(\n              getMinMax(data, 'leftBar', minValue, maxValue).min,\n              getMinMax(data, 'rightBar', minValue, maxValue).min,\n            )}\n            minValueLeftBar={getMinMax(data, 'leftBar', minValue, maxValue).min}\n            minValueRightBar={getMinMax(data, 'rightBar', minValue, maxValue).min}\n            showValues={showValues}\n            onSeriesMouseClick={onSeriesMouseClick}\n            showTicks={showTicks}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            styles={styles}\n            classNames={classNames}\n            noOfTicks={noOfTicks}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            customLayers={customLayers}\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/ButterflyChart-CHMH57WF.js

@@ -0,0 +1,514 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { l as n, u as r } from "./Icons-BLXwPP3h.js";
+import { Colors as i } from "./Colors.js";
+import { ColorLegend as a } from "./ColorLegend.js";
+import { GraphFooter as ee } from "./GraphFooter.js";
+import { GraphHeader as te } from "./GraphHeader.js";
+import { t as o } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as ne, t as s } from "./GraphContainer-DgEB1AVN.js";
+import { n as re, t as ie } from "./parse-5MWhaq6h.js";
+import { t as c } from "./EmptyState-DBmT1Adf.js";
+import { r as ae } from "./ensureCompleteData-VxAHq-s7.js";
+import { t as oe } from "./getSliderMarks-CTKVxOEm.js";
+import { t as l } from "./linear-BkosG4OK.js";
+import { t as se } from "./band-XivI9IHG.js";
+import { t as u } from "./fast-deep-equal--80N92KJ.js";
+import { t as d } from "./proxy-BiRrIImK.js";
+import { t as f } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as ce } from "./use-in-view-CjlKdln1.js";
+import { t as p } from "./Axis-B3ai1eeP.js";
+import { t as m } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as h } from "./XTicksAndGridLines-B2XZgwzW.js";
+import { t as le } from "./YAxesLabels-voV_CThY.js";
+import { t as ue } from "./DetailsModal-DxUowfkg.js";
+import { t as de } from "./ReferenceLine-C8owKJx1.js";
+import { t as fe } from "./Tooltip-Y6uTGwkF.js";
+import { cn as g } from "@undp/design-system-react/cn";
+import { useEffect as pe, useMemo as me, useRef as he, useState as _ } from "react";
+import { SliderUI as v } from "@undp/design-system-react/SliderUI";
+//#region src/Components/Graphs/ButterflyChart/Graph.tsx
+var ge = /* @__PURE__ */ e(u(), 1), y = t();
+function _e(e) {
+	let { data: t, width: n, height: r, barColors: i, centerGap: a, refValues: ee, maxValue: te, minValue: o, showValues: ne, axisTitles: s, rightMargin: re, leftMargin: ie, topMargin: c, bottomMargin: ae, tooltip: oe, onSeriesMouseOver: u, barPadding: pe, truncateBy: me, onSeriesMouseClick: v, showTicks: _e, suffix: b, prefix: x, resetSelectionOnDoubleClick: ve, detailsOnClick: S, styles: C, classNames: w, noOfTicks: ye, animate: T, precision: E, customLayers: D, minValueLeftBar: O, minValueRightBar: k, naLabel: A, hideAxisLine: j, locale: M, padZeros: N } = e, P = he(null), F = ce(P, {
+		once: T.once,
+		amount: T.amount
+	}), [I, L] = _(void 0), [R, z] = _(void 0), [be, B] = _(void 0), [V, H] = _(void 0), U = {
+		top: c,
+		bottom: ae,
+		left: ie,
+		right: re
+	}, W = n - U.left - U.right, G = r - U.top - U.bottom, K = t.map((e, t) => ({
+		...e,
+		id: `${t}`
+	})), q = se().domain(K.map((e) => `${e.id}`)).range([G, 0]).paddingInner(pe), J = l().domain([o, te]).range([0, (W - a) / 2]).nice(), Y = J.ticks(ye), X = l().domain([o, te]).range([(W - a) / 2, 0]).nice(), Z = X.ticks(ye);
+	return /* @__PURE__ */ (0, y.jsxs)(y.Fragment, { children: [
+		/* @__PURE__ */ (0, y.jsx)(d.svg, {
+			width: `${n}px`,
+			height: `${r}px`,
+			viewBox: `0 0 ${n} ${r}`,
+			direction: "ltr",
+			ref: P,
+			children: /* @__PURE__ */ (0, y.jsxs)("g", {
+				transform: `translate(${U.left},${U.top})`,
+				children: [
+					D.filter((e) => e.position === "before").map((e) => e.layer),
+					/* @__PURE__ */ (0, y.jsxs)("g", {
+						transform: "translate(0,0)",
+						children: [_e ? /* @__PURE__ */ (0, y.jsx)(h, {
+							values: Z.filter((e) => e !== 0),
+							x: Z.filter((e) => e !== 0).map((e) => X(e)),
+							y1: 0 - c,
+							y2: G + U.bottom,
+							styles: {
+								gridLines: C?.xAxis?.gridLines,
+								labels: C?.xAxis?.labels
+							},
+							classNames: {
+								gridLines: w?.xAxis?.gridLines,
+								labels: w?.xAxis?.labels
+							},
+							suffix: b,
+							prefix: x,
+							labelType: "secondary",
+							showGridLines: !0,
+							leftLabel: !0,
+							precision: E,
+							padZeros: N,
+							locale: M
+						}) : null, /* @__PURE__ */ (0, y.jsxs)(f, { children: [
+							K.map((e) => /* @__PURE__ */ (0, y.jsxs)(d.g, {
+								className: "undp-viz-g-with-hover",
+								opacity: .85,
+								onMouseEnter: (t) => {
+									L(e), H(t.clientY), B(t.clientX), u?.(e);
+								},
+								onClick: () => {
+									(v || S) && ((0, ge.default)(R, e) && ve ? (z(void 0), v?.(void 0)) : (z(e), v?.(e)));
+								},
+								onMouseMove: (t) => {
+									L(e), H(t.clientY), B(t.clientX);
+								},
+								onMouseLeave: () => {
+									L(void 0), B(void 0), H(void 0), u?.(void 0);
+								},
+								children: [e.leftBar ? /* @__PURE__ */ (0, y.jsx)(d.rect, {
+									y: q(e.id),
+									style: { fill: i[0] },
+									height: q.bandwidth(),
+									variants: {
+										initial: {
+											x: X(0),
+											width: 0
+										},
+										whileInView: {
+											x: e.leftBar < 0 ? X(0) : X(e.leftBar),
+											width: e.leftBar < 0 ? X(e.leftBar) - X(0) : X(0) - X(e.leftBar),
+											transition: { duration: T.duration }
+										}
+									},
+									initial: "initial",
+									animate: F ? "whileInView" : "initial",
+									exit: {
+										x: X(0),
+										width: 0,
+										transition: { duration: T.duration }
+									}
+								}) : null, ne ? /* @__PURE__ */ (0, y.jsx)(d.text, {
+									y: q(e.id) + q.bandwidth() / 2,
+									style: {
+										textAnchor: e.leftBar && e.leftBar > 0 ? "end" : "start",
+										...C?.graphObjectValues || {}
+									},
+									dx: e.leftBar && e.leftBar > 0 ? -5 : 5,
+									dy: "0.33em",
+									className: g("graph-value text-sm", w?.graphObjectValues),
+									exit: {
+										opacity: 0,
+										transition: { duration: T.duration }
+									},
+									variants: {
+										initial: {
+											x: X(0),
+											opacity: 0,
+											fill: i[0]
+										},
+										whileInView: {
+											x: e.leftBar ? X(e.leftBar) : X(O < 0 ? 0 : O),
+											opacity: 1,
+											fill: i[0],
+											transition: { duration: T.duration }
+										}
+									},
+									initial: "initial",
+									animate: F ? "whileInView" : "initial",
+									children: m(e.leftBar, A, E, x, b, M, N)
+								}) : null]
+							}, e.label)),
+							/* @__PURE__ */ (0, y.jsx)(p, {
+								hideAxisLine: j,
+								y1: -2.5,
+								y2: G + U.bottom,
+								x1: X(O < 0 ? 0 : O),
+								x2: X(O < 0 ? 0 : O),
+								classNames: { axis: w?.yAxis?.axis },
+								styles: { axis: C?.yAxis?.axis }
+							}),
+							ee?.map((e) => /* @__PURE__ */ (0, y.jsx)(de, {
+								text: e.text,
+								color: e.color,
+								x: X(e.value),
+								y1: 0 - U.top,
+								y2: G + U.bottom,
+								textSide: "left",
+								classNames: e.classNames,
+								styles: e.styles,
+								animate: T,
+								isInView: F
+							}, e.text))
+						] })]
+					}),
+					/* @__PURE__ */ (0, y.jsxs)("g", {
+						transform: `translate(${(W + a) / 2},0)`,
+						children: [_e ? /* @__PURE__ */ (0, y.jsx)(h, {
+							values: Y.filter((e) => e !== 0),
+							x: Y.filter((e) => e !== 0).map((e) => J(e)),
+							y1: 0 - c,
+							y2: G + U.bottom,
+							styles: {
+								gridLines: C?.xAxis?.gridLines,
+								labels: C?.xAxis?.labels
+							},
+							classNames: {
+								gridLines: w?.xAxis?.gridLines,
+								labels: w?.xAxis?.labels
+							},
+							suffix: b,
+							prefix: x,
+							labelType: "secondary",
+							showGridLines: !0,
+							precision: E,
+							padZeros: N,
+							locale: M
+						}) : null, /* @__PURE__ */ (0, y.jsxs)(f, { children: [
+							K.map((e) => /* @__PURE__ */ (0, y.jsxs)(d.g, {
+								className: "undp-viz-g-with-hover",
+								opacity: .85,
+								onMouseEnter: (t) => {
+									L(e), H(t.clientY), B(t.clientX), u?.(e);
+								},
+								onClick: () => {
+									(v || S) && ((0, ge.default)(R, e) && ve ? (z(void 0), v?.(void 0)) : (z(e), v?.(e)));
+								},
+								onMouseMove: (t) => {
+									L(e), H(t.clientY), B(t.clientX);
+								},
+								onMouseLeave: () => {
+									L(void 0), B(void 0), H(void 0), u?.(void 0);
+								},
+								children: [e.rightBar ? /* @__PURE__ */ (0, y.jsx)(d.rect, {
+									y: q(e.id),
+									style: { fill: i[1] },
+									height: q.bandwidth(),
+									exit: {
+										x: J(0),
+										width: 0,
+										transition: { duration: T.duration }
+									},
+									variants: {
+										initial: {
+											x: J(0),
+											width: 0
+										},
+										whileInView: {
+											x: e.rightBar >= 0 ? J(0) : J(e.rightBar),
+											width: e.rightBar >= 0 ? J(e.rightBar) - J(0) : J(0) - J(e.rightBar),
+											transition: { duration: T.duration }
+										}
+									},
+									initial: "initial",
+									animate: F ? "whileInView" : "initial"
+								}) : null, ne ? /* @__PURE__ */ (0, y.jsx)(d.text, {
+									y: q(e.id) + q.bandwidth() / 2,
+									style: {
+										textAnchor: e.rightBar && e.rightBar < 0 ? "end" : "start",
+										...C?.graphObjectValues || {}
+									},
+									className: g("graph-value text-sm", w?.graphObjectValues),
+									dx: e.rightBar && e.rightBar < 0 ? -5 : 5,
+									dy: "0.33em",
+									exit: {
+										opacity: 0,
+										transition: { duration: T.duration }
+									},
+									variants: {
+										initial: {
+											x: J(0),
+											opacity: 0,
+											fill: i[1]
+										},
+										whileInView: {
+											x: e.rightBar ? J(e.rightBar) : J(k < 0 ? 0 : k),
+											opacity: 1,
+											fill: i[1],
+											transition: { duration: T.duration }
+										}
+									},
+									initial: "initial",
+									animate: F ? "whileInView" : "initial",
+									children: m(e.rightBar, A, E, x, b, M, N)
+								}) : null]
+							}, e.label)),
+							/* @__PURE__ */ (0, y.jsx)(p, {
+								hideAxisLine: j,
+								y1: -2.5,
+								y2: G + U.bottom,
+								x1: J(k < 0 ? 0 : k),
+								x2: J(k < 0 ? 0 : k),
+								classNames: { axis: w?.yAxis?.axis },
+								styles: { axis: C?.yAxis?.axis }
+							}),
+							ee?.map((e) => /* @__PURE__ */ (0, y.jsx)(de, {
+								text: e.text,
+								color: e.color,
+								x: J(e.value),
+								y1: 0 - U.top,
+								y2: G + U.bottom,
+								textSide: "right",
+								classNames: e.classNames,
+								styles: e.styles,
+								animate: T,
+								isInView: F
+							}, e.text))
+						] })]
+					}),
+					/* @__PURE__ */ (0, y.jsx)(f, { children: /* @__PURE__ */ (0, y.jsx)(d.g, {
+						transform: `translate(${W / 2},0)`,
+						children: K.map((e) => /* @__PURE__ */ (0, y.jsx)(le, {
+							value: `${e.label}`.length < me ? `${e.label}` : `${`${e.label}`.substring(0, me)}...`,
+							y: q(`${e.id}`),
+							x: 0 - a / 2,
+							width: a,
+							height: q.bandwidth(),
+							alignment: "center",
+							style: C?.yAxis?.labels,
+							className: w?.yAxis?.labels,
+							animate: T,
+							isInView: F
+						}, e.id))
+					}) }),
+					/* @__PURE__ */ (0, y.jsxs)("g", {
+						transform: `translate(0,${G})`,
+						children: [/* @__PURE__ */ (0, y.jsx)("text", {
+							style: {
+								fill: i[0],
+								textAnchor: "end",
+								...C?.yAxis?.title
+							},
+							className: g("text-base", w?.yAxis?.title),
+							x: W / 2 - a / 2,
+							y: 0,
+							dx: -5,
+							dy: 20,
+							children: s[0]
+						}), /* @__PURE__ */ (0, y.jsx)("text", {
+							style: {
+								fill: i[1],
+								textAnchor: "start",
+								...C?.yAxis?.title
+							},
+							className: g("text-base", w?.yAxis?.title),
+							x: W / 2 + a / 2,
+							y: 0,
+							dx: 5,
+							dy: 20,
+							children: s[1]
+						})]
+					}),
+					D.filter((e) => e.position === "after").map((e) => e.layer)
+				]
+			})
+		}),
+		I && oe && be && V ? /* @__PURE__ */ (0, y.jsx)(fe, {
+			data: I,
+			body: oe,
+			xPos: be,
+			yPos: V,
+			backgroundStyle: C?.tooltip,
+			className: w?.tooltip
+		}) : null,
+		S && R !== void 0 ? /* @__PURE__ */ (0, y.jsx)(ue, {
+			body: S,
+			data: R,
+			setData: z,
+			className: w?.modal
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/ButterflyChart/index.tsx
+function b(e, t, n, r) {
+	let i = e.map((e) => e[t]).filter((e) => !o(e));
+	return {
+		min: o(n) ? Math.min(...i) >= 0 ? 0 : Math.min(...i) : n,
+		max: o(r) ? Math.max(...i) < 0 ? 0 : Math.max(...i) : r
+	};
+}
+function x(e) {
+	let { data: t, graphTitle: o, sources: l, graphDescription: se, height: u, width: d, footNote: f, padding: ce, barColors: p = [i.light.categoricalColors.colors[0], i.light.categoricalColors.colors[1]], backgroundColor: m = !1, leftMargin: h = 20, rightMargin: le = 20, topMargin: ue = 25, bottomMargin: de = 30, rightBarTitle: fe = "Right bar graph", leftBarTitle: g = "Left bar graph", tooltip: ge, relativeHeight: x, onSeriesMouseOver: ve, graphID: S, barPadding: C = .25, truncateBy: w = 999, onSeriesMouseClick: ye, centerGap: T = 100, showValues: E = !0, maxValue: D, minValue: O, refValues: k = [], showTicks: A = !0, showColorScale: j = !1, graphDownload: M = !1, dataDownload: N = !1, language: P = "en", colorLegendTitle: F, minHeight: I = 0, theme: L = "light", ariaLabel: R, resetSelectionOnDoubleClick: z = !0, detailsOnClick: be, styles: B, classNames: V, noOfTicks: H = 5, animate: U = !1, customLayers: W = [], timeline: G = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, naLabel: K = "NA", hideAxisLine: q = !1, numberDisplayOptions: J } = e, [Y, X] = _(0), [Z, xe] = _(0), [Q, Se] = _(G.autoplay), $ = me(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => ie(`${e.date}`, G.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, G.dateFormat]), [Ce, we] = _(G.autoplay ? 0 : $.length - 1), Te = he(null), Ee = he(null);
+	pe(() => {
+		let e = new ResizeObserver((e) => {
+			X(e[0].target.clientWidth || 620), xe(e[0].target.clientHeight || 480);
+		});
+		return Te.current && e.observe(Te.current), () => e.disconnect();
+	}, []), pe(() => {
+		let e = setInterval(() => {
+			we((e) => e < $.length - 1 ? e + 1 : 0);
+		}, (G.speed || 2) * 1e3);
+		return Q || clearInterval(e), () => clearInterval(e);
+	}, [
+		$,
+		Q,
+		G.speed
+	]);
+	let De = oe($, Ce, G.showOnlyActiveDate, G.dateFormat || "yyyy");
+	return /* @__PURE__ */ (0, y.jsxs)(ne, {
+		className: V?.graphContainer,
+		style: B?.graphContainer,
+		id: S,
+		ref: Ee,
+		"aria-label": R,
+		backgroundColor: m,
+		theme: L,
+		language: P,
+		minHeight: I,
+		width: d,
+		height: u,
+		relativeHeight: x,
+		padding: ce,
+		children: [
+			o || se || M || N ? /* @__PURE__ */ (0, y.jsx)(te, {
+				styles: {
+					title: B?.title,
+					description: B?.description
+				},
+				classNames: {
+					title: V?.title,
+					description: V?.description
+				},
+				graphTitle: o,
+				graphDescription: se,
+				width: d,
+				graphDownload: M ? Ee : void 0,
+				dataDownload: N ? 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,
+			G.enabled && $.length > 0 && De ? /* @__PURE__ */ (0, y.jsxs)("div", {
+				className: "flex gap-6 items-center",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, y.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						Se(!Q);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": Q ? "Click to pause animation" : "Click to play animation",
+					children: Q ? /* @__PURE__ */ (0, y.jsx)(n, {}) : /* @__PURE__ */ (0, y.jsx)(r, {})
+				}), /* @__PURE__ */ (0, y.jsx)(v, {
+					min: $[0],
+					max: $[$.length - 1],
+					marks: De,
+					step: null,
+					defaultValue: $[$.length - 1],
+					value: $[Ce],
+					onChangeComplete: (e) => {
+						we($.indexOf(e));
+					},
+					onChange: (e) => {
+						we($.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			j && t.length > 0 ? /* @__PURE__ */ (0, y.jsx)(a, {
+				colorLegendTitle: F,
+				colorDomain: [g, fe],
+				colors: p,
+				showNAColor: !1,
+				className: V?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, y.jsxs)(s, {
+				ref: Te,
+				children: [t.length === 0 && /* @__PURE__ */ (0, y.jsx)(c, {}), Y && Z && t.length > 0 ? /* @__PURE__ */ (0, y.jsx)(_e, {
+					hideAxisLine: q,
+					data: ae(t, G.dateFormat || "yyyy").filter((e) => G.enabled ? `${e.date}` === re(new Date($[Ce]), G.dateFormat || "yyyy") : e),
+					barColors: p,
+					width: Y,
+					centerGap: T,
+					height: Z,
+					truncateBy: w,
+					leftMargin: h,
+					rightMargin: le,
+					topMargin: ue,
+					bottomMargin: de,
+					axisTitles: [g, fe],
+					tooltip: ge,
+					onSeriesMouseOver: ve,
+					barPadding: C,
+					refValues: k,
+					maxValue: Math.max(b(t, "leftBar", O, D).max, b(t, "rightBar", O, D).max),
+					minValue: Math.min(b(t, "leftBar", O, D).min, b(t, "rightBar", O, D).min),
+					minValueLeftBar: b(t, "leftBar", O, D).min,
+					minValueRightBar: b(t, "rightBar", O, D).min,
+					showValues: E,
+					onSeriesMouseClick: ye,
+					showTicks: A,
+					resetSelectionOnDoubleClick: z,
+					detailsOnClick: be,
+					styles: B,
+					classNames: V,
+					noOfTicks: H,
+					animate: U === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : U || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					customLayers: W,
+					naLabel: K,
+					locale: J?.locale || "en",
+					padZeros: J?.padZeros || !1,
+					suffix: J?.suffix || "",
+					prefix: J?.prefix || "",
+					precision: J?.precision ?? 2
+				}) : null]
+			}),
+			l || f ? /* @__PURE__ */ (0, y.jsx)(ee, {
+				styles: {
+					footnote: B?.footnote,
+					source: B?.source
+				},
+				classNames: {
+					footnote: V?.footnote,
+					source: V?.source
+				},
+				sources: l,
+				footNote: f,
+				width: d
+			}) : null
+		]
+	});
+}
+//#endregion
+export { x as t };
+
+//# sourceMappingURL=ButterflyChart-CHMH57WF.js.map