UNPKG

@graphique/geom-hline

Version:

For drawing horizontal lines (usually used as markers)

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