@dub/ui 0.2.20 → 0.2.22

package/dist/charts/index.mjs

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