@graphique/geom-vline/dist/index.js

For drawing vertical lines (usually used as markers)

import c,{useEffect as j,useMemo as b,useRef as ot,useState as et}from"react";import{useGG as rt,themeState as it,EventArea as st,usePageVisibility as nt}from"@graphique/graphique";import{NodeGroup as at}from"react-move";import{useAtom as mt}from"jotai";import{easeCubic as $}from"d3-ease";import{interpolate as lt}from"d3-interpolate";import A,{useMemo as P}from"react";import{useAtom as J}from"jotai";import{useGG as Q,tooltipState as R,YTooltip as tt}from"@graphique/graphique";import u from"react";import{useAtom as _}from"jotai";import{labelsState as Z,TooltipContainer as q,themeState as H}from"@graphique/graphique";var M=({data:r})=>{let[{x:y}]=_(Z),[{tooltip:a}]=_(H);return r?u.createElement(q,null,r.map(p=>u.createElement("div",{key:`group-tooltip-${p.label??""}`},u.createElement("div",{style:{marginTop:4,marginBottom:4}},p.label&&u.createElement(u.Fragment,null,p.mark,u.createElement("div",{style:{display:"flex",alignItems:"flex-end",fontWeight:500}},u.createElement("div",{style:{marginBottom:4}},u.createElement("span",{style:{fontSize:a?.groupLabel?.fontSize||a?.font?.size}},p.formattedMeasure)))),u.createElement("div",{style:{display:"flex",marginBottom:2,alignItems:"flex-end"}},p.label?u.createElement("div",{style:{fontSize:a?.groupLabel?.fontSize||a?.font?.size,marginRight:2}},`${p.label}:`):y&&u.createElement("div",{style:{fontSize:a?.groupLabel?.fontSize||a?.font?.size,marginRight:2}},`${y}:`),u.createElement("div",{style:{marginLeft:1,fontWeight:500,fontSize:a?.xLabel?.fontSize||(a?.font?.size||12)+1}},p.formattedX)))))):null};var F=({aes:r,group:y})=>{let{ggState:a}=Q()||{},{id:p,scales:g,height:V,width:L}=a||{width:0,height:0},[{datum:o,xFormat:z,yFormat:w,measureFormat:h,content:s}]=J(R),e=P(()=>o&&o[0],[o]),k=P(()=>{let m={given:e&&r?.label&&r.label(e),keyed:e&&r?.key&&r.key(e)};return m?.given??m?.keyed},[r,e]),d=g?.xScale,G=g?.yScale,i=P(()=>g?.xScale.bandwidth?g?.xScale.bandwidth()/2:0,[g]),T=P(()=>e&&y&&y(e),[e,y]),S=[{x:e&&r?.x&&d&&d(r.x(e)),y:e&&r?.y&&G&&G(r.y(e)),formattedX:e&&r?.x&&(z?z(r.x(e)):r.x(e)),formattedY:e&&r?.y&&(w?w(r.y(e)):r.y(e)),group:T,label:k,formattedMeasure:h&&(k||String(T))&&h(k||T),datum:o,containerWidth:L}],C=s?o&&A.createElement("div",null,s(S)):o&&A.createElement(M,{data:S});return o&&S[0].x!==void 0?A.createElement("div",null,A.createElement(tt,{id:p,left:(S[0].x||0)+i,top:-V,value:C})):null};var v=6,B=({data:r,aes:y,attr:a,showTooltip:p=!0,onDatumFocus:g,onDatumSelection:V,onExit:L,isAnimated:o=!0})=>{let{ggState:z}=rt()||{},{data:w,aes:h,scales:s,copiedScales:e,height:k,margin:d}=z||{},G=r||w,i=b(()=>y?{...h,...y}:h,[h,y]),[T,S]=mt(it),C=nt(),m={...{strokeOpacity:1,strokeWidth:1.5},...a},{defaultStroke:I,animationDuration:E}=T,[X,Y]=et(!0);j(()=>{let t=setTimeout(()=>Y(!1),0);return()=>clearTimeout(t)},[]);let x=b(()=>k&&d?k-d.bottom+v:v,[k,d]);j(()=>{S(t=>({...t,geoms:{...t.geoms,vline:{strokeWidth:m?.style?.strokeWidth||m?.strokeWidth,strokeOpacity:m?.style?.strokeOpacity||m?.strokeOpacity,strokeDasharray:m?.strokeDasharray,stroke:m?.stroke}}}))},[S,a]);let O=b(()=>t=>m.stroke||(i?.stroke&&e?.strokeScale?e.strokeScale(i.stroke(t)):I),[i,e,m,I]),l=b(()=>t=>(s?.xScale&&i?.x&&s.xScale(i.x(t)))??0,[s,i]),f=b(()=>s?.xScale?.bandwidth?s.xScale.bandwidth()*s.xScale.paddingInner()/2:0,[s]),W=b(()=>t=>{let n=s?.xScale&&s.xScale.domain();return s.xScale?.bandwidth?.()&&i.x&&n.includes(String(i.x(t)))?!1:n&&(l(t)<s.xScale(n[0])||l(t)>s.xScale(n[1]))},[s,l,i]),K=b(()=>(t,n)=>i?.key?i.key(t):`${i?.x&&i.x(t)}-${i?.y&&i.y(t)}-${s?.groupAccessor&&s.groupAccessor(t)}-${n}`,[i,s]),U=ot(null);return c.createElement(c.Fragment,null,c.createElement("g",{ref:U},!X&&C&&c.createElement(at,{data:[...G],keyAccessor:K,start:t=>({x1:l(t)-f,x2:l(t)-f,y1:x,y2:x,stroke:O(t),strokeOpacity:0}),enter:t=>{let D=W(t)?0:m?.strokeOpacity;return{x1:o?[l(t)-f]:l(t)-f,x2:o?[l(t)-f]:l(t)-f,y1:o?[x]:x,y2:o?[(d?.top||0)-v]:(d?.top||0)-v,stroke:o?[O(t)]:O(t),strokeOpacity:o?[D]:D,timing:{duration:E,ease:$}}},update:t=>{let D=W(t)?0:m?.strokeOpacity;return{x1:o?[l(t)-f]:l(t)-f,x2:o?[l(t)-f]:l(t)-f,y1:o?[x]:x,y2:o?[(d?.top||0)-v]:(d?.top||0)-v,stroke:o?[O(t)]:O(t),strokeOpacity:o?[D]:D,timing:{duration:E,ease:$}}},leave:()=>({stroke:o?["transparent"]:"transparent",y1:o?[x]:x,y2:o?[x]:x,timing:{duration:E,ease:$}}),interpolation:(t,n)=>lt(t,n)},t=>c.createElement(c.Fragment,null,t.map(({state:n,key:D})=>c.createElement("line",{key:D,...a,x1:n.x1,x2:n.x2,y1:n.y1,y2:n.y2,stroke:n.stroke,strokeWidth:m?.strokeWidth,strokeOpacity:n.strokeOpacity,style:{pointerEvents:"none"},"data-testid":"__gg_geom_vline"}))))),p&&c.createElement(c.Fragment,null,c.createElement(st,{data:G?.filter(t=>!W(t)),aes:i,x:l,y:()=>0,group:"x",onDatumFocus:g,onClick:V?({d:t,i:n})=>{V(t,n)}:void 0,onMouseLeave:()=>{L&&L()}}),c.createElement(F,{aes:i})))};B.displayName="GeomVLine";export{B as GeomVLine};
//# sourceMappingURL=index.js.map