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