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

For line charts and other lines

import A,{useEffect as fe,useMemo as O,useRef as ct,useState as ft}from"react";import{useGG as dt,themeState as yt,tooltipState as gt,generateID as kt,EventArea as ht,isDate as St,focusNodes as Dt,unfocusNodes as Te,strokeScaleState as xt,defaultScheme as Gt,usePageVisibility as bt,defaultDasharrays as vt,strokeDasharrayState as At}from"@graphique/graphique";import{Animate as Oe}from"react-move";import{easeCubic as te}from"d3-ease";import{interpolate as Le}from"d3-interpolate";import{interpolatePath as _e}from"d3-interpolate-path";import{line as Tt,curveLinear as Ot}from"d3-shape";import{scaleOrdinal as Pe}from"d3-scale";import{useAtom as ie}from"jotai";import X,{useMemo as R}from"react";import{useGG as rt,tooltipState as st,themeState as at,XTooltip as nt,YTooltip as it,TooltipContainer as lt,TooltipPosition as ut}from"@graphique/graphique";import{useAtom as Ge}from"jotai";import{mean as mt,min as be,max as pt}from"d3-array";import W from"react";import{TooltipContainer as Ke,formatMissing as Ue,themeState as Ze}from"@graphique/graphique";import{useAtom as qe}from"jotai";var De=({data:c,hasXAxisTooltip:r})=>{let o=c&&c[0]?c[0]?.formattedX:void 0,[{tooltip:D}]=qe(Ze);return c?W.createElement(Ke,null,!r&&o&&W.createElement("div",{style:{marginTop:2,marginBottom:c.length===1?2:6,fontSize:D?.xLabel?.fontSize||D?.font?.size,color:"#555"}},o),c.map((f,x)=>{let y=Ue(f.group);return W.createElement("div",{key:`group-tooltip-${f.label||y}-${x.toString()}`},W.createElement("div",{style:{marginTop:3,marginBottom:c.length<x+1?3:2,display:"flex",alignItems:"center"}},(f.label||f.group)&&W.createElement(W.Fragment,null,f.mark,W.createElement("div",{style:{display:"flex",alignItems:"flex-end",marginLeft:4}},W.createElement("div",{style:{marginRight:5}},W.createElement("span",{style:{fontSize:D?.groupLabel?.fontSize||D?.font?.size}},f.label||y," ")))),W.createElement("div",{style:{fontWeight:500,fontSize:D?.yLabel?.fontSize||(D?.font?.size||12)+1}},f.formattedY)))})):null};import Z,{useMemo as Je}from"react";import{useGG as Qe,tooltipState as Re,themeState as et,formatMissing as tt}from"@graphique/graphique";import{min as ot}from"d3-array";import{useAtom as xe}from"jotai";var ne=({x:c,y:r,markerRadius:o,markerStroke:D,aes:f})=>{let{ggState:x}=Qe()||{},{copiedScales:y,width:m,height:T,margin:v,id:i,scales:N}=x||{},[{datum:u}]=xe(Re),[{defaultStroke:k,geoms:L}]=xe(et)||{},{line:_}=L||{},h=Je(()=>ot([u&&c(u[0]),m-(v?.right??0)]),[u,c,m]);return T&&v?Z.createElement(Z.Fragment,null,h&&u&&Z.createElement("g",{className:`__gg-tooltip-${i}`,style:{transform:`translateX(${h}px)`}},Z.createElement("line",{y1:T-v.bottom,y2:v.top,strokeDasharray:2,stroke:"#888",strokeWidth:1.5,style:{pointerEvents:"none"},"data-testid":"__gg_geom_line_marker"}),u.map((s,V)=>{let Y=y?.groupAccessor?tt(y?.groupAccessor(s)):"__group",S=r(s)<=y?.yScale.range()[0]&&r(s)>=y?.yScale.range()[1],G=N?.groups?N.groups.includes(Y):!0,b=_?.stroke||(y?.strokeScale&&f?.stroke?y.strokeScale(f.stroke(s)):k);return typeof r(s)<"u"&&S&&G&&Z.createElement("g",{key:`group-marker-${s.label||Y}-${V.toString()}`,style:{pointerEvents:"none"}},Z.createElement("circle",{r:o*2+.5,fill:b,cy:r(s),fillOpacity:Math.min(.5,Math.max((_?.strokeOpacity||.9)-.35,0))}),Z.createElement("circle",{r:o,fill:b,stroke:D,strokeWidth:o/3.2,cy:r(s),fillOpacity:_?.strokeOpacity||.9,strokeOpacity:.7,"data-testid":"__gg_geom_line_marker_point"}))}))):null};var ce=({x:c,y:r,aes:o})=>{let{ggState:D}=rt()||{},{id:f,copiedScales:x,width:y,height:m,margin:T,scales:v}=D||{height:0},[{datum:i,position:N,xAxis:u,xFormat:k,yFormat:L,content:_}]=Ge(st),[{geoms:h,defaultStroke:s}]=Ge(at),V=R(()=>c?be([i&&c(i[0]),y-(T?.right??0)]):void 0,[i,c,y]),Y=R(()=>r?i?.some(r):void 0,[i,r]),S=R(()=>{let M=v?.strokeScale?.domain()??v?.strokeDasharrayScale?.domain()??h?.line?.usableGroups;return M?i?.filter(n=>{let E=h?.line?.groupAccessor?.(n);return M.includes(E)}):i},[i,h,v]),G=R(()=>r&&S&&mt(S.map(r))||0,[S,r]),b=R(()=>i&&i[0]&&o?.x&&o.x(i[0]),[i,o]),a=pt([0,be([G,m])]),P=R(()=>S?.filter(n=>o?.y&&typeof o.y(n)<"u"&&o.y(n)!==null).map(n=>{let E=o?.stroke?.(n)??o?.strokeDasharray?.(n)??h?.line?.groupAccessor?.(n),J=h?.line?.strokeDasharray??(o.strokeDasharray&&x?.strokeDasharrayScale?x.strokeDasharrayScale(o.strokeDasharray(n)):void 0),le=h?.line?.stroke??(o.stroke&&x?.strokeScale?x.strokeScale(o.stroke(n)):s),ue=X.createElement("svg",{width:18,height:8},X.createElement("line",{x1:0,x2:18,y1:4,y2:4,stroke:le,strokeDasharray:J,strokeWidth:h?.line?.strokeWidth,strokeOpacity:h?.line?.strokeOpacity}));return{datum:i,group:E,mark:ue,x:b,y:o?.y&&o.y(n),formattedY:o?.y&&(L?L(o.y(n)):o.y(n)),formattedX:k?k(b):b?.toString()}}),[i,S,b,o,L,k,x,h,s]),I=_?X.createElement("div",null,_(P)):X.createElement(De,{data:P,hasXAxisTooltip:!!u});return i?X.createElement(X.Fragment,null,u&&T&&V&&X.createElement(nt,{id:f,left:V,top:-T.bottom,value:typeof u=="boolean"?X.createElement(lt,null,k&&k(b)):u(b)}),V&&Y&&X.createElement(it,{id:f,left:V,top:N===ut.DATA?-(m-a):-m,value:I})):null};var ve=(o=>(o.DATA="data",o.MIDPOINT="midpoint",o))(ve||{}),Ae=(o=>(o.X="x",o.CLOSEST="closest",o))(Ae||{});var Ce=({data:c,aes:r,showTooltip:o=!0,showLineMarker:D=!0,brushAction:f,isZoomedOut:x,curve:y=Ot,entrance:m="midpoint",onDatumSelection:T,onDatumFocus:v,onExit:i,focusedStyle:N,unfocusedStyle:u,attr:k,markerRadius:L=3.5,markerStroke:_="#fff",focusType:h="x",isAnimated:s=!0})=>{let{ggState:V}=dt()||{},{data:Y,aes:S,scales:G,copiedScales:b,copiedData:a,height:P,id:I}=V||{},[M,n]=ie(yt),[{datum:E}]=ie(gt),[{values:J,domain:le}]=ie(xt),[{values:ue,domain:we}]=ie(At),Fe=bt(),p=c||Y,e=O(()=>r?{...S,...r}:S,[S,r]),We=O(()=>{let t=p?p.filter(l=>e?.x&&(e.x(l)===null||typeof e.x(l)>"u"||Number.isNaN(e.x(l)?.valueOf())||St(e.x(l))&&e.x(l)?.valueOf()===0)):[];return p&&t.length===p.length},[p,e]),ze=O(()=>{let t=p?p.filter(l=>e?.y&&(e.y(l)===null||typeof e.y(l)>"u"||Number.isNaN(e.y(l)?.valueOf()))):[];return p&&t.length===p.length},[p]),{defaultStroke:ge,animationDuration:Q}=M,$e=O(()=>kt(),[]),[ke,Xe]=ft(!0);fe(()=>{let t=setTimeout(()=>Xe(!1),0);return()=>clearTimeout(t)},[]);let ee=O(()=>e?.stroke?Array.from(new Set(a?.map(e.stroke))):void 0,[a,e]),me=O(()=>e?.strokeDasharray?Array.from(new Set(a?.map(e?.strokeDasharray))):void 0,[a,e]),B=O(()=>e?.group??e?.stroke??e?.strokeDasharray??G?.groupAccessor,[e,G]),w=O(()=>B?Array.from(new Set(p?.map(B))):void 0,[p,B]),K=O(()=>{if(w&&e.stroke)return Pe().domain(le||ee||w).range(J||Gt)},[e,ee,J]),Ye=O(()=>{if(w&&e.strokeDasharray)return Pe().domain(we||me||w).range(ue||vt)},[e,me,J]),d={...{strokeWidth:2.5,strokeOpacity:1},...k};fe(()=>{n(t=>({...t,geoms:{...t.geoms,line:{strokeWidth:d.style?.strokeWidth||d.strokeWidth,strokeOpacity:d.style?.strokeOpacity||d.strokeOpacity,stroke:d.stroke,strokeScale:K,strokeDasharrayScale:Ye,groupAccessor:e.stroke??e.strokeDasharray??e?.group,usableGroups:ee??me}}}))},[n,k,K,ee,e]);let z=O(()=>t=>G?.xScale&&e?.x&&G.xScale(e.x(t)),[G,e]),$=O(()=>t=>e?.y&&G?.yScale&&G.yScale(e?.y(t)),[G,e]),F=O(()=>Tt().defined(t=>{let l=typeof t[0]<"u"&&typeof t[1]<"u",C=!Number.isNaN(t[0])&&!Number.isNaN(t[1]);return l&&C}).curve(y),[y]),he=ct(null),j=he.current?.getElementsByTagName("path"),oe={transition:"stroke-opacity 200ms",strokeOpacity:d.strokeOpacity,...d.style},Be={...oe,...N},je={...oe,fillOpacity:.2,strokeOpacity:.2,...u},U=h==="closest",re=O(()=>{let t=e?.stroke||e?.strokeDasharray;if(e.focusGroup&&U&&t){let l=e?.group??e?.stroke??e.strokeDasharray;return Array.from(new Set(p?.map(H=>`${e.focusGroup(H)}-${l?.(H)}`)))}return w},[w,ee,p,e,U]);return fe(()=>{let t=E?.[0];if(t&&B&&w&&re&&re?.length>1&&j&&j?.length>0&&U){let l=`${e.focusGroup?e.focusGroup(t):B(t)}`,C=re?.map((H,se)=>H.includes(l)?se:-1).filter(H=>H>=0);Dt({nodes:j,focusedIndex:C,focusedStyles:Be,unfocusedStyles:je})}else j&&U&&Te({nodes:j,baseStyles:oe})},[E,B,w,re,e,j,h,ke,U]),A.createElement(A.Fragment,null,A.createElement("g",{ref:he},Fe&&!ke&&!We&&!ze&&A.createElement(A.Fragment,null,p&&w&&B?w.map(t=>{let l=p.filter(g=>B(g)===t),C=l.map(g=>[z(g),$(g)]),H=e?.key?.(l[0])??`${$e}-${t}`,se=K&&e?.stroke?Array.from(new Set(l.map(g=>e.stroke&&e.stroke(g)))):void 0,Se=d.stroke||K&&K(t)||(b?.strokeScale?b.strokeScale(t):ge);se&&K&&se.forEach(g=>{Se=d.stroke||K(g)});let He=d.strokeDasharray||(b?.strokeDasharrayScale?b.strokeDasharrayScale(e?.strokeDasharray?.(l[0])):d.strokeDasharray);return A.createElement(Oe,{key:H,start:{path:F(C.map(g=>{let ae=m==="midpoint"?(P||0)/2:g[1],pe=g[1]===null||typeof g[1]>"u";return[g[0],pe?NaN:ae]})),opacity:0},enter:{path:s?[F(C)]:F(C),opacity:s?[d.opacity??1]:d.opacity??1,timing:{duration:Q,ease:te}},update:{path:s?[F(C)]:F(C),opacity:s?[d.opacity??1]:d.opacity??1,timing:{duration:Q,ease:te}},leave:()=>({opacity:s?[0]:0,timing:{duration:Q,ease:te}}),interpolation:(g,ae,pe)=>pe==="path"?_e(g,ae):Le(g,ae)},g=>A.createElement("path",{d:g.path,opacity:g.opacity,stroke:Se,strokeWidth:d.strokeWidth,strokeOpacity:d.strokeOpacity,strokeDasharray:He,fill:"none","data-testid":"__gg_geom_line",style:{pointerEvents:"none"},clipPath:`url(#__gg_canvas_${I})`,...k}))}):A.createElement(Oe,{start:{path:F(p?.map(t=>[z(t),$(t)])),opacity:0},enter:{path:s?[F(p?.map(t=>[z(t),$(t)]))]:F(p?.map(t=>[z(t),$(t)])),opacity:s?[1]:1,timing:{duration:Q}},update:{path:s?[F(p?.map(t=>[z(t),$(t)]))]:F(p?.map(t=>[z(t),$(t)])),opacity:s?[1]:1,timing:{duration:Q,ease:te}},leave:()=>({opacity:s?[0]:0,timing:{duration:Q,ease:te}}),interpolation:(t,l,C)=>C==="path"?_e(t,l):Le(t,l)},t=>A.createElement("path",{d:t.path,opacity:t.opacity,stroke:d.stroke||ge,strokeWidth:d.strokeWidth,strokeOpacity:d.strokeOpacity,fill:"none","data-testid":"__gg_geom_line",clipPath:`url(#__gg_canvas_${I})`,...k})))),(o||f)&&A.createElement(A.Fragment,null,A.createElement(ht,{data:p,aes:e,group:U?void 0:"x",x:t=>z(t),y:U?$:()=>0,onMouseLeave:()=>{j&&Te({nodes:j,baseStyles:oe}),i&&i()},onClick:T?({d:t,i:l})=>{T(t,l)}:void 0,onDatumFocus:v,showTooltip:o,brushAction:f,isZoomedOut:x}),o&&A.createElement(A.Fragment,null,D&&A.createElement(ne,{x:z,y:$,markerRadius:L,markerStroke:_,aes:e}),A.createElement(ce,{x:z,y:$,aes:e}))))};Ce.displayName="GeomLine";import Ee from"react";import{useGG as Mt,themeState as Et,LegendOrientation as Vt}from"@graphique/graphique";import{useAtom as wt}from"jotai";import q,{useState as Ne,useEffect as de,useMemo as Ie}from"react";import{useGG as Lt,themeState as _t,strokeScaleState as Pt,strokeDasharrayState as Ct,formatMissing as Nt,LegendOrientation as It}from"@graphique/graphique";import{useAtom as ye}from"jotai";var Me=({legendData:c,legendScales:r,orientation:o,labelFormat:D,fontSize:f=12,onSelection:x,ignoreDasharray:y})=>{let[{geoms:m,defaultStroke:T,legend:v}]=ye(_t),[{domain:i}]=ye(Pt),[{domain:N}]=ye(Ct),u=Ie(()=>i||N||r.groups||r.strokeScale?.domain()||r.strokeDasharrayScale?.domain(),[r,i,N]),[k,L]=Ne(m?.line?.usableGroups??[]),{ggState:_,updateData:h}=Lt()||{},{data:s}=_||{},[V,Y]=Ne(!0);de(()=>{let a=setTimeout(()=>Y(!1),0);return()=>clearTimeout(a)},[]),de(()=>{L(u??[])},[]);let S=Ie(()=>m?.line?.groupAccessor||(()=>{}),[m]);de(()=>{let a=Array.from(new Set(s.map(S)));L(a??[])},[s,S]);let G=o===It.H,b=a=>{let P=k,I;P.includes(a)?P.length===1?I=r.groups:I=P.filter(n=>n!==a):I=[...P,a],L(I);let M=Array.from(new Set(s?.map(n=>S(n))));if(x&&x(a),s&&h){let n;M.includes(a)?M.length===1?n=c:n=s.filter(E=>S(E)!==a):n=c.filter(E=>M.includes(S(E))||S(E)===a),h(n)}};return q.createElement("div",{style:{marginTop:8,display:"flex",flexDirection:G?"row":"column",flexWrap:"wrap",alignItems:G?"center":void 0},"data-testid":"__gg_geom_line_legend"},m?.line&&u?.map((a,P,I)=>{let M=k.includes(a)?m?.line?.strokeOpacity:m?.line?.strokeOpacity||.5;return q.createElement("div",{key:a,style:{display:"flex",alignItems:"center",marginBottom:G?6:2}},q.createElement("div",{tabIndex:0,role:"button",style:{cursor:"pointer",marginRight:P<I.length-1&&G?12:2,fontSize:f,opacity:k.includes(a)?1:.5,transition:"opacity 200ms",display:"flex",alignItems:"center"},onKeyDown:n=>{["Enter"," "].includes(n.key)&&b(a)},onClick:()=>b(a)},q.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"}},q.createElement("svg",{width:18,height:8},q.createElement("line",{x1:0,x2:18,y1:4,y2:4,stroke:m?.line?.stroke||(r.strokeScale?r.strokeScale(a):T),strokeWidth:m?.line?.strokeWidth,strokeOpacity:V?0:M,strokeDasharray:r.strokeDasharrayScale&&!y?r.strokeDasharrayScale(a):void 0,style:{transition:"stroke-opacity 500ms"}}))),q.createElement("div",{style:{marginLeft:4,fontSize:f,color:v?.labelColor??"currentcolor"}},D?D(a,P):Nt(a))))}))};var Ve=({title:c,style:r,orientation:o=Vt.V,format:D,onSelection:f,ignoreDasharray:x=!1})=>{let{ggState:y}=Mt()||{},{copiedScales:m,copiedData:T,aes:v}=y||{},[{font:i,geoms:N}]=wt(Et),{line:u}=N||{},{groups:k}=m||{},L=u?.strokeScale||u?.strokeDasharrayScale||v?.fill||v?.stroke||v?.strokeDasharray,{fontSize:_}={...r};return L?Ee.createElement("div",{style:{marginTop:12,fontFamily:i?.family,...r}},c,T&&(m||u?.strokeScale)&&(k||u?.usableGroups)?Ee.createElement(Me,{legendData:T,orientation:o,legendScales:{...m,strokeScale:u?u.strokeScale:m?.strokeScale,groups:u?.usableGroups},labelFormat:D,fontSize:_,onSelection:f,ignoreDasharray:x}):null):null};export{ve as Entrance,Ae as FocusType,Ce as GeomLine,Ve as Legend};
//# sourceMappingURL=index.js.map