@dub/ui 0.2.68 → 0.2.69

package/dist/charts/index.mjs

@@ -1,2 +1,2 @@
 "use client"
-import{a as ot}from"../chunk-NWME2ANF.mjs";import{c as U,s as A,t as et}from"../chunk-CP3HS3MG.mjs";import{LinearGradient as Tt}from"@visx/gradient";import{Group as gt}from"@visx/group";import{Area as yt,AreaClosed as Ct,Circle as bt}from"@visx/shape";import{AnimatePresence as kt,motion as Q}from"motion/react";import{useMemo as vt}from"react";import{createContext as rt,useContext as it}from"react";var q=rt(null);function G(){let t=it(q);if(!t)throw new Error("No chart context");return t}var X=rt(null);function B(){let t=it(X);if(!t)throw new Error("No chart tooltip context");return t}import{jsx as O,jsxs as wt}from"react/jsx-runtime";function Fe({seriesStyles:t,showLatestValueCircle:s=!0}){let{data:r,series:C,margin:x,xScale:c,yScale:a,startDate:T,endDate:y}=G();if(!("ticks"in c))throw new Error("Areas require a time scale (type=area)");let{tooltipData:p}=B(),h=vt(()=>r.map(u=>({...u,values:Object.fromEntries(Object.keys(u.values).map(e=>[e,0]))})),[r]);return O(gt,{left:x.left,top:x.top,children:O(kt,{children:C.filter(({isActive:u})=>u).map(u=>{let e=t==null?void 0:t.find(({id:i})=>i===u.id);return wt(Q.g,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.1},children:[O(Tt,{id:`${u.id}-mask-gradient`,from:"white",to:"white",fromOpacity:.2,toOpacity:0,x1:0,x2:0,y1:0,y2:1}),O("mask",{id:`${u.id}-mask`,maskContentUnits:"objectBoundingBox",children:O("rect",{width:"1",height:"1",fill:`url(#${u.id}-mask-gradient)`})}),O(Ct,{data:r,x:i=>c(i.date),y:i=>a(u.valueAccessor(i)??0),yScale:a,children:({path:i})=>O(Q.path,{initial:{d:i(h)||"",opacity:0},animate:{d:i(r)||"",opacity:1},className:A(u.colorClassName??"text-blue-500",e==null?void 0:e.gradientClassName),mask:`url(#${u.id}-mask)`,fill:(e==null?void 0:e.areaFill)??"currentColor"})}),O(yt,{data:r,x:i=>c(i.date),y:i=>a(u.valueAccessor(i)??0),children:({path:i})=>O(Q.path,{initial:{d:i(h)||""},animate:{d:i(r)||""},className:A(u.colorClassName??"text-blue-700",e==null?void 0:e.lineClassName),stroke:(e==null?void 0:e.lineStroke)??"currentColor",strokeOpacity:.8,strokeWidth:2,fill:"transparent"})}),s&&!p&&O(bt,{cx:c(r.at(-1).date),cy:a(u.valueAccessor(r.at(-1))),r:4,className:A(u.colorClassName??"text-blue-700",e==null?void 0:e.lineClassName),fill:"currentColor"})]},`${u.id}_${T.toString()}_${y.toString()}`)})})})}import{RectClipPath as St}from"@visx/clip-path";import{Group as Dt}from"@visx/group";import{BarRounded as At}from"@visx/shape";import{AnimatePresence as Nt,motion as Pt}from"motion/react";import{useId as Lt}from"react";import{jsx as z,jsxs as Mt}from"react/jsx-runtime";function Be({seriesStyles:t,radius:s=2}){let r=Lt(),{data:C,series:x,margin:c,xScale:a,yScale:T,width:y,height:p,startDate:h,endDate:u}=G();if(!("bandwidth"in a))throw new Error("Bars require a band scale (type=bar)");let e=x.filter(({isActive:i})=>i);return Mt(Dt,{left:c.left,top:c.top,children:[z(St,{id:r,x:0,y:0,width:y,height:p}),z(Nt,{children:z(Pt.g,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.1},clipPath:`url(#${r})`,children:C.map(i=>{let o=a.bandwidth(),l=a(i.date)??0,g=e.filter(d=>d.valueAccessor(i)>0).sort((d,f)=>f.valueAccessor(i)-d.valueAccessor(i)).reduce((d,f)=>{let N=d.reduce((m,D)=>m+D.height,0),v=f.valueAccessor(i)??0,b=T(v);return[...d,{id:f.id,value:v,colorClassName:f.colorClassName,styles:t==null?void 0:t.find(({id:m})=>m===f.id),y:N,height:p-b}]},[]);return z("g",{children:g.map((d,f)=>{var N,v;return z(At,{x:l,y:p-d.height-d.y,width:o,height:d.height,className:A(d.colorClassName??"text-blue-700",(N=d.styles)==null?void 0:N.barClassName),fill:((v=d.styles)==null?void 0:v.barFill)||"currentColor",...f===g.length-1?{top:!0,radius:s}:{radius:0}},d.id)})},i.date.toString())})},`${e.map(i=>i.id).join(",")}_${h.toString()}_${u.toString()}`)})]})}import{curveBasis as Ft}from"@visx/curve";import{ParentSize as Ot}from"@visx/responsive";import{scaleLinear as at}from"@visx/scale";import{Area as Wt}from"@visx/shape";import{Text as Gt}from"@visx/text";import{motion as Rt}from"motion/react";import{Fragment as Et,useMemo as j,useRef as $t,useState as Vt}from"react";import{jsx as S,jsxs as R}from"react/jsx-runtime";var zt=[{opacity:1,padding:0},{opacity:.3,padding:8},{opacity:.15,padding:16}],nt=16;function Ze(t){return S("div",{className:"size-full",children:S(Ot,{className:"relative",children:({width:s,height:r})=>s&&r?S(Bt,{...t,width:s,height:r}):null})})}function Bt({width:t,height:s,steps:r,persistentPercentages:C=!0,tooltips:x=!0,defaultTooltipStepId:c,chartPadding:a=40}){let{isMobile:T}=ot(),[y,p]=Vt(c??null),h=r.find(({id:n})=>n===y),u=j(()=>Object.fromEntries(r.map(({id:n,value:g},d)=>{var f;return[n,st(g,((f=r[d+1])==null?void 0:f.value)??r[r.length-1].value)]})),[r]),e=j(()=>st(0,0),[r]),i=j(()=>Math.max(...r.map(n=>n.value)),[r]),o=at({domain:[0,r.length],range:[0,t]}),l=at({domain:[i,-i],range:[s-nt-a,nt+a]});return R("div",{className:"relative",children:[S("svg",{width:t,height:s,children:r.map(({id:n,value:g,colorClassName:d},f)=>{let N=(o(f)+o(f+1))/2;return R(Et,{children:[x&&S("rect",{x:o(f),y:0,width:t/r.length,height:s,className:"fill-transparent transition-colors hover:fill-blue-600/5",onPointerEnter:()=>p(n),onPointerDown:()=>p(n),onPointerLeave:()=>!T&&p(c??null)}),S("line",{x1:o(f),y1:0,x2:o(f),y2:s,className:"stroke-black/5 sm:stroke-black/10"}),zt.map(({opacity:v,padding:b})=>S(Wt,{data:u[n],curve:Ft,x:m=>o(f+m.x),y0:m=>l(-m.y)-b,y1:m=>l(m.y)+b,children:({path:m})=>S(Rt.path,{initial:{d:m(e)||"",opacity:0},animate:{d:m(u[n])||"",opacity:v},className:A(d,"pointer-events-none"),fill:"currentColor"})},`${n}-${v}-${b}`)),C&&S(_t,{x:N,y:s/2,value:lt(g/i*100)+"%",colorClassName:d})]},n)})}),h&&S("div",{className:A("pointer-events-none absolute flex items-center justify-center px-1 pb-4",C?"animate-slide-up-fade top-16 sm:top-12":"animate-fade-in top-1/2 -translate-y-1/2"),style:{left:o(r.findIndex(({id:n})=>n===h.id)),width:t/r.length},children:R("div",{className:A("rounded-lg border border-neutral-200 bg-white text-base shadow-sm"),children:[S("p",{className:"border-b border-neutral-200 px-3 py-2 text-sm text-neutral-900 sm:px-4 sm:py-3",children:h.label}),R("div",{className:"flex flex-wrap justify-between gap-x-4 gap-y-2 px-3 py-2 text-sm sm:px-4 sm:py-3",children:[R("div",{className:"flex items-center gap-2",children:[S("div",{className:A(h.colorClassName,"h-2 w-2 shrink-0 rounded-sm bg-current opacity-50 shadow-[inset_0_0_0_1px_#0003]")}),S("p",{className:"whitespace-nowrap capitalize text-neutral-600",children:lt(h.value/i*100)+"%"})]}),R("p",{className:"whitespace-nowrap font-medium text-neutral-900",children:[U(h.value,{full:!0}),h.additionalValue!==void 0&&R("span",{className:"text-neutral-500",children:[" ","(",et(h.additionalValue),")"]})]})]})]})},h.id)]})}function _t({x:t,y:s,value:r,colorClassName:C}){var T;let x=$t(null),a=(((T=x.current)==null?void 0:T.getComputedTextLength())??0)+28;return R("g",{children:[S("rect",{x:t-a/2,width:a,y:s-14,height:28,rx:14,fill:"white"}),S(Gt,{innerTextRef:x,x:t,y:s,textAnchor:"middle",verticalAnchor:"middle",fill:"currentColor",fontSize:14,className:A("pointer-events-none select-none font-medium brightness-50",C),children:r})]})}var lt=t=>t>0&&t<.01?"< 0.01":U(t,{digits:2}),st=(t,s)=>[{x:0,y:t},{x:.3,y:t},{x:.5,y:(t+s)/2},{x:.7,y:s},{x:1,y:s}];import{Group as te}from"@visx/group";import{ParentSize as ee}from"@visx/responsive";import{scaleBand as oe,scaleLinear as re,scaleUtc as ie}from"@visx/scale";import{Bar as ut,Circle as ae,Line as ne}from"@visx/shape";import{useMemo as Z,useState as le}from"react";import{localPoint as qt}from"@visx/event";import{TooltipWithBounds as Xt,useTooltipInPortal as Qt,useTooltip as jt}from"@visx/tooltip";import{bisector as Jt}from"d3-array";import{useCallback as mt,useContext as Kt,useEffect as K,useMemo as Zt,useRef as ct}from"react";import{createContext as It,useState as Yt}from"react";import{jsx as Ut}from"react/jsx-runtime";var J=It({});function io({children:t}){let[s,r]=Yt(void 0);return Ut(J.Provider,{value:{tooltipDate:s,setTooltipDate:r},children:t})}var Ht=Jt(t=>new Date(t.date)).left;function pt({seriesId:t,chartContext:s,renderInPortal:r=!1,snapToY:C=!1,snapToX:x=!0,defaultIndex:c,onHoverDateChange:a}){let{series:T,data:y,xScale:p,yScale:h,margin:u}=s,e=Kt(J),i=Qt({scroll:!0,detectBounds:!0,debounce:200}),o=c!==void 0?y[c]:void 0,l=Zt(()=>o!==void 0?{tooltipData:o,tooltipLeft:x?p(o.date):0,tooltipTop:C?h(T.find(b=>b.id===t).valueAccessor(o)):0}:void 0,[o,x,C,p,h,T,t]),n=jt(),g=ct(null),d=ct(null),f=mt(b=>{d.current=b,g.current===null&&(g.current=window.requestAnimationFrame(()=>{g.current=null;let m=d.current;!m||n.showTooltip({tooltipData:m.tooltipData,tooltipLeft:m.tooltipLeft??0,tooltipTop:m.tooltipTop})}))},[n.showTooltip]);K(()=>()=>{g.current!==null&&window.cancelAnimationFrame(g.current)},[]),K(()=>{l&&f({tooltipData:l.tooltipData,tooltipLeft:l.tooltipLeft??0,tooltipTop:l.tooltipTop})},[l,f]),K(()=>{var b,m;if(e.tooltipDate&&((b=n.tooltipData)==null?void 0:b.date.getTime())!==e.tooltipDate.getTime()){let D=y.find(P=>{var k;return P.date.getTime()===((k=e.tooltipDate)==null?void 0:k.getTime())});if(!D)return;f({tooltipData:D,tooltipLeft:p(D.date)??0,tooltipTop:C?h(T.find(P=>P.id===t).valueAccessor(D)):0}),a==null||a(D.date)}else e.tooltipDate===null&&((m=n.tooltipData)==null?void 0:m.date)&&(n.hideTooltip(),a==null||a(null))},[e.tooltipDate,n.tooltipData,x,C,p,h]);let N=mt(b=>{var $;let D=(qt(b)||{x:0}).x-u.left,P="invert"in p?p.invert(D):p.domain()[Math.round((D-p.step()*.75)/p.step())];if(P===void 0){console.log("x0 is undefined",{defaultTooltipData:l}),l?n.showTooltip(l):n.hideTooltip();return}let k=Ht(y,P,1),V=y[k-1],E=y[k],W=V;E!=null&&E.date&&(W=P.valueOf()-V.date.valueOf()>E.date.valueOf()-P.valueOf()?E:V),f({tooltipData:W,tooltipLeft:x?p(W.date)??0:D,tooltipTop:C?h(T.find(I=>I.id===t).valueAccessor(W)):0}),($=e.setTooltipDate)==null||$.call(e,W.date),a==null||a(W.date)},[t,y,p,h,T,l,f,e.setTooltipDate]),v=r?i.TooltipInPortal:Xt;return{handleTooltip:N,TooltipWrapper:v,containerRef:i.containerRef,...n,hideTooltip:()=>{var b;(b=e.setTooltipDate)==null||b.call(e,null),l?n.showTooltip(l):n.hideTooltip(),a==null||a(null)}}}import{Fragment as dt,jsx as L,jsxs as _}from"react/jsx-runtime";function ko(t){return L(ee,{className:"relative",children:({width:s,height:r})=>s>0&&r>0&&L(se,{...t,width:s,height:r})})}function se({type:t="area",width:s,height:r,children:C,data:x,series:c,tooltipContent:a=e=>c[0].valueAccessor(e).toString(),tooltipClassName:T="",defaultTooltipIndex:y=null,onHoverDateChange:p,margin:h={top:12,right:5,bottom:32,left:5},padding:u}){let[e,i]=le(),o={...h,left:h.left+(e??0)},l=u??{top:.1,bottom:t==="area"?.1:0},n=s-o.left-o.right,g=r-o.top-o.bottom,{startDate:d,endDate:f}=Z(()=>{let w=x.map(({date:F})=>F),M=w.map(F=>F.getTime());return{startDate:w[M.indexOf(Math.min(...M))],endDate:w[M.indexOf(Math.max(...M))]}},[x]),{minY:N,maxY:v}=Z(()=>{let w=c.filter(({isActive:F})=>F!==!1),M=x.flatMap(F=>t==="bar"?w.reduce((Y,xt)=>Y+xt.valueAccessor(F),0):w.map(Y=>Y.valueAccessor(F))).filter(F=>F!=null);return{minY:t==="area"?Math.min(...M):Math.min(0,...M),maxY:Math.max(...M)}},[x,c,t]),{yScale:b,xScale:m}=Z(()=>{let w=v-N;return{yScale:re({domain:[N-w*(l.bottom??0),v+w*(l.top??0)],range:[g,0],nice:!0,clamp:!0}),xScale:t==="area"?ie({domain:[d,f],range:[0,n]}):oe({domain:x.map(({date:M})=>M),range:[0,n],padding:.15,align:.5})}},[d,f,N,v,g,n,x.length,t]),D={type:t,width:n,height:g,data:x,series:c,startDate:d,endDate:f,xScale:m,yScale:b,minY:N,maxY:v,margin:o,padding:l,tooltipContent:a,tooltipClassName:T,defaultTooltipIndex:y,onHoverDateChange:p,leftAxisMargin:e,setLeftAxisMargin:i},P=pt({seriesId:c[0].id,chartContext:D,onHoverDateChange:p,defaultIndex:y??void 0}),{tooltipData:k,TooltipWrapper:V,tooltipLeft:E,tooltipTop:W,handleTooltip:$,hideTooltip:I,containerRef:ht}=P;return L(q.Provider,{value:D,children:_(X.Provider,{value:P,children:[_("svg",{width:s,height:r,ref:ht,children:[C,_(te,{left:o.left,top:o.top,children:[k&&("bandwidth"in m?L(dt,{children:L(ut,{x:(m(k.date)??0)-m.bandwidth()*m.padding(),width:m.bandwidth()*(1+m.padding()*2),y:0,height:g,fill:"black",fillOpacity:.05})}):_(dt,{children:[L(ne,{x1:m(k.date),x2:m(k.date),y1:g,y2:0,stroke:"black",strokeOpacity:.5,strokeWidth:1}),c.filter(({isActive:w})=>w).map(w=>L(ae,{cx:m(k.date),cy:b(w.valueAccessor(k)),r:4,className:w.colorClassName??"text-blue-800",fill:"currentColor"},w.id))]})),L(ut,{x:0,y:0,width:n,height:g,onTouchStart:$,onTouchMove:$,onMouseMove:$,onMouseLeave:I,fill:"transparent"})]})]}),L("div",{className:"pointer-events-none absolute inset-0",children:k&&L(V,{left:(E??0)+o.left,top:(W??0)+o.top,offsetLeft:"bandwidth"in m?m.bandwidth()*(1+m.padding()):8,offsetTop:12,className:"absolute",unstyled:!0,children:L("div",{className:A("pointer-events-none rounded-lg border border-neutral-200 bg-white px-4 py-2 text-base shadow-sm",T),children:(a==null?void 0:a(k))??c[0].valueAccessor(k)})},k.date.toString())})]})})}import{AxisBottom as me}from"@visx/axis";import{Group as ce}from"@visx/group";import{Line as pe}from"@visx/shape";import{useMemo as ue}from"react";var ft=t=>[...Array(t+1).keys()].filter(s=>t%s===0);import{Fragment as de,jsx as H,jsxs as fe}from"react/jsx-runtime";function Mo({maxTicks:t,showGridLines:s=!1,highlightLast:r=!0,showAxisLine:C=!0,tickFormat:x=c=>c.toLocaleDateString("en-US",{month:"short",day:"numeric"})}){let{data:c,margin:a,width:T,height:y,xScale:p,startDate:h,endDate:u}=G(),{tooltipData:e}=B(),i=ue(()=>{let o=t??(T<450?4:T<600?6:8),l=ft(c.length).find(g=>(c.length+1)/g<=o)??1,n=c.length/l<2;return c.filter((g,d,{length:f})=>n?d===0||d===f-1:(d+1)%l===0).map(({date:g})=>g)},[T,t,c]);return fe(de,{children:[H(me,{left:a.left,top:a.top+y,scale:p,tickValues:i,hideTicks:!0,hideAxisLine:!C,stroke:"#00000026",tickFormat:o=>x(o),tickLabelProps:(o,l,{length:n})=>({className:"transition-colors",textAnchor:l===0?"start":l===n-1?"end":"middle",fontSize:12,fill:(e?e.date===o:r&&l===n-1)?"#000":"#00000066"})}),s&&H(ce,{left:a.left,top:a.top,children:i.length>0&&i.map(o=>H(pe,{x1:p(o),x2:p(o),y1:y,y2:0,stroke:o===(e==null?void 0:e.date)?"transparent":"#00000026",strokeWidth:1,strokeDasharray:[h,u].includes(o)?0:5},o.toString()))})]})}import{AxisLeft as he}from"@visx/axis";import{Group as xe}from"@visx/group";import{Line as Te}from"@visx/shape";import{getStringWidth as ge}from"@visx/text";import{useLayoutEffect as ye,useMemo as Ce}from"react";import{Fragment as be,jsx as tt,jsxs as ke}from"react/jsx-runtime";function Vo({numTicks:t,showGridLines:s=!1,integerTicks:r=!1,tickValues:C,tickFormat:x=a=>a.toString(),tickAxisSpacing:c=8}){let{width:a,height:T,margin:y,yScale:p,minY:h,leftAxisMargin:u,setLeftAxisMargin:e}=G(),i=Ce(()=>{if(C)return C;let o=t??T<350?3:4;return p.ticks(o).filter(l=>l>=h&&r?Number.isInteger(l):!0)},[C,t,T,p,r]);return ye(()=>{let o=Math.max(...i.map(l=>ge(x(l),{fontSize:12})??0))+c;(u??0)<o&&e(o)},[i,c,u]),ke(be,{children:[tt(he,{left:y.left,top:y.top,scale:p,tickValues:i,hideTicks:!0,stroke:"transparent",tickFormat:o=>x(o),tickLength:c,tickLabelProps:()=>({fontSize:12,fill:"#00000066",textAnchor:"end",verticalAnchor:"middle"})}),s&&tt(xe,{left:y.left,top:y.top,children:i.length>0&&i.map(o=>{let l=p(o);if(l!==T)return tt(Te,{y1:l,y2:l,x1:0,x2:a,stroke:"#00000026",strokeWidth:1,strokeDasharray:5},o.toString())})})]})}export{Fe as Areas,Be as Bars,q as ChartContext,X as ChartTooltipContext,io as ChartTooltipSync,J as ChartTooltipSyncContext,Ze as FunnelChart,ko as TimeSeriesChart,Mo as XAxis,Vo as YAxis,G as useChartContext,B as useChartTooltipContext};
+import{a as ot}from"../chunk-NWME2ANF.mjs";import{c as U,t as A,u as et}from"../chunk-W3YBFHMA.mjs";import{LinearGradient as Tt}from"@visx/gradient";import{Group as gt}from"@visx/group";import{Area as yt,AreaClosed as Ct,Circle as bt}from"@visx/shape";import{AnimatePresence as kt,motion as Q}from"motion/react";import{useMemo as vt}from"react";import{createContext as rt,useContext as it}from"react";var q=rt(null);function G(){let t=it(q);if(!t)throw new Error("No chart context");return t}var X=rt(null);function B(){let t=it(X);if(!t)throw new Error("No chart tooltip context");return t}import{jsx as O,jsxs as wt}from"react/jsx-runtime";function Fe({seriesStyles:t,showLatestValueCircle:s=!0}){let{data:r,series:C,margin:x,xScale:c,yScale:a,startDate:T,endDate:y}=G();if(!("ticks"in c))throw new Error("Areas require a time scale (type=area)");let{tooltipData:p}=B(),h=vt(()=>r.map(u=>({...u,values:Object.fromEntries(Object.keys(u.values).map(e=>[e,0]))})),[r]);return O(gt,{left:x.left,top:x.top,children:O(kt,{children:C.filter(({isActive:u})=>u).map(u=>{let e=t==null?void 0:t.find(({id:i})=>i===u.id);return wt(Q.g,{initial:{opacity:1},exit:{opacity:0},transition:{duration:.1},children:[O(Tt,{id:`${u.id}-mask-gradient`,from:"white",to:"white",fromOpacity:.2,toOpacity:0,x1:0,x2:0,y1:0,y2:1}),O("mask",{id:`${u.id}-mask`,maskContentUnits:"objectBoundingBox",children:O("rect",{width:"1",height:"1",fill:`url(#${u.id}-mask-gradient)`})}),O(Ct,{data:r,x:i=>c(i.date),y:i=>a(u.valueAccessor(i)??0),yScale:a,children:({path:i})=>O(Q.path,{initial:{d:i(h)||"",opacity:0},animate:{d:i(r)||"",opacity:1},className:A(u.colorClassName??"text-blue-500",e==null?void 0:e.gradientClassName),mask:`url(#${u.id}-mask)`,fill:(e==null?void 0:e.areaFill)??"currentColor"})}),O(yt,{data:r,x:i=>c(i.date),y:i=>a(u.valueAccessor(i)??0),children:({path:i})=>O(Q.path,{initial:{d:i(h)||""},animate:{d:i(r)||""},className:A(u.colorClassName??"text-blue-700",e==null?void 0:e.lineClassName),stroke:(e==null?void 0:e.lineStroke)??"currentColor",strokeOpacity:.8,strokeWidth:2,fill:"transparent"})}),s&&!p&&O(bt,{cx:c(r.at(-1).date),cy:a(u.valueAccessor(r.at(-1))),r:4,className:A(u.colorClassName??"text-blue-700",e==null?void 0:e.lineClassName),fill:"currentColor"})]},`${u.id}_${T.toString()}_${y.toString()}`)})})})}import{RectClipPath as St}from"@visx/clip-path";import{Group as Dt}from"@visx/group";import{BarRounded as At}from"@visx/shape";import{AnimatePresence as Nt,motion as Pt}from"motion/react";import{useId as Lt}from"react";import{jsx as z,jsxs as Mt}from"react/jsx-runtime";function Be({seriesStyles:t,radius:s=2}){let r=Lt(),{data:C,series:x,margin:c,xScale:a,yScale:T,width:y,height:p,startDate:h,endDate:u}=G();if(!("bandwidth"in a))throw new Error("Bars require a band scale (type=bar)");let e=x.filter(({isActive:i})=>i);return Mt(Dt,{left:c.left,top:c.top,children:[z(St,{id:r,x:0,y:0,width:y,height:p}),z(Nt,{children:z(Pt.g,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.1},clipPath:`url(#${r})`,children:C.map(i=>{let o=a.bandwidth(),l=a(i.date)??0,g=e.filter(d=>d.valueAccessor(i)>0).sort((d,f)=>f.valueAccessor(i)-d.valueAccessor(i)).reduce((d,f)=>{let N=d.reduce((m,D)=>m+D.height,0),v=f.valueAccessor(i)??0,b=T(v);return[...d,{id:f.id,value:v,colorClassName:f.colorClassName,styles:t==null?void 0:t.find(({id:m})=>m===f.id),y:N,height:p-b}]},[]);return z("g",{children:g.map((d,f)=>{var N,v;return z(At,{x:l,y:p-d.height-d.y,width:o,height:d.height,className:A(d.colorClassName??"text-blue-700",(N=d.styles)==null?void 0:N.barClassName),fill:((v=d.styles)==null?void 0:v.barFill)||"currentColor",...f===g.length-1?{top:!0,radius:s}:{radius:0}},d.id)})},i.date.toString())})},`${e.map(i=>i.id).join(",")}_${h.toString()}_${u.toString()}`)})]})}import{curveBasis as Ft}from"@visx/curve";import{ParentSize as Ot}from"@visx/responsive";import{scaleLinear as at}from"@visx/scale";import{Area as Wt}from"@visx/shape";import{Text as Gt}from"@visx/text";import{motion as Rt}from"motion/react";import{Fragment as Et,useMemo as j,useRef as $t,useState as Vt}from"react";import{jsx as S,jsxs as R}from"react/jsx-runtime";var zt=[{opacity:1,padding:0},{opacity:.3,padding:8},{opacity:.15,padding:16}],nt=16;function Ze(t){return S("div",{className:"size-full",children:S(Ot,{className:"relative",children:({width:s,height:r})=>s&&r?S(Bt,{...t,width:s,height:r}):null})})}function Bt({width:t,height:s,steps:r,persistentPercentages:C=!0,tooltips:x=!0,defaultTooltipStepId:c,chartPadding:a=40}){let{isMobile:T}=ot(),[y,p]=Vt(c??null),h=r.find(({id:n})=>n===y),u=j(()=>Object.fromEntries(r.map(({id:n,value:g},d)=>{var f;return[n,st(g,((f=r[d+1])==null?void 0:f.value)??r[r.length-1].value)]})),[r]),e=j(()=>st(0,0),[r]),i=j(()=>Math.max(...r.map(n=>n.value)),[r]),o=at({domain:[0,r.length],range:[0,t]}),l=at({domain:[i,-i],range:[s-nt-a,nt+a]});return R("div",{className:"relative",children:[S("svg",{width:t,height:s,children:r.map(({id:n,value:g,colorClassName:d},f)=>{let N=(o(f)+o(f+1))/2;return R(Et,{children:[x&&S("rect",{x:o(f),y:0,width:t/r.length,height:s,className:"fill-transparent transition-colors hover:fill-blue-600/5",onPointerEnter:()=>p(n),onPointerDown:()=>p(n),onPointerLeave:()=>!T&&p(c??null)}),S("line",{x1:o(f),y1:0,x2:o(f),y2:s,className:"stroke-black/5 sm:stroke-black/10"}),zt.map(({opacity:v,padding:b})=>S(Wt,{data:u[n],curve:Ft,x:m=>o(f+m.x),y0:m=>l(-m.y)-b,y1:m=>l(m.y)+b,children:({path:m})=>S(Rt.path,{initial:{d:m(e)||"",opacity:0},animate:{d:m(u[n])||"",opacity:v},className:A(d,"pointer-events-none"),fill:"currentColor"})},`${n}-${v}-${b}`)),C&&S(_t,{x:N,y:s/2,value:lt(g/i*100)+"%",colorClassName:d})]},n)})}),h&&S("div",{className:A("pointer-events-none absolute flex items-center justify-center px-1 pb-4",C?"animate-slide-up-fade top-16 sm:top-12":"animate-fade-in top-1/2 -translate-y-1/2"),style:{left:o(r.findIndex(({id:n})=>n===h.id)),width:t/r.length},children:R("div",{className:A("rounded-lg border border-neutral-200 bg-white text-base shadow-sm"),children:[S("p",{className:"border-b border-neutral-200 px-3 py-2 text-sm text-neutral-900 sm:px-4 sm:py-3",children:h.label}),R("div",{className:"flex flex-wrap justify-between gap-x-4 gap-y-2 px-3 py-2 text-sm sm:px-4 sm:py-3",children:[R("div",{className:"flex items-center gap-2",children:[S("div",{className:A(h.colorClassName,"h-2 w-2 shrink-0 rounded-sm bg-current opacity-50 shadow-[inset_0_0_0_1px_#0003]")}),S("p",{className:"whitespace-nowrap capitalize text-neutral-600",children:lt(h.value/i*100)+"%"})]}),R("p",{className:"whitespace-nowrap font-medium text-neutral-900",children:[U(h.value,{full:!0}),h.additionalValue!==void 0&&R("span",{className:"text-neutral-500",children:[" ","(",et(h.additionalValue),")"]})]})]})]})},h.id)]})}function _t({x:t,y:s,value:r,colorClassName:C}){var T;let x=$t(null),a=(((T=x.current)==null?void 0:T.getComputedTextLength())??0)+28;return R("g",{children:[S("rect",{x:t-a/2,width:a,y:s-14,height:28,rx:14,fill:"white"}),S(Gt,{innerTextRef:x,x:t,y:s,textAnchor:"middle",verticalAnchor:"middle",fill:"currentColor",fontSize:14,className:A("pointer-events-none select-none font-medium brightness-50",C),children:r})]})}var lt=t=>t>0&&t<.01?"< 0.01":U(t,{digits:2}),st=(t,s)=>[{x:0,y:t},{x:.3,y:t},{x:.5,y:(t+s)/2},{x:.7,y:s},{x:1,y:s}];import{Group as te}from"@visx/group";import{ParentSize as ee}from"@visx/responsive";import{scaleBand as oe,scaleLinear as re,scaleUtc as ie}from"@visx/scale";import{Bar as ut,Circle as ae,Line as ne}from"@visx/shape";import{useMemo as Z,useState as le}from"react";import{localPoint as qt}from"@visx/event";import{TooltipWithBounds as Xt,useTooltipInPortal as Qt,useTooltip as jt}from"@visx/tooltip";import{bisector as Jt}from"d3-array";import{useCallback as mt,useContext as Kt,useEffect as K,useMemo as Zt,useRef as ct}from"react";import{createContext as It,useState as Yt}from"react";import{jsx as Ut}from"react/jsx-runtime";var J=It({});function io({children:t}){let[s,r]=Yt(void 0);return Ut(J.Provider,{value:{tooltipDate:s,setTooltipDate:r},children:t})}var Ht=Jt(t=>new Date(t.date)).left;function pt({seriesId:t,chartContext:s,renderInPortal:r=!1,snapToY:C=!1,snapToX:x=!0,defaultIndex:c,onHoverDateChange:a}){let{series:T,data:y,xScale:p,yScale:h,margin:u}=s,e=Kt(J),i=Qt({scroll:!0,detectBounds:!0,debounce:200}),o=c!==void 0?y[c]:void 0,l=Zt(()=>o!==void 0?{tooltipData:o,tooltipLeft:x?p(o.date):0,tooltipTop:C?h(T.find(b=>b.id===t).valueAccessor(o)):0}:void 0,[o,x,C,p,h,T,t]),n=jt(),g=ct(null),d=ct(null),f=mt(b=>{d.current=b,g.current===null&&(g.current=window.requestAnimationFrame(()=>{g.current=null;let m=d.current;!m||n.showTooltip({tooltipData:m.tooltipData,tooltipLeft:m.tooltipLeft??0,tooltipTop:m.tooltipTop})}))},[n.showTooltip]);K(()=>()=>{g.current!==null&&window.cancelAnimationFrame(g.current)},[]),K(()=>{l&&f({tooltipData:l.tooltipData,tooltipLeft:l.tooltipLeft??0,tooltipTop:l.tooltipTop})},[l,f]),K(()=>{var b,m;if(e.tooltipDate&&((b=n.tooltipData)==null?void 0:b.date.getTime())!==e.tooltipDate.getTime()){let D=y.find(P=>{var k;return P.date.getTime()===((k=e.tooltipDate)==null?void 0:k.getTime())});if(!D)return;f({tooltipData:D,tooltipLeft:p(D.date)??0,tooltipTop:C?h(T.find(P=>P.id===t).valueAccessor(D)):0}),a==null||a(D.date)}else e.tooltipDate===null&&((m=n.tooltipData)==null?void 0:m.date)&&(n.hideTooltip(),a==null||a(null))},[e.tooltipDate,n.tooltipData,x,C,p,h]);let N=mt(b=>{var $;let D=(qt(b)||{x:0}).x-u.left,P="invert"in p?p.invert(D):p.domain()[Math.round((D-p.step()*.75)/p.step())];if(P===void 0){console.log("x0 is undefined",{defaultTooltipData:l}),l?n.showTooltip(l):n.hideTooltip();return}let k=Ht(y,P,1),V=y[k-1],E=y[k],W=V;E!=null&&E.date&&(W=P.valueOf()-V.date.valueOf()>E.date.valueOf()-P.valueOf()?E:V),f({tooltipData:W,tooltipLeft:x?p(W.date)??0:D,tooltipTop:C?h(T.find(I=>I.id===t).valueAccessor(W)):0}),($=e.setTooltipDate)==null||$.call(e,W.date),a==null||a(W.date)},[t,y,p,h,T,l,f,e.setTooltipDate]),v=r?i.TooltipInPortal:Xt;return{handleTooltip:N,TooltipWrapper:v,containerRef:i.containerRef,...n,hideTooltip:()=>{var b;(b=e.setTooltipDate)==null||b.call(e,null),l?n.showTooltip(l):n.hideTooltip(),a==null||a(null)}}}import{Fragment as dt,jsx as L,jsxs as _}from"react/jsx-runtime";function ko(t){return L(ee,{className:"relative",children:({width:s,height:r})=>s>0&&r>0&&L(se,{...t,width:s,height:r})})}function se({type:t="area",width:s,height:r,children:C,data:x,series:c,tooltipContent:a=e=>c[0].valueAccessor(e).toString(),tooltipClassName:T="",defaultTooltipIndex:y=null,onHoverDateChange:p,margin:h={top:12,right:5,bottom:32,left:5},padding:u}){let[e,i]=le(),o={...h,left:h.left+(e??0)},l=u??{top:.1,bottom:t==="area"?.1:0},n=s-o.left-o.right,g=r-o.top-o.bottom,{startDate:d,endDate:f}=Z(()=>{let w=x.map(({date:F})=>F),M=w.map(F=>F.getTime());return{startDate:w[M.indexOf(Math.min(...M))],endDate:w[M.indexOf(Math.max(...M))]}},[x]),{minY:N,maxY:v}=Z(()=>{let w=c.filter(({isActive:F})=>F!==!1),M=x.flatMap(F=>t==="bar"?w.reduce((Y,xt)=>Y+xt.valueAccessor(F),0):w.map(Y=>Y.valueAccessor(F))).filter(F=>F!=null);return{minY:t==="area"?Math.min(...M):Math.min(0,...M),maxY:Math.max(...M)}},[x,c,t]),{yScale:b,xScale:m}=Z(()=>{let w=v-N;return{yScale:re({domain:[N-w*(l.bottom??0),v+w*(l.top??0)],range:[g,0],nice:!0,clamp:!0}),xScale:t==="area"?ie({domain:[d,f],range:[0,n]}):oe({domain:x.map(({date:M})=>M),range:[0,n],padding:.15,align:.5})}},[d,f,N,v,g,n,x.length,t]),D={type:t,width:n,height:g,data:x,series:c,startDate:d,endDate:f,xScale:m,yScale:b,minY:N,maxY:v,margin:o,padding:l,tooltipContent:a,tooltipClassName:T,defaultTooltipIndex:y,onHoverDateChange:p,leftAxisMargin:e,setLeftAxisMargin:i},P=pt({seriesId:c[0].id,chartContext:D,onHoverDateChange:p,defaultIndex:y??void 0}),{tooltipData:k,TooltipWrapper:V,tooltipLeft:E,tooltipTop:W,handleTooltip:$,hideTooltip:I,containerRef:ht}=P;return L(q.Provider,{value:D,children:_(X.Provider,{value:P,children:[_("svg",{width:s,height:r,ref:ht,children:[C,_(te,{left:o.left,top:o.top,children:[k&&("bandwidth"in m?L(dt,{children:L(ut,{x:(m(k.date)??0)-m.bandwidth()*m.padding(),width:m.bandwidth()*(1+m.padding()*2),y:0,height:g,fill:"black",fillOpacity:.05})}):_(dt,{children:[L(ne,{x1:m(k.date),x2:m(k.date),y1:g,y2:0,stroke:"black",strokeOpacity:.5,strokeWidth:1}),c.filter(({isActive:w})=>w).map(w=>L(ae,{cx:m(k.date),cy:b(w.valueAccessor(k)),r:4,className:w.colorClassName??"text-blue-800",fill:"currentColor"},w.id))]})),L(ut,{x:0,y:0,width:n,height:g,onTouchStart:$,onTouchMove:$,onMouseMove:$,onMouseLeave:I,fill:"transparent"})]})]}),L("div",{className:"pointer-events-none absolute inset-0",children:k&&L(V,{left:(E??0)+o.left,top:(W??0)+o.top,offsetLeft:"bandwidth"in m?m.bandwidth()*(1+m.padding()):8,offsetTop:12,className:"absolute",unstyled:!0,children:L("div",{className:A("pointer-events-none rounded-lg border border-neutral-200 bg-white px-4 py-2 text-base shadow-sm",T),children:(a==null?void 0:a(k))??c[0].valueAccessor(k)})},k.date.toString())})]})})}import{AxisBottom as me}from"@visx/axis";import{Group as ce}from"@visx/group";import{Line as pe}from"@visx/shape";import{useMemo as ue}from"react";var ft=t=>[...Array(t+1).keys()].filter(s=>t%s===0);import{Fragment as de,jsx as H,jsxs as fe}from"react/jsx-runtime";function Mo({maxTicks:t,showGridLines:s=!1,highlightLast:r=!0,showAxisLine:C=!0,tickFormat:x=c=>c.toLocaleDateString("en-US",{month:"short",day:"numeric"})}){let{data:c,margin:a,width:T,height:y,xScale:p,startDate:h,endDate:u}=G(),{tooltipData:e}=B(),i=ue(()=>{let o=t??(T<450?4:T<600?6:8),l=ft(c.length).find(g=>(c.length+1)/g<=o)??1,n=c.length/l<2;return c.filter((g,d,{length:f})=>n?d===0||d===f-1:(d+1)%l===0).map(({date:g})=>g)},[T,t,c]);return fe(de,{children:[H(me,{left:a.left,top:a.top+y,scale:p,tickValues:i,hideTicks:!0,hideAxisLine:!C,stroke:"#00000026",tickFormat:o=>x(o),tickLabelProps:(o,l,{length:n})=>({className:"transition-colors",textAnchor:l===0?"start":l===n-1?"end":"middle",fontSize:12,fill:(e?e.date===o:r&&l===n-1)?"#000":"#00000066"})}),s&&H(ce,{left:a.left,top:a.top,children:i.length>0&&i.map(o=>H(pe,{x1:p(o),x2:p(o),y1:y,y2:0,stroke:o===(e==null?void 0:e.date)?"transparent":"#00000026",strokeWidth:1,strokeDasharray:[h,u].includes(o)?0:5},o.toString()))})]})}import{AxisLeft as he}from"@visx/axis";import{Group as xe}from"@visx/group";import{Line as Te}from"@visx/shape";import{getStringWidth as ge}from"@visx/text";import{useLayoutEffect as ye,useMemo as Ce}from"react";import{Fragment as be,jsx as tt,jsxs as ke}from"react/jsx-runtime";function Vo({numTicks:t,showGridLines:s=!1,integerTicks:r=!1,tickValues:C,tickFormat:x=a=>a.toString(),tickAxisSpacing:c=8}){let{width:a,height:T,margin:y,yScale:p,minY:h,leftAxisMargin:u,setLeftAxisMargin:e}=G(),i=Ce(()=>{if(C)return C;let o=t??T<350?3:4;return p.ticks(o).filter(l=>l>=h&&r?Number.isInteger(l):!0)},[C,t,T,p,r]);return ye(()=>{let o=Math.max(...i.map(l=>ge(x(l),{fontSize:12})??0))+c;(u??0)<o&&e(o)},[i,c,u]),ke(be,{children:[tt(he,{left:y.left,top:y.top,scale:p,tickValues:i,hideTicks:!0,stroke:"transparent",tickFormat:o=>x(o),tickLength:c,tickLabelProps:()=>({fontSize:12,fill:"#00000066",textAnchor:"end",verticalAnchor:"middle"})}),s&&tt(xe,{left:y.left,top:y.top,children:i.length>0&&i.map(o=>{let l=p(o);if(l!==T)return tt(Te,{y1:l,y2:l,x1:0,x2:a,stroke:"#00000026",strokeWidth:1,strokeDasharray:5},o.toString())})})]})}export{Fe as Areas,Be as Bars,q as ChartContext,X as ChartTooltipContext,io as ChartTooltipSync,J as ChartTooltipSyncContext,Ze as FunnelChart,ko as TimeSeriesChart,Mo as XAxis,Vo as YAxis,G as useChartContext,B as useChartTooltipContext};