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