@undp/data-viz 1.3.0 → 1.3.1

package/dist/DumbbellChart.js

@@ -1,2 +1,1511 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),c=require("react"),Oe=require("./index-BzeLQvXk.cjs"),we=require("./parse-hMnG_lRV.cjs"),Ee=require("./Typography-CDR-DAHH.cjs"),je=require("./getSliderMarks-DDJ1CdhL.cjs"),Le=require("./index-CZbIGs8q.cjs"),Ve=require("./index-BXns0-ng.cjs"),$e=require("./Modal-cQF2UQIa.cjs"),Te=require("./numberFormattingFunction.js"),Ae=require("./Tooltip-BM18N_3l.cjs"),A=require("./checkIfNullOrUndefined.js"),qe=require("./string2HTML-X4ZYX5jI.cjs"),Je=require("./XTicksAndGridLines-DuK35ROS.cjs"),Fe=require("./AxisTitle-BY8MI9jC.cjs"),Qe=require("./YAxesLabels-DhBdLk3Z.cjs"),Pe=require("./YTicksAndGridLines-CtLvzExe.cjs"),Be=require("./ReferenceLine-Bsb5jeE4.cjs"),_=require("./use-in-view-Dl1CsAIo.cjs"),He=require("./linear-BVckp9RD.cjs"),We=require("./band-CAApY4Pd.cjs"),Ue=require("./index-a2C2Bqn2.cjs"),Ge=require("./GraphHeader.js"),Ye=require("./GraphFooter.js"),Xe=require("./ColorLegendWithMouseOver.js"),_e=require("./Colors.js"),ze=require("./EmptyState-BQguKAp5.cjs"),Ne=require("./index-CEc_9zWy.cjs"),ke=require("./ensureCompleteData-DqWQ2Zbi.cjs"),Ke=require("./init-DU0ybBc_.cjs"),Ze=require("./Axis-BlyBRMNw.cjs"),et=require("./XAxesLabels-C9REbQQs.cjs");function tt(ye){const{data:o,dotColors:p,suffix:z,prefix:K,barPadding:v,showValues:ue,showTicks:ee,leftMargin:te,truncateBy:ce,width:ie,height:ae,rightMargin:J,topMargin:N,bottomMargin:s,radius:q,showLabels:xe,tooltip:M,onSeriesMouseOver:F,maxValue:E,minValue:re,onSeriesMouseClick:B,selectedColor:I,arrowConnector:R,connectorStrokeWidth:pe,maxBarThickness:ne,minBarThickness:se,resetSelectionOnDoubleClick:ge,detailsOnClick:w,axisTitle:U,noOfTicks:fe,valueColor:oe,styles:x,classNames:m,labelOrder:D,refValues:le,rtl:y,animate:l,precision:O,customLayers:G,highlightedDataPoints:Y,dimmedOpacity:L}=ye,j=c.useRef(null),h=_.useInView(j,{once:l.once,amount:l.amount}),d={top:U?N+25:N,bottom:s,left:te,right:J},H=ie-d.left-d.right,W=ae-d.top-d.bottom,[Q,P]=c.useState(void 0),[C,b]=c.useState(void 0),[S,Z]=c.useState(void 0),[V,$]=c.useState(void 0),X=o.map((t,n)=>({...t,id:D?`${t.label}`:`${n}`})),k=D||X.map(t=>`${t.id}`),g=He.linear().domain([re,E]).range([0,H]).nice(),T=We.band().domain(k).range([0,se?Math.max(W,se*X.length):ne?Math.min(W,ne*X.length):W]).paddingInner(v),a=g.ticks(fe);return i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsxs(_.motion.svg,{width:`${ie}px`,height:`${ae}px`,viewBox:`0 0 ${ie} ${ae}`,direction:"ltr",ref:j,children:[R?i.jsxRuntimeExports.jsx("defs",{children:i.jsxRuntimeExports.jsx("marker",{id:"arrow",viewBox:"0 0 10 10",refX:"10",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:i.jsxRuntimeExports.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",className:"fill-primary-gray-600 dark:fill-primary-gray-300"})})}):null,i.jsxRuntimeExports.jsxs("g",{transform:`translate(${d.left},${d.top})`,children:[ee?i.jsxRuntimeExports.jsx(Je.XTicksAndGridLines,{values:a.filter((t,n)=>n!==0),x:a.filter((t,n)=>n!==0).map(t=>g(t)),y1:0-N,y2:W+d.bottom,styles:{gridLines:x?.xAxis?.gridLines,labels:x?.xAxis?.labels},classNames:{gridLines:m?.xAxis?.gridLines,labels:m?.xAxis?.labels},suffix:z,prefix:K,labelType:"secondary",showGridLines:!0,precision:O}):null,i.jsxRuntimeExports.jsx(Fe.AxisTitle,{x:H/2,y:0-d.top+15,style:x?.xAxis?.title,className:m?.xAxis?.title,text:U}),i.jsxRuntimeExports.jsx(Pe.YTicksAndGridLines,{y:X.map(t=>T(`${t.id}`)+T.bandwidth()/2),x1:0,x2:H,styles:{gridLines:x?.yAxis?.gridLines},classNames:{gridLines:m?.yAxis?.gridLines},labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:O}),G.filter(t=>t.position==="before").map(t=>t.layer),i.jsxRuntimeExports.jsxs(Ue.AnimatePresence,{children:[X.map(t=>i.jsxRuntimeExports.jsxs(_.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{x:0,y:T(`${t.id}`)+T.bandwidth()/2,opacity:Y.length!==0?Y.indexOf(t.label)!==-1?.85:L:.85},whileInView:{x:0,y:T(`${t.id}`)+T.bandwidth()/2,opacity:Y.length!==0?Y.indexOf(t.label)!==-1?.85:L:.85,transition:{duration:l.duration}}},initial:"initial",animate:h?"whileInView":"initial",exit:{opacity:0,transition:{duration:l.duration}},children:[xe?i.jsxRuntimeExports.jsx(Qe.YAxesLabels,{value:`${t.label}`.length<ce?`${t.label}`:`${`${t.label}`.substring(0,ce)}...`,y:0-T.bandwidth()/2,x:0-d.left,width:d.left,height:T.bandwidth(),alignment:"right",style:x?.yAxis?.labels,className:m?.yAxis?.labels,animate:l,isInView:h}):null,i.jsxRuntimeExports.jsx(_.motion.line,{y1:0,y2:0,style:{strokeWidth:pe,...x?.dataConnectors||{},opacity:I?.3:1},className:Ee.cnExports.cn("stroke-primary-gray-600 dark:stroke-primary-gray-300",m?.dataConnectors),markerEnd:R&&t.x.indexOf(Math.min(...t.x.filter(n=>n!==null)))===0?"url(#arrow)":"",markerStart:R&&t.x.indexOf(Math.min(...t.x.filter(n=>n!==null)))===t.x.length-1?"url(#arrow)":"",exit:{opacity:0,transition:{duration:l.duration}},variants:{initial:{x1:0,x2:0},whileInView:{x1:g(Math.min(...t.x.filter(n=>n!==null)))+q,x2:g(Math.max(...t.x.filter(n=>n!==null)))-q,transition:{duration:l.duration}}},initial:"initial",animate:h?"whileInView":"initial"}),t.x.map((n,f)=>i.jsxRuntimeExports.jsx(_.motion.g,{onMouseEnter:de=>{P({...t,xIndex:f}),$(de.clientY),Z(de.clientX),F?.({...t,xIndex:f})},onClick:()=>{(B||w)&&(Ve.isEqual(C,{...t,xIndex:f})&&ge?(b(void 0),B?.(void 0)):(b({...t,xIndex:f}),B&&B({...t,xIndex:f})))},onMouseMove:de=>{P({...t,xIndex:f}),$(de.clientY),Z(de.clientX)},onMouseLeave:()=>{P(void 0),Z(void 0),$(void 0),F?.(void 0)},exit:{opacity:0,transition:{duration:l.duration}},variants:{initial:{opacity:I?p[f]===I?1:.3:1},whileInView:{opacity:I?p[f]===I?1:.3:1,transition:{duration:l.duration}}},initial:"initial",animate:h?"whileInView":"initial",children:A.checkIfNullOrUndefined(n)?null:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(_.motion.circle,{cy:0,r:q,style:{fill:p[f],fillOpacity:.85,stroke:p[f],strokeWidth:1,opacity:A.checkIfNullOrUndefined(n)?0:1},exit:{opacity:0,transition:{duration:l.duration}},variants:{initial:{cx:g(0),opacity:0},whileInView:{cx:g(n||0),opacity:A.checkIfNullOrUndefined(n)?0:1,transition:{duration:l.duration}}},initial:"initial",animate:h?"whileInView":"initial"}),ue?i.jsxRuntimeExports.jsx(_.motion.text,{y:0,style:{fill:oe||p[f],textAnchor:"middle",...x?.graphObjectValues||{}},dx:0,dy:0-q-3,className:Ee.cnExports.cn("graph-value text-sm font-bold",A.checkIfNullOrUndefined(n)?"0opacity-0":"opacity-100",m?.graphObjectValues),exit:{opacity:0,transition:{duration:l.duration}},variants:{initial:{x:g(0),opacity:0},whileInView:{x:g(n||0),opacity:1,transition:{duration:l.duration}}},initial:"initial",animate:h?"whileInView":"initial",children:Te.numberFormattingFunction(n,"NA",O,K,z)}):null]})},f))]},t.label)),le?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:le.map((t,n)=>i.jsxRuntimeExports.jsx(Be.RefLineX,{text:t.text,color:t.color,x:g(t.value),y1:0-d.top,y2:W+d.bottom,textSide:g(t.value)>H*.75||y?"left":"right",classNames:t.classNames,styles:t.styles,animate:l,isInView:h},n))}):null]}),G.filter(t=>t.position==="after").map(t=>t.layer)]})]}),Q&&M&&S&&V?i.jsxRuntimeExports.jsx(Ae.Tooltip,{data:Q,body:M,xPos:S,yPos:V,backgroundStyle:x?.tooltip,className:m?.tooltip}):null,w&&C!==void 0?i.jsxRuntimeExports.jsx($e.ModalExports.Modal,{open:C!==void 0,onClose:()=>{b(void 0)},children:i.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof w=="string"?{__html:qe.string2HTML(w,C)}:void 0,children:typeof w=="function"?w(C):null})}):null]})}function it(ye){const{data:o,graphTitle:p,colors:z=_e.Colors.light.categoricalColors.colors,sources:K,graphDescription:v,barPadding:ue=.25,showTicks:ee=!0,leftMargin:te=100,rightMargin:ce=40,topMargin:ie=20,bottomMargin:ae=10,truncateBy:J=999,height:N,width:s,footNote:q,colorDomain:xe,colorLegendTitle:M,padding:F,backgroundColor:E=!1,radius:re=3,showLabels:B=!0,tooltip:I,relativeHeight:R,onSeriesMouseOver:pe,graphID:ne,suffix:se="",prefix:ge="",maxValue:w,minValue:U,onSeriesMouseClick:fe,graphDownload:oe=!1,dataDownload:x=!1,showValues:m=!0,sortParameter:D,arrowConnector:le=!1,connectorStrokeWidth:y=2,language:l="en",minHeight:O=0,theme:G="light",labelOrder:Y,maxBarThickness:L,maxNumberOfBars:j,minBarThickness:h,ariaLabel:d,resetSelectionOnDoubleClick:H=!0,detailsOnClick:W,axisTitle:Q,noOfTicks:P=5,valueColor:C,styles:b,classNames:S,refValues:Z,filterNA:V=!0,animate:$=!1,precision:X=2,customLayers:k=[],showColorScale:g=!0,highlightedDataPoints:T=[],dimmedOpacity:a=.3,timeline:t={enabled:!1,autoplay:!1,showOnlyActiveDate:!0}}=ye,[n,f]=c.useState(0),[de,Re]=c.useState(0),[me,Ie]=c.useState(t.autoplay),u=je.sort(Le.uniqBy(o.filter(e=>e.date!==void 0&&e.date!==null),e=>e.date).map(e=>we.parse(`${e.date}`,t.dateFormat||"yyyy",new Date).getTime()),(e,r)=>Ke.ascending(e,r)),[be,ve]=c.useState(t.autoplay?0:u.length-1),[De,Se]=c.useState(void 0),he=c.useRef(null),Ce=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(r=>{f(s||r[0].target.clientWidth||620),Re(N||r[0].target.clientHeight||480)});return he.current&&(Re(he.current.clientHeight||480),f(he.current.clientWidth||620),s||e.observe(he.current)),()=>e.disconnect()},[s,N]),c.useEffect(()=>{const e=setInterval(()=>{ve(r=>r<u.length-1?r+1:0)},(t.speed||2)*1e3);return me||clearInterval(e),()=>clearInterval(e)},[u,me,t.speed]);const Me=je.getSliderMarks(u,be,t.showOnlyActiveDate,t.dateFormat||"yyyy");return i.jsxRuntimeExports.jsx("div",{className:`${G||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:l==="he"||l==="ar"?"rtl":void 0,children:i.jsxRuntimeExports.jsx("div",{className:Ee.cnExports.cn(`${E?E===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${l||"en"}`,S?.graphContainer),style:{...b?.graphContainer||{},...E&&E!==!0?{backgroundColor:E}:{}},id:ne,ref:Ce,"aria-label":d||`${p?`The graph shows ${p}. `:""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${v?` ${v}`:""}`,children:i.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:E?F||"1rem":F||0},children:i.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[p||v||oe||x?i.jsxRuntimeExports.jsx(Ge.GraphHeader,{styles:{title:b?.title,description:b?.description},classNames:{title:S?.title,description:S?.description},graphTitle:p,graphDescription:v,width:s,graphDownload:oe?Ce.current:void 0,dataDownload:x?o.map(e=>e.data).filter(e=>e!==void 0).length>0?o.map(e=>e.data).filter(e=>e!==void 0):o.filter(e=>e!==void 0):null}):null,t.enabled&&u.length>0&&Me?i.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[i.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{Ie(!me)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":me?"Click to pause animation":"Click to play animation",children:me?i.jsxRuntimeExports.jsx(Ne.Pause,{}):i.jsxRuntimeExports.jsx(Ne.Play,{})}),i.jsxRuntimeExports.jsx(je.SliderUIExports.SliderUI,{min:u[0],max:u[u.length-1],marks:Me,step:null,defaultValue:u[u.length-1],value:u[be],onChangeComplete:e=>{ve(u.indexOf(e))},onChange:e=>{ve(u.indexOf(e))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,i.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:o.length===0?i.jsxRuntimeExports.jsx(ze.EmptyState,{}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[g?i.jsxRuntimeExports.jsx(Xe.ColorLegendWithMouseOver,{width:s,colorDomain:xe,colors:z,colorLegendTitle:M,setSelectedColor:Se,showNAColor:!1}):null,i.jsxRuntimeExports.jsx("div",{className:"flex grow w-full justify-center leading-0",ref:he,"aria-label":"Graph area",children:(s||n)&&(N||de)?i.jsxRuntimeExports.jsx(tt,{data:D!==void 0?D==="diff"?Oe.sortBy(ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>t.enabled?e.date===we.format(new Date(u[be]),t.dateFormat||"yyyy"):e).filter(e=>V?!e.x.every(r=>r==null):e),e=>A.checkIfNullOrUndefined(e.x[e.x.length-1])||A.checkIfNullOrUndefined(e.x[0])?-1/0:e.x[e.x.length-1]-e.x[0]).reverse().filter((e,r)=>j?r<j:!0):Oe.sortBy(ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>t.enabled?e.date===we.format(new Date(u[be]),t.dateFormat||"yyyy"):e).filter(e=>V?!e.x.every(r=>r==null):e),e=>A.checkIfNullOrUndefined(e.x[D])?-1/0:e.x[D]).reverse().filter((e,r)=>j?r<j:!0):ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>V?!e.x.every(r=>r==null):e).filter((e,r)=>j?r<j:!0),dotColors:z,width:s||n,height:Math.max(O,N||(R?O?(s||n)*R>O?(s||n)*R:O:(s||n)*R:de)),suffix:se,prefix:ge,radius:re,barPadding:ue,showTicks:ee,leftMargin:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,truncateBy:J,showLabels:B,showValues:m,tooltip:I,onSeriesMouseOver:pe,maxValue:A.checkIfNullOrUndefined(w)?Math.max(...o.map(e=>Math.max(...e.x.filter(r=>r!==null))))<0?0:Math.max(...o.map(e=>Math.max(...e.x.filter(r=>r!==null)))):w,minValue:A.checkIfNullOrUndefined(U)?Math.min(...o.map(e=>Math.min(...e.x.filter(r=>r!==null))))>0?0:Math.min(...o.map(e=>Math.min(...e.x.filter(r=>r!==null)))):U,onSeriesMouseClick:fe,selectedColor:De,arrowConnector:le,connectorStrokeWidth:y,maxBarThickness:L,minBarThickness:h,resetSelectionOnDoubleClick:H,detailsOnClick:W,axisTitle:Q,noOfTicks:P,valueColor:C,styles:b,classNames:S,labelOrder:Y,refValues:Z,rtl:l==="he"||l==="ar",animate:$===!0?{duration:.5,once:!0,amount:.5}:$||{duration:0,once:!0,amount:0},precision:X,customLayers:k,highlightedDataPoints:T,dimmedOpacity:a}):null})]})}),K||q?i.jsxRuntimeExports.jsx(Ye.GraphFooter,{styles:{footnote:b?.footnote,source:b?.source},classNames:{footnote:S?.footnote,source:S?.source},sources:K,footNote:q,width:s}):null]})})})})}function at(ye){const{data:o,dotColors:p,barPadding:z,showTicks:K,leftMargin:v,truncateBy:ue,width:ee,height:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,radius:J,showLabels:N,tooltip:s,onSeriesMouseOver:q,maxValue:xe,minValue:M,onSeriesMouseClick:F,showValues:E,suffix:re,prefix:B,selectedColor:I,arrowConnector:R,connectorStrokeWidth:pe,maxBarThickness:ne,minBarThickness:se,resetSelectionOnDoubleClick:ge,detailsOnClick:w,axisTitle:U,noOfTicks:fe,valueColor:oe,styles:x,classNames:m,labelOrder:D,refValues:le,animate:y,precision:l,customLayers:O,highlightedDataPoints:G,dimmedOpacity:Y}=ye,L=c.useRef(null),j=_.useInView(L,{once:y.once,amount:y.amount}),h={top:ie,bottom:ae,left:U?v+30:v,right:ce},d=ee-h.left-h.right,H=te-h.top-h.bottom,[W,Q]=c.useState(void 0),[P,C]=c.useState(void 0),[b,S]=c.useState(void 0),[Z,V]=c.useState(void 0),$=o.map((a,t)=>({...a,id:D?`${a.label}`:`${t}`})),X=D||$.map(a=>`${a.id}`),k=He.linear().domain([M,xe]).range([H,0]).nice(),g=We.band().domain(X).range([0,se?Math.max(d,se*$.length):ne?Math.min(d,ne*$.length):d]).paddingInner(z),T=k.ticks(fe);return i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsxs(_.motion.svg,{width:`${ee}px`,height:`${te}px`,viewBox:`0 0 ${ee} ${te}`,direction:"ltr",ref:L,children:[R?i.jsxRuntimeExports.jsx("defs",{children:i.jsxRuntimeExports.jsx("marker",{id:"arrow",viewBox:"0 0 10 10",refX:"10",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse",children:i.jsxRuntimeExports.jsx("path",{d:"M 0 0 L 10 5 L 0 10 z",className:"fill-primary-gray-600 dark:fill-primary-gray-300"})})}):null,i.jsxRuntimeExports.jsxs("g",{transform:`translate(${h.left},${h.top})`,children:[i.jsxRuntimeExports.jsx(Ze.Axis,{y1:k(M<0?0:M),y2:k(M<0?0:M),x1:0-v,x2:d+h.right,label:Te.numberFormattingFunction(M<0?0:M,"NA",l,B,re),labelPos:{x:0-v,dx:0,dy:xe<0?"1em":-5,y:k(M<0?0:M)},classNames:{axis:m?.xAxis?.axis,label:m?.yAxis?.labels},styles:{axis:x?.xAxis?.axis,label:x?.yAxis?.labels}}),K?i.jsxRuntimeExports.jsx(Pe.YTicksAndGridLines,{values:T.filter(a=>a!==0),y:T.filter(a=>a!==0).map(a=>k(a)),x1:0-v,x2:d+h.right,styles:{gridLines:x?.yAxis?.gridLines,labels:x?.yAxis?.labels},classNames:{gridLines:m?.yAxis?.gridLines,labels:m?.yAxis?.labels},suffix:re,prefix:B,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:l}):null,i.jsxRuntimeExports.jsx(Fe.AxisTitle,{x:0-v-15,y:H/2,style:x?.yAxis?.title,className:m?.yAxis?.title,text:U,rotate90:!0}),O.filter(a=>a.position==="before").map(a=>a.layer),i.jsxRuntimeExports.jsxs(Ue.AnimatePresence,{children:[$.map(a=>i.jsxRuntimeExports.jsxs(_.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{x:g(`${a.id}`)+g.bandwidth()/2,y:0,opacity:G.length!==0?G.indexOf(a.label)!==-1?.85:Y:.85},whileInView:{x:g(`${a.id}`)+g.bandwidth()/2,y:0,opacity:G.length!==0?G.indexOf(a.label)!==-1?.85:Y:.85,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial",exit:{opacity:0,transition:{duration:y.duration}},children:[N?i.jsxRuntimeExports.jsx(et.XAxesLabels,{value:`${a.label}`.length<ue?`${a.label}`:`${`${a.label}`.substring(0,ue)}...`,y:H+5,x:0-g.bandwidth()/2,width:g.bandwidth(),height:h.bottom,style:x?.xAxis?.labels,className:m?.xAxis?.labels,alignment:"top",animate:y,isInView:j}):null,i.jsxRuntimeExports.jsx(_.motion.line,{x1:0,x2:0,style:{strokeWidth:pe,...x?.dataConnectors||{},opacity:I?.3:1},className:Ee.cnExports.cn("stroke-primary-gray-600 dark:stroke-primary-gray-300",m?.dataConnectors),markerEnd:R&&a.x.indexOf(Math.min(...a.x.filter(t=>t!==null)))===0?"url(#arrow)":"",markerStart:R&&a.x.indexOf(Math.min(...a.x.filter(t=>t!==null)))===a.x.length-1?"url(#arrow)":"",exit:{opacity:0,transition:{duration:y.duration}},variants:{initial:{y1:0,y2:0},whileInView:{y1:k(Math.min(...a.x.filter(t=>t!==null)))+J,y2:k(Math.max(...a.x.filter(t=>t!==null)))-J,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial"}),a.x.map((t,n)=>i.jsxRuntimeExports.jsx(_.motion.g,{onMouseEnter:f=>{Q({...a,xIndex:n}),V(f.clientY),S(f.clientX),q?.({...a,xIndex:n})},onClick:()=>{(F||w)&&(Ve.isEqual(P,{...a,xIndex:n})&&ge?(C(void 0),F?.(void 0)):(C({...a,xIndex:n}),F&&F({...a,xIndex:n})))},onMouseMove:f=>{Q({...a,xIndex:n}),V(f.clientY),S(f.clientX)},onMouseLeave:()=>{Q(void 0),S(void 0),V(void 0),q?.(void 0)},exit:{opacity:0,transition:{duration:y.duration}},variants:{initial:{opacity:I?p[n]===I?1:.3:1},whileInView:{opacity:I?p[n]===I?1:.3:1,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial",children:A.checkIfNullOrUndefined(t)?null:i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(_.motion.circle,{cx:0,r:J,style:{fill:p[n],fillOpacity:.85,stroke:p[n],strokeWidth:1},exit:{opacity:0,transition:{duration:y.duration}},variants:{initial:{cy:k(0),opacity:0},whileInView:{cy:k(t||0),opacity:A.checkIfNullOrUndefined(t)?0:1,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial"}),E?i.jsxRuntimeExports.jsx(_.motion.text,{x:0,style:{fill:oe||p[n],textAnchor:"start",...x?.graphObjectValues||{}},className:Ee.cnExports.cn("graph-value text-sm font-bold",A.checkIfNullOrUndefined(t)?"opacity-0":"opacity-100",m?.graphObjectValues),dx:J+3,dy:"0.33em",exit:{opacity:0,transition:{duration:y.duration}},variants:{initial:{y:k(0),opacity:0},whileInView:{y:k(t||0),opacity:1,transition:{duration:y.duration}}},initial:"initial",animate:j?"whileInView":"initial",children:Te.numberFormattingFunction(t,"NA",l,B,re)}):null]})},n))]},a.label)),le?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:le.map((a,t)=>i.jsxRuntimeExports.jsx(Be.RefLineY,{text:a.text,color:a.color,y:k(a.value),x1:0-v,x2:d+h.right,classNames:a.classNames,styles:a.styles,animate:y,isInView:j},t))}):null]}),O.filter(a=>a.position==="after").map(a=>a.layer)]})]}),W&&s&&b&&Z?i.jsxRuntimeExports.jsx(Ae.Tooltip,{data:W,body:s,xPos:b,yPos:Z,backgroundStyle:x?.tooltip,className:m?.tooltip}):null,w&&P!==void 0?i.jsxRuntimeExports.jsx($e.ModalExports.Modal,{open:P!==void 0,onClose:()=>{C(void 0)},children:i.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof w=="string"?{__html:qe.string2HTML(w,P)}:void 0,children:typeof w=="function"?w(P):null})}):null]})}function rt(ye){const{data:o,graphTitle:p,colors:z=_e.Colors.light.categoricalColors.colors,sources:K,graphDescription:v,barPadding:ue=.25,showTicks:ee=!0,leftMargin:te=20,rightMargin:ce=20,topMargin:ie=20,bottomMargin:ae=25,truncateBy:J=999,height:N,width:s,footNote:q,colorDomain:xe,colorLegendTitle:M,padding:F,backgroundColor:E=!1,radius:re=3,tooltip:B,showLabels:I=!0,relativeHeight:R,onSeriesMouseOver:pe,graphID:ne,suffix:se="",prefix:ge="",maxValue:w,minValue:U,onSeriesMouseClick:fe,graphDownload:oe=!1,dataDownload:x=!1,showValues:m=!0,sortParameter:D,arrowConnector:le=!1,connectorStrokeWidth:y=2,language:l="en",minHeight:O=0,theme:G="light",maxBarThickness:Y,maxNumberOfBars:L,minBarThickness:j,ariaLabel:h,resetSelectionOnDoubleClick:d=!0,detailsOnClick:H,axisTitle:W,noOfTicks:Q=5,valueColor:P,styles:C,classNames:b,labelOrder:S,refValues:Z,filterNA:V=!0,animate:$=!1,precision:X=2,customLayers:k=[],showColorScale:g=!0,highlightedDataPoints:T=[],dimmedOpacity:a=.3,timeline:t={enabled:!1,autoplay:!1,showOnlyActiveDate:!0}}=ye,[n,f]=c.useState(0),[de,Re]=c.useState(0),[me,Ie]=c.useState(t.autoplay),u=je.sort(Le.uniqBy(o.filter(e=>e.date!==void 0&&e.date!==null),e=>e.date).map(e=>we.parse(`${e.date}`,t.dateFormat||"yyyy",new Date).getTime()),(e,r)=>Ke.ascending(e,r)),[be,ve]=c.useState(t.autoplay?0:u.length-1),[De,Se]=c.useState(void 0),he=c.useRef(null),Ce=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(r=>{f(s||r[0].target.clientWidth||620),Re(N||r[0].target.clientHeight||480)});return he.current&&(Re(he.current.clientHeight||480),f(he.current.clientWidth||620),s||e.observe(he.current)),()=>e.disconnect()},[s,N]),c.useEffect(()=>{const e=setInterval(()=>{ve(r=>r<u.length-1?r+1:0)},(t.speed||2)*1e3);return me||clearInterval(e),()=>clearInterval(e)},[u,me,t.speed]);const Me=je.getSliderMarks(u,be,t.showOnlyActiveDate,t.dateFormat||"yyyy");return i.jsxRuntimeExports.jsx("div",{className:`${G||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:l==="he"||l==="ar"?"rtl":void 0,children:i.jsxRuntimeExports.jsx("div",{className:Ee.cnExports.cn(`${E?E===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${l||"en"}`,b?.graphContainer),style:{...C?.graphContainer||{},...E&&E!==!0?{backgroundColor:E}:{}},id:ne,ref:Ce,"aria-label":h||`${p?`The graph shows ${p}. `:""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${v?` ${v}`:""}`,children:i.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:E?F||"1rem":F||0},children:i.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[p||v||oe||x?i.jsxRuntimeExports.jsx(Ge.GraphHeader,{styles:{title:C?.title,description:C?.description},classNames:{title:b?.title,description:b?.description},graphTitle:p,graphDescription:v,width:s,graphDownload:oe?Ce.current:void 0,dataDownload:x?o.map(e=>e.data).filter(e=>e!==void 0).length>0?o.map(e=>e.data).filter(e=>e!==void 0):o.filter(e=>e!==void 0):null}):null,t.enabled&&u.length>0&&Me?i.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[i.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{Ie(!me)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":me?"Click to pause animation":"Click to play animation",children:me?i.jsxRuntimeExports.jsx(Ne.Pause,{}):i.jsxRuntimeExports.jsx(Ne.Play,{})}),i.jsxRuntimeExports.jsx(je.SliderUIExports.SliderUI,{min:u[0],max:u[u.length-1],marks:Me,step:null,defaultValue:u[u.length-1],value:u[be],onChangeComplete:e=>{ve(u.indexOf(e))},onChange:e=>{ve(u.indexOf(e))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,i.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:o.length===0?i.jsxRuntimeExports.jsx(ze.EmptyState,{}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[g?i.jsxRuntimeExports.jsx(Xe.ColorLegendWithMouseOver,{width:s,colorDomain:xe,colors:z,colorLegendTitle:M,setSelectedColor:Se,showNAColor:!1}):null,i.jsxRuntimeExports.jsx("div",{className:"flex grow w-full justify-center leading-0",ref:he,"aria-label":"Graph area",children:(s||n)&&(N||de)?i.jsxRuntimeExports.jsx(at,{data:D!==void 0?D==="diff"?Oe.sortBy(ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>t.enabled?e.date===we.format(new Date(u[be]),t.dateFormat||"yyyy"):e).filter(e=>V?!e.x.every(r=>r==null):e),e=>A.checkIfNullOrUndefined(e.x[e.x.length-1])||A.checkIfNullOrUndefined(e.x[0])?-1/0:e.x[e.x.length-1]-e.x[0]).filter((e,r)=>L?r<L:!0):Oe.sortBy(ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>t.enabled?e.date===we.format(new Date(u[be]),t.dateFormat||"yyyy"):e).filter(e=>V?!e.x.every(r=>r==null):e),e=>A.checkIfNullOrUndefined(e.x[D])?-1/0:e.x[D]).filter((e,r)=>L?r<L:!0):ke.ensureCompleteDataForDumbbellChart(o,t.dateFormat||"yyyy").filter(e=>V?!e.x.every(r=>r==null):e).filter((e,r)=>L?r<L:!0),dotColors:z,width:s||n,height:Math.max(O,N||(R?O?(s||n)*R>O?(s||n)*R:O:(s||n)*R:de)),radius:re,barPadding:ue,showTicks:ee,leftMargin:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,truncateBy:J,showLabels:I,showValues:m,tooltip:B,suffix:se,prefix:ge,onSeriesMouseOver:pe,maxValue:A.checkIfNullOrUndefined(w)?Math.max(...o.map(e=>Math.max(...e.x.filter(r=>r!==null))))<0?0:Math.max(...o.map(e=>Math.max(...e.x.filter(r=>r!==null)))):w,minValue:A.checkIfNullOrUndefined(U)?Math.min(...o.map(e=>Math.min(...e.x.filter(r=>r!==null))))>0?0:Math.min(...o.map(e=>Math.min(...e.x.filter(r=>r!==null)))):U,onSeriesMouseClick:fe,selectedColor:De,arrowConnector:le,connectorStrokeWidth:y,maxBarThickness:Y,minBarThickness:j,resetSelectionOnDoubleClick:d,detailsOnClick:H,axisTitle:W,noOfTicks:Q,valueColor:P,styles:C,classNames:b,labelOrder:S,refValues:Z,animate:$===!0?{duration:.5,once:!0,amount:.5}:$||{duration:0,once:!0,amount:0},precision:X,customLayers:k,highlightedDataPoints:T,dimmedOpacity:a}):null})]})}),K||q?i.jsxRuntimeExports.jsx(Ye.GraphFooter,{styles:{footnote:C?.footnote,source:C?.source},classNames:{footnote:b?.footnote,source:b?.source},sources:K,footNote:q,width:s}):null]})})})})}function nt(ye){const{data:o,graphTitle:p,colors:z,sources:K,graphDescription:v,barPadding:ue,showTicks:ee,leftMargin:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,truncateBy:J,height:N,width:s,footNote:q,colorDomain:xe,colorLegendTitle:M,padding:F,backgroundColor:E,radius:re,tooltip:B,showLabels:I,relativeHeight:R,onSeriesMouseOver:pe,graphID:ne,suffix:se,prefix:ge,maxValue:w,minValue:U,onSeriesMouseClick:fe,graphDownload:oe,dataDownload:x,showValues:m,sortParameter:D,arrowConnector:le,connectorStrokeWidth:y,language:l,minHeight:O,theme:G,maxBarThickness:Y,maxNumberOfBars:L,minBarThickness:j,ariaLabel:h,resetSelectionOnDoubleClick:d,detailsOnClick:H,axisTitle:W,noOfTicks:Q,valueColor:P,orientation:C="vertical",styles:b,classNames:S,labelOrder:Z,refValues:V,filterNA:$,animate:X,precision:k,showColorScale:g,customLayers:T,highlightedDataPoints:a,dimmedOpacity:t,timeline:n}=ye;return C==="vertical"?i.jsxRuntimeExports.jsx(rt,{data:o,graphTitle:p,colors:z,sources:K,graphDescription:v,barPadding:ue,showTicks:ee,leftMargin:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,truncateBy:J,height:N,width:s,footNote:q,colorDomain:xe,colorLegendTitle:M,padding:F,backgroundColor:E,radius:re,tooltip:B,showLabels:I,relativeHeight:R,onSeriesMouseOver:pe,graphID:ne,suffix:se,prefix:ge,maxValue:w,minValue:U,onSeriesMouseClick:fe,graphDownload:oe,dataDownload:x,showValues:m,sortParameter:D,arrowConnector:le,connectorStrokeWidth:y,language:l,minHeight:O,theme:G,maxBarThickness:Y,maxNumberOfBars:L,minBarThickness:j,ariaLabel:h,resetSelectionOnDoubleClick:d,styles:b,detailsOnClick:H,axisTitle:W,noOfTicks:Q,labelOrder:Z,valueColor:P,classNames:S,refValues:V,filterNA:$,animate:X,precision:k,showColorScale:g,customLayers:T,highlightedDataPoints:a,dimmedOpacity:t,timeline:n}):i.jsxRuntimeExports.jsx(it,{data:o,graphTitle:p,colors:z,sources:K,graphDescription:v,barPadding:ue,showTicks:ee,leftMargin:te,rightMargin:ce,topMargin:ie,bottomMargin:ae,truncateBy:J,height:N,width:s,footNote:q,colorDomain:xe,colorLegendTitle:M,padding:F,backgroundColor:E,radius:re,tooltip:B,showLabels:I,relativeHeight:R,onSeriesMouseOver:pe,graphID:ne,suffix:se,prefix:ge,maxValue:w,minValue:U,onSeriesMouseClick:fe,graphDownload:oe,dataDownload:x,showValues:m,sortParameter:D,arrowConnector:le,connectorStrokeWidth:y,language:l,minHeight:O,theme:G,maxBarThickness:Y,maxNumberOfBars:L,minBarThickness:j,ariaLabel:h,resetSelectionOnDoubleClick:d,styles:b,detailsOnClick:H,axisTitle:W,noOfTicks:Q,valueColor:P,classNames:S,labelOrder:Z,refValues:V,filterNA:$,animate:X,precision:k,showColorScale:g,customLayers:T,highlightedDataPoints:a,dimmedOpacity:t,timeline:n})}exports.DumbbellChart=nt;
+import { j as i, m as ke } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as Ce, useState as L, useEffect as Ne } from "react";
+import { s as De } from "./index-DxagiOHo.js";
+import { p as Ae, f as Ie } from "./parse-DlCRUFh_.js";
+import { s as Se, g as Pe, x as Fe } from "./getSliderMarks-C0jptXeP.js";
+import { u as Be } from "./index-CaAIPGZo.js";
+import { i as We } from "./index-27yTRcko.js";
+import { X as He } from "./Modal-CUU6ZK3U.js";
+import { n as Le } from "./numberFormattingFunction-14YCbkN2.js";
+import { T as Xe } from "./Tooltip-DyM5snqx.js";
+import { c as F } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { s as Ye } from "./string2HTML-CWHGfz_d.js";
+import { X as at } from "./XTicksAndGridLines-Bn9u5gOM.js";
+import { A as Ee } from "./AxisTitle-BmHLMRJZ.js";
+import { Y as rt } from "./YAxesLabels-H5-002X5.js";
+import { Y as _e } from "./YTicksAndGridLines-B6ah7CRf.js";
+import { a as lt, R as nt } from "./ReferenceLine-C1GpoG9d.js";
+import { u as Ge } from "./use-in-view-BAHrBy6b.js";
+import { a as ze } from "./linear-DUdu7l2G.js";
+import { b as Re } from "./band-BEjh2CHI.js";
+import { m as se } from "./proxy-DJxJg1kD.js";
+import { A as qe } from "./index-BxAUvrua.js";
+import { GraphHeader as Ue } from "./GraphHeader.js";
+import { GraphFooter as Je } from "./GraphFooter.js";
+import { ColorLegendWithMouseOver as Ke } from "./ColorLegendWithMouseOver.js";
+import { Colors as Qe } from "./Colors.js";
+import { E as Ze } from "./EmptyState-DdTp-Mdn.js";
+import { P as et, f as tt } from "./index-BmCqpO1B.js";
+import { b as we } from "./ensureCompleteData-BBDZbDCE.js";
+import { c as it } from "./init-BhZylTFx.js";
+import { A as ot } from "./Axis-Ddg-seDi.js";
+import { X as st } from "./XAxesLabels-DQFo_z2R.js";
+function ct(ye) {
+  const {
+    data: o,
+    dotColors: x,
+    suffix: q,
+    prefix: U,
+    barPadding: b,
+    showValues: ce,
+    showTicks: Z,
+    leftMargin: ee,
+    truncateBy: de,
+    width: te,
+    height: ie,
+    rightMargin: J,
+    topMargin: D,
+    bottomMargin: n,
+    radius: B,
+    showLabels: me,
+    tooltip: O,
+    onSeriesMouseOver: W,
+    maxValue: C,
+    minValue: ae,
+    onSeriesMouseClick: X,
+    selectedColor: I,
+    arrowConnector: M,
+    connectorStrokeWidth: ge,
+    maxBarThickness: re,
+    minBarThickness: le,
+    resetSelectionOnDoubleClick: pe,
+    detailsOnClick: v,
+    axisTitle: _,
+    noOfTicks: fe,
+    valueColor: ne,
+    styles: d,
+    classNames: h,
+    labelOrder: V,
+    refValues: oe,
+    rtl: f,
+    animate: s,
+    precision: N,
+    customLayers: G,
+    highlightedDataPoints: z,
+    dimmedOpacity: A
+  } = ye, w = Ce(null), u = Ge(w, {
+    once: s.once,
+    amount: s.amount
+  }), m = {
+    top: _ ? D + 25 : D,
+    bottom: n,
+    left: ee,
+    right: J
+  }, Y = te - m.left - m.right, E = ie - m.top - m.bottom, [K, H] = L(void 0), [j, y] = L(void 0), [T, Q] = L(void 0), [S, P] = L(void 0), R = o.map((t, l) => ({
+    ...t,
+    id: V ? `${t.label}` : `${l}`
+  })), k = V || R.map((t) => `${t.id}`), g = ze().domain([ae, C]).range([0, Y]).nice(), $ = Re().domain(k).range([
+    0,
+    le ? Math.max(E, le * R.length) : re ? Math.min(E, re * R.length) : E
+  ]).paddingInner(b), a = g.ticks(fe);
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsxs(
+      se.svg,
+      {
+        width: `${te}px`,
+        height: `${ie}px`,
+        viewBox: `0 0 ${te} ${ie}`,
+        direction: "ltr",
+        ref: w,
+        children: [
+          M ? /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx(
+            "marker",
+            {
+              id: "arrow",
+              viewBox: "0 0 10 10",
+              refX: "10",
+              refY: "5",
+              markerWidth: "6",
+              markerHeight: "6",
+              orient: "auto-start-reverse",
+              children: /* @__PURE__ */ i.jsx(
+                "path",
+                {
+                  d: "M 0 0 L 10 5 L 0 10 z",
+                  className: "fill-primary-gray-600 dark:fill-primary-gray-300"
+                }
+              )
+            }
+          ) }) : null,
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${m.left},${m.top})`, children: [
+            Z ? /* @__PURE__ */ i.jsx(
+              at,
+              {
+                values: a.filter((t, l) => l !== 0),
+                x: a.filter((t, l) => l !== 0).map((t) => g(t)),
+                y1: 0 - D,
+                y2: E + m.bottom,
+                styles: {
+                  gridLines: d?.xAxis?.gridLines,
+                  labels: d?.xAxis?.labels
+                },
+                classNames: {
+                  gridLines: h?.xAxis?.gridLines,
+                  labels: h?.xAxis?.labels
+                },
+                suffix: q,
+                prefix: U,
+                labelType: "secondary",
+                showGridLines: !0,
+                precision: N
+              }
+            ) : null,
+            /* @__PURE__ */ i.jsx(
+              Ee,
+              {
+                x: Y / 2,
+                y: 0 - m.top + 15,
+                style: d?.xAxis?.title,
+                className: h?.xAxis?.title,
+                text: _
+              }
+            ),
+            /* @__PURE__ */ i.jsx(
+              _e,
+              {
+                y: R.map((t) => $(`${t.id}`) + $.bandwidth() / 2),
+                x1: 0,
+                x2: Y,
+                styles: { gridLines: d?.yAxis?.gridLines },
+                classNames: { gridLines: h?.yAxis?.gridLines },
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: N
+              }
+            ),
+            G.filter((t) => t.position === "before").map((t) => t.layer),
+            /* @__PURE__ */ i.jsxs(qe, { children: [
+              R.map((t) => /* @__PURE__ */ i.jsxs(
+                se.g,
+                {
+                  className: "undp-viz-g-with-hover",
+                  variants: {
+                    initial: {
+                      x: 0,
+                      y: $(`${t.id}`) + $.bandwidth() / 2,
+                      opacity: z.length !== 0 ? z.indexOf(t.label) !== -1 ? 0.85 : A : 0.85
+                    },
+                    whileInView: {
+                      x: 0,
+                      y: $(`${t.id}`) + $.bandwidth() / 2,
+                      opacity: z.length !== 0 ? z.indexOf(t.label) !== -1 ? 0.85 : A : 0.85,
+                      transition: { duration: s.duration }
+                    }
+                  },
+                  initial: "initial",
+                  animate: u ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: s.duration } },
+                  children: [
+                    me ? /* @__PURE__ */ i.jsx(
+                      rt,
+                      {
+                        value: `${t.label}`.length < de ? `${t.label}` : `${`${t.label}`.substring(0, de)}...`,
+                        y: 0 - $.bandwidth() / 2,
+                        x: 0 - m.left,
+                        width: m.left,
+                        height: $.bandwidth(),
+                        alignment: "right",
+                        style: d?.yAxis?.labels,
+                        className: h?.yAxis?.labels,
+                        animate: s,
+                        isInView: u
+                      }
+                    ) : null,
+                    /* @__PURE__ */ i.jsx(
+                      se.line,
+                      {
+                        y1: 0,
+                        y2: 0,
+                        style: {
+                          strokeWidth: ge,
+                          ...d?.dataConnectors || {},
+                          opacity: I ? 0.3 : 1
+                        },
+                        className: ke(
+                          "stroke-primary-gray-600 dark:stroke-primary-gray-300",
+                          h?.dataConnectors
+                        ),
+                        markerEnd: M && t.x.indexOf(Math.min(...t.x.filter((l) => l !== null))) === 0 ? "url(#arrow)" : "",
+                        markerStart: M && t.x.indexOf(Math.min(...t.x.filter((l) => l !== null))) === t.x.length - 1 ? "url(#arrow)" : "",
+                        exit: { opacity: 0, transition: { duration: s.duration } },
+                        variants: {
+                          initial: {
+                            x1: 0,
+                            x2: 0
+                          },
+                          whileInView: {
+                            x1: g(Math.min(...t.x.filter((l) => l !== null))) + B,
+                            x2: g(Math.max(...t.x.filter((l) => l !== null))) - B,
+                            transition: { duration: s.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: u ? "whileInView" : "initial"
+                      }
+                    ),
+                    t.x.map((l, p) => /* @__PURE__ */ i.jsx(
+                      se.g,
+                      {
+                        onMouseEnter: (he) => {
+                          H({ ...t, xIndex: p }), P(he.clientY), Q(he.clientX), W?.({ ...t, xIndex: p });
+                        },
+                        onClick: () => {
+                          (X || v) && (We(j, { ...t, xIndex: p }) && pe ? (y(void 0), X?.(void 0)) : (y({ ...t, xIndex: p }), X && X({ ...t, xIndex: p })));
+                        },
+                        onMouseMove: (he) => {
+                          H({ ...t, xIndex: p }), P(he.clientY), Q(he.clientX);
+                        },
+                        onMouseLeave: () => {
+                          H(void 0), Q(void 0), P(void 0), W?.(void 0);
+                        },
+                        exit: { opacity: 0, transition: { duration: s.duration } },
+                        variants: {
+                          initial: {
+                            opacity: I ? x[p] === I ? 1 : 0.3 : 1
+                          },
+                          whileInView: {
+                            opacity: I ? x[p] === I ? 1 : 0.3 : 1,
+                            transition: { duration: s.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: u ? "whileInView" : "initial",
+                        children: F(l) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                          /* @__PURE__ */ i.jsx(
+                            se.circle,
+                            {
+                              cy: 0,
+                              r: B,
+                              style: {
+                                fill: x[p],
+                                fillOpacity: 0.85,
+                                stroke: x[p],
+                                strokeWidth: 1,
+                                opacity: F(l) ? 0 : 1
+                              },
+                              exit: { opacity: 0, transition: { duration: s.duration } },
+                              variants: {
+                                initial: { cx: g(0), opacity: 0 },
+                                whileInView: {
+                                  cx: g(l || 0),
+                                  opacity: F(l) ? 0 : 1,
+                                  transition: { duration: s.duration }
+                                }
+                              },
+                              initial: "initial",
+                              animate: u ? "whileInView" : "initial"
+                            }
+                          ),
+                          ce ? /* @__PURE__ */ i.jsx(
+                            se.text,
+                            {
+                              y: 0,
+                              style: {
+                                fill: ne || x[p],
+                                textAnchor: "middle",
+                                ...d?.graphObjectValues || {}
+                              },
+                              dx: 0,
+                              dy: 0 - B - 3,
+                              className: ke(
+                                "graph-value text-sm font-bold",
+                                F(l) ? "0opacity-0" : "opacity-100",
+                                h?.graphObjectValues
+                              ),
+                              exit: { opacity: 0, transition: { duration: s.duration } },
+                              variants: {
+                                initial: { x: g(0), opacity: 0 },
+                                whileInView: {
+                                  x: g(l || 0),
+                                  opacity: 1,
+                                  transition: { duration: s.duration }
+                                }
+                              },
+                              initial: "initial",
+                              animate: u ? "whileInView" : "initial",
+                              children: Le(l, "NA", N, U, q)
+                            }
+                          ) : null
+                        ] })
+                      },
+                      p
+                    ))
+                  ]
+                },
+                t.label
+              )),
+              oe ? /* @__PURE__ */ i.jsx(i.Fragment, { children: oe.map((t, l) => /* @__PURE__ */ i.jsx(
+                lt,
+                {
+                  text: t.text,
+                  color: t.color,
+                  x: g(t.value),
+                  y1: 0 - m.top,
+                  y2: E + m.bottom,
+                  textSide: g(t.value) > Y * 0.75 || f ? "left" : "right",
+                  classNames: t.classNames,
+                  styles: t.styles,
+                  animate: s,
+                  isInView: u
+                },
+                l
+              )) }) : null
+            ] }),
+            G.filter((t) => t.position === "after").map((t) => t.layer)
+          ] })
+        ]
+      }
+    ),
+    K && O && T && S ? /* @__PURE__ */ i.jsx(
+      Xe,
+      {
+        data: K,
+        body: O,
+        xPos: T,
+        yPos: S,
+        backgroundStyle: d?.tooltip,
+        className: h?.tooltip
+      }
+    ) : null,
+    v && j !== void 0 ? /* @__PURE__ */ i.jsx(
+      He,
+      {
+        open: j !== void 0,
+        onClose: () => {
+          y(void 0);
+        },
+        children: /* @__PURE__ */ i.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ye(v, j) } : void 0,
+            children: typeof v == "function" ? v(j) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function dt(ye) {
+  const {
+    data: o,
+    graphTitle: x,
+    colors: q = Qe.light.categoricalColors.colors,
+    sources: U,
+    graphDescription: b,
+    barPadding: ce = 0.25,
+    showTicks: Z = !0,
+    leftMargin: ee = 100,
+    rightMargin: de = 40,
+    topMargin: te = 20,
+    bottomMargin: ie = 10,
+    truncateBy: J = 999,
+    height: D,
+    width: n,
+    footNote: B,
+    colorDomain: me,
+    colorLegendTitle: O,
+    padding: W,
+    backgroundColor: C = !1,
+    radius: ae = 3,
+    showLabels: X = !0,
+    tooltip: I,
+    relativeHeight: M,
+    onSeriesMouseOver: ge,
+    graphID: re,
+    suffix: le = "",
+    prefix: pe = "",
+    maxValue: v,
+    minValue: _,
+    onSeriesMouseClick: fe,
+    graphDownload: ne = !1,
+    dataDownload: d = !1,
+    showValues: h = !0,
+    sortParameter: V,
+    arrowConnector: oe = !1,
+    connectorStrokeWidth: f = 2,
+    language: s = "en",
+    minHeight: N = 0,
+    theme: G = "light",
+    labelOrder: z,
+    maxBarThickness: A,
+    maxNumberOfBars: w,
+    minBarThickness: u,
+    ariaLabel: m,
+    resetSelectionOnDoubleClick: Y = !0,
+    detailsOnClick: E,
+    axisTitle: K,
+    noOfTicks: H = 5,
+    valueColor: j,
+    styles: y,
+    classNames: T,
+    refValues: Q,
+    filterNA: S = !0,
+    animate: P = !1,
+    precision: R = 2,
+    customLayers: k = [],
+    showColorScale: g = !0,
+    highlightedDataPoints: $ = [],
+    dimmedOpacity: a = 0.3,
+    timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
+  } = ye, [l, p] = L(0), [he, Me] = L(0), [ue, Ve] = L(t.autoplay), c = Se(
+    Be(
+      o.filter((e) => e.date !== void 0 && e.date !== null),
+      (e) => e.date
+    ).map((e) => Ae(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
+    (e, r) => it(e, r)
+  ), [be, ve] = L(t.autoplay ? 0 : c.length - 1), [Te, $e] = L(void 0), xe = Ce(null), je = Ce(null);
+  Ne(() => {
+    const e = new ResizeObserver((r) => {
+      p(n || r[0].target.clientWidth || 620), Me(D || r[0].target.clientHeight || 480);
+    });
+    return xe.current && (Me(xe.current.clientHeight || 480), p(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+  }, [n, D]), Ne(() => {
+    const e = setInterval(
+      () => {
+        ve((r) => r < c.length - 1 ? r + 1 : 0);
+      },
+      (t.speed || 2) * 1e3
+    );
+    return ue || clearInterval(e), () => clearInterval(e);
+  }, [c, ue, t.speed]);
+  const Oe = Pe(
+    c,
+    be,
+    t.showOnlyActiveDate,
+    t.dateFormat || "yyyy"
+  );
+  return /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
+      dir: s === "he" || s === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          className: ke(
+            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${s || "en"}`,
+            T?.graphContainer
+          ),
+          style: {
+            ...y?.graphContainer || {},
+            ...C && C !== !0 ? { backgroundColor: C } : {}
+          },
+          id: re,
+          ref: je,
+          "aria-label": m || `${x ? `The graph shows ${x}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          children: /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: C ? W || "1rem" : W || 0 },
+              children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                x || b || ne || d ? /* @__PURE__ */ i.jsx(
+                  Ue,
+                  {
+                    styles: {
+                      title: y?.title,
+                      description: y?.description
+                    },
+                    classNames: {
+                      title: T?.title,
+                      description: T?.description
+                    },
+                    graphTitle: x,
+                    graphDescription: b,
+                    width: n,
+                    graphDownload: ne ? je.current : void 0,
+                    dataDownload: d ? o.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? o.map((e) => e.data).filter((e) => e !== void 0) : o.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                t.enabled && c.length > 0 && Oe ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                  /* @__PURE__ */ i.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        Ve(!ue);
+                      },
+                      className: "p-0 border-0 cursor-pointer bg-transparent",
+                      "aria-label": ue ? "Click to pause animation" : "Click to play animation",
+                      children: ue ? /* @__PURE__ */ i.jsx(et, {}) : /* @__PURE__ */ i.jsx(tt, {})
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    Fe,
+                    {
+                      min: c[0],
+                      max: c[c.length - 1],
+                      marks: Oe,
+                      step: null,
+                      defaultValue: c[c.length - 1],
+                      value: c[be],
+                      onChangeComplete: (e) => {
+                        ve(c.indexOf(e));
+                      },
+                      onChange: (e) => {
+                        ve(c.indexOf(e));
+                      },
+                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ i.jsx(Ze, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  g ? /* @__PURE__ */ i.jsx(
+                    Ke,
+                    {
+                      width: n,
+                      colorDomain: me,
+                      colors: q,
+                      colorLegendTitle: O,
+                      setSelectedColor: $e,
+                      showNAColor: !1
+                    }
+                  ) : null,
+                  /* @__PURE__ */ i.jsx(
+                    "div",
+                    {
+                      className: "flex grow w-full justify-center leading-0",
+                      ref: xe,
+                      "aria-label": "Graph area",
+                      children: (n || l) && (D || he) ? /* @__PURE__ */ i.jsx(
+                        ct,
+                        {
+                          data: V !== void 0 ? V === "diff" ? De(
+                            we(
+                              o,
+                              t.dateFormat || "yyyy"
+                            ).filter(
+                              (e) => t.enabled ? e.date === Ie(
+                                new Date(c[be]),
+                                t.dateFormat || "yyyy"
+                              ) : e
+                            ).filter((e) => S ? !e.x.every((r) => r == null) : e),
+                            (e) => F(e.x[e.x.length - 1]) || F(e.x[0]) ? -1 / 0 : e.x[e.x.length - 1] - e.x[0]
+                          ).reverse().filter((e, r) => w ? r < w : !0) : De(
+                            we(
+                              o,
+                              t.dateFormat || "yyyy"
+                            ).filter(
+                              (e) => t.enabled ? e.date === Ie(
+                                new Date(c[be]),
+                                t.dateFormat || "yyyy"
+                              ) : e
+                            ).filter((e) => S ? !e.x.every((r) => r == null) : e),
+                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V]
+                          ).reverse().filter((e, r) => w ? r < w : !0) : we(
+                            o,
+                            t.dateFormat || "yyyy"
+                          ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => w ? r < w : !0),
+                          dotColors: q,
+                          width: n || l,
+                          height: Math.max(
+                            N,
+                            D || (M ? N ? (n || l) * M > N ? (n || l) * M : N : (n || l) * M : he)
+                          ),
+                          suffix: le,
+                          prefix: pe,
+                          radius: ae,
+                          barPadding: ce,
+                          showTicks: Z,
+                          leftMargin: ee,
+                          rightMargin: de,
+                          topMargin: te,
+                          bottomMargin: ie,
+                          truncateBy: J,
+                          showLabels: X,
+                          showValues: h,
+                          tooltip: I,
+                          onSeriesMouseOver: ge,
+                          maxValue: F(v) ? Math.max(
+                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                          ) < 0 ? 0 : Math.max(
+                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                          ) : v,
+                          minValue: F(_) ? Math.min(
+                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                          ) > 0 ? 0 : Math.min(
+                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                          ) : _,
+                          onSeriesMouseClick: fe,
+                          selectedColor: Te,
+                          arrowConnector: oe,
+                          connectorStrokeWidth: f,
+                          maxBarThickness: A,
+                          minBarThickness: u,
+                          resetSelectionOnDoubleClick: Y,
+                          detailsOnClick: E,
+                          axisTitle: K,
+                          noOfTicks: H,
+                          valueColor: j,
+                          styles: y,
+                          classNames: T,
+                          labelOrder: z,
+                          refValues: Q,
+                          rtl: s === "he" || s === "ar",
+                          animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
+                          precision: R,
+                          customLayers: k,
+                          highlightedDataPoints: $,
+                          dimmedOpacity: a
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                U || B ? /* @__PURE__ */ i.jsx(
+                  Je,
+                  {
+                    styles: { footnote: y?.footnote, source: y?.source },
+                    classNames: {
+                      footnote: T?.footnote,
+                      source: T?.source
+                    },
+                    sources: U,
+                    footNote: B,
+                    width: n
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function mt(ye) {
+  const {
+    data: o,
+    dotColors: x,
+    barPadding: q,
+    showTicks: U,
+    leftMargin: b,
+    truncateBy: ce,
+    width: Z,
+    height: ee,
+    rightMargin: de,
+    topMargin: te,
+    bottomMargin: ie,
+    radius: J,
+    showLabels: D,
+    tooltip: n,
+    onSeriesMouseOver: B,
+    maxValue: me,
+    minValue: O,
+    onSeriesMouseClick: W,
+    showValues: C,
+    suffix: ae,
+    prefix: X,
+    selectedColor: I,
+    arrowConnector: M,
+    connectorStrokeWidth: ge,
+    maxBarThickness: re,
+    minBarThickness: le,
+    resetSelectionOnDoubleClick: pe,
+    detailsOnClick: v,
+    axisTitle: _,
+    noOfTicks: fe,
+    valueColor: ne,
+    styles: d,
+    classNames: h,
+    labelOrder: V,
+    refValues: oe,
+    animate: f,
+    precision: s,
+    customLayers: N,
+    highlightedDataPoints: G,
+    dimmedOpacity: z
+  } = ye, A = Ce(null), w = Ge(A, {
+    once: f.once,
+    amount: f.amount
+  }), u = {
+    top: te,
+    bottom: ie,
+    left: _ ? b + 30 : b,
+    right: de
+  }, m = Z - u.left - u.right, Y = ee - u.top - u.bottom, [E, K] = L(void 0), [H, j] = L(void 0), [y, T] = L(void 0), [Q, S] = L(void 0), P = o.map((a, t) => ({
+    ...a,
+    id: V ? `${a.label}` : `${t}`
+  })), R = V || P.map((a) => `${a.id}`), k = ze().domain([O, me]).range([Y, 0]).nice(), g = Re().domain(R).range([
+    0,
+    le ? Math.max(m, le * P.length) : re ? Math.min(m, re * P.length) : m
+  ]).paddingInner(q), $ = k.ticks(fe);
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsxs(
+      se.svg,
+      {
+        width: `${Z}px`,
+        height: `${ee}px`,
+        viewBox: `0 0 ${Z} ${ee}`,
+        direction: "ltr",
+        ref: A,
+        children: [
+          M ? /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx(
+            "marker",
+            {
+              id: "arrow",
+              viewBox: "0 0 10 10",
+              refX: "10",
+              refY: "5",
+              markerWidth: "6",
+              markerHeight: "6",
+              orient: "auto-start-reverse",
+              children: /* @__PURE__ */ i.jsx(
+                "path",
+                {
+                  d: "M 0 0 L 10 5 L 0 10 z",
+                  className: "fill-primary-gray-600 dark:fill-primary-gray-300"
+                }
+              )
+            }
+          ) }) : null,
+          /* @__PURE__ */ i.jsxs("g", { transform: `translate(${u.left},${u.top})`, children: [
+            /* @__PURE__ */ i.jsx(
+              ot,
+              {
+                y1: k(O < 0 ? 0 : O),
+                y2: k(O < 0 ? 0 : O),
+                x1: 0 - b,
+                x2: m + u.right,
+                label: Le(
+                  O < 0 ? 0 : O,
+                  "NA",
+                  s,
+                  X,
+                  ae
+                ),
+                labelPos: {
+                  x: 0 - b,
+                  dx: 0,
+                  dy: me < 0 ? "1em" : -5,
+                  y: k(O < 0 ? 0 : O)
+                },
+                classNames: {
+                  axis: h?.xAxis?.axis,
+                  label: h?.yAxis?.labels
+                },
+                styles: { axis: d?.xAxis?.axis, label: d?.yAxis?.labels }
+              }
+            ),
+            U ? /* @__PURE__ */ i.jsx(
+              _e,
+              {
+                values: $.filter((a) => a !== 0),
+                y: $.filter((a) => a !== 0).map((a) => k(a)),
+                x1: 0 - b,
+                x2: m + u.right,
+                styles: {
+                  gridLines: d?.yAxis?.gridLines,
+                  labels: d?.yAxis?.labels
+                },
+                classNames: {
+                  gridLines: h?.yAxis?.gridLines,
+                  labels: h?.yAxis?.labels
+                },
+                suffix: ae,
+                prefix: X,
+                labelType: "secondary",
+                showGridLines: !0,
+                labelPos: "vertical",
+                precision: s
+              }
+            ) : null,
+            /* @__PURE__ */ i.jsx(
+              Ee,
+              {
+                x: 0 - b - 15,
+                y: Y / 2,
+                style: d?.yAxis?.title,
+                className: h?.yAxis?.title,
+                text: _,
+                rotate90: !0
+              }
+            ),
+            N.filter((a) => a.position === "before").map((a) => a.layer),
+            /* @__PURE__ */ i.jsxs(qe, { children: [
+              P.map((a) => /* @__PURE__ */ i.jsxs(
+                se.g,
+                {
+                  className: "undp-viz-g-with-hover",
+                  variants: {
+                    initial: {
+                      x: g(`${a.id}`) + g.bandwidth() / 2,
+                      y: 0,
+                      opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85
+                    },
+                    whileInView: {
+                      x: g(`${a.id}`) + g.bandwidth() / 2,
+                      y: 0,
+                      opacity: G.length !== 0 ? G.indexOf(a.label) !== -1 ? 0.85 : z : 0.85,
+                      transition: { duration: f.duration }
+                    }
+                  },
+                  initial: "initial",
+                  animate: w ? "whileInView" : "initial",
+                  exit: { opacity: 0, transition: { duration: f.duration } },
+                  children: [
+                    D ? /* @__PURE__ */ i.jsx(
+                      st,
+                      {
+                        value: `${a.label}`.length < ce ? `${a.label}` : `${`${a.label}`.substring(0, ce)}...`,
+                        y: Y + 5,
+                        x: 0 - g.bandwidth() / 2,
+                        width: g.bandwidth(),
+                        height: u.bottom,
+                        style: d?.xAxis?.labels,
+                        className: h?.xAxis?.labels,
+                        alignment: "top",
+                        animate: f,
+                        isInView: w
+                      }
+                    ) : null,
+                    /* @__PURE__ */ i.jsx(
+                      se.line,
+                      {
+                        x1: 0,
+                        x2: 0,
+                        style: {
+                          strokeWidth: ge,
+                          ...d?.dataConnectors || {},
+                          opacity: I ? 0.3 : 1
+                        },
+                        className: ke(
+                          "stroke-primary-gray-600 dark:stroke-primary-gray-300",
+                          h?.dataConnectors
+                        ),
+                        markerEnd: M && a.x.indexOf(Math.min(...a.x.filter((t) => t !== null))) === 0 ? "url(#arrow)" : "",
+                        markerStart: M && a.x.indexOf(Math.min(...a.x.filter((t) => t !== null))) === a.x.length - 1 ? "url(#arrow)" : "",
+                        exit: { opacity: 0, transition: { duration: f.duration } },
+                        variants: {
+                          initial: {
+                            y1: 0,
+                            y2: 0
+                          },
+                          whileInView: {
+                            y1: k(Math.min(...a.x.filter((t) => t !== null))) + J,
+                            y2: k(Math.max(...a.x.filter((t) => t !== null))) - J,
+                            transition: { duration: f.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: w ? "whileInView" : "initial"
+                      }
+                    ),
+                    a.x.map((t, l) => /* @__PURE__ */ i.jsx(
+                      se.g,
+                      {
+                        onMouseEnter: (p) => {
+                          K({ ...a, xIndex: l }), S(p.clientY), T(p.clientX), B?.({ ...a, xIndex: l });
+                        },
+                        onClick: () => {
+                          (W || v) && (We(H, { ...a, xIndex: l }) && pe ? (j(void 0), W?.(void 0)) : (j({ ...a, xIndex: l }), W && W({ ...a, xIndex: l })));
+                        },
+                        onMouseMove: (p) => {
+                          K({ ...a, xIndex: l }), S(p.clientY), T(p.clientX);
+                        },
+                        onMouseLeave: () => {
+                          K(void 0), T(void 0), S(void 0), B?.(void 0);
+                        },
+                        exit: { opacity: 0, transition: { duration: f.duration } },
+                        variants: {
+                          initial: {
+                            opacity: I ? x[l] === I ? 1 : 0.3 : 1
+                          },
+                          whileInView: {
+                            opacity: I ? x[l] === I ? 1 : 0.3 : 1,
+                            transition: { duration: f.duration }
+                          }
+                        },
+                        initial: "initial",
+                        animate: w ? "whileInView" : "initial",
+                        children: F(t) ? null : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                          /* @__PURE__ */ i.jsx(
+                            se.circle,
+                            {
+                              cx: 0,
+                              r: J,
+                              style: {
+                                fill: x[l],
+                                fillOpacity: 0.85,
+                                stroke: x[l],
+                                strokeWidth: 1
+                              },
+                              exit: { opacity: 0, transition: { duration: f.duration } },
+                              variants: {
+                                initial: { cy: k(0), opacity: 0 },
+                                whileInView: {
+                                  cy: k(t || 0),
+                                  opacity: F(t) ? 0 : 1,
+                                  transition: { duration: f.duration }
+                                }
+                              },
+                              initial: "initial",
+                              animate: w ? "whileInView" : "initial"
+                            }
+                          ),
+                          C ? /* @__PURE__ */ i.jsx(
+                            se.text,
+                            {
+                              x: 0,
+                              style: {
+                                fill: ne || x[l],
+                                textAnchor: "start",
+                                ...d?.graphObjectValues || {}
+                              },
+                              className: ke(
+                                "graph-value text-sm font-bold",
+                                F(t) ? "opacity-0" : "opacity-100",
+                                h?.graphObjectValues
+                              ),
+                              dx: J + 3,
+                              dy: "0.33em",
+                              exit: { opacity: 0, transition: { duration: f.duration } },
+                              variants: {
+                                initial: { y: k(0), opacity: 0 },
+                                whileInView: {
+                                  y: k(t || 0),
+                                  opacity: 1,
+                                  transition: { duration: f.duration }
+                                }
+                              },
+                              initial: "initial",
+                              animate: w ? "whileInView" : "initial",
+                              children: Le(t, "NA", s, X, ae)
+                            }
+                          ) : null
+                        ] })
+                      },
+                      l
+                    ))
+                  ]
+                },
+                a.label
+              )),
+              oe ? /* @__PURE__ */ i.jsx(i.Fragment, { children: oe.map((a, t) => /* @__PURE__ */ i.jsx(
+                nt,
+                {
+                  text: a.text,
+                  color: a.color,
+                  y: k(a.value),
+                  x1: 0 - b,
+                  x2: m + u.right,
+                  classNames: a.classNames,
+                  styles: a.styles,
+                  animate: f,
+                  isInView: w
+                },
+                t
+              )) }) : null
+            ] }),
+            N.filter((a) => a.position === "after").map((a) => a.layer)
+          ] })
+        ]
+      }
+    ),
+    E && n && y && Q ? /* @__PURE__ */ i.jsx(
+      Xe,
+      {
+        data: E,
+        body: n,
+        xPos: y,
+        yPos: Q,
+        backgroundStyle: d?.tooltip,
+        className: h?.tooltip
+      }
+    ) : null,
+    v && H !== void 0 ? /* @__PURE__ */ i.jsx(
+      He,
+      {
+        open: H !== void 0,
+        onClose: () => {
+          j(void 0);
+        },
+        children: /* @__PURE__ */ i.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof v == "string" ? { __html: Ye(v, H) } : void 0,
+            children: typeof v == "function" ? v(H) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ht(ye) {
+  const {
+    data: o,
+    graphTitle: x,
+    colors: q = Qe.light.categoricalColors.colors,
+    sources: U,
+    graphDescription: b,
+    barPadding: ce = 0.25,
+    showTicks: Z = !0,
+    leftMargin: ee = 20,
+    rightMargin: de = 20,
+    topMargin: te = 20,
+    bottomMargin: ie = 25,
+    truncateBy: J = 999,
+    height: D,
+    width: n,
+    footNote: B,
+    colorDomain: me,
+    colorLegendTitle: O,
+    padding: W,
+    backgroundColor: C = !1,
+    radius: ae = 3,
+    tooltip: X,
+    showLabels: I = !0,
+    relativeHeight: M,
+    onSeriesMouseOver: ge,
+    graphID: re,
+    suffix: le = "",
+    prefix: pe = "",
+    maxValue: v,
+    minValue: _,
+    onSeriesMouseClick: fe,
+    graphDownload: ne = !1,
+    dataDownload: d = !1,
+    showValues: h = !0,
+    sortParameter: V,
+    arrowConnector: oe = !1,
+    connectorStrokeWidth: f = 2,
+    language: s = "en",
+    minHeight: N = 0,
+    theme: G = "light",
+    maxBarThickness: z,
+    maxNumberOfBars: A,
+    minBarThickness: w,
+    ariaLabel: u,
+    resetSelectionOnDoubleClick: m = !0,
+    detailsOnClick: Y,
+    axisTitle: E,
+    noOfTicks: K = 5,
+    valueColor: H,
+    styles: j,
+    classNames: y,
+    labelOrder: T,
+    refValues: Q,
+    filterNA: S = !0,
+    animate: P = !1,
+    precision: R = 2,
+    customLayers: k = [],
+    showColorScale: g = !0,
+    highlightedDataPoints: $ = [],
+    dimmedOpacity: a = 0.3,
+    timeline: t = { enabled: !1, autoplay: !1, showOnlyActiveDate: !0 }
+  } = ye, [l, p] = L(0), [he, Me] = L(0), [ue, Ve] = L(t.autoplay), c = Se(
+    Be(
+      o.filter((e) => e.date !== void 0 && e.date !== null),
+      (e) => e.date
+    ).map((e) => Ae(`${e.date}`, t.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()),
+    (e, r) => it(e, r)
+  ), [be, ve] = L(t.autoplay ? 0 : c.length - 1), [Te, $e] = L(void 0), xe = Ce(null), je = Ce(null);
+  Ne(() => {
+    const e = new ResizeObserver((r) => {
+      p(n || r[0].target.clientWidth || 620), Me(D || r[0].target.clientHeight || 480);
+    });
+    return xe.current && (Me(xe.current.clientHeight || 480), p(xe.current.clientWidth || 620), n || e.observe(xe.current)), () => e.disconnect();
+  }, [n, D]), Ne(() => {
+    const e = setInterval(
+      () => {
+        ve((r) => r < c.length - 1 ? r + 1 : 0);
+      },
+      (t.speed || 2) * 1e3
+    );
+    return ue || clearInterval(e), () => clearInterval(e);
+  }, [c, ue, t.speed]);
+  const Oe = Pe(
+    c,
+    be,
+    t.showOnlyActiveDate,
+    t.dateFormat || "yyyy"
+  );
+  return /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      className: `${G || "light"} flex  ${n ? "w-fit grow-0" : "w-full grow"}`,
+      dir: s === "he" || s === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          className: ke(
+            `${C ? C === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${s || "en"}`,
+            y?.graphContainer
+          ),
+          style: {
+            ...j?.graphContainer || {},
+            ...C && C !== !0 ? { backgroundColor: C } : {}
+          },
+          id: re,
+          ref: je,
+          "aria-label": u || `${x ? `The graph shows ${x}. ` : ""}This is a dumbbell chart that shows comparisons between two or more data points across categories. ${b ? ` ${b}` : ""}`,
+          children: /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: C ? W || "1rem" : W || 0 },
+              children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                x || b || ne || d ? /* @__PURE__ */ i.jsx(
+                  Ue,
+                  {
+                    styles: {
+                      title: j?.title,
+                      description: j?.description
+                    },
+                    classNames: {
+                      title: y?.title,
+                      description: y?.description
+                    },
+                    graphTitle: x,
+                    graphDescription: b,
+                    width: n,
+                    graphDownload: ne ? je.current : void 0,
+                    dataDownload: d ? o.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? o.map((e) => e.data).filter((e) => e !== void 0) : o.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                t.enabled && c.length > 0 && Oe ? /* @__PURE__ */ i.jsxs("div", { className: "flex gap-6 items-center", dir: "ltr", children: [
+                  /* @__PURE__ */ i.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        Ve(!ue);
+                      },
+                      className: "p-0 border-0 cursor-pointer bg-transparent",
+                      "aria-label": ue ? "Click to pause animation" : "Click to play animation",
+                      children: ue ? /* @__PURE__ */ i.jsx(et, {}) : /* @__PURE__ */ i.jsx(tt, {})
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    Fe,
+                    {
+                      min: c[0],
+                      max: c[c.length - 1],
+                      marks: Oe,
+                      step: null,
+                      defaultValue: c[c.length - 1],
+                      value: c[be],
+                      onChangeComplete: (e) => {
+                        ve(c.indexOf(e));
+                      },
+                      onChange: (e) => {
+                        ve(c.indexOf(e));
+                      },
+                      "aria-label": "Time slider. Use arrow keys to adjust selected time period."
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ i.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ i.jsx(Ze, {}) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                  g ? /* @__PURE__ */ i.jsx(
+                    Ke,
+                    {
+                      width: n,
+                      colorDomain: me,
+                      colors: q,
+                      colorLegendTitle: O,
+                      setSelectedColor: $e,
+                      showNAColor: !1
+                    }
+                  ) : null,
+                  /* @__PURE__ */ i.jsx(
+                    "div",
+                    {
+                      className: "flex grow w-full justify-center leading-0",
+                      ref: xe,
+                      "aria-label": "Graph area",
+                      children: (n || l) && (D || he) ? /* @__PURE__ */ i.jsx(
+                        mt,
+                        {
+                          data: V !== void 0 ? V === "diff" ? De(
+                            we(
+                              o,
+                              t.dateFormat || "yyyy"
+                            ).filter(
+                              (e) => t.enabled ? e.date === Ie(
+                                new Date(c[be]),
+                                t.dateFormat || "yyyy"
+                              ) : e
+                            ).filter((e) => S ? !e.x.every((r) => r == null) : e),
+                            (e) => F(e.x[e.x.length - 1]) || F(e.x[0]) ? -1 / 0 : e.x[e.x.length - 1] - e.x[0]
+                          ).filter((e, r) => A ? r < A : !0) : De(
+                            we(
+                              o,
+                              t.dateFormat || "yyyy"
+                            ).filter(
+                              (e) => t.enabled ? e.date === Ie(
+                                new Date(c[be]),
+                                t.dateFormat || "yyyy"
+                              ) : e
+                            ).filter((e) => S ? !e.x.every((r) => r == null) : e),
+                            (e) => F(e.x[V]) ? -1 / 0 : e.x[V]
+                          ).filter((e, r) => A ? r < A : !0) : we(
+                            o,
+                            t.dateFormat || "yyyy"
+                          ).filter((e) => S ? !e.x.every((r) => r == null) : e).filter((e, r) => A ? r < A : !0),
+                          dotColors: q,
+                          width: n || l,
+                          height: Math.max(
+                            N,
+                            D || (M ? N ? (n || l) * M > N ? (n || l) * M : N : (n || l) * M : he)
+                          ),
+                          radius: ae,
+                          barPadding: ce,
+                          showTicks: Z,
+                          leftMargin: ee,
+                          rightMargin: de,
+                          topMargin: te,
+                          bottomMargin: ie,
+                          truncateBy: J,
+                          showLabels: I,
+                          showValues: h,
+                          tooltip: X,
+                          suffix: le,
+                          prefix: pe,
+                          onSeriesMouseOver: ge,
+                          maxValue: F(v) ? Math.max(
+                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                          ) < 0 ? 0 : Math.max(
+                            ...o.map((e) => Math.max(...e.x.filter((r) => r !== null)))
+                          ) : v,
+                          minValue: F(_) ? Math.min(
+                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                          ) > 0 ? 0 : Math.min(
+                            ...o.map((e) => Math.min(...e.x.filter((r) => r !== null)))
+                          ) : _,
+                          onSeriesMouseClick: fe,
+                          selectedColor: Te,
+                          arrowConnector: oe,
+                          connectorStrokeWidth: f,
+                          maxBarThickness: z,
+                          minBarThickness: w,
+                          resetSelectionOnDoubleClick: m,
+                          detailsOnClick: Y,
+                          axisTitle: E,
+                          noOfTicks: K,
+                          valueColor: H,
+                          styles: j,
+                          classNames: y,
+                          labelOrder: T,
+                          refValues: Q,
+                          animate: P === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : P || { duration: 0, once: !0, amount: 0 },
+                          precision: R,
+                          customLayers: k,
+                          highlightedDataPoints: $,
+                          dimmedOpacity: a
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                U || B ? /* @__PURE__ */ i.jsx(
+                  Je,
+                  {
+                    styles: { footnote: j?.footnote, source: j?.source },
+                    classNames: {
+                      footnote: y?.footnote,
+                      source: y?.source
+                    },
+                    sources: U,
+                    footNote: B,
+                    width: n
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Gt(ye) {
+  const {
+    data: o,
+    graphTitle: x,
+    colors: q,
+    sources: U,
+    graphDescription: b,
+    barPadding: ce,
+    showTicks: Z,
+    leftMargin: ee,
+    rightMargin: de,
+    topMargin: te,
+    bottomMargin: ie,
+    truncateBy: J,
+    height: D,
+    width: n,
+    footNote: B,
+    colorDomain: me,
+    colorLegendTitle: O,
+    padding: W,
+    backgroundColor: C,
+    radius: ae,
+    tooltip: X,
+    showLabels: I,
+    relativeHeight: M,
+    onSeriesMouseOver: ge,
+    graphID: re,
+    suffix: le,
+    prefix: pe,
+    maxValue: v,
+    minValue: _,
+    onSeriesMouseClick: fe,
+    graphDownload: ne,
+    dataDownload: d,
+    showValues: h,
+    sortParameter: V,
+    arrowConnector: oe,
+    connectorStrokeWidth: f,
+    language: s,
+    minHeight: N,
+    theme: G,
+    maxBarThickness: z,
+    maxNumberOfBars: A,
+    minBarThickness: w,
+    ariaLabel: u,
+    resetSelectionOnDoubleClick: m,
+    detailsOnClick: Y,
+    axisTitle: E,
+    noOfTicks: K,
+    valueColor: H,
+    orientation: j = "vertical",
+    styles: y,
+    classNames: T,
+    labelOrder: Q,
+    refValues: S,
+    filterNA: P,
+    animate: R,
+    precision: k,
+    showColorScale: g,
+    customLayers: $,
+    highlightedDataPoints: a,
+    dimmedOpacity: t,
+    timeline: l
+  } = ye;
+  return j === "vertical" ? /* @__PURE__ */ i.jsx(
+    ht,
+    {
+      data: o,
+      graphTitle: x,
+      colors: q,
+      sources: U,
+      graphDescription: b,
+      barPadding: ce,
+      showTicks: Z,
+      leftMargin: ee,
+      rightMargin: de,
+      topMargin: te,
+      bottomMargin: ie,
+      truncateBy: J,
+      height: D,
+      width: n,
+      footNote: B,
+      colorDomain: me,
+      colorLegendTitle: O,
+      padding: W,
+      backgroundColor: C,
+      radius: ae,
+      tooltip: X,
+      showLabels: I,
+      relativeHeight: M,
+      onSeriesMouseOver: ge,
+      graphID: re,
+      suffix: le,
+      prefix: pe,
+      maxValue: v,
+      minValue: _,
+      onSeriesMouseClick: fe,
+      graphDownload: ne,
+      dataDownload: d,
+      showValues: h,
+      sortParameter: V,
+      arrowConnector: oe,
+      connectorStrokeWidth: f,
+      language: s,
+      minHeight: N,
+      theme: G,
+      maxBarThickness: z,
+      maxNumberOfBars: A,
+      minBarThickness: w,
+      ariaLabel: u,
+      resetSelectionOnDoubleClick: m,
+      styles: y,
+      detailsOnClick: Y,
+      axisTitle: E,
+      noOfTicks: K,
+      labelOrder: Q,
+      valueColor: H,
+      classNames: T,
+      refValues: S,
+      filterNA: P,
+      animate: R,
+      precision: k,
+      showColorScale: g,
+      customLayers: $,
+      highlightedDataPoints: a,
+      dimmedOpacity: t,
+      timeline: l
+    }
+  ) : /* @__PURE__ */ i.jsx(
+    dt,
+    {
+      data: o,
+      graphTitle: x,
+      colors: q,
+      sources: U,
+      graphDescription: b,
+      barPadding: ce,
+      showTicks: Z,
+      leftMargin: ee,
+      rightMargin: de,
+      topMargin: te,
+      bottomMargin: ie,
+      truncateBy: J,
+      height: D,
+      width: n,
+      footNote: B,
+      colorDomain: me,
+      colorLegendTitle: O,
+      padding: W,
+      backgroundColor: C,
+      radius: ae,
+      tooltip: X,
+      showLabels: I,
+      relativeHeight: M,
+      onSeriesMouseOver: ge,
+      graphID: re,
+      suffix: le,
+      prefix: pe,
+      maxValue: v,
+      minValue: _,
+      onSeriesMouseClick: fe,
+      graphDownload: ne,
+      dataDownload: d,
+      showValues: h,
+      sortParameter: V,
+      arrowConnector: oe,
+      connectorStrokeWidth: f,
+      language: s,
+      minHeight: N,
+      theme: G,
+      maxBarThickness: z,
+      maxNumberOfBars: A,
+      minBarThickness: w,
+      ariaLabel: u,
+      resetSelectionOnDoubleClick: m,
+      styles: y,
+      detailsOnClick: Y,
+      axisTitle: E,
+      noOfTicks: K,
+      valueColor: H,
+      classNames: T,
+      labelOrder: Q,
+      refValues: S,
+      filterNA: P,
+      animate: R,
+      precision: k,
+      showColorScale: g,
+      customLayers: $,
+      highlightedDataPoints: a,
+      dimmedOpacity: t,
+      timeline: l
+    }
+  );
+}
+export {
+  Gt as DumbbellChart
+};
 //# sourceMappingURL=DumbbellChart.js.map