gf-components 0.1.99 → 0.1.100

package/dist/index.cjs.js

@@ -556,7 +556,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,os1=(e,t,C=12)=>{const r=document.createElement("canvas").getContext("2d");r.font=`${C}px Roboto, sans-serif`;const i=e.split(" "),o=[];let a=i[0];for(let s=1;s<i.length;s++){const l=`${a} ${i[s]}`;r.measureText(l).width>t?(o.push(a),a=i[s]):a=l}return o.push(a),o},as1=({data:e=null,height:t=600,margin:C={},labelWidth:n=120,labelPadding:r=20,keys:i=null,indexBy:o=null,tooltip:a=null})=>{const s=({bar:d})=>{var V,E;const f=S.useRef(null),[v,g]=S.useState(0),h=d.data.data,m=(V=Q7==null?void 0:Q7[h==null?void 0:h[o]])==null?void 0:V.key,b=(E=Q7==null?void 0:Q7[h==null?void 0:h[o]])==null?void 0:E.name,x=`${m}. ${b}`,$=os1(x,n,Ua);S.useEffect(()=>{if(f.current){const _=f.current.getBoundingClientRect();g(_.height)}},[]);const w=n+r,M=d.y+d.height/2-v/2;return p.jsx("g",{ref:f,transform:`translate(-${w}, ${M})`,children:p.jsx("text",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignmentBaseline:"middle"},children:$.map((_,O)=>p.jsx(is1,{x:O==0?0:m<10?14:20,dy:O>0?rE:Ua,children:_},O))})})};let l=null;const c=({bars:d})=>d.map((f,v)=>{var g;if(name=(g=f==null?void 0:f.data)==null?void 0:g.id,!(name!==l&&l!==null))return l=name,p.jsx(s,{bar:f},`bar-label-${v}`)}),u=e.slice().reverse();return p.jsx("div",{style:{height:t},children:p.jsx(Iu,{data:u,colors:({id:d,data:f})=>String(f[`${d}Color`]),keys:i,indexBy:o,margin:{top:30,right:10,bottom:0,left:140,...C},layout:"horizontal",enableGridY:!1,enableGridX:!0,padding:.5,enableLabel:!1,axisTop:{tickSize:5},axisBottom:null,axisLeft:null,layers:["grid","axes","bars",c],tooltip:d=>p.jsx(f4,{body:(a==null?void 0:a(d))||p.jsx("span",{children:"Overview barchart tooltip"})})})})},ss1=({sankey:e={},bar:t={}})=>{const C=S.useRef(null),[n,r]=S.useState(null),i=()=>{C.current&&r(C.current.clientHeight)};return S.useEffect(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[]),p.jsxs(p.Fragment,{children:[p.jsxs(k9,{gutter:[24,0],children:[p.jsx(g3,{span:12,children:p.jsx(Di1,{ref:C,...e})}),p.jsx(g3,{span:12,children:p.jsx(as1,{...t,height:n})})]}),p.jsx(Q2,{justify:"center",style:{marginTop:16},children:p.jsx(Fi1,{})})]})},xm=({data:e,graph:t,stroke:C,strokeWidth:n,dashed:r})=>p.jsx("g",{children:p.jsx("line",{x1:t.xScale(e==null?void 0:e.x1),y1:t.yScale(e==null?void 0:e.y1),x2:t.xScale(e==null?void 0:e.x2),y2:t.yScale(e==null?void 0:e.y2),stroke:C||"red",strokeWidth:n||3,strokeDasharray:r?"10, 5":null})}),ls1=({data:e,color:t,graph:C})=>{const n=rS().x(r=>C.xScale(r==null?void 0:r.x)).y0(r=>C.yScale(r==null?void 0:r.y0)).y1(r=>C.yScale(r==null?void 0:r.y1)).curve(be);return p.jsx("path",{d:n(e),fill:t||"#3daff7",fillOpacity:.3})},cs1=E5.span`
   font: var(--gf-label-sm-default);
   color: var(--gf-color-text-primary);
-`,r2={domestic:"hsl(42, 89%, 49%)",raw:"hsl(331, 100%, 36%)",abiotic:"hsl(0, 0%, 49%)",goal:"hsl(182, 30%, 45%)"},Ti=e=>e.reduce((t,C)=>C<t?C:t,1/0),Ri=e=>e.reduce((t,C)=>C>t?C:t,-1/0),us1=({data:e,style:t={},height:C=600,margin:n={},xScale:r={},yScale:i={},axisBottom:o={},axisLeft:a={},tooltip:s=null})=>{const l=e.map(E=>E==null?void 0:E.points),c=e.map(E=>E==null?void 0:E.area),u=c.map(E=>E==null?void 0:E.id),d=E=>c.map((_,O)=>p.jsx(ls1,{data:_==null?void 0:_.data,color:r2==null?void 0:r2[_==null?void 0:_.id],graph:E},`area-${O}`)),f=e.map(E=>E==null?void 0:E.line),v=E=>f.map((_,O)=>p.jsx(xm,{data:_==null?void 0:_.data,stroke:r2==null?void 0:r2[_==null?void 0:_.id],graph:E},`line-${O}`)),g=e.map(E=>E==null?void 0:E.goal);g.length&&u.push("goal");const h=E=>g.map((_,O)=>p.jsx(xm,{data:_,graph:E,stroke:r2==null?void 0:r2.goal,dashed:!0},`goal-${O}`)),m=c.map(E=>E.data.map(_=>_.x)).flat(),b=Ti(m);Ri(m);const x=c.map(E=>E.data.map(_=>_.y0)).flat(),$=c.map(E=>E.data.map(_=>_.y1)).flat(),w=Math.min(Ti(x),Ti($)),M=Math.max(Ri(x),Ri($)),V=({data:E})=>{const _=({color:P})=>p.jsx("div",{style:{minWidth:8,minHeight:4,backgroundColor:P}}),O=({color:P})=>p.jsx("div",{style:{minWidth:8,minHeight:8,borderRadius:4,backgroundColor:P}}),R=(P,L=.3)=>P.replace("hsl","hsla").replace(")",`, ${L})`),I=["abiotic","goal"],T=E.filter(P=>!I.includes(P))[0],k=[{name:"Totaal",color:r2==null?void 0:r2[T],shape:"line"},{name:"Abiotisch",color:r2==null?void 0:r2.abiotic,shape:"line"},{name:"Doelstelling 2030",color:r2==null?void 0:r2.goal,shape:"line"},{name:"Betrouwbaarheidsmarge",color:R(r2==null?void 0:r2[T]),shape:"circle"},{name:"Betrouwbaarheidsmarge",color:R(r2==null?void 0:r2.abiotic),shape:"circle"}];return p.jsx(Q2,{gap:16,className:"gf-full",justify:"center",wrap:!0,children:k.map((P,L)=>p.jsxs(Q2,{gap:4,align:"center",children:[P.shape==="line"?p.jsx(_,{color:P.color}):p.jsx(O,{color:P.color}),p.jsx(cs1,{children:P.name})]},`legend-${L}`))})};return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsxs(Q2,{vertical:!0,gap:8,style:{width:"100%"},children:[p.jsx("div",{style:{width:"100%",height:C,...t},children:p.jsx(q$,{data:l,colors:E=>r2==null?void 0:r2[E==null?void 0:E.serieId],margin:{top:20,right:120,bottom:60,left:120,...n},xScale:{type:"linear",min:b,max:2030,...r},yScale:{type:"linear",min:w,max:M,...i},axisBottom:{orient:"bottom",tickSize:5,tickPadding:5,tickRotation:0,legendPosition:"middle",legendOffset:46,truncateTickAt:0,legend:"axisBottom",...o},axisLeft:{orient:"left",tickSize:5,tickPadding:5,tickRotation:0,legendPosition:"middle",legendOffset:-60,truncateTickAt:0,legend:"axisLeft",...a},layers:["grid","markers","axes","legends",d,v,h,"nodes"],tooltip:({node:E})=>p.jsx(f4,{body:(s==null?void 0:s({node:E}))||p.jsx("span",{children:"Tooltip"})})})}),p.jsx(V,{data:u})]})]})},Za=12,Au=14,wm=E5.tspan`
+`,r2={domestic:"hsl(42, 89%, 49%)",raw:"hsl(331, 100%, 36%)",abiotic:"hsl(0, 0%, 49%)",goal:"hsl(182, 30%, 45%)"},Ti=e=>e.reduce((t,C)=>C<t?C:t,1/0),Ri=e=>e.reduce((t,C)=>C>t?C:t,-1/0),us1=({data:e,style:t={},height:C=600,margin:n={},xScale:r={},yScale:i={},axisBottom:o={},axisLeft:a={},tooltip:s=null})=>{const l=e.map(E=>E==null?void 0:E.points),c=e.map(E=>E==null?void 0:E.area),u=c.map(E=>E==null?void 0:E.id),d=E=>c.map((_,O)=>p.jsx(ls1,{data:_==null?void 0:_.data,color:r2==null?void 0:r2[_==null?void 0:_.id],graph:E},`area-${O}`)),f=e.map(E=>E==null?void 0:E.line),v=E=>f.map((_,O)=>p.jsx(xm,{data:_==null?void 0:_.data,stroke:r2==null?void 0:r2[_==null?void 0:_.id],graph:E},`line-${O}`)),g=e.map(E=>E==null?void 0:E.goal);g.length&&u.push("goal");const h=E=>g.map((_,O)=>p.jsx(xm,{data:_,graph:E,stroke:r2==null?void 0:r2.goal,dashed:!0},`goal-${O}`)),m=c.map(E=>E.data.map(_=>_.x)).flat(),b=Ti(m);Ri(m);const x=c.map(E=>E.data.map(_=>_.y0)).flat(),$=c.map(E=>E.data.map(_=>_.y1)).flat(),w=Math.min(Ti(x),Ti($)),M=Math.max(Ri(x),Ri($)),V=({data:E})=>{const _=({color:P})=>p.jsx("div",{style:{minWidth:8,minHeight:4,backgroundColor:P}}),O=({color:P})=>p.jsx("div",{style:{minWidth:8,minHeight:8,borderRadius:4,backgroundColor:P}}),R=(P,L=.3)=>P.replace("hsl","hsla").replace(")",`, ${L})`),I=["abiotic","goal"],T=E.filter(P=>!I.includes(P))[0],k=[{name:"Totaal",color:r2==null?void 0:r2[T],shape:"line"},{name:"Abiotisch",color:r2==null?void 0:r2.abiotic,shape:"line"},{name:"Doelstelling 2030",color:r2==null?void 0:r2.goal,shape:"line"},{name:"Betrouwbaarheidsmarge",color:R(r2==null?void 0:r2[T]),shape:"circle"},{name:"Betrouwbaarheidsmarge",color:R(r2==null?void 0:r2.abiotic),shape:"circle"}];return p.jsx(Q2,{gap:16,className:"gf-full",justify:"center",wrap:!0,children:k.map((P,L)=>p.jsxs(Q2,{gap:4,align:"center",children:[P.shape==="line"?p.jsx(_,{color:P.color}):p.jsx(O,{color:P.color}),p.jsx(cs1,{children:P.name})]},`legend-${L}`))})};return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsxs(Q2,{vertical:!0,gap:8,style:{width:"100%"},children:[p.jsx("div",{style:{width:"100%",height:C,...t},children:p.jsx(q$,{data:l,colors:E=>r2==null?void 0:r2[E==null?void 0:E.serieId],margin:{top:20,right:120,bottom:60,left:120,...n},xScale:{type:"linear",min:b,max:2030,...r},yScale:{type:"linear",min:w<0?w:0,max:M,...i},axisBottom:{orient:"bottom",tickSize:5,tickPadding:5,tickRotation:0,legendPosition:"middle",legendOffset:46,truncateTickAt:0,legend:"axisBottom",...o},axisLeft:{orient:"left",tickSize:5,tickPadding:5,tickRotation:0,legendPosition:"middle",legendOffset:-60,truncateTickAt:0,legend:"axisLeft",...a},layers:["grid","markers","axes","legends",d,v,h,"nodes"],tooltip:({node:E})=>p.jsx(f4,{body:(s==null?void 0:s({node:E}))||p.jsx("span",{children:"Tooltip"})})})}),p.jsx(V,{data:u})]})]})},Za=12,Au=14,wm=E5.tspan`
   font: var(--gf-label-md-default);
   color: var(--gf-color-text-secondary);
   font-size: ${Za}px;