@undp/data-viz 1.4.15 → 1.4.16

package/dist/SimpleLineChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),h=require("react"),u=require("./parse-hMnG_lRV.cjs"),Ce=require("./index-BzeLQvXk.cjs"),Re=require("./simple-statistics-xm8c0LQQ.cjs"),Ee=require("./numberFormattingFunction-02t-wJta.cjs"),Oe=require("./Tooltip-n8z5bfav.cjs"),S=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),fe=require("./customArea-CK768gCn.cjs"),Le=require("./Axis-DE7dSn1_.cjs"),Ne=require("./AxisTitle-CK9YeovX.cjs"),ke=require("./XTicksAndGridLines-CCzXIV8d.cjs"),Se=require("./ReferenceLine-CFVBBN__.cjs"),De=require("./RegressionLine-xKdiJ8sw.cjs"),qe=require("./YTicksAndGridLines-DBDuz6vb.cjs"),$e=require("./index-DNj994Pv.cjs"),Te=require("./time-Byw_jYQ7.cjs"),Ie=require("./linear-BVckp9RD.cjs"),be=require("./line-DHV4JwCR.cjs"),ne=require("./step-BZ3C8QFW.cjs"),Me=require("./select-Bnfk0lJx.cjs"),Ve=require("./init-DU0ybBc_.cjs"),Fe=require("./pointer-Dkq5NV1q.cjs"),He=require("./use-in-view-sQJZ_xDO.cjs"),F=require("./proxy-BHRoeZgd.cjs"),Ge=require("./GraphFooter.cjs"),Pe=require("./GraphHeader.cjs"),We=require("./Colors.cjs"),Ye=require("./EmptyState-d8_8SxeW.cjs");function Xe(re){const{data:O,width:b,height:$,lineColor:H,suffix:L,prefix:D,dateFormat:r,highlightAreaSettings:q,showValues:c,noOfXTicks:G,rightMargin:oe,leftMargin:j,topMargin:ae,bottomMargin:P,tooltip:v,onSeriesMouseOver:T,refValues:W,minValue:Y,maxValue:X,animate:s,rtl:U,strokeWidth:le,showDots:ce,annotations:xe,customHighlightAreaSettings:ue,regressionLine:I,yAxisTitle:B,noOfYTicks:me,maxDate:M,minDate:V,curveType:N,styles:a,classNames:m,precision:w,customLayers:z}=re,J=h.useRef(null),d=He.useInView(J,{once:s.once,amount:s.amount}),[A,pe]=h.useState(!1);h.useEffect(()=>{if(d&&!A){const e=setTimeout(()=>{pe(!0)},(s.duration+.5)*1e3);return()=>clearTimeout(e)}},[d,A,s.duration]);const he=N==="linear"?be.curveLinear:N==="step"?ne.curveStep:N==="stepAfter"?ne.stepAfter:N==="stepBefore"?ne.stepBefore:ne.monotoneX,[k,K]=h.useState(void 0),[Q,Z]=h.useState(void 0),[R,E]=h.useState(void 0),g={top:ae,bottom:P,left:B?j+30:j,right:oe},_=h.useRef(null),i=Ce.sortBy(O.map(e=>({...e,date:u.parse(`${e.date}`,r,new Date)})),"date"),ee=q.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:u.parse(`${e.coordinates[0]}`,r,new Date),e.coordinates[1]===null?null:u.parse(`${e.coordinates[1]}`,r,new Date)]})),te=ue.map(e=>({...e,coordinates:e.coordinates.map((y,C)=>C%2===0?u.parse(`${y}`,r,new Date):y)})),l=b-g.left-g.right,p=$-g.top-g.bottom,ie=V?u.parse(`${V}`,r,new Date):i[0].date,x=M?u.parse(`${M}`,r,new Date):i[i.length-1].date,f=S.checkIfNullOrUndefined(Y)?Math.min(...i.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.min(...i.map(e=>e.y).filter(e=>e!=null))>0?0:Math.min(...i.map(e=>e.y).filter(e=>e!=null)):0:Y,de=Math.max(...i.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.max(...i.map(e=>e.y).filter(e=>e!=null)):0,n=Te.time().domain([ie,x]).range([0,l]),o=Ie.linear().domain([f,S.checkIfNullOrUndefined(X)?de>0?de:0:X]).range([p,0]).nice(),ye=be.line().x(e=>n(e.date)).y(e=>o(e.y)).curve(he),je=o.ticks(me),ve=n.ticks(G);h.useEffect(()=>{const e=C=>{const se=i[Ve.bisectCenter(i.map(ge=>ge.date),n.invert(Fe.pointer(C)[0]),0)];K(se||i[i.length-1]),T?.(se||i[i.length-1]),E(C.clientY),Z(C.clientX)},y=()=>{K(void 0),Z(void 0),E(void 0),T?.(void 0)};Me.select(_.current).on("mousemove",e).on("mouseout",y)},[n,i,T]);const Ae=Re.linearRegression(i.filter(e=>!S.checkIfNullOrUndefined(e.date)&&!S.checkIfNullOrUndefined(e.y)).map(e=>[n(e.date),o(e.y)])),we=Re.linearRegressionLine(Ae);return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(F.motion.svg,{width:`${b}px`,height:`${$}px`,viewBox:`0 0 ${b} ${$}`,direction:"ltr",ref:J,children:t.jsxRuntimeExports.jsxs("g",{transform:`translate(${g.left},${g.top})`,children:[t.jsxRuntimeExports.jsx($e.HighlightArea,{areaSettings:ee,width:l,height:p,scale:n,animate:s,isInView:d}),t.jsxRuntimeExports.jsx(fe.CustomArea,{areaSettings:te,scaleX:n,scaleY:o,animate:s,isInView:d}),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(qe.YTicksAndGridLines,{values:je.filter(e=>e!==0),y:je.filter(e=>e!==0).map(e=>o(e)),x1:0-j,x2:l+g.right,styles:{gridLines:a?.yAxis?.gridLines,labels:a?.yAxis?.labels},classNames:{gridLines:m?.yAxis?.gridLines,labels:m?.yAxis?.labels},suffix:L,prefix:D,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:w}),t.jsxRuntimeExports.jsx(Le.Axis,{y1:o(f<0?0:f),y2:o(f<0?0:f),x1:0-j,x2:l+g.right,label:Ee.numberFormattingFunction(f<0?0:f,"NA",w,D,L),labelPos:{x:0-j,y:o(f<0?0:f),dx:0,dy:de<0?"1em":-5},classNames:{axis:m?.xAxis?.axis,label:m?.yAxis?.labels},styles:{axis:a?.xAxis?.axis,label:a?.yAxis?.labels}}),t.jsxRuntimeExports.jsx(Ne.AxisTitle,{x:0-j-15,y:p/2,style:a?.yAxis?.title,className:m?.yAxis?.title,text:B,rotate90:!0})]}),t.jsxRuntimeExports.jsx(ke.XTicksAndGridLines,{values:ve.map(e=>u.format(e,r)),x:ve.map(e=>n(e)),y1:0,y2:p,styles:{gridLines:a?.xAxis?.gridLines,labels:a?.xAxis?.labels},classNames:{gridLines:t.mo("opacity-0",m?.xAxis?.gridLines),labels:t.mo("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",m?.xAxis?.labels)},suffix:L,prefix:D,labelType:"primary",showGridLines:!0,precision:w}),z.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(F.motion.path,{style:{stroke:H,fill:"none",strokeWidth:le},exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{pathLength:0,d:ye(i)||"",opacity:1},whileInView:{pathLength:1,d:ye(i)||"",opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:d?"whileInView":"initial"}),k?t.jsxRuntimeExports.jsx("line",{y1:0,y2:p,x1:n(k.date),x2:n(k.date),className:t.mo("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",m?.mouseOverLine),style:a?.mouseOverLine}):null]}),t.jsxRuntimeExports.jsx("g",{children:i.map((e,y)=>t.jsxRuntimeExports.jsx(F.motion.g,{children:S.checkIfNullOrUndefined(e.y)?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[ce?t.jsxRuntimeExports.jsx(F.motion.circle,{r:l/i.length<5?0:l/i.length<20?2:4,style:{fill:H},exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,cx:n(e.date),cy:o(e.y)},whileInView:{opacity:1,transition:{duration:A?s.duration:.5,delay:A?0:s.duration},cx:n(e.date),cy:o(e.y)}},initial:"initial",animate:d?"whileInView":"initial"}):null,c?t.jsxRuntimeExports.jsx(F.motion.text,{dy:-8,style:{textAnchor:"middle",...a?.graphObjectValues||{}},className:t.mo("graph-value text-xs font-bold",m?.graphObjectValues),exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,x:n(e.date),y:o(e.y)},whileInView:{opacity:1,x:n(e.date),y:o(e.y),transition:{duration:A?s.duration:.5,delay:A?0:s.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:Ee.numberFormattingFunction(e.y,"NA",w,D,L)}):null]})},y))}),W?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:W.map((e,y)=>t.jsxRuntimeExports.jsx(Se.RefLineY,{text:e.text,color:e.color,y:o(e.value),x1:0-j,x2:l+g.right,classNames:e.classNames,styles:e.styles,animate:s,isInView:d},y))}):null,t.jsxRuntimeExports.jsx("g",{children:xe.map((e,y)=>{const C=fe.getLineEndPoint({x:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date)):0,y:e.yCoordinate?o(e.yCoordinate):0},S.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),se=e.showConnector?{y1:C.y,x1:C.x,y2:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?o(e.yCoordinate):0,cx:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date)):0,circleRadius:S.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,ge={y:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:U?0:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:U?e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0):l+g.right-(e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return t.jsxRuntimeExports.jsx(fe.Annotation,{color:e.color,connectorsSettings:se,labelSettings:ge,text:e.text,classNames:e.classNames,styles:e.styles,animate:s,isInView:d},y)})}),t.jsxRuntimeExports.jsx("g",{children:I?t.jsxRuntimeExports.jsx(De.RegressionLine,{x1:0,x2:l,y1:we(0),y2:we(l),graphHeight:p,graphWidth:l,className:m?.regLine,style:a?.regLine,color:typeof I=="string"?I:void 0,animate:s,isInView:d}):null}),z.filter(e=>e.position==="after").map(e=>e.layer),t.jsxRuntimeExports.jsx("rect",{ref:_,style:{fill:"none",pointerEvents:"all"},width:l,height:p})]})}),k&&v&&Q&&R?t.jsxRuntimeExports.jsx(Oe.Tooltip,{data:k,body:v,xPos:Q,yPos:R,backgroundStyle:a?.tooltip,className:m?.tooltip}):null]})}function Ue(re){const{data:O,graphTitle:b,lineColor:$,suffix:H="",sources:L,prefix:D="",graphDescription:r,height:q,width:c,footNote:G,noOfXTicks:oe=10,dateFormat:j="yyyy",showValues:ae=!1,padding:P,backgroundColor:v=!1,leftMargin:T=30,rightMargin:W=30,topMargin:Y=20,bottomMargin:X=25,relativeHeight:s,tooltip:U,onSeriesMouseOver:le,highlightAreaSettings:ce=[],graphID:xe,minValue:ue,maxValue:I,maxDate:B,minDate:me,graphDownload:M=!1,dataDownload:V=!1,animate:N=!1,language:a="en",refValues:m=[],minHeight:w=0,strokeWidth:z=2,showDots:J=!0,annotations:d=[],customHighlightAreaSettings:A=[],theme:pe="light",ariaLabel:he,regressionLine:k=!1,yAxisTitle:K,noOfYTicks:Q=5,curveType:Z="curve",styles:R,classNames:E,precision:g=2,customLayers:_=[]}=re,[i,ee]=h.useState(0),[te,l]=h.useState(0),p=h.useRef(null),ie=h.useRef(null);return h.useEffect(()=>{const x=new ResizeObserver(f=>{ee(c||f[0].target.clientWidth||620),l(q||f[0].target.clientHeight||480)});return p.current&&(l(p.current.clientHeight||480),ee(p.current.clientWidth||620),c||x.observe(p.current)),()=>x.disconnect()},[c,q]),t.jsxRuntimeExports.jsx("div",{className:`${pe||"light"} flex  ${c?"w-fit grow-0":"w-full grow"}`,dir:a==="he"||a==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${v?v===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${a||"en"}`,c?"w-fit":"w-full",E?.graphContainer),style:{...R?.graphContainer||{},...v&&v!==!0?{backgroundColor:v}:{}},id:xe,ref:ie,"aria-label":he||`${b?`The graph shows ${b}. `:""}This is a line chart that shows trends over time.${r?` ${r}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:v?P||"1rem":P||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[b||r||M||V?t.jsxRuntimeExports.jsx(Pe.GraphHeader,{styles:{title:R?.title,description:R?.description},classNames:{title:E?.title,description:E?.description},graphTitle:b,graphDescription:r,width:c,graphDownload:M?ie.current:void 0,dataDownload:V?O.map(x=>x.data).filter(x=>x!==void 0).length>0?O.map(x=>x.data).filter(x=>x!==void 0):O.filter(x=>x!==void 0):null}):null,O.length===0?t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:t.jsxRuntimeExports.jsx(Ye.EmptyState,{})}):t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:p,"aria-label":"Graph area",children:(c||i)&&(q||te)?t.jsxRuntimeExports.jsx(Xe,{data:O,lineColor:$||We.Colors.primaryColors["blue-600"],width:c||i,height:Math.max(w,q||(s?w?(c||i)*s>w?(c||i)*s:w:(c||i)*s:te)),suffix:H,prefix:D,dateFormat:j,showValues:ae,noOfXTicks:oe,leftMargin:T,rightMargin:W,topMargin:Y,bottomMargin:X,tooltip:U,highlightAreaSettings:ce,onSeriesMouseOver:le,refValues:m,minValue:ue,maxValue:I,animate:N===!0?{duration:.5,once:!0,amount:.5}:N||{duration:0,once:!0,amount:0},rtl:a==="he"||a==="ar",strokeWidth:z,showDots:J,annotations:d,customHighlightAreaSettings:A,regressionLine:k,yAxisTitle:K,noOfYTicks:Q,maxDate:B,minDate:me,curveType:Z,styles:R,classNames:E,precision:g,customLayers:_}):null}),L||G?t.jsxRuntimeExports.jsx(Ge.GraphFooter,{styles:{footnote:R?.footnote,source:R?.source},classNames:{footnote:E?.footnote,source:E?.source},sources:L,footNote:G,width:c}):null]})})})})}exports.SimpleLineChart=Ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),h=require("react"),u=require("./parse-hMnG_lRV.cjs"),Ce=require("./index-BzeLQvXk.cjs"),Re=require("./simple-statistics-xm8c0LQQ.cjs"),Ee=require("./numberFormattingFunction-02t-wJta.cjs"),Oe=require("./Tooltip-n8z5bfav.cjs"),S=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),fe=require("./customArea-CK768gCn.cjs"),Le=require("./Axis-DE7dSn1_.cjs"),Ne=require("./AxisTitle-CK9YeovX.cjs"),ke=require("./XTicksAndGridLines-CCzXIV8d.cjs"),Se=require("./ReferenceLine-CFVBBN__.cjs"),De=require("./RegressionLine-xKdiJ8sw.cjs"),qe=require("./YTicksAndGridLines-DBDuz6vb.cjs"),$e=require("./index-BYzIB5V6.cjs"),Te=require("./time-Byw_jYQ7.cjs"),Ie=require("./linear-BVckp9RD.cjs"),be=require("./line-DHV4JwCR.cjs"),ne=require("./step-BZ3C8QFW.cjs"),Me=require("./select-Bnfk0lJx.cjs"),Ve=require("./init-DU0ybBc_.cjs"),Fe=require("./pointer-Dkq5NV1q.cjs"),He=require("./use-in-view-sQJZ_xDO.cjs"),F=require("./proxy-BHRoeZgd.cjs"),Ge=require("./GraphFooter.cjs"),Pe=require("./GraphHeader.cjs"),We=require("./Colors.cjs"),Ye=require("./EmptyState-d8_8SxeW.cjs");function Xe(re){const{data:O,width:b,height:$,lineColor:H,suffix:L,prefix:D,dateFormat:r,highlightAreaSettings:q,showValues:c,noOfXTicks:G,rightMargin:oe,leftMargin:j,topMargin:ae,bottomMargin:P,tooltip:v,onSeriesMouseOver:T,refValues:W,minValue:Y,maxValue:X,animate:s,rtl:U,strokeWidth:le,showDots:ce,annotations:xe,customHighlightAreaSettings:ue,regressionLine:I,yAxisTitle:B,noOfYTicks:me,maxDate:M,minDate:V,curveType:N,styles:a,classNames:m,precision:w,customLayers:z}=re,J=h.useRef(null),d=He.useInView(J,{once:s.once,amount:s.amount}),[A,pe]=h.useState(!1);h.useEffect(()=>{if(d&&!A){const e=setTimeout(()=>{pe(!0)},(s.duration+.5)*1e3);return()=>clearTimeout(e)}},[d,A,s.duration]);const he=N==="linear"?be.curveLinear:N==="step"?ne.curveStep:N==="stepAfter"?ne.stepAfter:N==="stepBefore"?ne.stepBefore:ne.monotoneX,[k,K]=h.useState(void 0),[Q,Z]=h.useState(void 0),[R,E]=h.useState(void 0),g={top:ae,bottom:P,left:B?j+30:j,right:oe},_=h.useRef(null),i=Ce.sortBy(O.map(e=>({...e,date:u.parse(`${e.date}`,r,new Date)})),"date"),ee=q.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:u.parse(`${e.coordinates[0]}`,r,new Date),e.coordinates[1]===null?null:u.parse(`${e.coordinates[1]}`,r,new Date)]})),te=ue.map(e=>({...e,coordinates:e.coordinates.map((y,C)=>C%2===0?u.parse(`${y}`,r,new Date):y)})),l=b-g.left-g.right,p=$-g.top-g.bottom,ie=V?u.parse(`${V}`,r,new Date):i[0].date,x=M?u.parse(`${M}`,r,new Date):i[i.length-1].date,f=S.checkIfNullOrUndefined(Y)?Math.min(...i.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.min(...i.map(e=>e.y).filter(e=>e!=null))>0?0:Math.min(...i.map(e=>e.y).filter(e=>e!=null)):0:Y,de=Math.max(...i.map(e=>e.y).filter(e=>e!=null))!==1/0?Math.max(...i.map(e=>e.y).filter(e=>e!=null)):0,n=Te.time().domain([ie,x]).range([0,l]),o=Ie.linear().domain([f,S.checkIfNullOrUndefined(X)?de>0?de:0:X]).range([p,0]).nice(),ye=be.line().x(e=>n(e.date)).y(e=>o(e.y)).curve(he),je=o.ticks(me),ve=n.ticks(G);h.useEffect(()=>{const e=C=>{const se=i[Ve.bisectCenter(i.map(ge=>ge.date),n.invert(Fe.pointer(C)[0]),0)];K(se||i[i.length-1]),T?.(se||i[i.length-1]),E(C.clientY),Z(C.clientX)},y=()=>{K(void 0),Z(void 0),E(void 0),T?.(void 0)};Me.select(_.current).on("mousemove",e).on("mouseout",y)},[n,i,T]);const Ae=Re.linearRegression(i.filter(e=>!S.checkIfNullOrUndefined(e.date)&&!S.checkIfNullOrUndefined(e.y)).map(e=>[n(e.date),o(e.y)])),we=Re.linearRegressionLine(Ae);return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(F.motion.svg,{width:`${b}px`,height:`${$}px`,viewBox:`0 0 ${b} ${$}`,direction:"ltr",ref:J,children:t.jsxRuntimeExports.jsxs("g",{transform:`translate(${g.left},${g.top})`,children:[t.jsxRuntimeExports.jsx($e.HighlightArea,{areaSettings:ee,width:l,height:p,scale:n,animate:s,isInView:d}),t.jsxRuntimeExports.jsx(fe.CustomArea,{areaSettings:te,scaleX:n,scaleY:o,animate:s,isInView:d}),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(qe.YTicksAndGridLines,{values:je.filter(e=>e!==0),y:je.filter(e=>e!==0).map(e=>o(e)),x1:0-j,x2:l+g.right,styles:{gridLines:a?.yAxis?.gridLines,labels:a?.yAxis?.labels},classNames:{gridLines:m?.yAxis?.gridLines,labels:m?.yAxis?.labels},suffix:L,prefix:D,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:w}),t.jsxRuntimeExports.jsx(Le.Axis,{y1:o(f<0?0:f),y2:o(f<0?0:f),x1:0-j,x2:l+g.right,label:Ee.numberFormattingFunction(f<0?0:f,"NA",w,D,L),labelPos:{x:0-j,y:o(f<0?0:f),dx:0,dy:de<0?"1em":-5},classNames:{axis:m?.xAxis?.axis,label:m?.yAxis?.labels},styles:{axis:a?.xAxis?.axis,label:a?.yAxis?.labels}}),t.jsxRuntimeExports.jsx(Ne.AxisTitle,{x:0-j-15,y:p/2,style:a?.yAxis?.title,className:m?.yAxis?.title,text:B,rotate90:!0})]}),t.jsxRuntimeExports.jsx(ke.XTicksAndGridLines,{values:ve.map(e=>u.format(e,r)),x:ve.map(e=>n(e)),y1:0,y2:p,styles:{gridLines:a?.xAxis?.gridLines,labels:a?.xAxis?.labels},classNames:{gridLines:t.mo("opacity-0",m?.xAxis?.gridLines),labels:t.mo("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",m?.xAxis?.labels)},suffix:L,prefix:D,labelType:"primary",showGridLines:!0,precision:w}),z.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(F.motion.path,{style:{stroke:H,fill:"none",strokeWidth:le},exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{pathLength:0,d:ye(i)||"",opacity:1},whileInView:{pathLength:1,d:ye(i)||"",opacity:1,transition:{duration:s.duration}}},initial:"initial",animate:d?"whileInView":"initial"}),k?t.jsxRuntimeExports.jsx("line",{y1:0,y2:p,x1:n(k.date),x2:n(k.date),className:t.mo("undp-tick-line stroke-primary-gray-700 dark:stroke-primary-gray-100",m?.mouseOverLine),style:a?.mouseOverLine}):null]}),t.jsxRuntimeExports.jsx("g",{children:i.map((e,y)=>t.jsxRuntimeExports.jsx(F.motion.g,{children:S.checkIfNullOrUndefined(e.y)?null:t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[ce?t.jsxRuntimeExports.jsx(F.motion.circle,{r:l/i.length<5?0:l/i.length<20?2:4,style:{fill:H},exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,cx:n(e.date),cy:o(e.y)},whileInView:{opacity:1,transition:{duration:A?s.duration:.5,delay:A?0:s.duration},cx:n(e.date),cy:o(e.y)}},initial:"initial",animate:d?"whileInView":"initial"}):null,c?t.jsxRuntimeExports.jsx(F.motion.text,{dy:-8,style:{textAnchor:"middle",...a?.graphObjectValues||{}},className:t.mo("graph-value text-xs font-bold",m?.graphObjectValues),exit:{opacity:0,transition:{duration:s.duration}},variants:{initial:{opacity:0,x:n(e.date),y:o(e.y)},whileInView:{opacity:1,x:n(e.date),y:o(e.y),transition:{duration:A?s.duration:.5,delay:A?0:s.duration}}},initial:"initial",animate:d?"whileInView":"initial",children:Ee.numberFormattingFunction(e.y,"NA",w,D,L)}):null]})},y))}),W?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:W.map((e,y)=>t.jsxRuntimeExports.jsx(Se.RefLineY,{text:e.text,color:e.color,y:o(e.value),x1:0-j,x2:l+g.right,classNames:e.classNames,styles:e.styles,animate:s,isInView:d},y))}):null,t.jsxRuntimeExports.jsx("g",{children:xe.map((e,y)=>{const C=fe.getLineEndPoint({x:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date)):0,y:e.yCoordinate?o(e.yCoordinate):0},S.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),se=e.showConnector?{y1:C.y,x1:C.x,y2:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?o(e.yCoordinate):0,cx:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date)):0,circleRadius:S.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,ge={y:e.yCoordinate?o(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:U?0:e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:U?e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0):l+g.right-(e.xCoordinate?n(u.parse(`${e.xCoordinate}`,r,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return t.jsxRuntimeExports.jsx(fe.Annotation,{color:e.color,connectorsSettings:se,labelSettings:ge,text:e.text,classNames:e.classNames,styles:e.styles,animate:s,isInView:d},y)})}),t.jsxRuntimeExports.jsx("g",{children:I?t.jsxRuntimeExports.jsx(De.RegressionLine,{x1:0,x2:l,y1:we(0),y2:we(l),graphHeight:p,graphWidth:l,className:m?.regLine,style:a?.regLine,color:typeof I=="string"?I:void 0,animate:s,isInView:d}):null}),z.filter(e=>e.position==="after").map(e=>e.layer),t.jsxRuntimeExports.jsx("rect",{ref:_,style:{fill:"none",pointerEvents:"all"},width:l,height:p})]})}),k&&v&&Q&&R?t.jsxRuntimeExports.jsx(Oe.Tooltip,{data:k,body:v,xPos:Q,yPos:R,backgroundStyle:a?.tooltip,className:m?.tooltip}):null]})}function Ue(re){const{data:O,graphTitle:b,lineColor:$,suffix:H="",sources:L,prefix:D="",graphDescription:r,height:q,width:c,footNote:G,noOfXTicks:oe=10,dateFormat:j="yyyy",showValues:ae=!1,padding:P,backgroundColor:v=!1,leftMargin:T=30,rightMargin:W=30,topMargin:Y=20,bottomMargin:X=25,relativeHeight:s,tooltip:U,onSeriesMouseOver:le,highlightAreaSettings:ce=[],graphID:xe,minValue:ue,maxValue:I,maxDate:B,minDate:me,graphDownload:M=!1,dataDownload:V=!1,animate:N=!1,language:a="en",refValues:m=[],minHeight:w=0,strokeWidth:z=2,showDots:J=!0,annotations:d=[],customHighlightAreaSettings:A=[],theme:pe="light",ariaLabel:he,regressionLine:k=!1,yAxisTitle:K,noOfYTicks:Q=5,curveType:Z="curve",styles:R,classNames:E,precision:g=2,customLayers:_=[]}=re,[i,ee]=h.useState(0),[te,l]=h.useState(0),p=h.useRef(null),ie=h.useRef(null);return h.useEffect(()=>{const x=new ResizeObserver(f=>{ee(c||f[0].target.clientWidth||620),l(q||f[0].target.clientHeight||480)});return p.current&&(l(p.current.clientHeight||480),ee(p.current.clientWidth||620),c||x.observe(p.current)),()=>x.disconnect()},[c,q]),t.jsxRuntimeExports.jsx("div",{className:`${pe||"light"} flex  ${c?"w-fit grow-0":"w-full grow"}`,dir:a==="he"||a==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${v?v===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${a||"en"}`,c?"w-fit":"w-full",E?.graphContainer),style:{...R?.graphContainer||{},...v&&v!==!0?{backgroundColor:v}:{}},id:xe,ref:ie,"aria-label":he||`${b?`The graph shows ${b}. `:""}This is a line chart that shows trends over time.${r?` ${r}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:v?P||"1rem":P||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[b||r||M||V?t.jsxRuntimeExports.jsx(Pe.GraphHeader,{styles:{title:R?.title,description:R?.description},classNames:{title:E?.title,description:E?.description},graphTitle:b,graphDescription:r,width:c,graphDownload:M?ie.current:void 0,dataDownload:V?O.map(x=>x.data).filter(x=>x!==void 0).length>0?O.map(x=>x.data).filter(x=>x!==void 0):O.filter(x=>x!==void 0):null}):null,O.length===0?t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:t.jsxRuntimeExports.jsx(Ye.EmptyState,{})}):t.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:p,"aria-label":"Graph area",children:(c||i)&&(q||te)?t.jsxRuntimeExports.jsx(Xe,{data:O,lineColor:$||We.Colors.primaryColors["blue-600"],width:c||i,height:Math.max(w,q||(s?w?(c||i)*s>w?(c||i)*s:w:(c||i)*s:te)),suffix:H,prefix:D,dateFormat:j,showValues:ae,noOfXTicks:oe,leftMargin:T,rightMargin:W,topMargin:Y,bottomMargin:X,tooltip:U,highlightAreaSettings:ce,onSeriesMouseOver:le,refValues:m,minValue:ue,maxValue:I,animate:N===!0?{duration:.5,once:!0,amount:.5}:N||{duration:0,once:!0,amount:0},rtl:a==="he"||a==="ar",strokeWidth:z,showDots:J,annotations:d,customHighlightAreaSettings:A,regressionLine:k,yAxisTitle:K,noOfYTicks:Q,maxDate:B,minDate:me,curveType:Z,styles:R,classNames:E,precision:g,customLayers:_}):null}),L||G?t.jsxRuntimeExports.jsx(Ge.GraphFooter,{styles:{footnote:R?.footnote,source:R?.source},classNames:{footnote:E?.footnote,source:E?.source},sources:L,footNote:G,width:c}):null]})})})})}exports.SimpleLineChart=Ue;
 //# sourceMappingURL=SimpleLineChart.cjs.map

