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

For drawing horizontal lines (usually used as markers)

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