UNPKG

@graphique/geom-area

Version:

For area charts, stacked area charts, or streamgraphs

2 lines 17.6 kB
"use strict";var st=Object.create;var be=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var mt=Object.getPrototypeOf,ct=Object.prototype.hasOwnProperty;var ft=(n,i)=>{for(var d in i)be(n,d,{get:i[d],enumerable:!0})},Be=(n,i,d,g)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of ut(i))!ct.call(n,t)&&t!==d&&be(n,t,{get:()=>i[t],enumerable:!(g=lt(i,t))||g.enumerable});return n};var fe=(n,i,d)=>(d=n!=null?st(mt(n)):{},Be(i||!n||!n.__esModule?be(d,"default",{value:n,enumerable:!0}):d,n)),pt=n=>Be(be({},"__esModule",{value:!0}),n);var yt={};ft(yt,{GeomArea:()=>Ie,Legend:()=>Fe,Position:()=>Ve});module.exports=pt(yt);var o=fe(require("react"),1),y=require("@graphique/graphique"),qe=require("react-move"),Ae=require("d3-ease"),Ce=require("d3-scale"),Je=require("d3-interpolate"),Qe=require("d3-interpolate-path"),I=require("d3-shape"),X=require("d3-array"),ye=require("jotai");var Ve=(t=>(t.IDENTITY="identity",t.STACK="stack",t.FILL="fill",t.STREAM="stream",t))(Ve||{});var N=fe(require("react"),1),j=require("@graphique/graphique"),we=require("jotai"),ne=require("d3-array");var R=fe(require("react"),1),pe=require("@graphique/graphique"),He=require("jotai"),je=({data:n,hasXAxisTooltip:i,geomID:d})=>{let g=n&&n[0]?n[0]?.formattedX:void 0,[{tooltip:t}]=(0,He.useAtom)(pe.themeState);return n?R.default.createElement(pe.TooltipContainer,null,!i&&g&&R.default.createElement("div",{style:{marginTop:2,marginBottom:n.length===1?2:6,fontSize:t?.xLabel?.fontSize||t?.font?.size,color:"#555"}},g),n.map((O,h)=>{let x=(0,pe.formatMissing)(O.group);return R.default.createElement("div",{key:`group-tooltip-${O.label||x}-${d}-${h.toString()}`},R.default.createElement("div",{style:{marginTop:3,marginBottom:n.length<h+1?3:2,display:"flex",alignItems:"center"}},(O.label||O.group)&&R.default.createElement(R.default.Fragment,null,O.mark,R.default.createElement("div",{style:{display:"flex",alignItems:"flex-end",marginLeft:4}},R.default.createElement("div",{style:{marginRight:5}},R.default.createElement("span",{style:{fontSize:t?.groupLabel?.fontSize||t?.font?.size}},O.label||x," ")))),R.default.createElement("div",{style:{fontWeight:500,fontSize:t?.yLabel?.fontSize||(t?.font?.size||12)+1}},O.formattedY)))})):null};var ee=fe(require("react"),1),ie=require("@graphique/graphique"),Pe=require("jotai"),Ue=require("d3-array");var ve=({x:n,y:i,y0:d,y1:g,aes:t,markerRadius:O,markerStroke:h,stackedData:x,position:T})=>{let{ggState:Y}=(0,ie.useGG)()||{},{scales:L,copiedScales:p,width:u,height:A,margin:m,id:re}=Y||{},[{datum:M}]=(0,Pe.useAtom)(ie.tooltipState),[{defaultFill:V,geoms:s}]=(0,Pe.useAtom)(ie.themeState)||{},{area:c}=s||{},f=(0,ee.useMemo)(()=>(0,Ue.min)([M&&n(M[0]),u-(m?.right??0)]),[M,n,u]),B=(0,ee.useMemo)(()=>t?.y1?g:i,[g,i,t]);return A&&m?ee.default.createElement(ee.default.Fragment,null,f&&M&&ee.default.createElement("g",{className:`__gg-tooltip-${re}`,style:{transform:`translateX(${f}px)`}},ee.default.createElement("line",{y1:A-m.bottom,y2:m.top,strokeDasharray:2,stroke:"#888",strokeWidth:1.5,style:{pointerEvents:"none"},"data-testid":"__gg_geom_area_marker"}),M.map((b,S)=>{let P=p?.groupAccessor?(0,ie.formatMissing)(p?.groupAccessor(b)):"__group",q=L?.groups?L.groups.includes(P):!0,U=[i(b)];if(!q)U=[];else if(x){let _=x.find(e=>t.x&&e.group===P&&Number(e.x)===Number(t.x(b)));T==="stream"&&(U=[L?.yScale(_?.y0),L?.yScale(_?.y1)]),["stack","fill"].includes(T)&&(U=[L?.yScale(_?.y1)])}else t.y0&&t.y1&&(U=[d(b),g(b)]);let H=c?.fill&&!["none","transparent"].includes(c?.fill??"")?c.fill:c?.fillScale&&t.fill&&c.fillScale(t.fill(b))||(p?.fillScale&&t?.fill?p.fillScale(t.fill(b)):(c?.stroke||c?.strokeScale&&t.stroke&&c.strokeScale(t.stroke(b))||p?.strokeScale?.(t?.stroke?.(b)))??V);return U?.map((_,e)=>{let k=T==="fill"||_<=p?.yScale.range()[0]&&_>=p?.yScale.range()[1];return typeof B(b)<"u"&&k&&ee.default.createElement("g",{key:`marker-${p?.groups?p.groups[S]:S}-${e.toString()}`,style:{pointerEvents:"none"}},ee.default.createElement("circle",{r:O*2+.5,fill:H,cy:_,fillOpacity:Math.min(.5,Math.max((c?.strokeOpacity||.9)-.35,0))}),ee.default.createElement("circle",{r:O,fill:H,stroke:h,strokeWidth:O/3.2,cy:_,fillOpacity:c?.strokeOpacity||.9,strokeOpacity:.7,"data-testid":"__gg_geom_area_marker_point"}))})}))):null};var Me=({x:n,y:i,y0:d,y1:g,aes:t,geomID:O,position:h})=>{let{ggState:x}=(0,j.useGG)()||{},{id:T,scales:Y,copiedScales:L,width:p,height:u,margin:A}=x||{height:0},[{datum:m,position:re,xAxis:M,xFormat:V,yFormat:s,content:c}]=(0,we.useAtom)(j.tooltipState),[{geoms:f,defaultStroke:B,defaultFill:b}]=(0,we.useAtom)(j.themeState),{area:S}=f||{},P=(0,N.useMemo)(()=>(0,ne.min)([m&&n(m[0]),p-(A?.right??0)]),[m,n,p]),q=(0,N.useMemo)(()=>m?.some(g)||m?.some(i),[m,i,g]),U=(0,N.useMemo)(()=>Y?.groups?m?.filter(D=>{let E=Y?.groupAccessor?.(D);return Y?.groups?.includes(E)&&E}):m,[m,f,Y]),H=(0,N.useMemo)(()=>S?.groupAccessor||(()=>"__group"),[S]),_=(0,N.useMemo)(()=>U&&(0,ne.mean)(U.map((se,D,E)=>{let J;if(h==="stack"){let ae=E.slice(0,D+1).map(t.y).reduce((C,w)=>C+w,0);J=Y?.yScale(ae)}else if(h==="fill"&&t?.y){let ae=E.slice(0,D+1).map(C=>t.y(C)/(0,ne.sum)(E,t.y)).reduce((C,w)=>C+w,0);J=Y?.yScale(ae)}else t.y0&&t.y1?J=(0,ne.mean)([d(se),g(se)]):J=i(se);return J}))||0,[U,i,d,g]),e=(0,ne.max)([0,(0,ne.min)([_,u])]),k=(0,N.useMemo)(()=>h==="stream"?(u-A.top-A.bottom)/2:e,[h,e]),oe=(0,N.useMemo)(()=>m&&m[0]&&t?.x&&t.x(m[0]),[m,t]),Se=L?.fillScale?.domain(),ke=(0,N.useMemo)(()=>U?.filter(D=>t?.y1&&typeof t.y1(D)<"u"&&t.y1(D)!==null||t?.y&&typeof t.y(D)<"u"&&t.y(D)!==null).sort((D,E)=>Se.indexOf(String(H(D)))-Se.indexOf(String(H(E)))).map(D=>{let E=Y?.groupAccessor?.(D),J=E==="__group",ae;t?.y&&(ae=s?s(t.y(D)):t.y(D)),t?.y1&&(ae=s?s(t.y1(D)):t.y1(D));let C=N.default.createElement("svg",{width:15,height:15},N.default.createElement("rect",{transform:"translate(1, 1)",width:12,height:12,fill:S?.fill||S?.fillScale&&S.fillScale(E)||(L?.fillScale?L.fillScale(E):b),stroke:S?.stroke||S?.strokeScale&&S.strokeScale(E)||(L?.strokeScale?L.strokeScale(E):void 0),strokeDasharray:S?.strokeDasharray||(L?.strokeDasharrayScale?L.strokeDasharrayScale(E):void 0),strokeWidth:.6,fillOpacity:S?.fillOpacity,strokeOpacity:S?.strokeOpacity}));return{group:J?void 0:E,mark:E&&!J?C:void 0,datum:m,x:oe,y:(t?.y1&&t?.y1(D))??(t?.y&&t.y(D)),formattedY:ae,formattedX:V?V(oe):String(oe)}}),[U,oe,t,s,V,L,f,B]),Ge=c?N.default.createElement("div",null,c(ke)):N.default.createElement(je,{data:ke,hasXAxisTooltip:!!M,geomID:O});return m?N.default.createElement(N.default.Fragment,null,M&&A&&P&&N.default.createElement(j.XTooltip,{id:T,left:P,top:-A.bottom,value:typeof M=="boolean"?N.default.createElement(j.TooltipContainer,null,V&&V(oe)):M(oe)}),P&&q&&N.default.createElement(j.YTooltip,{id:T,left:P,top:re===j.TooltipPosition.DATA?-(u-k):-u,value:Ge,wait:!0})):null};var Oe="GeomArea",Ze=({geomAes:n,shouldStack:i,position:d})=>{if(i&&!n?.y)throw new Error(`${Oe}: aes.y is required when using position="${d}"`);if(n?.y1&&!n?.y0)throw new Error(`${Oe}: aes.y1 can only be specified when combined with aes.y0`);if(n?.y0&&!n.y1&&!n.y)throw new Error(`${Oe}: aes.y0 needs to be specified with aes.y1 or aes.y`);if(!n?.y&&!(n?.y0&&n?.y1))throw new Error(`${Oe}: need to specify at least aes.y, or some combination of (aes.y, aes.y0) | (aes.y0, aes.y1)`)};var Ie=({data:n,aes:i,brushAction:d,curve:g=I.curveLinear,onDatumFocus:t,onDatumSelection:O,onExit:h,attr:x,showTooltip:T=!0,showLineMarker:Y=!0,markerRadius:L=3.5,markerStroke:p="#fff",position:u="identity",isAnimated:A=!0})=>{let{ggState:m}=(0,y.useGG)()||{},{id:re,data:M,aes:V,scales:s,copiedScales:c}=m||{},[f,B]=(0,ye.useAtom)(y.themeState),[{values:b,domain:S}]=(0,ye.useAtom)(y.fillScaleState),[{values:P,domain:q}]=(0,ye.useAtom)(y.strokeScaleState),[,U]=(0,ye.useAtom)(y.yScaleState),[{xDomain:H,yDomain:_}]=(0,ye.useAtom)(y.zoomState),e=(0,o.useMemo)(()=>i?{...V,...i}:V,[V,i]),k=n||M,oe=(0,o.useMemo)(()=>k?.filter(r=>{if(!H?.current)return!0;let a=e?.x?.(r);return a&&a>=H?.current?.[0]&&a<=H?.current?.[1]}),[k,H?.current,e.x]),Se=(0,o.useMemo)(()=>{let r=k?k.filter(a=>e?.x&&(e?.x(a)===null||typeof e?.x(a)>"u"||Number.isNaN(e.x(a)?.valueOf())||(0,y.isDate)(e.x(a))&&e.x(a)?.valueOf()===0)):[];return k&&r.length===k.length},[k,e]),ke=(0,o.useMemo)(()=>{let r=k?k.filter(a=>!e.y0&&!e.y1&&e?.y&&(e.y(a)===null||typeof e.y(a)>"u"||Number.isNaN(e.y(a)?.valueOf()))||e.y0&&(e.y0(a)===null||typeof e.y0(a)>"u"||Number.isNaN(e.y0(a)?.valueOf()))||e.y1&&(e.y1(a)===null||typeof e.y1(a)>"u"||Number.isNaN(e.y1(a)?.valueOf()))):[];return k&&r.length===k.length},[k]),{defaultFill:Ge,defaultStroke:se,animationDuration:D}=f,E=(0,o.useMemo)(()=>(0,y.generateID)(),[]),[J,ae]=(0,o.useState)(!0);(0,o.useEffect)(()=>{let r=setTimeout(()=>ae(!1),0);return()=>clearTimeout(r)},[]);let C=(0,o.useMemo)(()=>["stack","fill","stream"].includes(u),[u]),w=(0,o.useMemo)(()=>e?.group??e?.fill?e?.group??e?.fill:s?.groupAccessor??(()=>"__group"),[e]),F=(0,o.useMemo)(()=>{if(w)return Array.from(new Set(k?.map(w)))},[k,w]),tt=(0,o.useMemo)(()=>c?.fillScale?.domain(),[c]),rt=(0,o.useMemo)(()=>c?.strokeScale?.domain(),[c]),he=(0,o.useMemo)(()=>r=>e?.x&&s?.xScale&&s.xScale(e?.x(r)),[s,e]),Te=(0,o.useMemo)(()=>r=>e?.y&&s?.yScale&&s.yScale(e?.y(r)),[s,e]),ze=(0,o.useMemo)(()=>u==="fill"?I.stackOffsetExpand:u==="stream"?I.stackOffsetWiggle:I.stackOffsetDiverging,[u]),$e=(0,o.useMemo)(()=>I.stackOrderNone,[u]);Ze({geomAes:e,position:u,shouldStack:C});let le=(0,o.useMemo)(()=>{if(F&&e.fill)return(0,Ce.scaleOrdinal)().domain(S||tt||F).range(b||y.defaultScheme)},[e,b,S]),ue=(0,o.useMemo)(()=>{if(F&&e.stroke)return(0,Ce.scaleOrdinal)().domain(q||rt||F).range(P||y.defaultScheme)},[e,q]),Q=(0,o.useMemo)(()=>k&&e?.x&&e?.y&&w&&F?(0,I.stack)().keys([...S||F].reverse()).order($e).offset(ze)((0,y.widen)(k,e.x,w,e.y)).map(v=>{let z=v.key;return v.map(Z=>({group:z,x:Z.data.key,y0:Z[0],y1:Z[1]})).flat()}).flat().sort((v,z)=>v.x-z.x):null,[k,e,ze,$e]),We=(0,o.useMemo)(()=>u==="stream"&&!!Q,[Q,u]),Xe=(0,o.useCallback)(r=>{let a=[0,1],v=[0,1];if(!w&&!F&&!e.y0&&!e.y1&&(v=[0,a[1]]),!w&&!F&&(v=a),w&&F&&r&&e?.x){let z=F.map($=>(0,X.max)(r.filter(W=>w(W)===$),W=>(C?e.y||(()=>{}):e.y1||e.y||(()=>{}))(W))),Z=F.map($=>(0,X.min)(r.filter(W=>w(W)===$),W=>(e.y0||(()=>{}))(W)));if(["stack"].includes(u))return[0,(0,X.max)([(0,X.sum)(z),a[1]])];if(u==="fill")return[0,1];if(We){let $=H?.current?Q.filter(l=>l.x>=H?.current?.[0]&&l.x<=H?.current?.[1]):Q,W=(0,X.min)($,l=>l.y0),me=(0,X.max)($,l=>l.y1);return[W,me]}if(u==="identity"){let $=r?.map(ce=>{let Ne=e?.y?e.y(ce):void 0,at=e?.y0?e.y0(ce):void 0,it=e?.y1?e.y1(ce):void 0;return[Ne,at,it]}),W=$?(0,X.extent)($.flat()):[0,1],me=e?.y0&&e?.y1&&!e.y?(0,X.min)([Z].flat()):(0,X.min)([0,W[0]]),l=(0,X.max)([!e.y0&&!e.y1&&0,(0,X.max)([z,a[1]].flat())]);v=[me,l]}}return v},[u,e,C,F,We,Q,H?.current]),ge=(0,o.useMemo)(()=>_?.original&&!_?.current?_?.original:oe?Xe(oe):[0,1],[oe,_]);(0,o.useEffect)(()=>{U(r=>({...r,domain:ge}))},[ge]);let De=(0,o.useMemo)(()=>r=>e?.y0&&s?.yScale&&s.yScale(e.y0(r)),[s,e]),xe=(0,o.useMemo)(()=>r=>e?.y1&&s?.yScale&&s.yScale(e.y1(r)),[s,e]),Le=(0,o.useMemo)(()=>(0,I.area)().x(r=>s?.xScale(r.x)).y0(r=>s?.yScale?.(r.y0)).y1(r=>s?.yScale?.(r.y1)).defined(r=>{let a=r,v=(0,y.isDate)(a.x)?a.x.valueOf():a.x,z=typeof v<"u"&&typeof a.y0<"u"&&typeof a.y1<"u",Z=!Number.isNaN(v)&&!Number.isNaN(a.y0)&&!Number.isNaN(a.y1);return z&&Z}).curve(g),[g,s,e,i,ge]),Ee=(0,o.useMemo)(()=>(0,I.area)().x(r=>he(r)).y0(r=>i?.y0?De(r):s?.yScale(0)).y1(r=>i?.y1?xe(r):Te(r)).defined(r=>{let a=e.x&&((0,y.isDate)(e.x(r))?e.x(r)?.valueOf():e.x(r)),v=e.y0&&e.y1?e.y0(r):e.y&&e.y(r),z=e.y0&&e.y1?e.y1(r):e.y&&e.y(r),Z=typeof a<"u"&&typeof v<"u"&&v!==null&&typeof z<"u"&&z!==null,$=!Number.isNaN(a)&&!Number.isNaN(v)&&!Number.isNaN(z);return Z&&$}).curve(g||I.curveLinear),[g,e,i,s,ge]),G={...{fillOpacity:1,strokeOpacity:1,strokeWidth:0},...x},Ke=(0,o.useMemo)(()=>x?.style?.fillOpacity||x?.style?.opacity||x?.opacity||x?.fillOpacity,[x]);(0,o.useEffect)(()=>{B(r=>({...r,geoms:{...r.geoms,area:{position:u,fillOpacity:Ke,stroke:G.stroke,fill:G.fill,fillScale:le,strokeScale:ue,groupAccessor:w??e?.fill??e?.group,usableGroups:F,y0:De,y1:xe,strokeWidth:G?.style?.strokeWidth||G?.strokeWidth,strokeOpacity:G?.style?.strokeOpacity||G?.strokeOpacity,strokeDasharray:G?.style?.strokeDasharray||G?.strokeDasharray}}}))},[Ke,B,x,u,C,w,le,ue]);let ot=(0,o.useMemo)(()=>C?!!Q:!0,[Q,C]),nt=(0,o.useMemo)(()=>r=>Q?Q.filter(v=>v.group===r):[],[Q,s,e,u]);return!J&&!Se&&!ke&&ot?o.default.createElement(o.default.Fragment,null,k&&F&&w?F.map(r=>{let a=k.filter(l=>w(l)===r),v=nt(r),z=le&&e?.fill?Array.from(new Set(a.map(l=>e.fill&&e.fill(l)))):void 0,Z=G.fill||le&&le(r)||(c?.fillScale?c.fillScale(r):Ge);z&&le&&z.forEach(l=>{Z=le(l)});let $=ue&&e?.stroke?Array.from(new Set(a.map(l=>e.stroke&&e.stroke(l)))):void 0,W=G.stroke||ue&&ue(r)||(c?.strokeScale?c.strokeScale(r):se);$&&ue&&$.forEach(l=>{W=ue(l)});let me=G.strokeDasharray||(c?.strokeDasharrayScale?c.strokeDasharrayScale(r):void 0);return o.default.createElement(qe.Animate,{key:`${E}-${r}`,start:{path:C?Le(v):Ee(a),fill:"transparent",stroke:"transparent",strokeOpacity:0,fillOpacity:0},enter:()=>{let l=C?Le(v):Ee(a);return{path:A?[l]:l,fill:Z,stroke:W,fillOpacity:A?[G.fillOpacity]:G.fillOpacity,strokeOpacity:A?[G.strokeOpacity]:G.strokeOpacity,timing:{duration:D,ease:Ae.easeCubic}}},update:()=>{let l=C?Le(v):Ee(a);return{path:A?[l]:l,fill:Z,stroke:W,fillOpacity:A?[G.fillOpacity]:G.fillOpacity,strokeOpacity:A?[G.strokeOpacity]:G.strokeOpacity,timing:{duration:D,ease:Ae.easeCubic}}},leave:()=>({fill:A?["transparent"]:"transparent",stroke:A?["transparent"]:"transparent",timing:{duration:D,ease:Ae.easeCubic}}),interpolation:(l,ce,Ne)=>Ne==="path"?(0,Qe.interpolatePath)(l,ce):(0,Je.interpolate)(l,ce)},l=>o.default.createElement("path",{...x,d:l.path,fill:l.fill,fillOpacity:l.fillOpacity,stroke:l.stroke,strokeOpacity:l.strokeOpacity,strokeWidth:G.strokeWidth,strokeDasharray:me,style:{pointerEvents:"none",...G?.style},"data-testid":"__gg_geom_area",clipPath:`url(#__gg_canvas_${re})`}))}):o.default.createElement(o.default.Fragment,null),(T||d)&&o.default.createElement(o.default.Fragment,null,o.default.createElement(y.EventArea,{data:k,aes:e,group:"x",x:he,y:()=>0,onDatumFocus:t,onMouseLeave:()=>{h&&h()},onClick:O?({d:r,i:a})=>{O(r,a)}:void 0,showTooltip:T,brushAction:d,customYExtent:ge,getYValExtent:Xe}),T&&o.default.createElement(o.default.Fragment,null,Y&&o.default.createElement(ve,{x:he,y:Te,y0:De,y1:xe,aes:e,markerRadius:L,markerStroke:p,stackedData:Q,position:u}),o.default.createElement(Me,{x:he,y:Te,y0:De,y1:xe,aes:e,geomID:E,position:u})))):null};Ie.displayName="GeomArea";var _e=fe(require("react"),1),de=require("@graphique/graphique"),et=require("jotai");var K=fe(require("react"),1),te=require("@graphique/graphique"),Ye=require("jotai"),Re=({legendData:n,legendScales:i,orientation:d=te.LegendOrientation.V,labelFormat:g,fontSize:t=12,onSelection:O})=>{let[h,x]=(0,K.useState)(i.groups||i.fillScale?.domain()||[]),[{geoms:T,defaultFill:Y,legend:L}]=(0,Ye.useAtom)(te.themeState),[{domain:p}]=(0,Ye.useAtom)(te.fillScaleState),u=(0,K.useMemo)(()=>p||i.groups||i.fillScale?.domain(),[p,i]),{ggState:A,updateData:m}=(0,te.useGG)()||{},{scales:re,data:M}=A||{};(0,K.useEffect)(()=>{x(re?.groups||[])},[re,M]);let V=(0,K.useMemo)(()=>re.groupAccessor||void 0,[re]),s=d===te.LegendOrientation.H,c=f=>{let B=h,b;B.includes(f)?B.length===1?b=u:b=B.filter(P=>P!==f):b=[...B,f],x(b);let S=Array.from(new Set(M?.map(P=>V?V(P):void 0)));if(O&&O(f),M&&m&&V){let P;S.includes(f)?S.length===1?P=n:P=M.filter(q=>V(q)!==f):P=n.filter(q=>S.includes(V(q))||V(q)===f),m(P)}};return K.default.createElement("div",{style:{marginTop:8,display:"flex",flexDirection:s?"row":"column",flexWrap:"wrap",alignItems:s?"center":void 0}},T?.area&&u?.map((f,B,b)=>K.default.createElement("div",{key:f,style:{display:"flex",alignItems:"center",marginBottom:s?6:2}},K.default.createElement("div",{tabIndex:0,role:"button",style:{cursor:"pointer",marginRight:B<b.length-1&&s?12:2,fontSize:t,opacity:h.includes(f)?1:.5,transition:"opacity 200ms",display:"flex",alignItems:"center"},onKeyDown:S=>{["Enter"," "].includes(S.key)&&c(f)},onClick:()=>c(f)},K.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"}},K.default.createElement("svg",{width:14,height:14},K.default.createElement("rect",{width:14,height:14,fill:T?.area?.fill||(i.fillScale?i.fillScale(f):Y),stroke:T?.area?.stroke||(i.strokeScale?i.strokeScale(f):"none"),strokeWidth:1.8,fillOpacity:h.includes(f)?T?.area?.fillOpacity:.5,strokeOpacity:h.includes(f)?T?.area?.strokeOpacity:.5,style:{transition:"fill-opacity 200ms"}}))),K.default.createElement("div",{style:{marginLeft:4,fontSize:t,color:L?.labelColor??"currentcolor"}},g?g(f,B):(0,te.formatMissing)(f))))))};var Fe=({title:n,orientation:i=de.LegendOrientation.V,format:d,onSelection:g,style:t})=>{let{ggState:O}=(0,de.useGG)()||{},{copiedScales:h,copiedData:x,aes:T}=O||{},[{font:Y,geoms:L}]=(0,et.useAtom)(de.themeState),{area:p}=L||{},{groups:u}=h||{},A=p?.fillScale||T?.fill||T?.stroke||T?.strokeDasharray,{fontSize:m}={...t};return A?_e.default.createElement("div",{style:{marginTop:12,fontFamily:Y?.family,...t}},n,x&&(h||p?.fillScale)&&(u||p?.usableGroups)?_e.default.createElement(Re,{legendData:x,orientation:i,legendScales:{...h,strokeScale:p?p.strokeScale:h?.strokeScale,fillScale:p?p.fillScale:h?.fillScale},labelFormat:d,fontSize:m,onSelection:g}):null):null};0&&(module.exports={GeomArea,Legend,Position}); //# sourceMappingURL=index.cjs.map