gf-components 0.1.138 → 0.1.139

package/dist/index.cjs.js

@@ -600,7 +600,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   color: var(--gf-color-text-secondary);
   font-size: 10px;
   line-height: ${Gh}px;
-`,C7e=(e,t=12)=>{const r=document.createElement("canvas").getContext("2d");return r.font=`${t}px Roboto, sans-serif`,r.measureText(e)},x7e=(e,t,n=12)=>{const r=e.split(" "),i=[];let o=r[0];for(let a=1;a<r.length;a++){const s=`${o} ${r[a]}`;C7e(s,n).width>t?(i.push(o),o=r[a]):o=s}return i.push(o),i},rc={crm:{color:"hsl(36, 100%, 50%)",name:"Kritikaliteit index",legend:"Kritikaliteit index"},value:{color:"hsl(197, 100%, 19%)",name:"Aantal kritieke grondstoffen",legend:"Aantal"}},w7e=({data:e=[],height:t=1300,margin:n={},padding:r=.3,innerPadding:i=3,keys:o=Object.keys(rc),indexBy:a="material",tooltip:s=null,enableLabel:l=!1,label:c=null,keyLabelWidth:u=200,keyLabelPadding:d=20,graphGap:f=40,axisBottom:h={},layers:m=["grid","axes","bars","markers"],defs:g=[],fill:v=[],leftSpan:b=14,rightSpan:y=10})=>{const x=({bar:R})=>{var U;const j=S.useRef(null),[L,T]=S.useState(0),I=((U=R==null?void 0:R.data)==null?void 0:U.indexValue)||"label",P=x7e(I,u,a5);S.useEffect(()=>{if(j.current){const q=j.current.getBoundingClientRect();T(q.height)}},[]);const N=d,z=R.y+R.height/2-L/2;return p.jsx("g",{ref:j,transform:`translate(-${N}, ${z})`,children:p.jsx("text",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignmentBaseline:"middle"},children:P.map((q,Y)=>p.jsx(b7e,{x:0,dy:Y>0?Gh:a5,textAnchor:"end",children:q},Y))})})};let $=null;const w=({bars:R})=>R.map((j,L)=>{var T;if(name=(T=j==null?void 0:j.data)==null?void 0:T.id,!(name!==$&&$!==null))return $=name,p.jsx(x,{bar:j},`bar-label-${L}`)}),M=({bar:R})=>{var N;const j=((N=R==null?void 0:R.data)==null?void 0:N.id)===o[0],L=j?0:-f/2,T=k*(j?b:y)/24,I=j?T-u-f/2:T-f/2,P=(R==null?void 0:R.y)+(R==null?void 0:R.height)/2;return p.jsx("g",{children:p.jsx("line",{x1:L,y1:P,x2:I,y2:P,stroke:"#e1e1e1",strokeWidth:"1"})})},V=({bars:R})=>R.map((j,L)=>p.jsx(M,{bar:j},`bar-grid-${L}`)),E=({data:R,keys:j})=>{g.reduce((T,I)=>(T[I.id]={...I},delete T[I.id].id,T),{}),v.reduce((T,I)=>(I.match&&I.match.id&&(T[I.match.id]=I.id),T),{});const L=j==null?void 0:j.map(T=>{var I,P;return{name:(I=rc[T])==null?void 0:I.name,color:(P=rc[T])==null?void 0:P.color,defs:g}});return p.jsx(mn,{gap:16,className:"gf-full",justify:"center",wrap:!0,children:L.map((T,I)=>p.jsxs(mn,{gap:8,align:"center",children:[p.jsx("div",{style:{minWidth:8,minHeight:8,backgroundColor:T.color}}),p.jsx(y7e,{children:T.name})]},`legend-${I}`))})},_=({value:R,labels:j})=>{var L;return p.jsx("div",{style:{height:t},children:p.jsx(H1,{data:H,colors:({id:T,data:I})=>{var P;return(P=rc[T])==null?void 0:P.color},defs:g,fill:v,keys:[R],indexBy:a,groupMode:"grouped",margin:{right:f/2,bottom:50,left:j?u+d:f/2,...n},layout:"horizontal",enableGridY:!1,enableGridX:!0,padding:r,innerPadding:i,enableLabel:!1,axisBottom:{tickSize:5,legendPosition:"middle",legendOffset:40,legend:(L=rc[R])==null?void 0:L.legend},axisLeft:null,layers:[V,...m,...j?[w]:[]],tooltip:T=>p.jsx(er,{body:(s==null?void 0:s(T))||p.jsx("span",{children:"Tooltip"})}),markers:[{axis:"x",value:0,lineStyle:{stroke:"#000000",strokeWidth:1}}]})})},O=S.useRef(null),[k,A]=S.useState(0);S.useEffect(()=>{const R=new ResizeObserver(j=>{for(let L of j)A(L.contentRect.width)});return O.current&&R.observe(O.current),()=>R.disconnect()},[]);const H=e.slice().reverse();return p.jsxs(p.Fragment,{children:[p.jsx(yn,{}),p.jsxs(mn,{vertical:!0,gap:8,style:{width:"100%"},ref:O,children:[p.jsx(E,{data:e,keys:o}),p.jsxs(ya,{gutter:[0,0],children:[p.jsx(Ar,{span:b,children:p.jsx(_,{value:o[0],labels:!0})}),p.jsx(Ar,{span:y,children:p.jsx(_,{value:o[1]})})]})]})]})},S7e=12,L_=14,$7e=Ct.tspan`
+`,C7e=(e,t=12)=>{const r=document.createElement("canvas").getContext("2d");return r.font=`${t}px Roboto, sans-serif`,r.measureText(e)},x7e=(e,t,n=12)=>{const r=e.split(" "),i=[];let o=r[0];for(let a=1;a<r.length;a++){const s=`${o} ${r[a]}`;C7e(s,n).width>t?(i.push(o),o=r[a]):o=s}return i.push(o),i},rc={crm:{color:"hsl(36, 100%, 50%)",name:"Kritikaliteit index",legend:"Kritikaliteit index"},value:{color:"hsl(197, 100%, 19%)",name:"Aantal kritieke grondstoffen",legend:"Aantal kritieke grondstoffen"}},w7e=({data:e=[],height:t=1300,margin:n={},padding:r=.3,innerPadding:i=3,keys:o=Object.keys(rc),indexBy:a="material",tooltip:s=null,enableLabel:l=!1,label:c=null,keyLabelWidth:u=200,keyLabelPadding:d=20,graphGap:f=40,axisBottom:h={},layers:m=["grid","axes","bars","markers"],defs:g=[],fill:v=[],leftSpan:b=14,rightSpan:y=10})=>{const x=({bar:R})=>{var U;const j=S.useRef(null),[L,T]=S.useState(0),I=((U=R==null?void 0:R.data)==null?void 0:U.indexValue)||"label",P=x7e(I,u,a5);S.useEffect(()=>{if(j.current){const q=j.current.getBoundingClientRect();T(q.height)}},[]);const N=d,z=R.y+R.height/2-L/2;return p.jsx("g",{ref:j,transform:`translate(-${N}, ${z})`,children:p.jsx("text",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignmentBaseline:"middle"},children:P.map((q,Y)=>p.jsx(b7e,{x:0,dy:Y>0?Gh:a5,textAnchor:"end",children:q},Y))})})};let $=null;const w=({bars:R})=>R.map((j,L)=>{var T;if(name=(T=j==null?void 0:j.data)==null?void 0:T.id,!(name!==$&&$!==null))return $=name,p.jsx(x,{bar:j},`bar-label-${L}`)}),M=({bar:R})=>{var N;const j=((N=R==null?void 0:R.data)==null?void 0:N.id)===o[0],L=j?0:-f/2,T=k*(j?b:y)/24,I=j?T-u-f/2:T-f/2,P=(R==null?void 0:R.y)+(R==null?void 0:R.height)/2;return p.jsx("g",{children:p.jsx("line",{x1:L,y1:P,x2:I,y2:P,stroke:"#e1e1e1",strokeWidth:"1"})})},V=({bars:R})=>R.map((j,L)=>p.jsx(M,{bar:j},`bar-grid-${L}`)),E=({data:R,keys:j})=>{g.reduce((T,I)=>(T[I.id]={...I},delete T[I.id].id,T),{}),v.reduce((T,I)=>(I.match&&I.match.id&&(T[I.match.id]=I.id),T),{});const L=j==null?void 0:j.map(T=>{var I,P;return{name:(I=rc[T])==null?void 0:I.name,color:(P=rc[T])==null?void 0:P.color,defs:g}});return p.jsx(mn,{gap:16,className:"gf-full",justify:"center",wrap:!0,children:L.map((T,I)=>p.jsxs(mn,{gap:8,align:"center",children:[p.jsx("div",{style:{minWidth:8,minHeight:8,backgroundColor:T.color}}),p.jsx(y7e,{children:T.name})]},`legend-${I}`))})},_=({value:R,labels:j})=>{var L;return p.jsx("div",{style:{height:t},children:p.jsx(H1,{data:H,colors:({id:T,data:I})=>{var P;return(P=rc[T])==null?void 0:P.color},defs:g,fill:v,keys:[R],indexBy:a,groupMode:"grouped",margin:{right:f/2,bottom:50,left:j?u+d:f/2,...n},layout:"horizontal",enableGridY:!1,enableGridX:!0,padding:r,innerPadding:i,enableLabel:!1,axisBottom:{tickSize:5,legendPosition:"middle",legendOffset:40,legend:(L=rc[R])==null?void 0:L.legend},axisLeft:null,layers:[V,...m,...j?[w]:[]],tooltip:T=>p.jsx(er,{body:(s==null?void 0:s(T))||p.jsx("span",{children:"Tooltip"})}),markers:[{axis:"x",value:0,lineStyle:{stroke:"#000000",strokeWidth:1}}]})})},O=S.useRef(null),[k,A]=S.useState(0);S.useEffect(()=>{const R=new ResizeObserver(j=>{for(let L of j)A(L.contentRect.width)});return O.current&&R.observe(O.current),()=>R.disconnect()},[]);const H=e.slice().reverse();return p.jsxs(p.Fragment,{children:[p.jsx(yn,{}),p.jsxs(mn,{vertical:!0,gap:8,style:{width:"100%"},ref:O,children:[p.jsx(E,{data:e,keys:o}),p.jsxs(ya,{gutter:[0,0],children:[p.jsx(Ar,{span:b,children:p.jsx(_,{value:o[0],labels:!0})}),p.jsx(Ar,{span:y,children:p.jsx(_,{value:o[1]})})]})]})]})},S7e=12,L_=14,$7e=Ct.tspan`
   font: var(--gf-label-md-default);
   color: var(--gf-color-text-secondary);
   font-size: ${S7e}px;