UNPKG

@graphique/geom-vline

Version:

For drawing vertical lines (usually used as markers)

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