@undp/data-viz 1.3.0 → 1.3.1

package/dist/StripChart.js

@@ -1,2 +1,989 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-BHm2KTjD-D8FylaKc.cjs"),ue=require("./index-CZbIGs8q.cjs"),g=require("react"),ae=require("./Typography-CDR-DAHH.cjs"),de=require("./index-BXns0-ng.cjs"),pe=require("./index-BzeLQvXk.cjs"),ge=require("./Modal-cQF2UQIa.cjs"),fe=require("./Tooltip-BM18N_3l.cjs"),K=require("./checkIfNullOrUndefined.js"),he=require("./numberFormattingFunction.js"),c=require("./Colors.js"),me=require("./string2HTML-X4ZYX5jI.cjs"),J=require("./use-in-view-Dl1CsAIo.cjs"),ye=require("./linear-BVckp9RD.cjs"),ve=require("./index-a2C2Bqn2.cjs"),je=require("./GraphFooter.js"),we=require("./GraphHeader.js"),Oe=require("./ColorLegendWithMouseOver.js"),Ce=require("./EmptyState-BQguKAp5.cjs");function be(L,i){if(L<2)return[];const x=i/(L-1);return Array.from({length:L},(f,o)=>o*x)}function Ee(L){const{data:i,width:x,height:f,colors:o,colorDomain:a,radius:u,leftMargin:s,rightMargin:P,topMargin:W,bottomMargin:te,tooltip:U,onSeriesMouseOver:D,highlightedDataPoints:l,selectedColor:z,minValue:B,maxValue:G,onSeriesMouseClick:k,prefix:Q,suffix:C,stripType:Z,highlightColor:v,dotOpacity:j,resetSelectionOnDoubleClick:ie,detailsOnClick:N,styles:E,classNames:I,valueColor:V,animate:m,noOfTicks:w,dimmedOpacity:$,precision:X,customLayers:M}=L,Y=g.useRef(null),R=J.useInView(Y,{once:m.once,amount:m.amount}),[T,y]=g.useState(void 0),[d,q]=g.useState(void 0),[_,H]=g.useState(void 0),[p,h]=g.useState(void 0),O={top:W,bottom:te,left:s,right:P},S=x-O.left-O.right,A=f-O.top-O.bottom,oe=i.map((e,t)=>({...e,id:`${t}`})),re=pe.sortBy(oe,e=>{const t=(l||[]).indexOf(e.label);return t===-1?1/0:t}).reverse(),ne=K.checkIfNullOrUndefined(G)?Math.max(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position))<0?0:Math.max(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position)):G,b=K.checkIfNullOrUndefined(B)?Math.min(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position))>=0?0:Math.min(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position)):B,F=ye.linear().domain([b,ne]).range([0,S]).nice(),le=be(w,S);return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(J.motion.svg,{width:`${x}px`,height:`${f}px`,viewBox:`0 0 ${x} ${f}`,direction:"ltr",ref:Y,children:r.jsxRuntimeExports.jsxs("g",{transform:`translate(${O.left},${O.top})`,children:[M.filter(e=>e.position==="before").map(e=>e.layer),r.jsxRuntimeExports.jsxs(ve.AnimatePresence,{children:[re.map(e=>r.jsxRuntimeExports.jsxs(J.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{opacity:0,x:F(0),y:A/2},whileInView:{x:F(e.position),y:A/2,opacity:z?e.color&&o[a.indexOf(e.color)]===z?.95:$:l.length!==0?l.indexOf(e.label)!==-1?.95:$:j,transition:{duration:m.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:m.duration}},onMouseEnter:t=>{y(e),h(t.clientY),H(t.clientX),D?.(e)},onClick:()=>{(k||N)&&(de.isEqual(d,e)&&ie?(q(void 0),k?.(void 0)):(q(e),k?.(e)))},onMouseMove:t=>{y(e),h(t.clientY),H(t.clientX)},onMouseLeave:()=>{y(void 0),H(void 0),h(void 0),D?.(void 0)},children:[Z==="dot"?r.jsxRuntimeExports.jsx(J.motion.circle,{cy:0,cx:0,variants:{initial:{fill:v&&l?l.indexOf(e.label)!==-1?v:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray},whileInView:{fill:v&&l?l.indexOf(e.label)!==-1?v:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray,transition:{duration:m.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:m.duration}},r:u}):r.jsxRuntimeExports.jsx(J.motion.rect,{y:0-u,x:-1,height:u*2,width:2,variants:{initial:{fill:v&&l?l.indexOf(e.label)!==-1?v:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray},whileInView:{fill:v&&l?l.indexOf(e.label)!==-1?v:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray,transition:{duration:m.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:m.duration}}}),l.length!==0&&l.indexOf(e.label)!==-1?r.jsxRuntimeExports.jsx(J.motion.text,{x:0,y:0-u-5,variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:m.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:m.duration}},style:{fill:V||(v&&l?l.indexOf(e.label)!==-1?v:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray),textAnchor:"middle",...E?.graphObjectValues||{}},className:ae.cnExports.cn("graph-value text-sm font-bold",I?.graphObjectValues),children:he.numberFormattingFunction(e.position,"NA",X,Q,C)}):null]},e.label)),le.map((e,t)=>r.jsxRuntimeExports.jsx("text",{x:e,y:A/2+u,style:{textAnchor:t===0?"start":t===le.length-1?"end":"middle",...E?.xAxis?.labels||{}},className:ae.cnExports.cn("fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",I?.xAxis?.labels),dy:"1em",children:he.numberFormattingFunction(F.invert(e),"NA",X,Q,C)},t))]}),M.filter(e=>e.position==="after").map(e=>e.layer)]})}),T&&U&&_&&p?r.jsxRuntimeExports.jsx(fe.Tooltip,{data:T,body:U,xPos:_,yPos:p,backgroundStyle:E?.tooltip,className:I?.tooltip}):null,N&&d!==void 0?r.jsxRuntimeExports.jsx(ge.ModalExports.Modal,{open:d!==void 0,onClose:()=>{q(void 0)},children:r.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof N=="string"?{__html:me.string2HTML(N,d)}:void 0,children:typeof N=="function"?N(d):null})}):null]})}function Me(L){const{data:i,graphTitle:x,colors:f,sources:o,graphDescription:a,height:u,width:s,footNote:P,colorDomain:W,colorLegendTitle:te,radius:U=5,padding:D,backgroundColor:l=!1,leftMargin:z=5,rightMargin:B=5,topMargin:G=10,bottomMargin:k=10,tooltip:Q,relativeHeight:C,onSeriesMouseOver:Z,showColorScale:v=!0,highlightedDataPoints:j=[],graphID:ie,minValue:N,maxValue:E,onSeriesMouseClick:I,graphDownload:V=!1,dataDownload:m=!1,prefix:w="",suffix:$="",stripType:X="dot",language:M="en",highlightColor:Y,dotOpacity:R=.3,showNAColor:T=!0,minHeight:y=0,theme:d="light",ariaLabel:q,resetSelectionOnDoubleClick:_=!0,detailsOnClick:H,styles:p,classNames:h,valueColor:O,animate:S=!1,noOfTicks:A=2,dimmedOpacity:oe=.3,precision:re=2,customLayers:ne=[]}=L,[b,F]=g.useState(0),[le,e]=g.useState(0),[t,xe]=g.useState(void 0),ee=g.useRef(null),se=g.useRef(null);return g.useEffect(()=>{const n=new ResizeObserver(ce=>{F(s||ce[0].target.clientWidth||620),e(u||ce[0].target.clientHeight||480)});return ee.current&&(e(ee.current.clientHeight||480),F(ee.current.clientWidth||620),s||n.observe(ee.current)),()=>n.disconnect()},[s,u]),r.jsxRuntimeExports.jsx("div",{className:`${d||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:M==="he"||M==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:ae.cnExports.cn(`${l?l===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M||"en"}`,h?.graphContainer),style:{...p?.graphContainer||{},...l&&l!==!0?{backgroundColor:l}:{}},id:ie,ref:se,"aria-label":q||`${x?`The graph shows ${x}. `:""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${a?` ${a}`:""}`,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?D||"1rem":D||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[x||a||V||m?r.jsxRuntimeExports.jsx(we.GraphHeader,{styles:{title:p?.title,description:p?.description},classNames:{title:h?.title,description:h?.description},graphTitle:x,graphDescription:a,width:s,graphDownload:V?se.current:void 0,dataDownload:m?i.map(n=>n.data).filter(n=>n!==void 0).length>0?i.map(n=>n.data).filter(n=>n!==void 0):i.filter(n=>n!==void 0):null}):null,r.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:i.length===0?r.jsxRuntimeExports.jsx(Ce.EmptyState,{}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[v!==!1&&i.filter(n=>n.color).length!==0?r.jsxRuntimeExports.jsx(Oe.ColorLegendWithMouseOver,{width:s,colorLegendTitle:te,colors:f||c.Colors[d].categoricalColors.colors,colorDomain:W||ue.uniqBy(i.filter(n=>n.color),"color").map(n=>n.color),setSelectedColor:xe,showNAColor:T??!0}):null,r.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:ee,"aria-label":"Graph area",children:(s||b)&&(u||le)?r.jsxRuntimeExports.jsx(Ee,{data:i,width:s||b,height:Math.max(y,u||(C?y?(s||b)*C>y?(s||b)*C:y:(s||b)*C:le)),colorDomain:i.filter(n=>n.color).length===0?[]:W||ue.uniqBy(i.filter(n=>n.color),"color").map(n=>n.color),colors:i.filter(n=>n.color).length===0?f?[f]:[c.Colors.primaryColors["blue-600"]]:f||c.Colors[d].categoricalColors.colors,selectedColor:t,radius:U,leftMargin:z,rightMargin:B,topMargin:G,bottomMargin:k,tooltip:Q,onSeriesMouseOver:Z,highlightedDataPoints:j,minValue:N,maxValue:E,onSeriesMouseClick:I,prefix:w,suffix:$,stripType:X,highlightColor:Y,dotOpacity:R,resetSelectionOnDoubleClick:_,detailsOnClick:H,styles:p,classNames:h,valueColor:O,animate:S===!0?{duration:.5,once:!0,amount:.5}:S||{duration:0,once:!0,amount:0},noOfTicks:A,dimmedOpacity:oe,precision:re,customLayers:ne}):null})]})}),o||P?r.jsxRuntimeExports.jsx(je.GraphFooter,{styles:{footnote:p?.footnote,source:p?.source},classNames:{footnote:h?.footnote,source:h?.source},sources:o,footNote:P,width:s}):null]})})})})}function Re(L){const{data:i,width:x,height:f,colors:o,colorDomain:a,radius:u,leftMargin:s,rightMargin:P,topMargin:W,bottomMargin:te,tooltip:U,onSeriesMouseOver:D,highlightedDataPoints:l,selectedColor:z,minValue:B,maxValue:G,onSeriesMouseClick:k,noOfTicks:Q,prefix:C,suffix:Z,stripType:v,highlightColor:j,dotOpacity:ie,resetSelectionOnDoubleClick:N,detailsOnClick:E,styles:I,classNames:V,valueColor:m,animate:w,dimmedOpacity:$,precision:X,customLayers:M}=L,Y=g.useRef(null),R=J.useInView(Y,{once:w.once,amount:w.amount}),[T,y]=g.useState(void 0),[d,q]=g.useState(void 0),[_,H]=g.useState(void 0),[p,h]=g.useState(void 0),O={top:W,bottom:te,left:s,right:P},S=x-O.left-O.right,A=f-O.top-O.bottom,oe=i.map((e,t)=>({...e,id:`${t}`})),re=pe.sortBy(oe,e=>{const t=(l||[]).indexOf(e.label);return t===-1?1/0:t}).reverse(),ne=K.checkIfNullOrUndefined(G)?Math.max(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position))<0?0:Math.max(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position)):G,b=K.checkIfNullOrUndefined(B)?Math.min(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position))>=0?0:Math.min(...i.filter(e=>!K.checkIfNullOrUndefined(e.position)).map(e=>e.position)):B,F=ye.linear().domain([b,ne]).range([A,0]).nice(),le=be(Q,A);return r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(J.motion.svg,{width:`${x}px`,height:`${f}px`,viewBox:`0 0 ${x} ${f}`,direction:"ltr",ref:Y,children:r.jsxRuntimeExports.jsxs("g",{transform:`translate(${O.left},${O.top})`,children:[M.filter(e=>e.position==="before").map(e=>e.layer),r.jsxRuntimeExports.jsxs(ve.AnimatePresence,{children:[re.map(e=>r.jsxRuntimeExports.jsxs(J.motion.g,{className:"undp-viz-g-with-hover",variants:{initial:{opacity:0,x:S/2,y:F(0)},whileInView:{x:S/2,y:F(e.position),opacity:z?e.color&&o[a.indexOf(e.color)]===z?.95:$:l.length!==0?l.indexOf(e.label)!==-1?.95:$:ie,transition:{duration:w.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:w.duration}},onMouseEnter:t=>{y(e),h(t.clientY),H(t.clientX),D?.(e)},onClick:()=>{(k||E)&&(de.isEqual(d,e)&&N?(q(void 0),k?.(void 0)):(q(e),k?.(e)))},onMouseMove:t=>{y(e),h(t.clientY),H(t.clientX)},onMouseLeave:()=>{y(void 0),H(void 0),h(void 0),D?.(void 0)},children:[v==="dot"?r.jsxRuntimeExports.jsx(J.motion.circle,{cy:0,cx:0,variants:{initial:{fill:j&&l?l.indexOf(e.label)!==-1?j:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray},whileInView:{fill:j&&l?l.indexOf(e.label)!==-1?j:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray,transition:{duration:w.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:w.duration}},r:u}):r.jsxRuntimeExports.jsx(J.motion.rect,{x:0-u,y:-1,width:u*2,height:2,variants:{initial:{fill:j&&l?l.indexOf(e.label)!==-1?j:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray},whileInView:{fill:j&&l?l.indexOf(e.label)!==-1?j:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray,transition:{duration:w.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:w.duration}}}),l.length!==0&&l.indexOf(e.label)!==-1?r.jsxRuntimeExports.jsx(J.motion.text,{y:0,dy:"0.33em",x:0+u+3,variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:w.duration}}},initial:"initial",animate:R?"whileInView":"initial",exit:{opacity:0,transition:{duration:w.duration}},style:{fill:m||(j&&l?l.indexOf(e.label)!==-1?j:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray:i.filter(t=>t.color).length===0?o[0]:e.color?o[a.indexOf(e.color)]:c.Colors.gray),textAnchor:"start",...I?.graphObjectValues||{}},className:ae.cnExports.cn("graph-value text-sm font-bold",V?.graphObjectValues),children:he.numberFormattingFunction(e.position,"NA",X,C,Z)}):null]},e.label)),le.map((e,t)=>r.jsxRuntimeExports.jsx("text",{y:e,x:S/2+u+5,style:{textAnchor:"start",...I?.yAxis?.labels||{}},className:ae.cnExports.cn("fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",V?.yAxis?.labels),children:he.numberFormattingFunction(F.invert(e),"NA",X,C,Z)},t))]}),M.filter(e=>e.position==="after").map(e=>e.layer)]})}),T&&U&&_&&p?r.jsxRuntimeExports.jsx(fe.Tooltip,{data:T,body:U,xPos:_,yPos:p,backgroundStyle:I?.tooltip,className:V?.tooltip}):null,E&&d!==void 0?r.jsxRuntimeExports.jsx(ge.ModalExports.Modal,{open:d!==void 0,onClose:()=>{q(void 0)},children:r.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof E=="string"?{__html:me.string2HTML(E,d)}:void 0,children:typeof E=="function"?E(d):null})}):null]})}function Ne(L){const{data:i,graphTitle:x,colors:f,sources:o,graphDescription:a,height:u,width:s,footNote:P,colorDomain:W,colorLegendTitle:te,radius:U=5,padding:D,backgroundColor:l=!1,leftMargin:z=20,rightMargin:B=20,topMargin:G=10,bottomMargin:k=10,tooltip:Q,relativeHeight:C,onSeriesMouseOver:Z,showColorScale:v=!0,highlightedDataPoints:j=[],graphID:ie,minValue:N,maxValue:E,onSeriesMouseClick:I,graphDownload:V=!1,dataDownload:m=!1,prefix:w="",suffix:$="",stripType:X="dot",language:M="en",highlightColor:Y,dotOpacity:R=.3,showNAColor:T=!0,minHeight:y=0,theme:d="light",ariaLabel:q,resetSelectionOnDoubleClick:_=!0,detailsOnClick:H,styles:p,classNames:h,valueColor:O,animate:S=!1,noOfTicks:A=2,dimmedOpacity:oe=.3,precision:re=2,customLayers:ne=[]}=L,[b,F]=g.useState(0),[le,e]=g.useState(0),[t,xe]=g.useState(void 0),ee=g.useRef(null),se=g.useRef(null);return g.useEffect(()=>{const n=new ResizeObserver(ce=>{F(s||ce[0].target.clientWidth||620),e(u||ce[0].target.clientHeight||480)});return ee.current&&(e(ee.current.clientHeight||480),F(ee.current.clientWidth||620),s||n.observe(ee.current)),()=>n.disconnect()},[s,u]),r.jsxRuntimeExports.jsx("div",{className:`${d||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:M==="he"||M==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:ae.cnExports.cn(`${l?l===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M||"en"}`,h?.graphContainer),style:{...p?.graphContainer||{},...l&&l!==!0?{backgroundColor:l}:{}},id:ie,ref:se,"aria-label":q||`${x?`The graph shows ${x}. `:""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${a?` ${a}`:""}`,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?D||"1rem":D||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[x||a||V||m?r.jsxRuntimeExports.jsx(we.GraphHeader,{styles:{title:p?.title,description:p?.description},classNames:{title:h?.title,description:h?.description},graphTitle:x,graphDescription:a,width:s,graphDownload:V?se.current:void 0,dataDownload:m?i.map(n=>n.data).filter(n=>n!==void 0).length>0?i.map(n=>n.data).filter(n=>n!==void 0):i.filter(n=>n!==void 0):null}):null,r.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:i.length===0?r.jsxRuntimeExports.jsx(Ce.EmptyState,{}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[v!==!1&&i.filter(n=>n.color).length!==0?r.jsxRuntimeExports.jsx(Oe.ColorLegendWithMouseOver,{width:s,colorLegendTitle:te,colors:f||c.Colors[d].categoricalColors.colors,colorDomain:W||ue.uniqBy(i.filter(n=>n.color),"color").map(n=>n.color),setSelectedColor:xe,showNAColor:T}):null,r.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:ee,children:(s||b)&&(u||le)?r.jsxRuntimeExports.jsx(Re,{data:i,width:s||b,height:Math.max(y,u||(C?y?(s||b)*C>y?(s||b)*C:y:(s||b)*C:le)),colorDomain:i.filter(n=>n.color).length===0?[]:W||ue.uniqBy(i.filter(n=>n.color),"color").map(n=>n.color),colors:i.filter(n=>n.color).length===0?f?[f]:[c.Colors.primaryColors["blue-600"]]:f||c.Colors[d].categoricalColors.colors,selectedColor:t,radius:U,leftMargin:z,rightMargin:B,topMargin:G,bottomMargin:k,tooltip:Q,onSeriesMouseOver:Z,highlightedDataPoints:j,minValue:N,maxValue:E,onSeriesMouseClick:I,prefix:w,suffix:$,stripType:X,highlightColor:Y,dotOpacity:R,resetSelectionOnDoubleClick:_,detailsOnClick:H,styles:p,classNames:h,valueColor:O,animate:S===!0?{duration:.5,once:!0,amount:.5}:S||{duration:0,once:!0,amount:0},noOfTicks:A,dimmedOpacity:oe,precision:re,customLayers:ne}):null})]})}),o||P?r.jsxRuntimeExports.jsx(je.GraphFooter,{styles:{footnote:p?.footnote,source:p?.source},classNames:{footnote:h?.footnote,source:h?.source},sources:o,footNote:P,width:s}):null]})})})})}function Se(L){const{data:i,graphTitle:x,colors:f,sources:o,graphDescription:a,height:u,width:s,footNote:P,colorDomain:W,colorLegendTitle:te,radius:U,padding:D,backgroundColor:l,leftMargin:z,rightMargin:B,topMargin:G,bottomMargin:k,tooltip:Q,relativeHeight:C,onSeriesMouseOver:Z,showColorScale:v,highlightedDataPoints:j,graphID:ie,minValue:N,maxValue:E,onSeriesMouseClick:I,noOfTicks:V,graphDownload:m,dataDownload:w,prefix:$,suffix:X,stripType:M,language:Y,highlightColor:R,dotOpacity:T,showNAColor:y,minHeight:d,theme:q,ariaLabel:_,valueColor:H,resetSelectionOnDoubleClick:p,detailsOnClick:h,orientation:O="vertical",styles:S,classNames:A,animate:oe,dimmedOpacity:re=.3,precision:ne,customLayers:b}=L;return O==="vertical"?r.jsxRuntimeExports.jsx(Ne,{data:i,graphTitle:x,colors:f,sources:o,graphDescription:a,height:u,width:s,footNote:P,colorDomain:W,colorLegendTitle:te,radius:U,padding:D,backgroundColor:l,leftMargin:z,rightMargin:B,topMargin:G,bottomMargin:k,tooltip:Q,relativeHeight:C,onSeriesMouseOver:Z,showColorScale:v,highlightedDataPoints:j,graphID:ie,minValue:N,maxValue:E,onSeriesMouseClick:I,noOfTicks:V,graphDownload:m,dataDownload:w,prefix:$,suffix:X,stripType:M,language:Y,highlightColor:R,dotOpacity:T,showNAColor:y,minHeight:d,theme:q,ariaLabel:_,resetSelectionOnDoubleClick:p,styles:S,valueColor:H,detailsOnClick:h,classNames:A,animate:oe,dimmedOpacity:re,precision:ne,customLayers:b}):r.jsxRuntimeExports.jsx(Me,{data:i,graphTitle:x,colors:f,sources:o,graphDescription:a,height:u,width:s,footNote:P,colorDomain:W,colorLegendTitle:te,radius:U,padding:D,backgroundColor:l,leftMargin:z,rightMargin:B,topMargin:G,bottomMargin:k,tooltip:Q,relativeHeight:C,onSeriesMouseOver:Z,showColorScale:v,highlightedDataPoints:j,graphID:ie,minValue:N,maxValue:E,onSeriesMouseClick:I,noOfTicks:V,graphDownload:m,dataDownload:w,prefix:$,suffix:X,stripType:M,language:Y,highlightColor:R,dotOpacity:T,showNAColor:y,minHeight:d,theme:q,ariaLabel:_,resetSelectionOnDoubleClick:p,styles:S,valueColor:H,detailsOnClick:h,classNames:A,animate:oe,dimmedOpacity:re,precision:ne,customLayers:b})}exports.StripChart=Se;
+import { j as r, m as ni } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { u as gi } from "./index-CaAIPGZo.js";
+import { useRef as si, useState as E, useEffect as ui } from "react";
+import { i as pi } from "./index-27yTRcko.js";
+import { s as mi } from "./index-DxagiOHo.js";
+import { X as xi } from "./Modal-CUU6ZK3U.js";
+import { T as yi } from "./Tooltip-DyM5snqx.js";
+import { c as J } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { n as di } from "./numberFormattingFunction-14YCbkN2.js";
+import { Colors as c } from "./Colors.js";
+import { s as vi } from "./string2HTML-CWHGfz_d.js";
+import { u as wi } from "./use-in-view-BAHrBy6b.js";
+import { a as Oi } from "./linear-DUdu7l2G.js";
+import { m as ai } from "./proxy-DJxJg1kD.js";
+import { A as bi } from "./index-BxAUvrua.js";
+import { GraphFooter as Ci } from "./GraphFooter.js";
+import { GraphHeader as ji } from "./GraphHeader.js";
+import { ColorLegendWithMouseOver as Mi } from "./ColorLegendWithMouseOver.js";
+import { E as Di } from "./EmptyState-DdTp-Mdn.js";
+function Ni(P, o) {
+  if (P < 2) return [];
+  const d = o / (P - 1);
+  return Array.from({ length: P }, (p, e) => e * d);
+}
+function Vi(P) {
+  const {
+    data: o,
+    width: d,
+    height: p,
+    colors: e,
+    colorDomain: n,
+    radius: h,
+    leftMargin: s,
+    rightMargin: X,
+    topMargin: Y,
+    bottomMargin: ii,
+    tooltip: F,
+    onSeriesMouseOver: k,
+    highlightedDataPoints: a,
+    selectedColor: R,
+    minValue: G,
+    maxValue: _,
+    onSeriesMouseClick: S,
+    prefix: K,
+    suffix: b,
+    stripType: Q,
+    highlightColor: y,
+    dotOpacity: v,
+    resetSelectionOnDoubleClick: ti,
+    detailsOnClick: N,
+    styles: j,
+    classNames: $,
+    valueColor: I,
+    animate: m,
+    noOfTicks: w,
+    dimmedOpacity: T,
+    precision: B,
+    customLayers: M
+  } = P, q = si(null), D = wi(q, {
+    once: m.once,
+    amount: m.amount
+  }), [H, x] = E(void 0), [f, A] = E(void 0), [U, L] = E(void 0), [u, g] = E(void 0), O = {
+    top: Y,
+    bottom: ii,
+    left: s,
+    right: X
+  }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
+    const t = (a || []).indexOf(i.label);
+    return t === -1 ? 1 / 0 : t;
+  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = Oi().domain([C, ri]).range([0, V]).nice(), li = Ni(w, V);
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      ai.svg,
+      {
+        width: `${d}px`,
+        height: `${p}px`,
+        viewBox: `0 0 ${d} ${p}`,
+        direction: "ltr",
+        ref: q,
+        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+          M.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ r.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ r.jsxs(
+              ai.g,
+              {
+                className: "undp-viz-g-with-hover",
+                variants: {
+                  initial: {
+                    opacity: 0,
+                    x: z(0),
+                    y: W / 2
+                  },
+                  whileInView: {
+                    x: z(i.position),
+                    y: W / 2,
+                    opacity: R ? i.color && e[n.indexOf(i.color)] === R ? 0.95 : T : a.length !== 0 ? a.indexOf(i.label) !== -1 ? 0.95 : T : v,
+                    transition: { duration: m.duration }
+                  }
+                },
+                initial: "initial",
+                animate: D ? "whileInView" : "initial",
+                exit: { opacity: 0, transition: { duration: m.duration } },
+                onMouseEnter: (t) => {
+                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                },
+                onClick: () => {
+                  (S || N) && (pi(f, i) && ti ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                },
+                onMouseMove: (t) => {
+                  x(i), g(t.clientY), L(t.clientX);
+                },
+                onMouseLeave: () => {
+                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                },
+                children: [
+                  Q === "dot" ? /* @__PURE__ */ r.jsx(
+                    ai.circle,
+                    {
+                      cy: 0,
+                      cx: 0,
+                      variants: {
+                        initial: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } },
+                      r: h
+                    }
+                  ) : /* @__PURE__ */ r.jsx(
+                    ai.rect,
+                    {
+                      y: 0 - h,
+                      x: -1,
+                      height: h * 2,
+                      width: 2,
+                      variants: {
+                        initial: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } }
+                    }
+                  ),
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                    ai.text,
+                    {
+                      x: 0,
+                      y: 0 - h - 5,
+                      variants: {
+                        initial: { opacity: 0 },
+                        whileInView: {
+                          opacity: 1,
+                          transition: { duration: m.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: m.duration } },
+                      style: {
+                        fill: I || (y && a ? a.indexOf(i.label) !== -1 ? y : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray),
+                        textAnchor: "middle",
+                        ...j?.graphObjectValues || {}
+                      },
+                      className: ni(
+                        "graph-value text-sm font-bold",
+                        $?.graphObjectValues
+                      ),
+                      children: di(i.position, "NA", B, K, b)
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            li.map((i, t) => /* @__PURE__ */ r.jsx(
+              "text",
+              {
+                x: i,
+                y: W / 2 + h,
+                style: {
+                  textAnchor: t === 0 ? "start" : t === li.length - 1 ? "end" : "middle",
+                  ...j?.xAxis?.labels || {}
+                },
+                className: ni(
+                  "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
+                  $?.xAxis?.labels
+                ),
+                dy: "1em",
+                children: di(z.invert(i), "NA", B, K, b)
+              },
+              t
+            ))
+          ] }),
+          M.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    H && F && U && u ? /* @__PURE__ */ r.jsx(
+      yi,
+      {
+        data: H,
+        body: F,
+        xPos: U,
+        yPos: u,
+        backgroundStyle: j?.tooltip,
+        className: $?.tooltip
+      }
+    ) : null,
+    N && f !== void 0 ? /* @__PURE__ */ r.jsx(
+      xi,
+      {
+        open: f !== void 0,
+        onClose: () => {
+          A(void 0);
+        },
+        children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof N == "string" ? { __html: vi(N, f) } : void 0,
+            children: typeof N == "function" ? N(f) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function ki(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F = 5,
+    padding: k,
+    backgroundColor: a = !1,
+    leftMargin: R = 5,
+    rightMargin: G = 5,
+    topMargin: _ = 10,
+    bottomMargin: S = 10,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y = !0,
+    highlightedDataPoints: v = [],
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    graphDownload: I = !1,
+    dataDownload: m = !1,
+    prefix: w = "",
+    suffix: T = "",
+    stripType: B = "dot",
+    language: M = "en",
+    highlightColor: q,
+    dotOpacity: D = 0.3,
+    showNAColor: H = !0,
+    minHeight: x = 0,
+    theme: f = "light",
+    ariaLabel: A,
+    resetSelectionOnDoubleClick: U = !0,
+    detailsOnClick: L,
+    styles: u,
+    classNames: g,
+    valueColor: O,
+    animate: V = !1,
+    noOfTicks: W = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
+    customLayers: ri = []
+  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const l = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+    });
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
+  }, [s, h]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: M === "he" || M === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ni(
+            `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            g?.graphContainer
+          ),
+          style: {
+            ...u?.graphContainer || {},
+            ...a && a !== !0 ? { backgroundColor: a } : {}
+          },
+          id: ti,
+          ref: ci,
+          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the horizontal axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: a ? k || "1rem" : k || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ r.jsx(
+                  ji,
+                  {
+                    styles: {
+                      title: u?.title,
+                      description: u?.description
+                    },
+                    classNames: {
+                      title: g?.title,
+                      description: g?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: n,
+                    width: s,
+                    graphDownload: I ? ci.current : void 0,
+                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                    Mi,
+                    {
+                      width: s,
+                      colorLegendTitle: ii,
+                      colors: p || c[f].categoricalColors.colors,
+                      colorDomain: Y || gi(
+                        o.filter((l) => l.color),
+                        "color"
+                      ).map((l) => l.color),
+                      setSelectedColor: fi,
+                      showNAColor: H ?? !0
+                    }
+                  ) : null,
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center w-full leading-0",
+                      ref: Z,
+                      "aria-label": "Graph area",
+                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                        Vi,
+                        {
+                          data: o,
+                          width: s || C,
+                          height: Math.max(
+                            x,
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                          ),
+                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
+                            o.filter((l) => l.color),
+                            "color"
+                          ).map((l) => l.color),
+                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          selectedColor: t,
+                          radius: F,
+                          leftMargin: R,
+                          rightMargin: G,
+                          topMargin: _,
+                          bottomMargin: S,
+                          tooltip: K,
+                          onSeriesMouseOver: Q,
+                          highlightedDataPoints: v,
+                          minValue: N,
+                          maxValue: j,
+                          onSeriesMouseClick: $,
+                          prefix: w,
+                          suffix: T,
+                          stripType: B,
+                          highlightColor: q,
+                          dotOpacity: D,
+                          resetSelectionOnDoubleClick: U,
+                          detailsOnClick: L,
+                          styles: u,
+                          classNames: g,
+                          valueColor: O,
+                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          noOfTicks: W,
+                          dimmedOpacity: oi,
+                          precision: ei,
+                          customLayers: ri
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                e || X ? /* @__PURE__ */ r.jsx(
+                  Ci,
+                  {
+                    styles: { footnote: u?.footnote, source: u?.source },
+                    classNames: {
+                      footnote: g?.footnote,
+                      source: g?.source
+                    },
+                    sources: e,
+                    footNote: X,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Si(P) {
+  const {
+    data: o,
+    width: d,
+    height: p,
+    colors: e,
+    colorDomain: n,
+    radius: h,
+    leftMargin: s,
+    rightMargin: X,
+    topMargin: Y,
+    bottomMargin: ii,
+    tooltip: F,
+    onSeriesMouseOver: k,
+    highlightedDataPoints: a,
+    selectedColor: R,
+    minValue: G,
+    maxValue: _,
+    onSeriesMouseClick: S,
+    noOfTicks: K,
+    prefix: b,
+    suffix: Q,
+    stripType: y,
+    highlightColor: v,
+    dotOpacity: ti,
+    resetSelectionOnDoubleClick: N,
+    detailsOnClick: j,
+    styles: $,
+    classNames: I,
+    valueColor: m,
+    animate: w,
+    dimmedOpacity: T,
+    precision: B,
+    customLayers: M
+  } = P, q = si(null), D = wi(q, {
+    once: w.once,
+    amount: w.amount
+  }), [H, x] = E(void 0), [f, A] = E(void 0), [U, L] = E(void 0), [u, g] = E(void 0), O = {
+    top: Y,
+    bottom: ii,
+    left: s,
+    right: X
+  }, V = d - O.left - O.right, W = p - O.top - O.bottom, oi = o.map((i, t) => ({ ...i, id: `${t}` })), ei = mi(oi, (i) => {
+    const t = (a || []).indexOf(i.label);
+    return t === -1 ? 1 / 0 : t;
+  }).reverse(), ri = J(_) ? Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) < 0 ? 0 : Math.max(...o.filter((i) => !J(i.position)).map((i) => i.position)) : _, C = J(G) ? Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) >= 0 ? 0 : Math.min(...o.filter((i) => !J(i.position)).map((i) => i.position)) : G, z = Oi().domain([C, ri]).range([W, 0]).nice(), li = Ni(K, W);
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      ai.svg,
+      {
+        width: `${d}px`,
+        height: `${p}px`,
+        viewBox: `0 0 ${d} ${p}`,
+        direction: "ltr",
+        ref: q,
+        children: /* @__PURE__ */ r.jsxs("g", { transform: `translate(${O.left},${O.top})`, children: [
+          M.filter((i) => i.position === "before").map((i) => i.layer),
+          /* @__PURE__ */ r.jsxs(bi, { children: [
+            ei.map((i) => /* @__PURE__ */ r.jsxs(
+              ai.g,
+              {
+                className: "undp-viz-g-with-hover",
+                variants: {
+                  initial: {
+                    opacity: 0,
+                    x: V / 2,
+                    y: z(0)
+                  },
+                  whileInView: {
+                    x: V / 2,
+                    y: z(i.position),
+                    opacity: R ? i.color && e[n.indexOf(i.color)] === R ? 0.95 : T : a.length !== 0 ? a.indexOf(i.label) !== -1 ? 0.95 : T : ti,
+                    transition: { duration: w.duration }
+                  }
+                },
+                initial: "initial",
+                animate: D ? "whileInView" : "initial",
+                exit: { opacity: 0, transition: { duration: w.duration } },
+                onMouseEnter: (t) => {
+                  x(i), g(t.clientY), L(t.clientX), k?.(i);
+                },
+                onClick: () => {
+                  (S || j) && (pi(f, i) && N ? (A(void 0), S?.(void 0)) : (A(i), S?.(i)));
+                },
+                onMouseMove: (t) => {
+                  x(i), g(t.clientY), L(t.clientX);
+                },
+                onMouseLeave: () => {
+                  x(void 0), L(void 0), g(void 0), k?.(void 0);
+                },
+                children: [
+                  y === "dot" ? /* @__PURE__ */ r.jsx(
+                    ai.circle,
+                    {
+                      cy: 0,
+                      cx: 0,
+                      variants: {
+                        initial: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } },
+                      r: h
+                    }
+                  ) : /* @__PURE__ */ r.jsx(
+                    ai.rect,
+                    {
+                      x: 0 - h,
+                      y: -1,
+                      width: h * 2,
+                      height: 2,
+                      variants: {
+                        initial: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray
+                        },
+                        whileInView: {
+                          fill: v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } }
+                    }
+                  ),
+                  a.length !== 0 && a.indexOf(i.label) !== -1 ? /* @__PURE__ */ r.jsx(
+                    ai.text,
+                    {
+                      y: 0,
+                      dy: "0.33em",
+                      x: 0 + h + 3,
+                      variants: {
+                        initial: { opacity: 0 },
+                        whileInView: {
+                          opacity: 1,
+                          transition: { duration: w.duration }
+                        }
+                      },
+                      initial: "initial",
+                      animate: D ? "whileInView" : "initial",
+                      exit: { opacity: 0, transition: { duration: w.duration } },
+                      style: {
+                        fill: m || (v && a ? a.indexOf(i.label) !== -1 ? v : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray : o.filter((t) => t.color).length === 0 ? e[0] : i.color ? e[n.indexOf(i.color)] : c.gray),
+                        textAnchor: "start",
+                        ...$?.graphObjectValues || {}
+                      },
+                      className: ni(
+                        "graph-value text-sm font-bold",
+                        I?.graphObjectValues
+                      ),
+                      children: di(i.position, "NA", B, b, Q)
+                    }
+                  ) : null
+                ]
+              },
+              i.label
+            )),
+            li.map((i, t) => /* @__PURE__ */ r.jsx(
+              "text",
+              {
+                y: i,
+                x: V / 2 + h + 5,
+                style: {
+                  textAnchor: "start",
+                  ...$?.yAxis?.labels || {}
+                },
+                className: ni(
+                  "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
+                  I?.yAxis?.labels
+                ),
+                children: di(z.invert(i), "NA", B, b, Q)
+              },
+              t
+            ))
+          ] }),
+          M.filter((i) => i.position === "after").map((i) => i.layer)
+        ] })
+      }
+    ),
+    H && F && U && u ? /* @__PURE__ */ r.jsx(
+      yi,
+      {
+        data: H,
+        body: F,
+        xPos: U,
+        yPos: u,
+        backgroundStyle: $?.tooltip,
+        className: I?.tooltip
+      }
+    ) : null,
+    j && f !== void 0 ? /* @__PURE__ */ r.jsx(
+      xi,
+      {
+        open: f !== void 0,
+        onClose: () => {
+          A(void 0);
+        },
+        children: /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            className: "graph-modal-content m-0",
+            dangerouslySetInnerHTML: typeof j == "string" ? { __html: vi(j, f) } : void 0,
+            children: typeof j == "function" ? j(f) : null
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function $i(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F = 5,
+    padding: k,
+    backgroundColor: a = !1,
+    leftMargin: R = 20,
+    rightMargin: G = 20,
+    topMargin: _ = 10,
+    bottomMargin: S = 10,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y = !0,
+    highlightedDataPoints: v = [],
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    graphDownload: I = !1,
+    dataDownload: m = !1,
+    prefix: w = "",
+    suffix: T = "",
+    stripType: B = "dot",
+    language: M = "en",
+    highlightColor: q,
+    dotOpacity: D = 0.3,
+    showNAColor: H = !0,
+    minHeight: x = 0,
+    theme: f = "light",
+    ariaLabel: A,
+    resetSelectionOnDoubleClick: U = !0,
+    detailsOnClick: L,
+    styles: u,
+    classNames: g,
+    valueColor: O,
+    animate: V = !1,
+    noOfTicks: W = 2,
+    dimmedOpacity: oi = 0.3,
+    precision: ei = 2,
+    customLayers: ri = []
+  } = P, [C, z] = E(0), [li, i] = E(0), [t, fi] = E(void 0), Z = si(null), ci = si(null);
+  return ui(() => {
+    const l = new ResizeObserver((hi) => {
+      z(s || hi[0].target.clientWidth || 620), i(h || hi[0].target.clientHeight || 480);
+    });
+    return Z.current && (i(Z.current.clientHeight || 480), z(Z.current.clientWidth || 620), s || l.observe(Z.current)), () => l.disconnect();
+  }, [s, h]), /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: `${f || "light"} flex  ${s ? "w-fit grow-0" : "w-full grow"}`,
+      dir: M === "he" || M === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: ni(
+            `${a ? a === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${M || "en"}`,
+            g?.graphContainer
+          ),
+          style: {
+            ...u?.graphContainer || {},
+            ...a && a !== !0 ? { backgroundColor: a } : {}
+          },
+          id: ti,
+          ref: ci,
+          "aria-label": A || `${d ? `The graph shows ${d}. ` : ""}This is a strip chart showing distribution of data along the vertical axis. Each dot represents an individual data point, helping to visualize the spread and clustering of values.${n ? ` ${n}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: a ? k || "1rem" : k || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                d || n || I || m ? /* @__PURE__ */ r.jsx(
+                  ji,
+                  {
+                    styles: {
+                      title: u?.title,
+                      description: u?.description
+                    },
+                    classNames: {
+                      title: g?.title,
+                      description: g?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: n,
+                    width: s,
+                    graphDownload: I ? ci.current : void 0,
+                    dataDownload: m ? o.map((l) => l.data).filter((l) => l !== void 0).length > 0 ? o.map((l) => l.data).filter((l) => l !== void 0) : o.filter((l) => l !== void 0) : null
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: o.length === 0 ? /* @__PURE__ */ r.jsx(Di, {}) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                  y !== !1 && o.filter((l) => l.color).length !== 0 ? /* @__PURE__ */ r.jsx(
+                    Mi,
+                    {
+                      width: s,
+                      colorLegendTitle: ii,
+                      colors: p || c[f].categoricalColors.colors,
+                      colorDomain: Y || gi(
+                        o.filter((l) => l.color),
+                        "color"
+                      ).map((l) => l.color),
+                      setSelectedColor: fi,
+                      showNAColor: H
+                    }
+                  ) : null,
+                  /* @__PURE__ */ r.jsx(
+                    "div",
+                    {
+                      className: "flex flex-col grow justify-center w-full leading-0",
+                      ref: Z,
+                      children: (s || C) && (h || li) ? /* @__PURE__ */ r.jsx(
+                        Si,
+                        {
+                          data: o,
+                          width: s || C,
+                          height: Math.max(
+                            x,
+                            h || (b ? x ? (s || C) * b > x ? (s || C) * b : x : (s || C) * b : li)
+                          ),
+                          colorDomain: o.filter((l) => l.color).length === 0 ? [] : Y || gi(
+                            o.filter((l) => l.color),
+                            "color"
+                          ).map((l) => l.color),
+                          colors: o.filter((l) => l.color).length === 0 ? p ? [p] : [c.primaryColors["blue-600"]] : p || c[f].categoricalColors.colors,
+                          selectedColor: t,
+                          radius: F,
+                          leftMargin: R,
+                          rightMargin: G,
+                          topMargin: _,
+                          bottomMargin: S,
+                          tooltip: K,
+                          onSeriesMouseOver: Q,
+                          highlightedDataPoints: v,
+                          minValue: N,
+                          maxValue: j,
+                          onSeriesMouseClick: $,
+                          prefix: w,
+                          suffix: T,
+                          stripType: B,
+                          highlightColor: q,
+                          dotOpacity: D,
+                          resetSelectionOnDoubleClick: U,
+                          detailsOnClick: L,
+                          styles: u,
+                          classNames: g,
+                          valueColor: O,
+                          animate: V === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : V || { duration: 0, once: !0, amount: 0 },
+                          noOfTicks: W,
+                          dimmedOpacity: oi,
+                          precision: ei,
+                          customLayers: ri
+                        }
+                      ) : null
+                    }
+                  )
+                ] }) }),
+                e || X ? /* @__PURE__ */ r.jsx(
+                  Ci,
+                  {
+                    styles: { footnote: u?.footnote, source: u?.source },
+                    classNames: {
+                      footnote: g?.footnote,
+                      source: g?.source
+                    },
+                    sources: e,
+                    footNote: X,
+                    width: s
+                  }
+                ) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Ki(P) {
+  const {
+    data: o,
+    graphTitle: d,
+    colors: p,
+    sources: e,
+    graphDescription: n,
+    height: h,
+    width: s,
+    footNote: X,
+    colorDomain: Y,
+    colorLegendTitle: ii,
+    radius: F,
+    padding: k,
+    backgroundColor: a,
+    leftMargin: R,
+    rightMargin: G,
+    topMargin: _,
+    bottomMargin: S,
+    tooltip: K,
+    relativeHeight: b,
+    onSeriesMouseOver: Q,
+    showColorScale: y,
+    highlightedDataPoints: v,
+    graphID: ti,
+    minValue: N,
+    maxValue: j,
+    onSeriesMouseClick: $,
+    noOfTicks: I,
+    graphDownload: m,
+    dataDownload: w,
+    prefix: T,
+    suffix: B,
+    stripType: M,
+    language: q,
+    highlightColor: D,
+    dotOpacity: H,
+    showNAColor: x,
+    minHeight: f,
+    theme: A,
+    ariaLabel: U,
+    valueColor: L,
+    resetSelectionOnDoubleClick: u,
+    detailsOnClick: g,
+    orientation: O = "vertical",
+    styles: V,
+    classNames: W,
+    animate: oi,
+    dimmedOpacity: ei = 0.3,
+    precision: ri,
+    customLayers: C
+  } = P;
+  return O === "vertical" ? /* @__PURE__ */ r.jsx(
+    $i,
+    {
+      data: o,
+      graphTitle: d,
+      colors: p,
+      sources: e,
+      graphDescription: n,
+      height: h,
+      width: s,
+      footNote: X,
+      colorDomain: Y,
+      colorLegendTitle: ii,
+      radius: F,
+      padding: k,
+      backgroundColor: a,
+      leftMargin: R,
+      rightMargin: G,
+      topMargin: _,
+      bottomMargin: S,
+      tooltip: K,
+      relativeHeight: b,
+      onSeriesMouseOver: Q,
+      showColorScale: y,
+      highlightedDataPoints: v,
+      graphID: ti,
+      minValue: N,
+      maxValue: j,
+      onSeriesMouseClick: $,
+      noOfTicks: I,
+      graphDownload: m,
+      dataDownload: w,
+      prefix: T,
+      suffix: B,
+      stripType: M,
+      language: q,
+      highlightColor: D,
+      dotOpacity: H,
+      showNAColor: x,
+      minHeight: f,
+      theme: A,
+      ariaLabel: U,
+      resetSelectionOnDoubleClick: u,
+      styles: V,
+      valueColor: L,
+      detailsOnClick: g,
+      classNames: W,
+      animate: oi,
+      dimmedOpacity: ei,
+      precision: ri,
+      customLayers: C
+    }
+  ) : /* @__PURE__ */ r.jsx(
+    ki,
+    {
+      data: o,
+      graphTitle: d,
+      colors: p,
+      sources: e,
+      graphDescription: n,
+      height: h,
+      width: s,
+      footNote: X,
+      colorDomain: Y,
+      colorLegendTitle: ii,
+      radius: F,
+      padding: k,
+      backgroundColor: a,
+      leftMargin: R,
+      rightMargin: G,
+      topMargin: _,
+      bottomMargin: S,
+      tooltip: K,
+      relativeHeight: b,
+      onSeriesMouseOver: Q,
+      showColorScale: y,
+      highlightedDataPoints: v,
+      graphID: ti,
+      minValue: N,
+      maxValue: j,
+      onSeriesMouseClick: $,
+      noOfTicks: I,
+      graphDownload: m,
+      dataDownload: w,
+      prefix: T,
+      suffix: B,
+      stripType: M,
+      language: q,
+      highlightColor: D,
+      dotOpacity: H,
+      showNAColor: x,
+      minHeight: f,
+      theme: A,
+      ariaLabel: U,
+      resetSelectionOnDoubleClick: u,
+      styles: V,
+      valueColor: L,
+      detailsOnClick: g,
+      classNames: W,
+      animate: oi,
+      dimmedOpacity: ei,
+      precision: ri,
+      customLayers: C
+    }
+  );
+}
+export {
+  Ki as StripChart
+};
 //# sourceMappingURL=StripChart.js.map