@dub/ui 0.2.48 → 0.2.49

package/dist/charts/index.mjs

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