@dub/ui 0.2.57 → 0.2.58

package/dist/charts/index.mjs

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