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