package/dist/SimpleLineChart.js

@@ -13,7 +13,7 @@ import { X as Re } from "./XTicksAndGridLines-Bn9u5gOM.js";
 import { R as He } from "./ReferenceLine-CfAW3vKJ.js";
 import { R as Ie } from "./RegressionLine-mH7UKOPi.js";
 import { Y as We } from "./YTicksAndGridLines-B6ah7CRf.js";
-import { H as Fe } from "./index-Cdcfp4nk.js";
+import { H as Fe } from "./index-DKCxu1Gh.js";
 import { t as Ye } from "./time-BzJP5SPC.js";
 import { a as Pe } from "./linear-DUdu7l2G.js";
 import { l as Xe, c as Ee } from "./line-CPfhohvF.js";

package/dist/{index-DNj994Pv.cjs → index-BYzIB5V6.cjs}

@@ -1,2 +1,2 @@
-"use strict";const n=require("./index-CHPV5EwG-DDoeWRVt.cjs"),x=require("./Colors.cjs"),r=require("./proxy-BHRoeZgd.cjs");function m(c){const{areaSettings:l,width:h,height:s,scale:o,animate:e,isInView:a}=c;return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:l.map((t,i)=>n.jsxRuntimeExports.jsx(r.motion.g,{children:t.coordinates[0]===null&&t.coordinates[1]===null?null:n.jsxRuntimeExports.jsx(r.motion.g,{children:n.jsxRuntimeExports.jsx(r.motion.rect,{style:{fill:t.color||x.Colors.light.grays["gray-300"],strokeWidth:t.strokeWidth,...t.style||{}},className:t.className,y:0,height:s,variants:{initial:{width:0,x:t.coordinates[0]?o(t.coordinates[0]):0,opacity:1},whileInView:{width:t.coordinates[1]?o(t.coordinates[1])-(t.coordinates[0]?o(t.coordinates[0]):0):h-(t.coordinates[0]?o(t.coordinates[0]):0),x:t.coordinates[0]?o(t.coordinates[0]):0,opacity:1,transition:{duration:e.duration}}},initial:"initial",animate:a?"whileInView":"initial",exit:{opacity:0,width:0,transition:{duration:e.duration}}})})},i))})}function d(c){const{areaSettings:l,width:h,height:s,scaleX:o,scaleY:e,animate:a,isInView:t}=c;return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:l.map((i,u)=>n.jsxRuntimeExports.jsx(r.motion.g,{children:i.coordinates.filter(g=>g===null).length===4?null:n.jsxRuntimeExports.jsx(r.motion.g,{children:n.jsxRuntimeExports.jsx(r.motion.rect,{style:{fill:i.color||x.Colors.light.grays["gray-300"],strokeWidth:i.strokeWidth,...i.style||{}},className:i.className,variants:{initial:{x:i.coordinates[0]?o(i.coordinates[0]):0,width:0,y:i.coordinates[3]?e(i.coordinates[3]):0,height:0},whileInView:{x:i.coordinates[0]?o(i.coordinates[0]):0,width:i.coordinates[1]?o(i.coordinates[1])-(i.coordinates[0]?o(i.coordinates[0]):0):h-(i.coordinates[0]?o(i.coordinates[0]):0),y:i.coordinates[3]?e(i.coordinates[3]):0,height:i.coordinates[2]!==null?e(i.coordinates[2])-(i.coordinates[3]?e(i.coordinates[3]):0):s-(i.coordinates[3]?s-e(i.coordinates[3]):0),transition:{duration:a.duration}}},initial:"initial",animate:t?"whileInView":"initial",exit:{opacity:0,width:0,height:0,transition:{duration:a.duration}}})})},`${u}`))})}exports.HighlightArea=m;exports.HighlightAreaForScatterPlot=d;
-//# sourceMappingURL=index-DNj994Pv.cjs.map
+"use strict";const n=require("./index-CHPV5EwG-DDoeWRVt.cjs"),x=require("./Colors.cjs"),r=require("./proxy-BHRoeZgd.cjs");function m(c){const{areaSettings:l,width:h,height:s,scale:o,animate:e,isInView:a}=c;return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:l.map((t,i)=>n.jsxRuntimeExports.jsx(r.motion.g,{children:t.coordinates[0]===null&&t.coordinates[1]===null?null:n.jsxRuntimeExports.jsx(r.motion.g,{children:n.jsxRuntimeExports.jsx(r.motion.rect,{style:{fill:t.color||x.Colors.light.grays["gray-300"],strokeWidth:t.strokeWidth,...t.style||{}},className:t.className,y:0,height:s,variants:{initial:{width:0,x:t.coordinates[0]?o(t.coordinates[0]):0,opacity:1},whileInView:{width:t.coordinates[1]?o(t.coordinates[1])-(t.coordinates[0]?o(t.coordinates[0]):0):h-(t.coordinates[0]?o(t.coordinates[0]):0),x:t.coordinates[0]?o(t.coordinates[0]):0,opacity:1,transition:{duration:e.duration}}},initial:"initial",animate:a?"whileInView":"initial",exit:{opacity:0,width:0,transition:{duration:e.duration}}})})},i))})}function d(c){const{areaSettings:l,width:h,height:s,scaleX:o,scaleY:e,animate:a,isInView:t}=c;return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:l.map((i,u)=>n.jsxRuntimeExports.jsx(r.motion.g,{children:i.coordinates.filter(g=>g===null).length===4?null:n.jsxRuntimeExports.jsx(r.motion.g,{children:n.jsxRuntimeExports.jsx(r.motion.rect,{style:{fill:i.color||x.Colors.light.grays["gray-300"],strokeWidth:i.strokeWidth,...i.style||{}},className:i.className,variants:{initial:{x:i.coordinates[0]?o(i.coordinates[0]):0,width:0,y:i.coordinates[3]?e(i.coordinates[3]):0,height:0},whileInView:{x:i.coordinates[0]?o(i.coordinates[0]):0,width:i.coordinates[1]?o(i.coordinates[1])-(i.coordinates[0]?o(i.coordinates[0]):0):h-(i.coordinates[0]?o(i.coordinates[0]):0),y:i.coordinates[3]?e(i.coordinates[3]):0,height:i.coordinates[2]!==null?e(i.coordinates[2])-(i.coordinates[3]?e(i.coordinates[3]):0):s-(i.coordinates[3]?s-e(i.coordinates[3]):0),transition:{duration:a.duration}}},initial:"initial",animate:t?"whileInView":"initial",exit:{opacity:0,width:0,height:0,transition:{duration:a.duration}}})})},`highlight_area_${u}`))})}exports.HighlightArea=m;exports.HighlightAreaForScatterPlot=d;
+//# sourceMappingURL=index-BYzIB5V6.cjs.map

