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