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