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

For line charts and other lines

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