gf-components 0.1.102 → 0.1.104

package/dist/index.cjs.js

@@ -586,10 +586,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   color: var(--gf-color-text-secondary);
   font-size: ${J7}px;
   line-height: ${ts}px;
-`,cc1=(e,t=12)=>{const n=document.createElement("canvas").getContext("2d");return n.font=`${t}px Roboto, sans-serif`,n.measureText(e)},Hm=(e,t,C=12)=>{const n=e.split(" "),r=[];let i=n[0];for(let o=1;o<n.length;o++){const a=`${i} ${n[o]}`;cc1(a,C).width>t?(r.push(i),i=n[o]):i=a}return r.push(i),r},uc1=({data:e,height:t=1300,margin:C={},xLabelWidth:n=110,xLabelPadding:r=20,yLabelWidth:i=200,yLabelPadding:o=40,yNumeralWidth:a=30,yNumeralPadding:s=50,scalePadding:l=10,scaleTextPadding:c=5,tooltip:u=null})=>{const d=i+o+a+s+l+c,f=S.useRef(null),[v,g]=S.useState({width:0,height:0});S.useEffect(()=>{if(!(f!=null&&f.current))return;const I=()=>{const k=f.current.getBoundingClientRect();g({width:k.width,height:k.height})},V=new ResizeObserver(I);return V.observe(f==null?void 0:f.current),I(),()=>{V.disconnect()}},[]);const h=e.reduce((I,V)=>(I[V.id]=V.worth,I),{}),m=({cell:I,text:V,transX:k,transY:P,textAnchor:L="start",textStyle:H={}})=>{const A=S.useRef(null),[j,N]=S.useState(0);V=V||"label";const z=Hm(V,i,J7);return S.useEffect(()=>{if(A.current){const q=A.current.getBoundingClientRect();N(q.height)}},[]),P=P||I.y-j/2,p.jsx("g",{ref:A,transform:`translate(-${k}, ${P})`,children:p.jsx("text",{textAnchor:L,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignmentBaseline:"middle"},children:z.map((q,G)=>p.jsx(u9,{x:0,dy:G>0?ts:J7,style:H,children:q},G))})})},b=({cell:I,text:V,transX:k,transY:P,textAnchor:L="start",textStyle:H={},rotate:A=-90})=>{var G;const j=S.useRef(null),[N,z]=S.useState(0);V=V||((G=I==null?void 0:I.data)==null?void 0:G.x)||"label";const q=Hm(V,n,J7);return S.useEffect(()=>{if(j.current){const Y=j.current.getBoundingClientRect();z(Y.width)}},[]),k=k||I.x-N/2,P=P||-(r+l+c),p.jsx("g",{ref:j,transform:`translate(${k}, ${P}) rotate(${A})`,children:p.jsx("text",{textAnchor:L,style:{display:"flex",flexDirection:"column",justifyContent:"left",alignmentBaseline:"middle"},children:q.map((Y,e1)=>p.jsx(u9,{x:0,dy:e1>0?ts:J7,style:H,children:Y},e1))})})};let x=null;const $=({cells:I})=>I.map((V,k)=>{const P=V==null?void 0:V.serieId;if(P!==x)return x=P,p.jsx(m,{cell:V,text:V==null?void 0:V.serieId,transX:d},`cell-ylabel-${k}`)}),w=({cells:I})=>p.jsx(m,{text:"Goederengroep",transX:d,transY:-20,textStyle:{fontWeight:"bold"}}),M=({cells:I})=>I.map((V,k)=>{const P=V==null?void 0:V.serieId;if(P!==x)return x=P,p.jsx(m,{cell:V,text:h[P].toString(),transX:s,textAnchor:"end"},`cell-ynumeral-${k}`)}),T=({cells:I})=>p.jsx(m,{text:"Invoerwaarde in mln €",transX:s,transY:-20,textStyle:{fontWeight:"bold"},textAnchor:"end"});x=null;const E=({cells:I})=>I.map((V,k)=>{if((V==null?void 0:V.serieId)===x)return p.jsx(b,{cell:V},`cell-ylabel-${k}`)}),_=({cells:I})=>p.jsx(b,{text:"Kritische materialen",transX:(v.width-d)/2-n/2,transY:-(r+l+c+n),rotate:0,textStyle:{fontWeight:"bold"}}),O=()=>p.jsxs("g",{children:[p.jsxs("defs",{children:[p.jsx("marker",{id:"arrow-left",markerWidth:"5",markerHeight:"5",refX:"0",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M5,0 L0,2.5 L5,5 Z",fill:"black"})}),p.jsx("marker",{id:"arrow-right",markerWidth:"5",markerHeight:"5",refX:"5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M0,0 L5,2.5 L0,5 Z",fill:"black"})})]}),p.jsx("line",{x1:"0",y1:-l,x2:v.width-d,y2:-l,stroke:"black",strokeWidth:"1",markerStart:"url(#arrow-left)",markerEnd:"url(#arrow-right)"}),p.jsx("text",{transform:`translate(10, -${l+c})`,children:p.jsx(u9,{children:"Heel kritiek (40 “Zie toelichting”)"})}),p.jsx("text",{textAnchor:"end",transform:`translate(${v.width-d-10}, -${l+c})`,children:p.jsx(u9,{children:"Minder kritiek (0 “Zie toelichting”)"})})]}),R=()=>p.jsxs("g",{children:[p.jsxs("defs",{children:[p.jsx("marker",{id:"arrow-up",markerWidth:"5",markerHeight:"5",refX:"2.5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M5,0 L0,2.5 L5,5 Z",fill:"black"})}),p.jsx("marker",{id:"arrow-down",markerWidth:"5",markerHeight:"5",refX:"5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M0,0 L5,2.5 L0,5 Z",fill:"black"})})]}),p.jsx("line",{x1:-l,y1:"5",x2:-l,y2:v.height-(n+r+l+c)-80,stroke:"black",strokeWidth:"1",markerStart:"url(#arrow-up)",markerEnd:"url(#arrow-down)"}),p.jsx("text",{transform:`
+`,cc1=(e,t=12)=>{const n=document.createElement("canvas").getContext("2d");return n.font=`${t}px Roboto, sans-serif`,n.measureText(e)},Hm=(e,t,C=12)=>{const n=e.split(" "),r=[];let i=n[0];for(let o=1;o<n.length;o++){const a=`${i} ${n[o]}`;cc1(a,C).width>t?(r.push(i),i=n[o]):i=a}return r.push(i),r},uc1=({data:e,height:t=1300,margin:C={},xLabelWidth:n=120,xLabelPadding:r=20,yLabelWidth:i=200,yLabelPadding:o=40,yNumeralWidth:a=30,yNumeralPadding:s=50,scalePadding:l=10,scaleTextPadding:c=5,tooltip:u=null})=>{const d=i+o+a+s+l+c,f=S.useRef(null),[v,g]=S.useState({width:0,height:0});S.useEffect(()=>{if(!(f!=null&&f.current))return;const I=()=>{const k=f.current.getBoundingClientRect();g({width:k.width,height:k.height})},V=new ResizeObserver(I);return V.observe(f==null?void 0:f.current),I(),()=>{V.disconnect()}},[]);const h=e.reduce((I,V)=>(I[V.id]=V.worth,I),{}),m=({cell:I,text:V,transX:k,transY:P,textAnchor:L="start",textStyle:H={}})=>{const A=S.useRef(null),[j,N]=S.useState(0);V=V||"label";const z=Hm(V,i,J7);return S.useEffect(()=>{if(A.current){const q=A.current.getBoundingClientRect();N(q.height)}},[]),P=P||I.y-j/2,p.jsx("g",{ref:A,transform:`translate(-${k}, ${P})`,children:p.jsx("text",{textAnchor:L,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignmentBaseline:"middle"},children:z.map((q,G)=>p.jsx(u9,{x:0,dy:G>0?ts:J7,style:H,children:q},G))})})},b=({cell:I,text:V,transX:k,transY:P,textAnchor:L="start",textStyle:H={},rotate:A=-90})=>{var G;const j=S.useRef(null),[N,z]=S.useState(0);V=V||((G=I==null?void 0:I.data)==null?void 0:G.x)||"label";const q=Hm(V,n,J7);return S.useEffect(()=>{if(j.current){const Y=j.current.getBoundingClientRect();z(Y.width)}},[]),k=k||I.x-N/2,P=P||-(r+l+c),p.jsx("g",{ref:j,transform:`translate(${k}, ${P}) rotate(${A})`,children:p.jsx("text",{textAnchor:L,style:{display:"flex",flexDirection:"column",justifyContent:"left",alignmentBaseline:"middle"},children:q.map((Y,e1)=>p.jsx(u9,{x:0,dy:e1>0?ts:J7,style:H,children:Y},e1))})})};let x=null;const $=({cells:I})=>I.map((V,k)=>{const P=V==null?void 0:V.serieId;if(P!==x)return x=P,p.jsx(m,{cell:V,text:V==null?void 0:V.serieId,transX:d},`cell-ylabel-${k}`)}),w=({cells:I})=>p.jsx(m,{text:"Goederengroep",transX:d,transY:-20,textStyle:{fontWeight:"bold"}}),M=({cells:I})=>I.map((V,k)=>{const P=V==null?void 0:V.serieId;if(P!==x)return x=P,p.jsx(m,{cell:V,text:h[P].toString(),transX:s,textAnchor:"end"},`cell-ynumeral-${k}`)}),T=({cells:I})=>p.jsx(m,{text:"Invoerwaarde in mln €",transX:s,transY:-20,textStyle:{fontWeight:"bold"},textAnchor:"end"});x=null;const E=({cells:I})=>I.map((V,k)=>{if((V==null?void 0:V.serieId)===x)return p.jsx(b,{cell:V},`cell-ylabel-${k}`)}),_=({cells:I})=>p.jsx(b,{text:"Kritische grondstoffen",transX:(v.width-d)/2-n/2,transY:-(r+l+c+n),rotate:0,textStyle:{fontWeight:"bold"}}),O=()=>p.jsxs("g",{children:[p.jsxs("defs",{children:[p.jsx("marker",{id:"arrow-left",markerWidth:"5",markerHeight:"5",refX:"0",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M5,0 L0,2.5 L5,5 Z",fill:"black"})}),p.jsx("marker",{id:"arrow-right",markerWidth:"5",markerHeight:"5",refX:"5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M0,0 L5,2.5 L0,5 Z",fill:"black"})})]}),p.jsx("line",{x1:"0",y1:-l,x2:v.width-d,y2:-l,stroke:"black",strokeWidth:"1",markerStart:"url(#arrow-left)",markerEnd:"url(#arrow-right)"}),p.jsx("text",{transform:`translate(10, -${l+c})`,children:p.jsx(u9,{children:"Heel kritiek (40 “Zie toelichting”)"})}),p.jsx("text",{textAnchor:"end",transform:`translate(${v.width-d-10}, -${l+c})`,children:p.jsx(u9,{children:"Minder kritiek (0 “Zie toelichting”)"})})]}),R=()=>p.jsxs("g",{children:[p.jsxs("defs",{children:[p.jsx("marker",{id:"arrow-up",markerWidth:"5",markerHeight:"5",refX:"2.5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M5,0 L0,2.5 L5,5 Z",fill:"black"})}),p.jsx("marker",{id:"arrow-down",markerWidth:"5",markerHeight:"5",refX:"5",refY:"2.5",orient:"auto",children:p.jsx("path",{d:"M0,0 L5,2.5 L0,5 Z",fill:"black"})})]}),p.jsx("line",{x1:-l,y1:"5",x2:-l,y2:v.height-(n+r+l+c)-80,stroke:"black",strokeWidth:"1",markerStart:"url(#arrow-up)",markerEnd:"url(#arrow-down)"}),p.jsx("text",{transform:`
                     translate(-${l+c+J7}, 10) rotate(90)`,children:p.jsx(u9,{children:"Veel ingevoerd"})}),p.jsx("text",{textAnchor:"end",transform:`
                     translate(-${l+c+J7},
                                ${v.height-(n+r+l+c)-10-80})
                     rotate(90)