package/dist/index-BYzIB5V6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BYzIB5V6.cjs","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scale: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n  const { areaSettings, width, height, scale, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={i}>\r\n          {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                y={0}\r\n                height={height}\r\n                variants={{\r\n                  initial: {\r\n                    width: 0,\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                  },\r\n                  whileInView: {\r\n                    width: d.coordinates[1]\r\n                      ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n                      : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scaleX: (value: Date | NumberValue) => number;\r\n  scaleY: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n  const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={`highlight_area_${i}`}>\r\n          {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                variants={{\r\n                  initial: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: 0,\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height: 0,\r\n                  },\r\n                  whileInView: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: d.coordinates[1]\r\n                      ? scaleX(d.coordinates[1] as number) -\r\n                        (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n                      : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height:\r\n                      d.coordinates[2] !== null\r\n                        ? scaleY(d.coordinates[2] as number) -\r\n                          (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n                        : height -\r\n                          (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{\r\n                  opacity: 0,\r\n                  width: 0,\r\n                  height: 0,\r\n                  transition: { duration: animate.duration },\r\n                }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":"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"}

package/dist/{index-Cdcfp4nk.js → index-DKCxu1Gh.js}

@@ -68,10 +68,10 @@ function p(c) {
         transition: { duration: s.duration }
       }
     }
-  ) }) }, `${m}`)) });
+  ) }) }, `highlight_area_${m}`)) });
 }
 export {
   y as H,
   p as a
 };
