@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
2 lines (1 loc) • 14.7 kB
JavaScript
"use strict";const a=require("react/jsx-runtime"),L=require("react"),$t=require("./Tooltip.js"),Et=require("@nivo/bar"),St=require("@nivo/theming"),Vt=require("react-intl"),Ee=require("d3-shape"),Se=require("./LineLayer.js"),Ve=require("papaparse"),Wt=require("../../layout/FlexWrapDetector.js"),xe=require("../../utils/deviceType.js"),Ht="middle",Tt="top",U="#66676d",We="#dddddd",_t="none",C="_Color",At=({editing:f,legends:R,marginLeft:He,marginTop:fe,marginRight:Te,marginBottom:ye,options:m,intl:b,format:p,colors:$,groupMode:D,height:_e,showLegends:Q,legendPosition:k,tickRotation:O,offsetText:G,tickColor:ee,layout:x,reverse:E,offsetY:Ae,csvLineLayerData:pe,tooltip:te,lineLayerEnabled:be,overlays:q,maxValue:W,valueScale:Re,colorGenerator:g,legendLabel:ge,overrideTickColor:qe,fixedMinValue:ae,fixedMaxValue:H,barPadding:Pe,barLabelPosition:je,barInnerPadding:Ye,tooltipEnabled:Xe,xLabelColor:w,barLabelColor:P,legendCheckBack:j,legendLabelBack:ne,legendLabelColor:se,highlightXAxisLine:Ke,showTickLine:T,showRightAxis:Ze,offsetRight:Je,offsetBottom:ve,confidenceIntervals:re,showGroupTotal:Ue,groupTotalLabel:Ne,groupTotalFormat:Ie,groupTotalMeasure:Le,groupTotalOffset:M,groupTotalFixedPosition:Y,tooltipEnableMarkdown:Ce,xAxisTickValues:Qe,yAxisTickValues:Ge,mobileCustomization:et,minMaxClamp:tt,reverseLegend:at,enableGridY:nt,enableGridX:st,customAxisFormat:F,previewMode:B})=>{var $e;const rt=["mobile","tablet","midTablet"].includes(xe()),X=["tablet","midTablet"].includes(xe()),K=xe()==="mobile",le=30,ie=15,h=JSON.parse(decodeURIComponent(et)),ke=rt&&((h==null?void 0:h.showCustomization)??!1),S=ke&&B!=="Desktop",V=!f&&ke,ce=()=>P==="null"||P===null||!P?"#000000":P,[v,lt]=L.useState([]),{colorBy:_}=$,we={};q.forEach((e,t)=>{we[t]=!0});const[N,it]=L.useState(we),[Fe,ct]=L.useState(50),[dt,ht]=L.useState(fe),[qt,De]=L.useState(0),[ut,mt]=L.useState(ye),A=((e,t,l,r,i)=>{let c=[];return e.data&&(c=t.colorBy==="index"?e.data.map(s=>{let n,u=!0;return l.indexOf(s[e.indexBy])>-1?(u=!1,n=r):n=s[C]?s[C]:i.getColor(s.id,s),{enabled:u,color:n,id:s[e.indexBy],label:s[e.indexBy]}}):e.keys.map(s=>{let n,u=!0;return l.indexOf(s)>-1?(u=!1,n=r):n=i.getColorByKey(s),{enabled:u,color:n,id:s,label:s}})),c})(m,$,v,_t,g),Oe=()=>(at&&A.reverse(),a.jsxs(a.Fragment,{children:[Q&&A.map(e=>a.jsxs("div",{className:`legend item ${e.enabled?"":"ignore"}`,onClick:()=>Nt(e.id),children:[j&&a.jsx("input",{className:e.enabled?"":"ignore",type:"checkbox",checked:e.enabled,style:{backgroundColor:j?_==="values"?ee:e.color:"none",color:"#000"}}),!j&&a.jsx("input",{type:"checkbox",checked:e.enabled,style:{color:"#000"}}),j&&a.jsx("span",{className:"checkmark-with-bg",style:{backgroundColor:e.color}}),!j&&a.jsx("span",{className:"checkmark"}),ne&&a.jsx("label",{className:e.enabled?"":"ignore",style:{backgroundColor:_==="values"?ee:e.color,color:se},children:e.label}),!ne&&a.jsx("label",{className:e.enabled?"":"ignore",style:{color:se},children:e.label})]})),_==="values"&&a.jsxs("div",{className:"legend item",children:[a.jsx("label",{className:"range min",style:{backgroundColor:g.getColorByValue(g.minValue),color:"#fff"}}),a.jsx("label",{children:b.formatNumber(p.style==="percent"?g.minValue/100:g.minValue,{...p,minimumFractionDigits:0})})]}),_==="values"&&a.jsxs("div",{className:"legend item",children:[a.jsx("label",{className:"range max",style:{backgroundColor:g.getColorByValue(g.maxValue),color:"#fff"},children:" "}),a.jsx("label",{children:b.formatNumber(p.style==="percent"?g.maxValue/100:g.maxValue,{...p,minimumFractionDigits:0})})]}),Q&&be&&q.map((e,t)=>a.jsxs("div",{className:"legend item",onClick:()=>It(t),children:[a.jsx("input",{className:j&&N[t]?"":"ignore",type:"checkbox",checked:N[t],style:{backgroundColor:N[t]&&j===!0?e.lineColor:"none",color:"#000"}}),a.jsx("span",{className:j?"checkmark-with-bg":"checkmark",style:{backgroundColor:N[t]&&j===!0?e.lineColor:"none"}}),a.jsx("label",{className:N[t]?"":"ignore",style:{backgroundColor:N[t]&&ne===!0?e.lineColor:"none",color:se},children:e.title})]}))]}));L.useEffect(()=>{(()=>{const l=5*Math.max(A.length-5,0);ct(l)})()},[A]);const ot={bottom:`-${Fe}px`},xt={bottom:`-${Fe}px`,gap:"0px"},ft=e=>de(e,"1 0",We,"Y"),yt=e=>de(e,"4 4",U,"X"),pt=e=>de(e,"1 0",We,"X"),bt=e=>{const t=A.find(l=>l.id===e.value);return t?t.color:"#FFFFFF"},gt=e=>{const{yScale:t,bars:l}=e;return a.jsx(L.Fragment,{children:l.filter(r=>r.data.value!=null).map(r=>{let i=r.data.indexValue;m.dimensionsMetadata&&m.dimensionsMetadata.size>1&&(i=r.data.id);const c=re.filter(s=>s.serieLabel==i)[0];if(c&&c.low&&c.high){const s=t(parseFloat(c.low)),n=t(parseFloat(c.high));return a.jsxs("g",{children:[a.jsx("line",{y1:s,y2:n,x1:r.x+r.width/2,x2:r.x+r.width/2,strokeWidth:1,stroke:U}),a.jsx("line",{y1:s,y2:s,x1:r.x+r.width/2-3,x2:r.x+r.width/2+3,strokeWidth:1,stroke:U}),a.jsx("line",{y1:n,y2:n,x1:r.x+r.width/2-3,x2:r.x+r.width/2+3,strokeWidth:1,stroke:U})]})}})})},de=(e,t,l,r)=>{const{yScale:i,innerWidth:c,innerHeight:s}=e;let n,u;return r=="X"?(n=[0,c],u=Ee.line().x((o,z)=>z===0?-10:o).y(()=>i(0))):(n=[0,s],u=Ee.line().x(()=>0).y(o=>o)),a.jsx(L.Fragment,{children:a.jsx("path",{d:u(n),fill:"none",stroke:l,style:{pointerEvents:"none",strokeDasharray:t}})})},Z=(e,t)=>v?($.colorBy==="index"||$.colorBy==="id"||$.colorBy==="values")&&!t?e.filter(l=>v.indexOf(l[m.indexBy])===-1):e?e.filter(l=>v.indexOf(l)===-1):[]:e,jt=e=>{const t=St.useTheme();if(!e.value)return"";const l=Object.assign({},e);(V||S)&&oe.includes(String(l.value))&&(l.value="");let r;qe?r=ee:r=bt(e);let i=[],c="";if(S||V){const n=String(l.value).split(" ");let u=25;f&&B==="Mobile"||K&&!f?u=(h==null?void 0:h.mobileMaxTickLength)??25:f&&B==="Tablet"||X&&!f?u=(h==null?void 0:h.tabletMaxTickLength)??25:window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches&&!f&&(u=15),n.forEach(o=>{c.length+String(o).length<=u?c+=(c?" ":"")+o:(i.push(c),c=o)}),c&&i.push(c)}else i=[l.value];let s=12;return K?s=(h==null?void 0:h.mobileYAxisLineHeight)??12:X&&(s=(h==null?void 0:h.tabletYAxisLineHeight)??12),O>0&&O<180?a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[T&&a.jsx("line",{stroke:r,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+G})`,children:i.map((n,u)=>a.jsx("text",{transform:`rotate(${O})`,textAnchor:"start",y:typeof e.value=="number"?0:u*s,dominantBaseline:"middle",style:{...t.axis.ticks.text,fill:w==="null"?"black":w,fontSize:"12px",fontFamily:"Roboto"},children:n},n))})]}):O>180&&O<360?a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[T&&a.jsx("line",{stroke:r,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+G})`,children:i.map((n,u)=>a.jsx("text",{transform:`rotate(${O})`,textAnchor:"end",y:typeof e.value=="number"?0:u*s,dominantBaseline:"middle",style:{...t.axis.ticks.text,fill:w==="null"?"black":w,fontSize:"12px",fontFamily:"Roboto"},children:n},u))})]}):a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[T&&a.jsx("line",{stroke:r,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+G})`,children:i.map((n,u)=>a.jsx("text",{transform:`rotate(${O})`,textAnchor:"middle",y:typeof e.value=="number"?0:u*s,dominantBaseline:"middle",style:{...t.axis.ticks.text,fill:w==="null"?"black":w,fontSize:"12px",fontFamily:"Roboto"},children:n},u))})]})},vt=e=>{if(!e.value||(S||V)&&oe.includes(String(e.value)))return"";let t=e.value;if(x==="vertical"){const n=F||p;t=b.formatNumber(n.style==="percent"?t/100:t,{...n})}let l=25;f&&B==="Mobile"||K&&!f?l=(h==null?void 0:h.mobileMaxTickLength)??25:f&&B==="Tablet"||X&&!f?l=(h==null?void 0:h.tabletMaxTickLength)??25:window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches&&!f&&(l=15);const r=typeof t=="string"?t.split(" "):[t],i=[];let c="";r.forEach(n=>{c.length+String(n).length<=l?c+=(c?" ":"")+n:(i.push(c),c=n)}),c&&i.push(c);let s=12;return f&&B==="Mobile"||K&&!f?s=(h==null?void 0:h.mobileYAxisLineHeight)??12:(f&&B==="Tablet"||X&&!f)&&(s=(h==null?void 0:h.tabletYAxisLineHeight)??12),a.jsxs("g",{transform:`translate(${e.x},${e.y})`,children:[a.jsx("line",{x1:-5,x2:0,y1:0,y2:0,stroke:"#000",strokeWidth:1}),i.map((n,u)=>a.jsx("text",{x:-10,y:typeof t=="number"?0:u*s,textAnchor:"end",dominantBaseline:"middle",style:{fill:w==="null"?"black":w,fontSize:"12px",fontFamily:"Roboto"},children:n},n))]})},Nt=e=>{const t=v.slice();if(t.indexOf(e)>-1){const l=t.indexOf(e);t.splice(l,1)}else t.push(e);lt(t)},It=e=>{const t=Object.assign({},N);t[e]=!t[e],it(t)},Lt=({bars:e})=>a.jsx("g",{children:e.map(t=>{const{width:l,height:r,y:i,x:c,data:s}=t;if(x==="horizontal"&&r<=ie||x==="vertical"&&l<=le)return;const n=s.value?b.formatNumber(p.style==="percent"?s.value/100:s.value,p):"",u=n.length;let o,z;if(x==="vertical"&&l>=le||x==="horizontal"&&r>=ie)return x==="vertical"?(o=i-6,z=c+l/2-u*3.5):(o=i+r/2+4,z=c+l+5),a.jsx("text",{y:o,x:z,style:{fill:ce()},children:`${n}`})})}),kt=e=>{const t=m.data.filter(r=>v.indexOf(r[m.indexBy])==-1).map(r=>r[m.indexBy]),{bars:l}=e;return a.jsx("g",{children:t.filter(r=>l.filter(i=>i.data.indexValue==r).length>0).map(r=>{var J;const i=l.filter(d=>d.data.indexValue==r);let c="right",s=0,n=0;if(x=="horizontal")D==="stacked"?(Y?s=e.innerWidth-20:(s=i.map(d=>d.width).reduce((d,y)=>d+y),E&&(s=e.innerWidth-s)),n=e.yScale(r)+i[0].height/2):(Y?s=e.innerWidth:(s=i.map(d=>d.width).reduce((d,y)=>d>y?d:y),E&&(s=e.innerWidth-s)),n=e.yScale(r)+i.map(d=>d.height).reduce((d,y)=>d+y)/2),s=s+parseInt(M)+5;else if(c="middle",D==="stacked")s=e.xScale(r)+i[0].width/2,Y?n=n-parseInt(M):E?n=parseInt(M)+i.map(d=>d.height).reduce((d,y)=>d+y)+14:n=e.innerHeight-parseInt(M)-i.map(d=>d.height).reduce((d,y)=>d+y)-5;else if(s=e.xScale(r)+i.map(d=>d.width).reduce((d,y)=>d+y)/2,E&&(n=e.innerHeight),Y)n=n-parseInt(M);else{if(i.length%2==1){const d=Math.floor(i.length/2);n=i[d].height}else{const d=i.length/2;n=Math.max(i[d].height,i[d-1].height)}E?n=n+14+parseInt(M):n=e.innerHeight-n-parseInt(M)-5}const u=m.data.filter(d=>d[m.indexBy]===r)[0];let o=u.parent_variables?u.parent_variables[Le]:u[Le];const z=_!=="index"?(J=v==null?void 0:v.map(d=>u[d]))==null?void 0:J.reduce((d,y)=>d+y,0):0;return o-=z,a.jsx("text",{y:n,x:s,style:{fill:ce()},children:a.jsxs("tspan",{textAnchor:c,children:[Ne?Ne+" ":"",b.formatNumber(Ie.style==="percent"?o/100:o,Ie)]})})})})},wt={top:dt,right:Te,bottom:ut,left:He};let he,ue=0,Me=0;pe&&(he=Ve.parse(pe,{header:!1,dynamicTyping:!0}),ue=Math.max(...he.data.map(e=>e[1])),Me=Math.min(...he.data.map(e=>e[1])));const Be=(()=>{const e=[];return re&&(re.forEach(t=>{t.low&&e.push(parseFloat(t.low)),t.high&&e.push(parseFloat(t.high))}),m.data&&m.data.map(t=>{m.keys.forEach(l=>{t[l]&&e.push(t[l])})})),e})(),Ft=Math.max(...Be),Dt=Math.min(...Be),Ot=()=>D==="stacked"&&W!=="fixed"||W==="fixed"&&H===null||H===""?Math.max(Math.max(...m.data.map(e=>m.keys.map(t=>e[t]?e[t]:0)).map(e=>e.reduce((t,l)=>Math.max(t+l,t+0)))),ue)*1.1:W==="fixed"&&H!==null&&H!==""?H:Math.max(ue,Ft)*1.05,Mt=()=>{const e=Math.min(Me,Dt);return W==="fixed"&&ae!==null&&ae!==""?ae:e>0?e*.9:e*1.1},Bt=Ot(),zt=Mt(),I=["grid","axes","bars"];Ue&&I.push(kt),I.push(ft),I.push(pt),be&&q&&q.forEach((e,t)=>{if(N[t]==!0||N[t]==null){const{csvLineLayerData:l,lineColor:r,tooltip:i}=e;if(e.app=="csv"){const c=Ve.parse(l,{header:!1,dynamicTyping:!0});if(c.data&&c.data.filter(s=>s[1]!==null).length>0){c.data=c.data.filter(n=>n[1]!==null);const s=Se(c,r,x,D,Z(m.keys,!0),i,e.title,"");I.push(s)}}else if(e.measure[0]){const c={},s=m.data.map(o=>[o[m.indexBy],o.variables[e.measure[0]]]),n=m.metadata.measures?m.metadata.measures.filter(o=>o.value==e.measure[0]):[];c.data=s;const u=Se(c,r,x,D,Z(m.keys,!0),i,e.title,n.length>0?n[0].label:"");I.push(u)}}}),je===Tt&&I.push(Lt),Ke&&I.push(yt),I.push(gt);let me=parseInt(Ge);const ze=()=>a.jsx(a.Fragment,{children:Q&&ge&&a.jsx("div",{className:"legend item",children:a.jsx("label",{className:"legend-title",children:ge})})}),oe=[];if(V||S){me=Number.parseInt(h.yAxisTickValues);const e=new Map(Object.entries((($e=h==null?void 0:h.labels)==null?void 0:$e.xAxis)??{}));for(const[t,l]of e)l||oe.push(t)}return a.jsx("div",{style:{height:_e},children:(m==null?void 0:m.data)&&m.data.length>0&&a.jsxs(a.Fragment,{children:[a.jsx(Et.ResponsiveBar,{colorBy:$.colorBy,animate:!0,enableLabel:je==Ht,...m,maxValue:Bt,minValue:zt,keys:Z(m.keys,!0),data:Z(m.data,!1),groupMode:D||"grouped",margin:wt,innerPadding:Ye,valueScale:{type:Re,clamp:W==="fixed"&&tt},colors:e=>e&&e.data[C]?e.data[C]:g.getColor(e.id,e.data),borderColor:"#000",reverse:E,axisTop:null,axisRight:Ze?{tickSize:x=="horizontal"&&T||x==="vertical"?5:0,tickPadding:5,tickRotation:0,tickValues:me,legend:R.right,legendPosition:"middle",legendOffset:parseInt(Je),format:e=>{if(!e)return"";if(x=="vertical"){const t=F||p;return b.formatNumber(t.style==="percent"?e/100:e,{...t})}return e}}:null,axisBottom:(S||V)&&(h==null?void 0:h.xAxisDisabled)===!0?null:x==="horizontal"?{legend:R.bottom,legendPosition:"middle",legendOffset:parseInt(ve),tickPadding:5,tickRotation:0,tickValues:parseInt(Qe),format:e=>{if(!e)return"";if(x=="horizontal"){const t=F||p;return b.formatNumber(t.style==="percent"?e/100:e,{...t})}return e}}:{legend:R.bottom,legendPosition:"middle",legendOffset:parseInt(ve),renderTick:jt},axisLeft:{tickSize:x==="horizontal"&&T||x==="vertical"?5:0,tickPadding:5,tickRotation:0,tickValues:me,legend:R.left,legendPosition:"middle",legendOffset:Number.parseInt(Ae),...S||V?{renderTick:vt}:{format:e=>{if(!e)return"";if(x==="vertical"){const t=F||p;return b.formatNumber(t.style==="percent"?e/100:e,{...t})}return e}}},enableGridY:nt,enableGridX:st,layout:x,labelSkipWidth:le,labelSkipHeight:ie,padding:Pe,labelTextColor:ce(),label:e=>b.formatNumber(p.style==="percent"&&e.value?e.value/100:e.value,p),layers:I,onMouseEnter:e=>{},onMouseLeave:e=>{},motionStiffness:130,motionDamping:15,tooltip:e=>Xe&&te&&te.trim().length>0?a.jsx($t.default,{intl:b,format:p,d:e,tooltip:te,tooltipEnableMarkdown:Ce}):null,theme:{tooltip:{basic:{whiteSpace:"pre",display:"flex",alignItems:"center"},container:{background:"transparent",boxShadow:""},table:{},tableCell:{padding:"3px 5px"}}}}),(k==="top"||k==="bottom")&&a.jsx("div",{className:`legends container has-standard-12-font-size ${k}`,children:a.jsxs("div",{className:"legend-sections",children:[a.jsx("div",{className:"title-section",children:ze()}),a.jsx(Wt,{onWrapChange:e=>{k==="top"?(ht(fe+e/2*40),De(e)):(mt(ye+e/2*25),De(e))},className:"legends container has-standard-12-font-size items-section",children:Oe()})]})}),(k==="right"||k==="left")&&a.jsxs("div",{className:`legends container has-standard-12-font-size ${k}`,style:k==="right"?ot:xt,children:[ze(),Oe()]})]})})},Rt=Vt.injectIntl(At);module.exports=Rt;