pixel-react 1.20.20 → 1.20.22

package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.js

@@ -1 +1,523 @@
-import{jsxs as e,jsx as n,Fragment as t}from"react/jsx-runtime";import{useState as l,useEffect as o,useMemo as i}from"react";import r from"../../Typography/Typography.js";import"./DashboardDonutChart.scss.js";import a from"../../../_virtual/index.js";import{normalizeStorageValue as s,formatMemoryValue as d}from"../../../assets/utils/functionUtils.js";import c from"../../Tooltip/Tooltip.js";import u from"../../Icon/Icon.js";const g=e=>"number"==typeof e?e:parseFloat(e)||0,f=e=>{const n=[];if(e.version&&Array.isArray(e.version)){const t={};e.version.forEach((l,o)=>{const i=String(l),r=i.split("."),a=Number(r[0]);if(!(a in t)){const l=e.versionColor?.[o%(e.versionColor?.length||1)]||"#"+("000000"+Math.floor(16777215*Math.random()).toString(16)).slice(-6);t[a]=l,n.push({major:a,ver:i,color:l})}})}return n},h=(e,n,t,l,o)=>{const i=e+t*Math.cos(l),r=n+t*Math.sin(l),a=e+t*Math.cos(o),s=n+t*Math.sin(o);return`M ${i} ${r} A ${t} ${t} 0 ${o-l>Math.PI?1:0} 1 ${a} ${s}`},m=(e,n,t,l)=>{const o=e*Math.cos(t),i=e*Math.sin(t),r=e*Math.cos(l),a=e*Math.sin(l),s=n*Math.cos(l),d=n*Math.sin(l),c=n*Math.cos(t),u=n*Math.sin(t),g=l-t>Math.PI?1:0;return`\n    M ${o} ${i}\n    A ${e} ${e} 0 ${g} 1 ${r} ${a}\n    L ${s} ${d}\n    A ${n} ${n} 0 ${g} 0 ${c} ${u}\n    Z\n  `},p=["var(--status-success-text-color)","var(--status-rejected-text-color)","var(--status-warning-text-color)","var(--status-button-text-skipped)","var(--brand-color)"],x=({radius:x=60,tableWidth:y,tableHeight:v=120,lineWidth:b=15,statusValues:I=[],gapAngle:k=0,legendDetailsType:M="",isLegendDetails:N=!0,legendType:$="numberLegend",showOnlyLabel:A=!1,apiDataLabel:S,unit:w,showUnit:L=!0,labelFontSize:z=24,subLabelFontSize:C=14,legendPosition:E="bottom",chartGap:V=0,legendGap:W=5,legendValueFontSize:T=22,legendKeyFontSize:j=12,legendWithVersionFontSize:F=12,versionErrorText:O,labelYoffSet:P=-5,subLabelYoffSet:Y=20,capsuleStyle:X={},legendTruncate:D=1/0,isLegendToolTip:U=!1,containerHeight:K="",onSelectedStatus:B=(e,n)=>{},selectedStatusKey:G="",setSelectedStatusKey:H=e=>{},isOnClick:Z=!1,zIndex:_=99})=>{const[q,J]=l(null),[Q,R]=l(null),[ee,ne]=l({x:0,y:0}),[te,le]=l(!1),[oe,ie]=l(null),[re,ae]=l({show:!1,content:"",position:{x:0,y:0}}),[se,de]=l(!1);o(()=>{G||ie(null)},[G]);const ce=()=>{ae({show:!1,content:"",position:{x:0,y:0}})},ue=e=>{ae(n=>({...n,position:{x:e.clientX+14,y:e.clientY+11}}))},ge="memoryLegend"===$?I.map(e=>{if("string"==typeof e.value){const{normalizedValue:n,unit:t,value:l}=s(e.value);return{...e,normalizedValue:n,unit:t,labelValue:l}}return{...e,normalizedValue:e.value,labelValue:e.value,unit:"B"}}):I.map(e=>{if("string"==typeof e.value){const n=parseFloat(e.value),t=isNaN(n)?0:n;return{...e,normalizedValue:t,unit:"",labelValue:Number.isInteger(t)?t:t.toFixed(2)}}return{...e,normalizedValue:e.value,unit:"",labelValue:Number.isInteger(e.value)?e.value:e.value?.toFixed(2)}}),fe=ge?.map((e,n)=>({...e,value:e.normalizedValue??e.value,originalIndex:n})),he=fe?.reduce((e,{value:n})=>e+g(n),0)||0,me=fe?.filter(({value:e})=>g(e)>0)||[],pe=d(he),xe=2*Math.PI*.01,ye=i(()=>{if(0===me.length)return[];const e=2*Math.PI,n=k*me.length;let t=e-n;me.forEach(({value:n})=>{const l=g(n)/he,o=Math.max(l*e,xe);t-=o});let l=Math.PI/2;return me.map(n=>{const o=g(n.value)/he,i=Math.max(o*e,xe),r=l,a=l+(i+t*o);l=a+k;return{item:n,startAngle:r,endAngle:a,subArcs:null}})},[me,he,k,xe,O]),ve=e=>{J(e),le(!0)},be=()=>{J(null),le(!1)},Ie=e=>{ne({x:e.clientX+10,y:e.clientY+10})},ke=(e,n)=>{Z&&G!==e?(ie(n),H(e),B(e,n)):(ie(null),H(""),B(""))},Me=2*x+b+6,Ne=2*x-b-6;function $e(e,n,t){const l=e.split(" "),o=[];let i="";return l.forEach(e=>{const l=i?`${i} ${e}`:e;(function(e,n){const t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("Unable to get canvas context");return t.font=`${n}px Poppins`,t.measureText(e).width})(l,t)<=n?i=l:(i&&o.push(i),i=e)}),i&&o.push(i),o}const Ae=e=>{const n=document.createElementNS("http://www.w3.org/2000/svg","text");n.style.fontSize=`${C}px`,n.style.visibility="hidden";const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.appendChild(n),document.body.appendChild(t),n.textContent=e;let l=n.getComputedTextLength();if(l<=Ne)return document.body.removeChild(t),e;let o=e;for(;l>Ne&&o.length>0;)o=o.slice(0,-1),n.textContent=`${o}...`,l=n.getComputedTextLength();return document.body.removeChild(t),`${o}...`},Se=i(()=>$e((()=>{if("tableLegend"===$&&null!==q){const e=fe.find(e=>e.originalIndex===q);return Ae(e?.key||"")}if(Z&&null!==q){const e=fe.find(e=>e.originalIndex===q);return Ae(e?.key||"")}return Ae(M)})(),Ne,C),[q,oe,$,M,fe,he,Z,C]);return o(()=>{var e;de((e=Se,e?.some(e=>e?.includes("..."))))},[Se]),e("div",{className:a("ff-dashboard-donut-chart-section",{"ff-dashboard-donut-chart-section-table-legend":"tableLegend"===$,"legend-position-bottom":"bottom"===E,"legend-position-left":"left"===E,"ff-overflow-visible":!0}),style:{gap:`${V}px`},children:[e("div",{className:"ff-dashboard-donut-chart-svg-container",style:{zIndex:_},children:[n("svg",{width:Me,height:Me,viewBox:`0 0 ${Me} ${Me}`,className:"ff-svg-overflow-visible",children:e("g",{transform:`translate(${x+b/2+3}, ${x+b/2+3})`,children:[0===he||0===me.length?n("circle",{cx:0,cy:0,r:x,fill:"none",stroke:"var(--tooltip-bg-color)",strokeWidth:b,strokeOpacity:.8,opacity:.2}):ye.map((t,l)=>(t=>{if(t.subArcs)return n("g",{className:"donut-segment version-segment",children:t.subArcs.map((l,o)=>{const i=l.endAngle-l.startAngle,r=Math.abs(i-2*Math.PI)<.01,a=null!==Q?Q.parentIndex===t.item.originalIndex&&Q.subIndex===o:null===q||q===t.item.originalIndex;if(r)return e("g",{className:"sub-arc-group",onMouseEnter:e=>{R({parentIndex:t.item.originalIndex,subIndex:o}),ne({x:e.clientX+10,y:e.clientY+10}),le(!0)},onMouseLeave:()=>{R(null),le(!1)},onMouseMove:e=>ne({x:e.clientX+10,y:e.clientY+10}),children:[n("circle",{cx:"0",cy:"0",r:x,fill:"none",stroke:l.randomColor,strokeWidth:b,strokeOpacity:O?.2:a?1:0,style:{transition:"stroke-opacity 0.5s ease"}}),n("g",{className:"sub-arc-border-wrapper",style:{opacity:Q&&Q.parentIndex===t.item.originalIndex&&Q.subIndex===o?1:0,transition:"opacity 0.5s ease",overflow:"visible"},children:n("circle",{cx:"0",cy:"0",r:x+b/2+2+1,fill:"none",stroke:l.randomColor,strokeWidth:2,style:{transition:"stroke 0.5s ease"}})})]},o);{const i=h(0,0,x,l.startAngle,l.endAngle),r=m(x+b/2+2,x+b/2+2+2,l.startAngle,l.endAngle),s=Q&&Q.parentIndex===t.item.originalIndex&&Q.subIndex===o?1:0,d=G===t?.item?.key;return e("g",{className:"sub-arc-group",onMouseEnter:e=>{R({parentIndex:t.item.originalIndex,subIndex:o}),ne({x:e.clientX+10,y:e.clientY+10}),le(!0)},onMouseLeave:()=>{R(null),le(!1)},onMouseMove:e=>ne({x:e.clientX+10,y:e.clientY+10}),children:[n("path",{d:i,fill:"none",stroke:l.randomColor,strokeWidth:b,style:{strokeOpacity:a?1:.2,transition:"stroke-opacity 0.5s ease"}}),d&&Z&&n("path",{d:i,fill:"none",stroke:"var(--dotted-border-color)",strokeWidth:b,strokeOpacity:.4,pointerEvents:"none"}),n("g",{className:"sub-arc-border-wrapper",style:{opacity:s,transition:"opacity 0.5s ease",overflow:"visible"},children:n("path",{d:r,fill:l.randomColor,pointerEvents:"none"})})]},o)}})},t.item.originalIndex);{const l=t.endAngle-t.startAngle,o=Math.abs(l-2*Math.PI)<.01,i=null!==q?q===t.item.originalIndex:null===Q||Q.parentIndex===t.item.originalIndex,r=t.item.color||p[t.item.originalIndex%p.length],a=q===t.item.originalIndex?1:0,s=G===t?.item?.key;if(o)return e("g",{className:"donut-segment",children:[n("circle",{cx:"0",cy:"0",r:x,fill:"none",stroke:r,strokeWidth:b,onMouseEnter:()=>ve(t.item.originalIndex),onMouseLeave:be,onMouseMove:Ie,onClick:()=>ke(t.item.key,t.item.originalIndex),style:{cursor:Z?"pointer":"default",strokeOpacity:i?1:.2,transition:"stroke-opacity 0.5s ease"}}),s&&Z&&n("circle",{cx:"0",cy:"0",r:x,fill:"none",strokeWidth:b,stroke:"var(--dotted-border-color)",strokeOpacity:.4,pointerEvents:"none"}),n("g",{className:"donut-border-wrapper",style:{opacity:a,transition:"opacity 0.5s ease",overflow:"visible"},children:n("circle",{cx:"0",cy:"0",r:x+b/2+2+1,fill:"none",stroke:r,strokeWidth:2,style:{transition:"stroke 0.5s ease"}})})]},t.item.originalIndex);{const l=h(0,0,x,t.startAngle,t.endAngle);return e("g",{className:"donut-segment",children:[n("path",{d:l,fill:"none",stroke:r,strokeWidth:b,onMouseEnter:()=>ve(t.item.originalIndex),onMouseLeave:be,onMouseMove:Ie,onClick:()=>ke(t.item.key,t.item.originalIndex),style:{cursor:Z?"pointer":"default",strokeOpacity:i?1:.2,transition:"stroke-opacity 0.5s ease"}}),s&&Z&&n("path",{d:l,fill:"none",stroke:"var(--dotted-border-color)",strokeWidth:b,strokeOpacity:.4,pointerEvents:"none"}),n("g",{className:"donut-border-wrapper",style:{opacity:a,transition:"opacity 0.5s ease",overflow:"visible"},children:n("path",{d:m(x+b/2+2,x+b/2+2+2,t.startAngle,t.endAngle),fill:r,pointerEvents:"none"})})]},t.item.originalIndex)}}})(t)),A&&n("text",{x:"0",y:"5",className:"ff-svg-label-text",textAnchor:"middle",fill:p[3],style:{fontSize:`${z}px`},children:$e(M,Ne,z).map((e,t,l)=>n("tspan",{x:"0",dy:0===t?l.length>1?-8:0:24,children:e},t))}),!A&&e(t,{children:[n("text",{x:"0",y:P,textAnchor:"middle",fill:p[3],style:{fontSize:`${z}px`},children:$e((()=>{if("tableLegend"===$&&null!==q){const e=fe.find(e=>e.originalIndex===q);return 0===he?"0%":`${Math.round((e?.value||0)/he*100)}%`}if("memoryLegend"===$)return`${pe}`;if(Z&&null!==q){const e=fe.find(e=>e.originalIndex===q);return`${e?.value}`}return`${"tableLegend"===$?`${fe.length}`:Number.isInteger(he)?he:he?.toFixed(2)} ${L&&w?w.toUpperCase():""}`})(),Ne,z).map((e,t)=>n("tspan",{x:"0",dy:0===t?0:z,children:null!==oe&&fe.find(e=>e.originalIndex===oe)?0===t?fe.find(e=>e.originalIndex===oe)?.value:null:S||e},t))}),n("text",{x:"0",y:Y,textAnchor:"middle",fill:"var(--text-color)",style:{fontSize:`${C}px`},children:Se?.map((e,t)=>n("tspan",{x:"0",dy:0===t?0:C,fill:null!==oe&&fe.find(e=>e.originalIndex===oe)?.color||null!==q&&Z&&fe.find(e=>e.originalIndex===q)?.color||"",onMouseEnter:e=>{var n;ae({show:!0,content:M,position:{x:(n=e).clientX+14,y:n.clientY+11}})},onMouseLeave:ce,onMouseMove:ue,className:"center-text-tooltip",children:e},t))})]})]})}),te&&(()=>{if(null!==Q){const e=ye.find(e=>e.item.originalIndex===Q.parentIndex),t=Array.isArray(e?.item?.version)?e.item.version[Q.subIndex]:"";return n("div",{className:"ff-donut-chart-tooltip",style:{left:ee.x,top:ee.y},children:n(r,{children:`${e?.item?.key}: ${t}`})})}if(null!==q){const t=fe.find(e=>e.originalIndex===q);return e("div",{className:"ff-donut-chart-tooltip",style:{left:ee.x,top:ee.y},children:[n(r,{children:`${t?.key} : `}),n(r,{children:"memoryLegend"===$?`${t?.labelValue} ${t?.unit}`:t?.value}),t?.version&&n(r,{children:`Version: ${t.version.join(", ")}`})]})}return null})(),re.show&&se&&n("div",{className:"ff-donut-chart-tooltip",style:{left:re.position.x,top:re.position.y,zIndex:_+1},children:n(r,{children:re?.content})})]}),N&&((t,l,o)=>{const i=t.length,s=i>6?"ff-count-more":`ff-count-${i}`,d="left"===o||"right"===o,h=(e,t,l)=>U?n(c,{placement:"bottom",title:t,children:e},l):e;switch(l){case"numberLegend":return n("div",{className:a("ff-legend-container","ff-number-legend",s,{"ff-side-legend":d}),style:{"--donut-legend-gap":`${W}px`},children:t?.map(t=>e("div",{className:"ff-legend-item ff-d-flex",onMouseEnter:()=>{g(t.value)>0&&J(t.originalIndex)},onMouseLeave:()=>J(null),children:[e("div",{className:t.osIcon&&t.osIcon.length>0?"ff-legend-item-version":"ff-legend-item",children:[e(r,{fontSize:T,fontWeight:"semi-bold",className:"ff-legend-value",color:t.color?t.color:p[t.originalIndex%p.length],children:[t.osIcon&&t.osIcon.length>0?n(u,{name:t.osIcon}):String(t.labelValue||"00").padStart(2,"0")+" ",L&&w?.toUpperCase()]}),n(r,{fontSize:j,className:"ff-legend-key",textAlign:"center",children:t.key.length>D?n(c,{placement:"bottom",title:U?t.key:"",children:`${t.key.slice(0,D)}...`}):t.key})]}),t.osIcon&&t.osIcon.length>0&&n(r,{fontSize:j,className:"ff-legend-key",textAlign:"center",fontWeight:"semi-bold",children:"OS version"}),t.version&&t.version.length>0?n("div",{className:"ff-legend-version-container",children:n("div",{className:"ff-legend-version-grid",children:f(t).map((l,o)=>e("div",{onMouseEnter:()=>R({parentIndex:t.originalIndex,subIndex:o}),onMouseLeave:()=>R(null),className:"ff-legend-version-item",children:[n("div",{className:"ff-legend-version-circle",style:{backgroundColor:l.color}}),n(r,{fontSize:F,children:l.major})]},o))})}):O?n(r,{textAlign:"center",className:"ff-legend-version-error",fontSize:14,children:O}):null]},t.originalIndex))});case"pillLegend":return n("div",{className:"ff-legend-container ff-pill-legend",style:{"--donut-legend-gap":`${W}px`,height:Number(K)-(Me+V)},children:t?.map(t=>{const l=e("div",{className:"ff-legend-item",children:[n(r,{as:"span",className:"ff-legend-capsule",fontSize:T,style:{backgroundColor:t?.color?t.color:p[t.originalIndex%p.length],...X},children:0===t?.labelValue?"00":t?.labelValue}),n(r,{fontSize:j,className:"ff-legend-key",children:t?.key.length>D?`${t?.key.slice(0,D)}...`:t?.key})]},t.originalIndex);return h(l,t.key,t.originalIndex)})});case"memoryLegend":return n("div",{className:a("ff-legend-container","ff-memory-legend",s,{"ff-side-legend":d}),style:{"--donut-legend-gap":`${W}px`},children:t?.map(t=>{const l=e("div",{className:"ff-legend-item",onMouseEnter:()=>{g(t.value)>0&&J(t.originalIndex)},onMouseLeave:()=>J(null),children:[e(r,{fontSize:T,fontWeight:"semi-bold",className:"ff-legend-value",color:t.color?t.color:p[t.originalIndex%p.length],children:[t.labelValue," ",t.unit]}),n(r,{fontSize:j,className:"ff-legend-key",textAlign:"center",children:t.key.length>D?`${t.key.slice(0,D)}...`:t.key})]},t.originalIndex);return h(l,t.key,t.originalIndex)})});case"tableLegend":return n("div",{className:"ff-legend-table-wrapper",style:{height:v},children:e("table",{className:"ff-legend-table",children:[n("thead",{className:"ff-legend-table-thead",children:e("tr",{children:[n("th",{className:"ff-table-header",style:{width:y,textAlign:"left"},children:"Name"}),n("th",{className:"ff-table-header",style:{textAlign:"left",paddingLeft:"10px"},children:"%"}),n("th",{className:"ff-table-header",style:{textAlign:"left"},children:"Count"})]})}),n("tbody",{className:"ff-legend-table-tbody",children:t?.map(t=>e("tr",{className:"ff-legend-item",onMouseEnter:()=>{J(t.originalIndex)},onMouseLeave:()=>J(null),children:[e("td",{className:"ff-legend-name",children:[e("span",{className:"ff-legend-capsule",style:{backgroundColor:t.color?t.color:p[t.originalIndex%p.length]},children:[n(r,{fontSize:10,children:0===t?.value?"00":t.value})," "]}),n(r,{fontSize:10,children:t.key})]}),n("td",{className:"ff-legend-percentage",children:t.percentage?t.percentage:"string"==typeof t.value?Math.round(parseFloat(t.value)/he*100):0===he?0:Math.round(t.value/he*100)}),n("td",{className:"ff-legend-count",children:t.value})]},t.originalIndex))})]})});default:return null}})(fe,$,E)]})};export{x as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import Typography from '../../Typography';
+import './DashboardDonutChart.scss';
+import classNames from 'classnames';
+import { normalizeStorageValue, formatMemoryValue, } from '../../../assets/utils/functionUtils';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+const toNumber = (val) => typeof val === 'number' ? val : parseFloat(val) || 0;
+const getRandomColor = () => {
+    const color = Math.floor(Math.random() * 16777215).toString(16);
+    return '#' + ('000000' + color).slice(-6);
+};
+const getUniqueVersions = (item) => {
+    const unique = [];
+    if (item.version && Array.isArray(item.version)) {
+        const versionColorMap = {};
+        item.version.forEach((ver, j) => {
+            const verString = String(ver);
+            const parts = verString.split('.');
+            const major = Number(parts[0]);
+            if (!(major in versionColorMap)) {
+                const color = item.versionColor?.[j % (item.versionColor?.length || 1)] ||
+                    getRandomColor();
+                versionColorMap[major] = color;
+                unique.push({ major, ver: verString, color });
+            }
+        });
+    }
+    return unique;
+};
+const calculateArc = (x, y, radius, startAngle, endAngle) => {
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+const calculateDonutSegmentBorderPath = (innerR, outerR, startAngle, endAngle) => {
+    const startOuterX = innerR * Math.cos(startAngle);
+    const startOuterY = innerR * Math.sin(startAngle);
+    const endOuterX = innerR * Math.cos(endAngle);
+    const endOuterY = innerR * Math.sin(endAngle);
+    const endInnerX = outerR * Math.cos(endAngle);
+    const endInnerY = outerR * Math.sin(endAngle);
+    const startInnerX = outerR * Math.cos(startAngle);
+    const startInnerY = outerR * Math.sin(startAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `
+    M ${startOuterX} ${startOuterY}
+    A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}
+    L ${endInnerX} ${endInnerY}
+    A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${startInnerX} ${startInnerY}
+    Z
+  `;
+};
+const colorMapping = [
+    'var(--status-success-text-color)',
+    'var(--status-rejected-text-color)',
+    'var(--status-warning-text-color)',
+    'var(--status-button-text-skipped)',
+    'var(--brand-color)',
+];
+const DashboardDonutChart = ({ radius = 60, tableWidth, tableHeight = 120, lineWidth = 15, statusValues = [], gapAngle = 0, legendDetailsType = '', isLegendDetails = true, legendType = 'numberLegend', showOnlyLabel = false, apiDataLabel, unit, showUnit = true, labelFontSize = 24, subLabelFontSize = 14, legendPosition = 'bottom', chartGap = 0, legendGap = 5, legendValueFontSize = 22, legendKeyFontSize = 12, legendWithVersionFontSize = 12, versionErrorText, labelYoffSet = -5, subLabelYoffSet = 20, capsuleStyle = {}, legendTruncate = Infinity, isLegendToolTip = false, containerHeight = '', onSelectedStatus = (_value, _originalIndex) => { }, selectedStatusKey = '', setSelectedStatusKey = (_selectedStatusKey) => { }, isOnClick = false, zIndex = 99, }) => {
+    const [hoveredItemIndex, setHoveredItemIndex] = useState(null);
+    const [hoveredVersion, setHoveredVersion] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [selectedItemIndex, setSelectedItemIndex] = useState(null);
+    const [centerTextTooltip, setCenterTextTooltip] = useState({ show: false, content: '', position: { x: 0, y: 0 } });
+    const [isTruncated, setTruncated] = useState(false);
+    useEffect(() => {
+        if (!selectedStatusKey) {
+            setSelectedItemIndex(null);
+        }
+    }, [selectedStatusKey]);
+    const handleCenterTextMouseEnter = (content, event) => {
+        setCenterTextTooltip({
+            show: true,
+            content,
+            position: { x: event.clientX + 14, y: event.clientY + 11 },
+        });
+    };
+    const handleCenterTextMouseLeave = () => {
+        setCenterTextTooltip({
+            show: false,
+            content: '',
+            position: { x: 0, y: 0 },
+        });
+    };
+    const handleCenterTextMouseMove = (event) => {
+        setCenterTextTooltip((prev) => ({
+            ...prev,
+            position: { x: event.clientX + 14, y: event.clientY + 11 },
+        }));
+    };
+    // Normalize data (and keep versionColor if provided)
+    const normalizedStatusValues = legendType === 'memoryLegend'
+        ? statusValues.map((item) => {
+            if (typeof item.value === 'string') {
+                const { normalizedValue, unit, value } = normalizeStorageValue(item.value);
+                return { ...item, normalizedValue, unit, labelValue: value };
+            }
+            return {
+                ...item,
+                normalizedValue: item.value,
+                labelValue: item.value,
+                unit: 'B',
+            };
+        })
+        : statusValues.map((item) => {
+            if (typeof item.value === 'string') {
+                const parsedValue = parseFloat(item.value);
+                const normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
+                return {
+                    ...item,
+                    normalizedValue,
+                    unit: '',
+                    labelValue: Number.isInteger(normalizedValue)
+                        ? normalizedValue
+                        : normalizedValue.toFixed(2),
+                };
+            }
+            return {
+                ...item,
+                normalizedValue: item.value,
+                unit: '',
+                labelValue: Number.isInteger(item.value)
+                    ? item.value
+                    : item.value?.toFixed(2),
+            };
+        });
+    const chartValues = normalizedStatusValues?.map((item, index) => ({
+        ...item,
+        value: item.normalizedValue ?? item.value,
+        originalIndex: index,
+    }));
+    const total = chartValues?.reduce((acc, { value }) => acc + toNumber(value), 0) || 0;
+    const nonZeroValues = chartValues?.filter(({ value }) => toNumber(value) > 0) || [];
+    const totalMemory = formatMemoryValue(total);
+    // Angle constants
+    const MIN_PERCENTAGE = 1;
+    const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
+    // Compute arc positions only once so that they remain stable.
+    const computedArcs = useMemo(() => {
+        if (nonZeroValues.length === 0)
+            return [];
+        const totalAngle = 2 * Math.PI;
+        const totalGap = gapAngle * nonZeroValues.length;
+        let remainingAngleCalc = totalAngle - totalGap;
+        nonZeroValues.forEach(({ value }) => {
+            const valuePercentage = toNumber(value) / total;
+            const baseAngle = Math.max(valuePercentage * totalAngle, MIN_ANGLE);
+            remainingAngleCalc -= baseAngle;
+        });
+        let currAngle = Math.PI / 2;
+        return nonZeroValues.map((item) => {
+            const valuePercentage = toNumber(item.value) / total;
+            const baseAngle = Math.max(valuePercentage * totalAngle, MIN_ANGLE);
+            const extraAngle = remainingAngleCalc * valuePercentage;
+            const angle = baseAngle + extraAngle;
+            const startAngle = currAngle;
+            const endAngle = currAngle + angle;
+            currAngle = endAngle + gapAngle;
+            let subArcs = null;
+            return { item, startAngle, endAngle, subArcs };
+        });
+    }, [nonZeroValues, total, gapAngle, MIN_ANGLE, versionErrorText]);
+    const handleSegmentMouseEnter = (originalIndex) => {
+        setHoveredItemIndex(originalIndex);
+        setShowTooltip(true);
+    };
+    const handleSegmentMouseLeave = () => {
+        setHoveredItemIndex(null);
+        setShowTooltip(false);
+    };
+    const handleSegmentMouseMove = (event) => {
+        setTooltipPosition({ x: event.clientX + 10, y: event.clientY + 10 });
+    };
+    const handleSelectStatus = (value, originalIndex) => {
+        if (isOnClick && selectedStatusKey !== value) {
+            setSelectedItemIndex(originalIndex);
+            setSelectedStatusKey(value);
+            onSelectedStatus(value, originalIndex);
+        }
+        else {
+            setSelectedItemIndex(null);
+            setSelectedStatusKey('');
+            onSelectedStatus('');
+        }
+    };
+    const SVG_PADDING = 3;
+    const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
+    const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
+    const borderGap = 2;
+    const borderThickness = 2;
+    const containsDots = (array) => array?.some((str) => str?.includes('...'));
+    const renderArcSegment = (arcData, _i) => {
+        if (arcData.subArcs) {
+            // Versioned segment: render each sub-arc with its own event handlers.
+            return (_jsx("g", { className: "donut-segment version-segment", children: arcData.subArcs.map((sub, j) => {
+                    const angleDiff = sub.endAngle - sub.startAngle;
+                    const isFullCircle = Math.abs(angleDiff - 2 * Math.PI) < 0.01;
+                    const isActive = hoveredVersion !== null
+                        ? hoveredVersion.parentIndex === arcData.item.originalIndex &&
+                            hoveredVersion.subIndex === j
+                        : hoveredItemIndex !== null
+                            ? hoveredItemIndex === arcData.item.originalIndex
+                            : true;
+                    if (isFullCircle) {
+                        return (_jsxs("g", { className: "sub-arc-group", onMouseEnter: (e) => {
+                                setHoveredVersion({
+                                    parentIndex: arcData.item.originalIndex,
+                                    subIndex: j,
+                                });
+                                setTooltipPosition({
+                                    x: e.clientX + 10,
+                                    y: e.clientY + 10,
+                                });
+                                setShowTooltip(true);
+                            }, onMouseLeave: () => {
+                                setHoveredVersion(null);
+                                setShowTooltip(false);
+                            }, onMouseMove: (e) => setTooltipPosition({ x: e.clientX + 10, y: e.clientY + 10 }), children: [_jsx("circle", { cx: "0", cy: "0", r: radius, fill: "none", stroke: sub.randomColor, strokeWidth: lineWidth, strokeOpacity: versionErrorText ? 0.2 : isActive ? 1 : 0, style: {
+                                        transition: 'stroke-opacity 0.5s ease',
+                                    } }), _jsx("g", { className: "sub-arc-border-wrapper", style: {
+                                        opacity: hoveredVersion &&
+                                            hoveredVersion.parentIndex ===
+                                                arcData.item.originalIndex &&
+                                            hoveredVersion.subIndex === j
+                                            ? 1
+                                            : 0,
+                                        transition: 'opacity 0.5s ease',
+                                        overflow: 'visible',
+                                    }, children: _jsx("circle", { cx: "0", cy: "0", r: radius + lineWidth / 2 + borderGap + borderThickness / 2, fill: "none", stroke: sub.randomColor, strokeWidth: borderThickness, style: { transition: 'stroke 0.5s ease' } }) })] }, j));
+                    }
+                    else {
+                        const arcPath = calculateArc(0, 0, radius, sub.startAngle, sub.endAngle);
+                        const subBorderPath = calculateDonutSegmentBorderPath(radius + lineWidth / 2 + borderGap, radius + lineWidth / 2 + borderGap + borderThickness, sub.startAngle, sub.endAngle);
+                        const subBorderOpacity = hoveredVersion &&
+                            hoveredVersion.parentIndex === arcData.item.originalIndex &&
+                            hoveredVersion.subIndex === j
+                            ? 1
+                            : 0;
+                        const isSelected = selectedStatusKey === arcData?.item?.key;
+                        return (_jsxs("g", { className: "sub-arc-group", onMouseEnter: (e) => {
+                                setHoveredVersion({
+                                    parentIndex: arcData.item.originalIndex,
+                                    subIndex: j,
+                                });
+                                setTooltipPosition({
+                                    x: e.clientX + 10,
+                                    y: e.clientY + 10,
+                                });
+                                setShowTooltip(true);
+                            }, onMouseLeave: () => {
+                                setHoveredVersion(null);
+                                setShowTooltip(false);
+                            }, onMouseMove: (e) => setTooltipPosition({ x: e.clientX + 10, y: e.clientY + 10 }), children: [_jsx("path", { d: arcPath, fill: "none", stroke: sub.randomColor, strokeWidth: lineWidth, style: {
+                                        strokeOpacity: isActive ? 1 : 0.2,
+                                        transition: 'stroke-opacity 0.5s ease',
+                                    } }), isSelected && isOnClick && (_jsx("path", { d: arcPath, fill: "none", stroke: "var(--dotted-border-color)", strokeWidth: lineWidth, strokeOpacity: 0.4, pointerEvents: "none" })), _jsx("g", { className: "sub-arc-border-wrapper", style: {
+                                        opacity: subBorderOpacity,
+                                        transition: 'opacity 0.5s ease',
+                                        overflow: 'visible',
+                                    }, children: _jsx("path", { d: subBorderPath, fill: sub.randomColor, pointerEvents: "none" }) })] }, j));
+                    }
+                }) }, arcData.item.originalIndex));
+        }
+        else {
+            // Normal (non-version) segment.
+            const angleDiff = arcData.endAngle - arcData.startAngle;
+            const isFullCircle = Math.abs(angleDiff - 2 * Math.PI) < 0.01;
+            const isActive = hoveredItemIndex !== null
+                ? hoveredItemIndex === arcData.item.originalIndex
+                : hoveredVersion !== null
+                    ? hoveredVersion.parentIndex === arcData.item.originalIndex
+                    : true;
+            const segmentColor = arcData.item.color ||
+                colorMapping[arcData.item.originalIndex % colorMapping.length];
+            const borderWrapperOpacity = hoveredItemIndex === arcData.item.originalIndex ? 1 : 0;
+            const isSelected = selectedStatusKey === arcData?.item?.key;
+            if (isFullCircle) {
+                return (_jsxs("g", { className: "donut-segment", children: [_jsx("circle", { cx: "0", cy: "0", r: radius, fill: "none", stroke: segmentColor, strokeWidth: lineWidth, onMouseEnter: () => handleSegmentMouseEnter(arcData.item.originalIndex), onMouseLeave: handleSegmentMouseLeave, onMouseMove: handleSegmentMouseMove, onClick: () => handleSelectStatus(arcData.item.key, arcData.item.originalIndex), style: {
+                                cursor: isOnClick ? 'pointer' : 'default',
+                                strokeOpacity: isActive ? 1 : 0.2,
+                                transition: 'stroke-opacity 0.5s ease',
+                            } }), isSelected && isOnClick && (_jsx("circle", { cx: "0", cy: "0", r: radius, fill: "none", strokeWidth: lineWidth, stroke: "var(--dotted-border-color)", strokeOpacity: 0.4, pointerEvents: "none" })), _jsx("g", { className: "donut-border-wrapper", style: {
+                                opacity: borderWrapperOpacity,
+                                transition: 'opacity 0.5s ease',
+                                overflow: 'visible',
+                            }, children: _jsx("circle", { cx: "0", cy: "0", r: radius + lineWidth / 2 + borderGap + borderThickness / 2, fill: "none", stroke: segmentColor, strokeWidth: borderThickness, style: { transition: 'stroke 0.5s ease' } }) })] }, arcData.item.originalIndex));
+            }
+            else {
+                const arcPath = calculateArc(0, 0, radius, arcData.startAngle, arcData.endAngle);
+                return (_jsxs("g", { className: "donut-segment", children: [_jsx("path", { d: arcPath, fill: "none", stroke: segmentColor, strokeWidth: lineWidth, onMouseEnter: () => handleSegmentMouseEnter(arcData.item.originalIndex), onMouseLeave: handleSegmentMouseLeave, onMouseMove: handleSegmentMouseMove, onClick: () => handleSelectStatus(arcData.item.key, arcData.item.originalIndex), style: {
+                                cursor: isOnClick ? 'pointer' : 'default',
+                                strokeOpacity: isActive ? 1 : 0.2,
+                                transition: 'stroke-opacity 0.5s ease',
+                            } }), isSelected && isOnClick && (_jsx("path", { d: arcPath, fill: "none", stroke: "var(--dotted-border-color)", strokeWidth: lineWidth, strokeOpacity: 0.4, pointerEvents: "none" })), _jsx("g", { className: "donut-border-wrapper", style: {
+                                opacity: borderWrapperOpacity,
+                                transition: 'opacity 0.5s ease',
+                                overflow: 'visible',
+                            }, children: _jsx("path", { d: calculateDonutSegmentBorderPath(radius + lineWidth / 2 + borderGap, radius + lineWidth / 2 + borderGap + borderThickness, arcData.startAngle, arcData.endAngle), fill: segmentColor, pointerEvents: "none" }) })] }, arcData.item.originalIndex));
+            }
+        }
+    };
+    // Render tooltip using the shared originalIndex.
+    const renderTooltip = () => {
+        if (hoveredVersion !== null) {
+            const parent = computedArcs.find((arc) => arc.item.originalIndex === hoveredVersion.parentIndex);
+            const versionVal = Array.isArray(parent?.item?.version)
+                ? parent.item.version[hoveredVersion.subIndex]
+                : '';
+            return (_jsx("div", { className: "ff-donut-chart-tooltip", style: { left: tooltipPosition.x, top: tooltipPosition.y }, children: _jsx(Typography, { children: `${parent?.item?.key}: ${versionVal}` }) }));
+        }
+        if (hoveredItemIndex !== null) {
+            const hoveredItem = chartValues.find((item) => item.originalIndex === hoveredItemIndex);
+            return (_jsxs("div", { className: "ff-donut-chart-tooltip", style: { left: tooltipPosition.x, top: tooltipPosition.y }, children: [_jsx(Typography, { children: `${hoveredItem?.key} : ` }), _jsx(Typography, { children: legendType === 'memoryLegend'
+                            ? `${hoveredItem?.labelValue} ${hoveredItem?.unit}`
+                            : hoveredItem?.value }), hoveredItem?.version && (_jsx(Typography, { children: `Version: ${hoveredItem.version.join(', ')}` }))] }));
+        }
+        return null;
+    };
+    // Render legend based on the legend type.
+    const renderLegend = (legendData, legendType, legendPosition) => {
+        const legendCount = legendData.length;
+        const legendCountClass = legendCount > 6 ? 'ff-count-more' : `ff-count-${legendCount}`;
+        const isSideLegend = legendPosition === 'left' || legendPosition === 'right';
+        const handleToolTip = (legendItem, title, key) => {
+            return isLegendToolTip ? (_jsx(Tooltip, { placement: "bottom", title: title, children: legendItem }, key)) : (legendItem);
+        };
+        switch (legendType) {
+            case 'numberLegend': {
+                return (_jsx("div", { className: classNames('ff-legend-container', 'ff-number-legend', legendCountClass, { 'ff-side-legend': isSideLegend }), style: { '--donut-legend-gap': `${legendGap}px` }, children: legendData?.map((item) => {
+                        return (_jsxs("div", { className: "ff-legend-item ff-d-flex", onMouseEnter: () => {
+                                if (toNumber(item.value) > 0) {
+                                    setHoveredItemIndex(item.originalIndex);
+                                }
+                            }, onMouseLeave: () => setHoveredItemIndex(null), children: [_jsxs("div", { className: item.osIcon && item.osIcon.length > 0
+                                        ? 'ff-legend-item-version'
+                                        : 'ff-legend-item', children: [_jsxs(Typography, { fontSize: legendValueFontSize, fontWeight: "semi-bold", className: "ff-legend-value", color: item.color
+                                                ? item.color
+                                                : colorMapping[item.originalIndex % colorMapping.length], children: [item.osIcon && item.osIcon.length > 0 ? (_jsx(Icon, { name: item.osIcon })) : (String(item.labelValue || '00').padStart(2, '0') + ' '), showUnit && unit?.toUpperCase()] }), _jsx(Typography, { fontSize: legendKeyFontSize, className: "ff-legend-key", textAlign: "center", children: item.key.length > legendTruncate ? (_jsx(Tooltip, { placement: "bottom", title: isLegendToolTip ? item.key : '', children: `${item.key.slice(0, legendTruncate)}...` })) : (item.key) })] }), item.osIcon && item.osIcon.length > 0 && (_jsx(Typography, { fontSize: legendKeyFontSize, className: "ff-legend-key", textAlign: "center", fontWeight: "semi-bold", children: "OS version" })), item.version && item.version.length > 0 ? (_jsx("div", { className: "ff-legend-version-container", children: _jsx("div", { className: "ff-legend-version-grid", children: (() => {
+                                            const uniqueVersions = getUniqueVersions(item);
+                                            return uniqueVersions.map((ver, j) => (_jsxs("div", { onMouseEnter: () => setHoveredVersion({
+                                                    parentIndex: item.originalIndex,
+                                                    subIndex: j,
+                                                }), onMouseLeave: () => setHoveredVersion(null), className: "ff-legend-version-item", children: [_jsx("div", { className: "ff-legend-version-circle", style: { backgroundColor: ver.color } }), _jsx(Typography, { fontSize: legendWithVersionFontSize, children: ver.major })] }, j)));
+                                        })() }) })) : versionErrorText ? (_jsx(Typography, { textAlign: "center", className: "ff-legend-version-error", fontSize: 14, children: versionErrorText })) : null] }, item.originalIndex));
+                    }) }));
+            }
+            case 'pillLegend': {
+                return (_jsx("div", { className: "ff-legend-container ff-pill-legend", style: {
+                        '--donut-legend-gap': `${legendGap}px`,
+                        height: Number(containerHeight) - (DONUT_SVG_SIZE + chartGap),
+                    }, children: legendData?.map((item) => {
+                        const legendItem = (_jsxs("div", { className: "ff-legend-item", children: [_jsx(Typography, { as: "span", className: "ff-legend-capsule", fontSize: legendValueFontSize, style: {
+                                        backgroundColor: item?.color
+                                            ? item.color
+                                            : colorMapping[item.originalIndex % colorMapping.length],
+                                        ...capsuleStyle,
+                                    }, children: item?.labelValue === 0 ? '00' : item?.labelValue }), _jsx(Typography, { fontSize: legendKeyFontSize, className: "ff-legend-key", children: item?.key.length > legendTruncate
+                                        ? `${item?.key.slice(0, legendTruncate)}...`
+                                        : item?.key })] }, item.originalIndex));
+                        return handleToolTip(legendItem, item.key, item.originalIndex);
+                    }) }));
+            }
+            case 'memoryLegend': {
+                return (_jsx("div", { className: classNames('ff-legend-container', 'ff-memory-legend', legendCountClass, { 'ff-side-legend': isSideLegend }), style: { '--donut-legend-gap': `${legendGap}px` }, children: legendData?.map((item) => {
+                        const legendItem = (_jsxs("div", { className: "ff-legend-item", onMouseEnter: () => {
+                                if (toNumber(item.value) > 0) {
+                                    setHoveredItemIndex(item.originalIndex);
+                                }
+                            }, onMouseLeave: () => setHoveredItemIndex(null), children: [_jsxs(Typography, { fontSize: legendValueFontSize, fontWeight: "semi-bold", className: "ff-legend-value", color: item.color
+                                        ? item.color
+                                        : colorMapping[item.originalIndex % colorMapping.length], children: [item.labelValue, " ", item.unit] }), _jsx(Typography, { fontSize: legendKeyFontSize, className: "ff-legend-key", textAlign: "center", children: item.key.length > legendTruncate
+                                        ? `${item.key.slice(0, legendTruncate)}...`
+                                        : item.key })] }, item.originalIndex));
+                        return handleToolTip(legendItem, item.key, item.originalIndex);
+                    }) }));
+            }
+            case 'tableLegend': {
+                return (_jsx("div", { className: "ff-legend-table-wrapper", style: { height: tableHeight }, children: _jsxs("table", { className: "ff-legend-table", children: [_jsx("thead", { className: "ff-legend-table-thead", children: _jsxs("tr", { children: [_jsx("th", { className: "ff-table-header", style: { width: tableWidth, textAlign: 'left' }, children: "Name" }), _jsx("th", { className: "ff-table-header", style: { textAlign: 'left', paddingLeft: '10px' }, children: "%" }), _jsx("th", { className: "ff-table-header", style: { textAlign: 'left' }, children: "Count" })] }) }), _jsx("tbody", { className: "ff-legend-table-tbody", children: legendData?.map((item) => (_jsxs("tr", { className: "ff-legend-item", onMouseEnter: () => {
+                                        setHoveredItemIndex(item.originalIndex);
+                                    }, onMouseLeave: () => setHoveredItemIndex(null), children: [_jsxs("td", { className: "ff-legend-name", children: [_jsxs("span", { className: "ff-legend-capsule", style: {
+                                                        backgroundColor: item.color
+                                                            ? item.color
+                                                            : colorMapping[item.originalIndex % colorMapping.length],
+                                                    }, children: [_jsx(Typography, { fontSize: 10, children: item?.value === 0 ? '00' : item.value }), ' '] }), _jsx(Typography, { fontSize: 10, children: item.key })] }), _jsx("td", { className: "ff-legend-percentage", children: item.percentage
+                                                ? item.percentage
+                                                : typeof item.value === 'string'
+                                                    ? Math.round((parseFloat(item.value) / total) * 100)
+                                                    : total === 0
+                                                        ? 0
+                                                        : Math.round((item.value / total) * 100) }), _jsx("td", { className: "ff-legend-count", children: item.value })] }, item.originalIndex))) })] }) }));
+            }
+            default:
+                return null;
+        }
+    };
+    // Utility functions for text wrapping (unchanged)
+    function wrapText(text, maxWidth, fontSize) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        words.forEach((word) => {
+            const testLine = currentLine ? `${currentLine} ${word}` : word;
+            if (measureTextWidth(testLine, fontSize) <= maxWidth) {
+                currentLine = testLine;
+            }
+            else {
+                if (currentLine)
+                    lines.push(currentLine);
+                currentLine = word;
+            }
+        });
+        if (currentLine)
+            lines.push(currentLine);
+        return lines;
+    }
+    function measureTextWidth(text, fontSize) {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context)
+            throw new Error('Unable to get canvas context');
+        context.font = `${fontSize}px Poppins`;
+        return context.measureText(text).width;
+    }
+    const truncateChartText = (text) => {
+        const tempElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        tempElement.style.fontSize = `${subLabelFontSize}px`;
+        tempElement.style.visibility = 'hidden';
+        const svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgContainer.appendChild(tempElement);
+        document.body.appendChild(svgContainer);
+        tempElement.textContent = text;
+        let textWidth = tempElement.getComputedTextLength();
+        if (textWidth <= LABEL_MAX_WIDTH) {
+            document.body.removeChild(svgContainer);
+            return text;
+        }
+        let truncatedText = text;
+        while (textWidth > LABEL_MAX_WIDTH && truncatedText.length > 0) {
+            truncatedText = truncatedText.slice(0, -1);
+            tempElement.textContent = `${truncatedText}...`;
+            textWidth = tempElement.getComputedTextLength();
+        }
+        document.body.removeChild(svgContainer);
+        return `${truncatedText}...`;
+    };
+    const getCenterText = () => {
+        if (legendType === 'tableLegend' && hoveredItemIndex !== null) {
+            const hoveredItem = chartValues.find((item) => item.originalIndex === hoveredItemIndex);
+            return total === 0
+                ? '0%'
+                : `${Math.round(((hoveredItem?.value || 0) / total) * 100)}%`;
+        }
+        if (legendType === 'memoryLegend') {
+            return `${totalMemory}`;
+        }
+        if (isOnClick && hoveredItemIndex !== null) {
+            const hoveredItem = chartValues.find((item) => item.originalIndex === hoveredItemIndex);
+            return `${hoveredItem?.value}`;
+        }
+        return `${legendType === 'tableLegend'
+            ? `${chartValues.length}`
+            : Number.isInteger(total)
+                ? total
+                : total?.toFixed(2)} ${showUnit && unit ? unit.toUpperCase() : ''}`;
+    };
+    const getSubLabelText = () => {
+        if (legendType === 'tableLegend' && hoveredItemIndex !== null) {
+            const hoveredItem = chartValues.find((item) => item.originalIndex === hoveredItemIndex);
+            return truncateChartText(hoveredItem?.key || '');
+        }
+        if (isOnClick && hoveredItemIndex !== null) {
+            const hoveredItem = chartValues.find((item) => item.originalIndex === hoveredItemIndex);
+            return truncateChartText(hoveredItem?.key || '');
+        }
+        return truncateChartText(legendDetailsType);
+    };
+    const subLabelLines = useMemo(() => {
+        return wrapText(getSubLabelText(), LABEL_MAX_WIDTH, subLabelFontSize);
+    }, [
+        hoveredItemIndex,
+        selectedItemIndex,
+        legendType,
+        legendDetailsType,
+        chartValues,
+        total,
+        isOnClick,
+        subLabelFontSize,
+    ]);
+    useEffect(() => {
+        setTruncated(containsDots(subLabelLines));
+    }, [subLabelLines]);
+    return (_jsxs("div", { className: classNames('ff-dashboard-donut-chart-section', {
+            'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend',
+            'legend-position-bottom': legendPosition === 'bottom',
+            'legend-position-left': legendPosition === 'left',
+            'ff-overflow-visible': true,
+        }), style: { gap: `${chartGap}px` }, children: [_jsxs("div", { className: "ff-dashboard-donut-chart-svg-container", style: { zIndex: zIndex }, children: [_jsx("svg", { width: DONUT_SVG_SIZE, height: DONUT_SVG_SIZE, viewBox: `0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`, className: "ff-svg-overflow-visible", children: _jsxs("g", { transform: `translate(${radius + lineWidth / 2 + SVG_PADDING}, ${radius + lineWidth / 2 + SVG_PADDING})`, children: [total === 0 || nonZeroValues.length === 0 ? (_jsx("circle", { cx: 0, cy: 0, r: radius, fill: "none", stroke: "var(--tooltip-bg-color)", strokeWidth: lineWidth, strokeOpacity: 0.8, opacity: 0.2 })) : (computedArcs.map((arc, i) => renderArcSegment(arc, i))), showOnlyLabel && (_jsx("text", { x: "0", y: "5", className: "ff-svg-label-text", textAnchor: "middle", fill: colorMapping[3], style: { fontSize: `${labelFontSize}px` }, children: wrapText(legendDetailsType, LABEL_MAX_WIDTH, labelFontSize).map((line, index, lines) => (_jsx("tspan", { x: "0", dy: index === 0 ? (lines.length > 1 ? -8 : 0) : 24, children: line }, index))) })), !showOnlyLabel && (_jsxs(_Fragment, { children: [_jsx("text", { x: "0", y: labelYoffSet, textAnchor: "middle", fill: colorMapping[3], style: { fontSize: `${labelFontSize}px` }, children: wrapText(getCenterText(), LABEL_MAX_WIDTH, labelFontSize).map((line, index) => (_jsx("tspan", { x: "0", dy: index === 0 ? 0 : labelFontSize, children: selectedItemIndex !== null &&
+                                                    chartValues.find((item) => item.originalIndex === selectedItemIndex)
+                                                    ? index === 0
+                                                        ? chartValues.find((item) => item.originalIndex === selectedItemIndex)?.value
+                                                        : null
+                                                    : apiDataLabel
+                                                        ? apiDataLabel
+                                                        : line }, index))) }), _jsx("text", { x: "0", y: subLabelYoffSet, textAnchor: "middle", fill: "var(--text-color)", style: { fontSize: `${subLabelFontSize}px` }, children: subLabelLines?.map((line, index) => (_jsx("tspan", { x: "0", dy: index === 0 ? 0 : subLabelFontSize, fill: (selectedItemIndex !== null &&
+                                                    chartValues.find((item) => item.originalIndex === selectedItemIndex)?.color) ||
+                                                    (hoveredItemIndex !== null &&
+                                                        isOnClick &&
+                                                        chartValues.find((item) => item.originalIndex === hoveredItemIndex)?.color) ||
+                                                    '', onMouseEnter: (e) => handleCenterTextMouseEnter(legendDetailsType, e), onMouseLeave: handleCenterTextMouseLeave, onMouseMove: handleCenterTextMouseMove, className: "center-text-tooltip", children: line }, index))) })] }))] }) }), showTooltip && renderTooltip(), centerTextTooltip.show && isTruncated && (_jsx("div", { className: "ff-donut-chart-tooltip", style: {
+                            left: centerTextTooltip.position.x,
+                            top: centerTextTooltip.position.y,
+                            zIndex: zIndex + 1,
+                        }, children: _jsx(Typography, { children: centerTextTooltip?.content }) }))] }), isLegendDetails && renderLegend(chartValues, legendType, legendPosition)] }));
+};
+export default DashboardDonutChart;
+//# sourceMappingURL=DashboardDonutChart.js.map