-//# sourceMappingURL=index-Cdcfp4nk.js.map
+//# sourceMappingURL=index-DKCxu1Gh.js.map

package/dist/index-DKCxu1Gh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DKCxu1Gh.js","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scale: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n  const { areaSettings, width, height, scale, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={i}>\r\n          {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                y={0}\r\n                height={height}\r\n                variants={{\r\n                  initial: {\r\n                    width: 0,\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                  },\r\n                  whileInView: {\r\n                    width: d.coordinates[1]\r\n                      ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n                      : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scaleX: (value: Date | NumberValue) => number;\r\n  scaleY: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n  const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={`highlight_area_${i}`}>\r\n          {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                variants={{\r\n                  initial: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: 0,\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height: 0,\r\n                  },\r\n                  whileInView: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: d.coordinates[1]\r\n                      ? scaleX(d.coordinates[1] as number) -\r\n                        (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n                      : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height:\r\n                      d.coordinates[2] !== null\r\n                        ? scaleY(d.coordinates[2] as number) -\r\n                          (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n                        : height -\r\n                          (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{\r\n                  opacity: 0,\r\n                  width: 0,\r\n                  height: 0,\r\n                  transition: { duration: animate.duration },\r\n                }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package/dist/index-Cdcfp4nk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-Cdcfp4nk.js","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scale: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n  const { areaSettings, width, height, scale, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={i}>\r\n          {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                y={0}\r\n                height={height}\r\n                variants={{\r\n                  initial: {\r\n                    width: 0,\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                  },\r\n                  whileInView: {\r\n                    width: d.coordinates[1]\r\n                      ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n                      : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scaleX: (value: Date | NumberValue) => number;\r\n  scaleY: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n  const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={`${i}`}>\r\n          {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                variants={{\r\n                  initial: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: 0,\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height: 0,\r\n                  },\r\n                  whileInView: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: d.coordinates[1]\r\n                      ? scaleX(d.coordinates[1] as number) -\r\n                        (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n                      : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height:\r\n                      d.coordinates[2] !== null\r\n                        ? scaleY(d.coordinates[2] as number) -\r\n                          (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n                        : height -\r\n                          (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{\r\n                  opacity: 0,\r\n                  width: 0,\r\n                  height: 0,\r\n                  transition: { duration: animate.duration },\r\n                }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":"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"}

package/dist/index-DNj994Pv.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DNj994Pv.cjs","sources":["../src/Components/Elements/HighlightArea/index.tsx"],"sourcesContent":["import { NumberValue } from 'd3-scale';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scale: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightArea(props: Props) {\r\n  const { areaSettings, width, height, scale, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={i}>\r\n          {d.coordinates[0] === null && d.coordinates[1] === null ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                y={0}\r\n                height={height}\r\n                variants={{\r\n                  initial: {\r\n                    width: 0,\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                  },\r\n                  whileInView: {\r\n                    width: d.coordinates[1]\r\n                      ? scale(d.coordinates[1]) - (d.coordinates[0] ? scale(d.coordinates[0]) : 0)\r\n                      : width - (d.coordinates[0] ? scale(d.coordinates[0]) : 0),\r\n                    x: d.coordinates[0] ? scale(d.coordinates[0]) : 0,\r\n                    opacity: 1,\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{ opacity: 0, width: 0, transition: { duration: animate.duration } }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n\r\ninterface ScatterPlotProps {\r\n  areaSettings: {\r\n    coordinates: (Date | null | number)[];\r\n    style?: React.CSSProperties;\r\n    className?: string;\r\n    color?: string;\r\n    strokeWidth?: number;\r\n  }[];\r\n  width: number;\r\n  height: number;\r\n  scaleX: (value: Date | NumberValue) => number;\r\n  scaleY: (value: Date | NumberValue) => number;\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function HighlightAreaForScatterPlot(props: ScatterPlotProps) {\r\n  const { areaSettings, width, height, scaleX, scaleY, animate, isInView } = props;\r\n  return (\r\n    <>\r\n      {areaSettings.map((d, i) => (\r\n        <motion.g key={`${i}`}>\r\n          {d.coordinates.filter(el => el === null).length === 4 ? null : (\r\n            <motion.g>\r\n              <motion.rect\r\n                style={{\r\n                  fill: d.color || Colors.light.grays['gray-300'],\r\n                  strokeWidth: d.strokeWidth,\r\n                  ...(d.style || {}),\r\n                }}\r\n                className={d.className}\r\n                variants={{\r\n                  initial: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: 0,\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height: 0,\r\n                  },\r\n                  whileInView: {\r\n                    x: d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0,\r\n                    width: d.coordinates[1]\r\n                      ? scaleX(d.coordinates[1] as number) -\r\n                        (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0)\r\n                      : width - (d.coordinates[0] ? scaleX(d.coordinates[0] as number) : 0),\r\n                    y: d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0,\r\n                    height:\r\n                      d.coordinates[2] !== null\r\n                        ? scaleY(d.coordinates[2] as number) -\r\n                          (d.coordinates[3] ? scaleY(d.coordinates[3] as number) : 0)\r\n                        : height -\r\n                          (d.coordinates[3] ? height - scaleY(d.coordinates[3] as number) : 0),\r\n                    transition: { duration: animate.duration },\r\n                  },\r\n                }}\r\n                initial='initial'\r\n                animate={isInView ? 'whileInView' : 'initial'}\r\n                exit={{\r\n                  opacity: 0,\r\n                  width: 0,\r\n                  height: 0,\r\n                  transition: { duration: animate.duration },\r\n                }}\r\n              />\r\n            </motion.g>\r\n          )}\r\n        </motion.g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["HighlightArea","props","areaSettings","width","height","scale","animate","isInView","jsx","Fragment","d","motion","Colors","HighlightAreaForScatterPlot","scaleX","scaleY","i","el"],"mappings":"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"}