UNPKG

@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) 4.66 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),ue=require("react-intl"),de=require("@nivo/pie"),A=require("./Tooltip.js");require("@nivo/colors");require("d3");const me=require("uuid"),pe=require("../../layout/FlexWrapDetector.js"),ge=require("../../utils/deviceType.js"),F=ge.default()==="mobile",he=({legends:xe,marginLeft:M,marginTop:x,marginRight:D,marginBottom:f,options:m,intl:p,format:g,colors:fe,groupMode:Le,tooltipEnabled:W,height:I,showLegends:L,legendPosition:r,tickRotation:je,tickColor:ke,tooltip:o,startAngle:w,endAngle:B,legendLabel:j,legendCheckBack:k,legendLabelBack:O,legendLabelColor:R,centerLabel:$,showArcLabels:z,showArcLinkLabels:V,slicePadding:E,colorGenerator:v,centerLabelFontWeight:H,centerLabelFontSize:_,centerLabelXOffset:X,centerLabelYOffset:Y,tooltipEnableMarkdown:J,reverseLegend:K,showPercentage:Q})=>{const[c,U]=n.useState([]),[Z,G]=n.useState(o),[l,P]=n.useState(m),[S,ee]=n.useState(50),[y,te]=n.useState(x),[ve,C]=n.useState(0),[N,ae]=n.useState(f),u=l.data.sort((e,a)=>e.position&&a.position?e.position-a.position:0).map((e,a)=>({color:v.getColor(e.id,e),id:e.id,label:e.label}));n.useEffect(()=>{G(o),P({...m,id:me.v4()})},[o,m]),n.useEffect(()=>{(()=>{const s=5*Math.max(u.length-5,0);ee(s)})()},[u]);const re={bottom:`-${S}px`},se={bottom:`-${S}px`,gap:"0px"},ne=e=>{const a=c.slice();if(a.indexOf(e)>-1){const s=a.indexOf(e);a.splice(s,1)}else a.push(e);U(a)},le=e=>c?e.filter(a=>c.indexOf(a.id)===-1):e;if(!l||!l.data)return null;const ie={top:y,right:D,bottom:N,left:M},T=()=>t.jsx(t.Fragment,{children:L&&j&&t.jsx("div",{className:"legend item",children:t.jsx("label",{className:"legend-title",children:j})})}),q=()=>(K&&u.reverse(),t.jsx(t.Fragment,{children:L&&u.map(e=>t.jsxs("div",{className:"legend item",onClick:()=>ne(e.id),children:[t.jsx("input",{className:"ignore",type:"checkbox",checked:c.length==0||!c.includes(e.id)}),t.jsx("span",{className:k?"checkmark-with-bg":"checkmark",style:{backgroundColor:k==!0?e.color:"transparent"}}),t.jsx("label",{style:{backgroundColor:O==!0?e.color:"transparent",color:R},children:e.label})]}))})),oe=e=>{const{centerX:a,centerY:s}=e,i=$.split(/[\r\n]/g);let d=0;return e.dataWithArc&&(d=e.dataWithArc.reduce(function(h,b){return h+b.value},0)),t.jsx("text",{x:a,y:s,textAnchor:"start",dominantBaseline:"central",children:i.map((h,b)=>t.jsx("tspan",{x:a+parseInt(X),y:s+parseInt(Y)+b*20,style:{fontSize:_+"px",fontWeight:H,fill:"#000"},children:A.formatContent(h,{totalValue:d},p)}))})},ce=(e,a)=>{if(a){const s=e.reduce((i,d)=>i+d.value,0);return e.map(i=>({...i,value:i.value/s*100}))}return e};return t.jsx("div",{style:{height:I},className:"pie-chart",children:l&&l.data&&l.data.length>0&&t.jsxs(t.Fragment,{children:[t.jsx(de.ResponsivePie,{data:le(ce(l.data,Q)),margin:ie,startAngle:w,endAngle:B,sortByValue:!0,innerRadius:.7,padAngle:E,cornerRadius:3,colors:e=>v.getColor(e.id,e.data),borderWidth:1,borderColor:{from:"color",modifiers:[["brighter","2"]]},enableArcLabels:z,enableArcLinkLabels:V,arcLabelsTextColor:"#333333",arcLinkLabelsSkipAngle:5,arcLabelsSkipAngle:15,sliceLabelsSkipAngle:20,arcLabel:e=>p.formatNumber(g.style==="percent"?e.value/100:e.value,g),radialLabelsSkipAngle:20,radialLabelsTextColor:"#333333",radialLabelsLinkOffset:1,radialLabelsLinkDiagonalLength:5,radialLabelsLinkHorizontalLength:16,radialLabelsLinkStrokeWidth:1,radialLabelsLinkColor:{from:"color"},arcLinkLabel:e=>e.label,layers:["arcLinkLabels","arcs","arcLabels","legends",oe],animate:!0,motionStiffness:90,motionDamping:15,legends:[],labelTextColor:{from:"color",modifiers:[["darker",1.6]]},tooltip:e=>{if(e.datum&&e.datum.data&&e.datum.data.variables){const a=e.datum.arc.angleDeg/360*100;e.datum.data.variables.valuePercent=a,e.datum.data.variables.category=e.datum.id}return W&&o&&o.trim().length>0?t.jsx(A.default,{intl:p,format:g,d:e,tooltip:Z,tooltipEnableMarkdown:J}):null}},l.id),(r==="top"||r==="bottom")&&t.jsx("div",{className:`legends container has-standard-12-font-size ${r}`,style:r==="top"?{marginTop:F&&`${y}px`}:r==="bottom"?{marginBottom:`${N}px`}:{},children:t.jsxs("div",{className:"legend-sections",children:[t.jsx("div",{className:"title-section",children:T()}),t.jsx(pe.default,{onWrapChange:e=>{r==="top"&&F?(te(x+e/2*40),C(e)):(ae(f+e/2*25),C(e))},className:"legends container has-standard-12-font-size items-section",children:q()})]})}),(r==="right"||r==="left")&&t.jsxs("div",{className:`legends container has-standard-12-font-size ${r}`,style:r==="right"?re:se,children:[T(),q()]})]})})},be=ue.injectIntl(he);exports.default=be;