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