-                `,children:p.jsx(u9,{children:"Weinig ingevoerd"})})]});return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsx("div",{ref:f,style:{height:t},children:p.jsx(lc1,{data:e,margin:{top:n+r+l+c,right:0,bottom:80,left:d,...C},enableLabels:!1,colors:{type:"diverging",scheme:"oranges",minValue:0,maxValue:100,divergeAt:.5},emptyColor:"#FFFFFF",axisTop:null,axisLeft:null,layers:["legends","cells",$,w,M,T,E,_,O,R],tooltip:I=>p.jsx(f4,{body:(u==null?void 0:u(I))||p.jsx("span",{children:"Tooltip"})}),legends:[{anchor:"bottom",translateX:0,translateY:60,length:v.width-d-20,thickness:24,direction:"row",tickPosition:"after",tickSize:3,tickSpacing:4,tickOverlap:!1,title:"Kritieke grondstoffen per goederengroep (%)",titleAlign:"middle",titleOffset:10}]})})]})},dc1=({data:e,graph:t,stroke:C,strokeWidth:n,dashed:r})=>p.jsx("g",{children:p.jsx("line",{x1:0,y1:t.yScale(e==null?void 0:e.value),x2:t.innerWidth,y2:t.yScale(e==null?void 0:e.value),stroke:C||"red",strokeWidth:n||3,strokeDasharray:r?"10, 5":null})}),G7={goal:"hsl(182, 30%, 45%)",national:"hsl(35, 100%, 96%)",area:"hsl(205, 40%, 79%)"},km={font:"var(--gf-label-md-default)",color:"var(--gf-color-text-secondary)",fontSize:"12px",lineHeight:"14px"},fc1=({data:e,height:t=500,padding:C=.2,keys:n=["total"],indexBy:r="year",margin:i={},axisBottom:o={},axisLeft:a={},valueFormat:s=null,legendLabelWidth:l=145,legendShapeWidth:c=16,legendGap:u=8,legendPadding:d=8,tooltip:f=null})=>{const v=e==null?void 0:e.bar,g=e==null?void 0:e.goal,h=e==null?void 0:e.area,m=G7[g?"national":"area"],b=Math.max(...v.map(E=>n.filter(_=>_ in E).reduce((_,O)=>_+E[O],0)),(g==null?void 0:g.value)||0),x=E=>g&&p.jsx(dc1,{data:g,graph:E,stroke:G7==null?void 0:G7.goal}),$=()=>p.jsxs("div",{style:{display:"flex",gap:u,alignItems:"center",marginBottom:u},children:[p.jsx("div",{style:{backgroundColor:G7==null?void 0:G7.goal,minWidth:c,minHeight:4}}),p.jsx("span",{style:{...km,width:l},children:`Nationaal doel: ${g.value} ${g.unit}`})]}),w=()=>p.jsxs("div",{style:{display:"flex",gap:u,alignItems:"center"},children:[p.jsx("div",{style:{backgroundColor:m,minWidth:c,minHeight:c}}),p.jsx("span",{style:{...km,width:l},children:`Primair geproduceerd afval in ${h}`})]}),M=E=>{const _=S.useRef(null),[O,R]=S.useState({width:0,height:0});return S.useEffect(()=>{var I,V;_!=null&&_.current&&R({width:(I=_==null?void 0:_.current)==null?void 0:I.clientWidth,height:(V=_==null?void 0:_.current)==null?void 0:V.clientHeight})},[]),p.jsx("g",{children:p.jsx("foreignObject",{x:E.innerWidth+d,y:E.innerHeight-O.height,width:O.width,height:O.height,children:p.jsxs("div",{ref:_,style:{display:"inline-block"},children:[g&&p.jsx($,{}),p.jsx(w,{})]})})})},T=d+c+u+l;return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsx("div",{style:{width:"100%",height:t},children:p.jsx(Iu,{data:v,keys:n,indexBy:r,colors:m,margin:{left:50,bottom:50,right:T,...i},padding:C,valueFormat:E=>(s==null?void 0:s(E))||E,minValue:0,maxValue:b,axisBottom:{tickSize:5,legendPosition:"middle",legendOffset:40,...o},axisLeft:{tickSize:5,legendPosition:"middle",legendOffset:-40,...a},layers:["grid","axes","bars",x,M],tooltip:E=>p.jsx(f4,{body:(f==null?void 0:f(E))||p.jsx("span",{children:"Tooltip"})})})})]})};exports.AddressLink=WD;exports.BarChart=hs1;exports.BenchmarkSankey=Si1;exports.ButtonControls=SD;exports.CustomToolTip=f4;exports.Description=GD;exports.DomRawChart=us1;exports.DownloadButton=tx;exports.EmailLink=BD;exports.ExpandButton=Cx;exports.GFButton=Js;exports.GFCard=K9;exports.GFMetricsGrid=YD;exports.GoalChart=fc1;exports.Link=WC;exports.LocationIcon=cx;exports.MailIcon=lx;exports.MaterialHeatmap=uc1;exports.Metrics=ax;exports.NavCard=_D;exports.PhoneIcon=sx;exports.PhoneLink=UD;exports.PieChart=c61;exports.QuickNavCard=LD;exports.Sankey=_91;exports.ScatterPlot=oC1;exports.TabCard=PD;exports.Title=ox;exports.TreeMap=Xr1;exports.Trends=bi1;exports.VisSelectors=xi1;exports.WasteOverview=ss1;
+                `,children:p.jsx(u9,{children:"Weinig ingevoerd"})})]});return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsx("div",{ref:f,style:{height:t},children:p.jsx(lc1,{data:e,margin:{top:n+r+l+c,right:0,bottom:80,left:d,...C},enableLabels:!1,colors:{type:"diverging",scheme:"oranges",minValue:0,maxValue:100,divergeAt:.5},emptyColor:"#FFFFFF",axisTop:null,axisLeft:null,layers:["legends","cells",$,w,M,T,E,_,O,R],tooltip:I=>p.jsx(f4,{body:(u==null?void 0:u(I))||p.jsx("span",{children:"Tooltip"})}),legends:[{anchor:"bottom",translateX:0,translateY:60,length:v.width-d-20,thickness:24,direction:"row",tickPosition:"after",tickSize:3,tickSpacing:4,tickOverlap:!1,title:"Kritieke grondstoffen per goederengroep (%)",titleAlign:"middle",titleOffset:10}]})})]})},dc1=({data:e,graph:t,stroke:C,strokeWidth:n,dashed:r})=>p.jsx("g",{children:p.jsx("line",{x1:0,y1:t.yScale(e==null?void 0:e.value),x2:t.innerWidth,y2:t.yScale(e==null?void 0:e.value),stroke:C||"red",strokeWidth:n||3,strokeDasharray:r?"10, 5":null})}),G7={goal:"hsl(182, 30%, 45%)",national:"hsl(35, 100%, 96%)",area:"hsl(205, 40%, 79%)"},km={font:"var(--gf-label-md-default)",color:"var(--gf-color-text-secondary)",fontSize:"12px",lineHeight:"14px"},fc1=({data:e,height:t=500,padding:C=.2,keys:n=["total"],indexBy:r="year",margin:i={},axisBottom:o={},axisLeft:a={},valueFormat:s=null,legendLabelWidth:l=145,legendShapeWidth:c=16,legendGap:u=8,legendPadding:d=8,tooltip:f=null})=>{const v=e==null?void 0:e.bar,g=e==null?void 0:e.goal,h=e==null?void 0:e.area,m=G7[g?"national":"area"],b=Math.max(...v.map(E=>n.filter(_=>_ in E).reduce((_,O)=>_+E[O],0)),(g==null?void 0:g.value)||0),x=E=>g&&p.jsx(dc1,{data:g,graph:E,stroke:G7==null?void 0:G7.goal}),$=()=>p.jsxs("div",{style:{display:"flex",gap:u,alignItems:"center",marginBottom:u},children:[p.jsx("div",{style:{backgroundColor:G7==null?void 0:G7.goal,minWidth:c,minHeight:4}}),p.jsx("span",{style:{...km,width:l},children:`Nationaal doel: ${g.value} ${g.unit}`})]}),w=()=>p.jsxs("div",{style:{display:"flex",gap:u,alignItems:"center"},children:[p.jsx("div",{style:{backgroundColor:m,minWidth:c,minHeight:c}}),p.jsx("span",{style:{...km,width:l},children:`Primair geproduceerd afval in ${h}`})]}),M=E=>{const _=S.useRef(null),[O,R]=S.useState({width:0,height:0});return S.useEffect(()=>{var I,V;_!=null&&_.current&&R({width:(I=_==null?void 0:_.current)==null?void 0:I.clientWidth,height:(V=_==null?void 0:_.current)==null?void 0:V.clientHeight})},[]),p.jsx("g",{children:p.jsx("foreignObject",{x:E.innerWidth+d,y:E.innerHeight-O.height,width:O.width,height:O.height,children:p.jsxs("div",{ref:_,style:{display:"inline-block"},children:[g&&p.jsx($,{}),p.jsx(w,{})]})})})},T=d+c+u+l;return p.jsxs(p.Fragment,{children:[p.jsx(S2,{}),p.jsx("div",{style:{width:"100%",height:t},children:p.jsx(Iu,{data:v,keys:n,indexBy:r,colors:m,margin:{left:50,bottom:50,top:10,right:T,...i},padding:C,valueFormat:E=>(s==null?void 0:s(E))||E,minValue:0,maxValue:b,axisBottom:{tickSize:5,legendPosition:"middle",legendOffset:40,...o},axisLeft:{tickSize:5,legendPosition:"middle",legendOffset:-40,...a},layers:["grid","axes","bars",x,M],tooltip:E=>p.jsx(f4,{body:(f==null?void 0:f(E))||p.jsx("span",{children:"Tooltip"})})})})]})};exports.AddressLink=WD;exports.BarChart=hs1;exports.BenchmarkSankey=Si1;exports.ButtonControls=SD;exports.CustomToolTip=f4;exports.Description=GD;exports.DomRawChart=us1;exports.DownloadButton=tx;exports.EmailLink=BD;exports.ExpandButton=Cx;exports.GFButton=Js;exports.GFCard=K9;exports.GFMetricsGrid=YD;exports.GoalChart=fc1;exports.Link=WC;exports.LocationIcon=cx;exports.MailIcon=lx;exports.MaterialHeatmap=uc1;exports.Metrics=ax;exports.NavCard=_D;exports.PhoneIcon=sx;exports.PhoneLink=UD;exports.PieChart=c61;exports.QuickNavCard=LD;exports.Sankey=_91;exports.ScatterPlot=oC1;exports.TabCard=PD;exports.Title=ox;exports.TreeMap=Xr1;exports.Trends=bi1;exports.VisSelectors=xi1;exports.WasteOverview=ss1;
 //# sourceMappingURL=index.cjs.js.map