@devgateway/dvz-ui-react/dist/cjs/embeddable/chart/Pie.js

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.

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