pixel-react 1.5.4 → 1.5.6

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -1,339 +1,482 @@
-import React, { useState } from 'react';
-import { DashboardDonutChartProps, ChartItem, LegendType } from './types';
-import Typography from '../../Typography';
-import './DashBoardDonutChart.scss';
-import classNames from 'classnames';
-
-const calculateArc = (
-  x: number,
-  y: number,
-  radius: number,
-  startAngle: number,
-  endAngle: number
-): string => {
-  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 colorMapping = [
-  'var(--status-success-text-color)',
-  'var(--status-rejected-text-color)',
-  'var(--status-warning-text-color)',
-  'var(--status-skipped-text-color)',
-  'var(--brand-color)',
-];
-
-const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
-  radius = 60,
-  lineWidth = 15,
-  statusValues = [],
-  gapAngle = 0,
-  legendDetailsType = '',
-  isLegendDetails = true,
-  legendType = 'numberLegend',
-  showOnlyLabel = false,
-  unit,
-  showUnit = true,
-}) => {
-  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
-  const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
-  const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
-
-  // Calculate angles and gaps
-  const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
-  let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
-  let currentAngle = Math.PI / 2;
-
-  const MIN_PERCENTAGE = 1;
-  const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
-  let minAngleTotal = 0;
-
-  // Adjust for small angles
-  nonZeroValues.forEach(({ value }) => {
-    const valuePercentage = value / total;
-    const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
-    minAngleTotal += angle;
-    remainingAngle -= angle;
-  });
-
-  const handleMouseEnter = (itemIndex: number) => {
-    setHoveredItemIndex(itemIndex);
-    setShowTooltip(true);
-  };
-  const handleMouseLeave = () => {
-    setTooltipPosition({ x: 0, y: 0 });
-    setHoveredItemIndex(null);
-    setShowTooltip(false);
-  };
-  const handleMouseMove = (event: React.MouseEvent) => {
-    setTooltipPosition({
-      x: event.clientX + 10,
-      y: event.clientY + 10,
-    });
-  };
-
-  const SVG_PADDING = 4;
-  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
-
-  const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
-    const isFullCircle = nonZeroValues.length === 1;
-
-    // Full circle handling
-    const foregroundArcPath = isFullCircle
-      ? calculateArc(0, 0, radius, 0, 2 * Math.PI)
-      : calculateArc(0, 0, radius, currentAngle, endAngle);
-
-    currentAngle = endAngle + gapAngle;
-
-    return (
-      <g key={i}>
-        {/* Main arc */}
-        <path
-          d={foregroundArcPath}
-          fill="none"
-          stroke={
-            chartItem?.color
-              ? chartItem.color
-              : colorMapping[i % colorMapping.length]
-          }
-          strokeWidth={lineWidth}
-          onMouseEnter={() => handleMouseEnter(i)}
-          onMouseLeave={handleMouseLeave}
-          strokeOpacity={0.8}
-          onMouseMove={handleMouseMove}
-        />
-      </g>
-    );
-  };
-
-  const renderTooltip = () => {
-    return (
-      <div
-        className="ff-donut-chart-tooltip"
-        style={{
-          left: tooltipPosition.x,
-          top: tooltipPosition.y,
-        }}
-      >
-        <Typography fontSize={12}>
-          {hoveredItemIndex !== null &&
-            `${nonZeroValues[hoveredItemIndex]?.key} : `}
-        </Typography>
-        <Typography fontSize={12}>
-          {hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value}
-        </Typography>
-      </div>
-    );
-  };
-
-  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
-    switch (legendType) {
-      case 'numberLegend':
-        return (
-          <div className="ff-legend-container numberLegend">
-            {legendData.map((item, index) => (
-              <div className="ff-legend-item" key={index}>
-                <Typography
-                  fontSize={20}
-                  fontWeight="semi-bold"
-                  className="ff-legend-value"
-                  color={
-                    item.color
-                      ? item.color
-                      : colorMapping[index % colorMapping.length]
-                  }
-                >
-                  {item.value} {showUnit && unit?.toUpperCase()}
-                </Typography>
-                <Typography fontSize={10} className="ff-legend-key">
-                  {item.key}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        );
-
-      case 'pillLegend':
-        return (
-          <div className="ff-legend-container pillLegend">
-            {legendData.map((item, index) => (
-              <div className="ff-legend-item" key={index}>
-                <span
-                  className="ff-legend-capsule"
-                  style={{
-                    backgroundColor: item.color
-                      ? item.color
-                      : colorMapping[index % colorMapping.length],
-                  }}
-                >
-                  <Typography fontSize={10}>{item.value}</Typography>
-                </span>
-                <Typography className="ff-legend-key">{item.key}</Typography>
-              </div>
-            ))}
-          </div>
-        );
-
-      case 'memoryLegend':
-        return (
-          <div className="ff-legend-container memoryLegend">
-            {legendData.map((item, index) => (
-              <React.Fragment key={index}>
-                <div className="ff-legend-item">
-                  <Typography
-                    fontSize={22}
-                    fontWeight="medium"
-                    className="ff-legend-value"
-                    color={
-                      item.color
-                        ? item.color
-                        : colorMapping[index % colorMapping.length]
-                    }
-                  >
-                    {item.value} {showUnit && unit?.toUpperCase()}
-                  </Typography>
-                  <Typography className="ff-legend-key">{item.key}</Typography>
-                </div>
-              </React.Fragment>
-            ))}
-          </div>
-        );
-
-      case 'tableLegend':
-        return (
-          <div className="ff-legend-table-wrapper">
-            <table className="ff-legend-table tableLegend">
-              <thead>
-                <tr>
-                  <th className="ff-table-header">Name</th>
-                  <th className="ff-table-header">%</th>
-                  <th className="ff-table-header">Count</th>
-                </tr>
-              </thead>
-              <tbody>
-                {legendData.map((item, index) => (
-                  <tr
-                    className="ff-legend-item"
-                    key={index}
-                    onMouseEnter={() => setHoveredItemIndex(index)}
-                    onMouseLeave={() => setHoveredItemIndex(null)}
-                  >
-                    <td className="ff-legend-name">
-                      <span
-                        className="ff-legend-capsule"
-                        style={{
-                          backgroundColor: item.color
-                            ? item.color
-                            : colorMapping[index % colorMapping.length],
-                        }}
-                      >
-                        <Typography fontSize={10}>{item.value}</Typography>
-                      </span>
-                      <Typography fontSize={10}>{item.key}</Typography>
-                    </td>
-                    <td className="ff-legend-percentage">
-                      {((item.value / total) * 100).toFixed(1)}
-                    </td>
-                    <td className="ff-legend-count">{item.value}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div
-      className={classNames('ff-dashboard-donut-chart-section', {
-        'ff-dashboard-donut-chart-section-table-legend':
-          legendType === 'tableLegend',
-      })}
-    >
-      <div className="ff-dashboard-donut-chart-svg-container">
-        <svg
-          width={DONUT_SVG_SIZE}
-          height={DONUT_SVG_SIZE}
-          viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
-        >
-          <g
-            transform={`translate(${radius + lineWidth + SVG_PADDING}, ${
-              radius + lineWidth + SVG_PADDING
-            })`}
-          >
-            {nonZeroValues?.map((status, i) => {
-              const valuePercentage = status.value / total;
-              let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
-              angle += remainingAngle * (valuePercentage / total);
-              const endAngle = currentAngle + angle;
-
-              return renderArc(status, endAngle, i);
-            })}
-            {showOnlyLabel ? (
-              <text
-                x="0"
-                y="5"
-                className="ff-svg-label-text"
-                textAnchor="middle"
-                fill={colorMapping[3]}
-              >
-                {legendDetailsType}
-              </text>
-            ) : (
-              (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
-                <>
-                  <text x="0" y="5" textAnchor="middle" fill={colorMapping[3]}>
-                    {legendType === 'tableLegend' &&
-                    hoveredItemIndex !== null &&
-                    nonZeroValues[hoveredItemIndex]
-                      ? `${(
-                          (nonZeroValues[hoveredItemIndex].value / total) *
-                          100
-                        ).toFixed(1)}%`
-                      : `${total} ${
-                          showUnit && unit ? `${unit.toUpperCase()}` : ''
-                        }`}
-                  </text>
-
-                  <text
-                    x="0"
-                    y="26"
-                    textAnchor="middle"
-                    fill="var(--text-color)"
-                  >
-                    {legendType === 'tableLegend' &&
-                    hoveredItemIndex !== null &&
-                    nonZeroValues[hoveredItemIndex]
-                      ? nonZeroValues[hoveredItemIndex].key
-                      : legendDetailsType}
-                  </text>
-                </>
-              )
-            )}
-          </g>
-        </svg>
-        {legendType === 'tableLegend' && (
-          <div>
-            <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
-            <Typography> {`Total ${legendDetailsType} - ${total}`} </Typography>
-          </div>
-        )}
-        {showTooltip && renderTooltip()}
-      </div>
-      {isLegendDetails && renderLegend(nonZeroValues, legendType)}
-    </div>
-  );
-};
-
-export default DashboardDonutChart;
+import React, { useState } from 'react';
+import {
+  DashboardDonutChartProps,
+  ChartItem,
+  LegendType,
+  NormalizedChartItem,
+} from './types';
+import Typography from '../../Typography';
+import './DashBoardDonutChart.scss';
+import classNames from 'classnames';
+import {
+  normalizeStorageValue,
+  formatMemoryValue,
+} from '../../../assets/utils/functionUtils';
+
+const calculateArc = (
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number
+): string => {
+  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 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: React.FC<DashboardDonutChartProps> = ({
+  radius = 60,
+  lineWidth = 15,
+  statusValues = [],
+  gapAngle = 0,
+  legendDetailsType = '',
+  isLegendDetails = true,
+  legendType = 'numberLegend',
+  showOnlyLabel = false,
+  unit,
+  showUnit = true,
+  labelFontSize = 24,
+  subLabelFontSize = 14,
+}) => {
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  // Normalize data if legendType is 'memoryLegend'
+  const normalizedStatusValues: NormalizedChartItem[] =
+    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 as number,
+            labelValue: item.value,
+            unit: 'B',
+          }; // Default to bytes
+        })
+      : statusValues.map((item) => {
+          if (typeof item.value === 'string') {
+            console.warn(
+              `String value "${item.value}" is not supported for legendType "${legendType}". Defaulting to 0.`
+            );
+            return { ...item, normalizedValue: 0, unit: '', labelValue: 0 };
+          }
+          return {
+            ...item,
+            normalizedValue: item.value as number,
+            unit: '',
+            labelValue: item.value,
+          };
+        });
+
+  // Use normalized values for chart calculations
+  const chartValues = normalizedStatusValues.map((item) => ({
+    key: item.key,
+    value: item.normalizedValue ?? (item.value as number),
+    color: item.color,
+    unit: item.unit,
+    labelValue: item.labelValue,
+  }));
+
+  const total = chartValues?.reduce((acc, { value }) => acc + value, 0);
+  const nonZeroValues = chartValues?.filter(({ value }) => value > 0);
+
+  const totalMemory = formatMemoryValue(total);
+
+  // Calculate angles and gaps
+  const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
+  let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
+  let currentAngle = Math.PI / 2;
+
+  const MIN_PERCENTAGE = 1;
+  const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
+  let minAngleTotal = 0;
+
+  // Adjust for small angles
+  nonZeroValues.forEach(({ value }) => {
+    const valuePercentage = value / total;
+    const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+    minAngleTotal += angle;
+    remainingAngle -= angle;
+  });
+
+  const handleMouseEnter = (itemIndex: number) => {
+    setHoveredItemIndex(itemIndex);
+    setShowTooltip(true);
+  };
+  const handleMouseLeave = () => {
+    setTooltipPosition({ x: 0, y: 0 });
+    setHoveredItemIndex(null);
+    setShowTooltip(false);
+  };
+  const handleMouseMove = (event: React.MouseEvent) => {
+    setTooltipPosition({
+      x: event.clientX + 10,
+      y: event.clientY + 10,
+    });
+  };
+
+  const SVG_PADDING = 3;
+  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
+  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
+
+  const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
+    const isFullCircle = nonZeroValues.length === 1;
+
+    // Full circle handling
+    const foregroundArcPath = isFullCircle
+      ? calculateArc(0, 0, radius, 0, 2 * Math.PI)
+      : calculateArc(0, 0, radius, currentAngle, endAngle);
+
+    currentAngle = endAngle + gapAngle;
+
+    return (
+      <g key={i}>
+        {/* Main arc */}
+        <path
+          d={foregroundArcPath}
+          fill="none"
+          stroke={
+            chartItem?.color
+              ? chartItem.color
+              : colorMapping[i % colorMapping.length]
+          }
+          strokeWidth={lineWidth}
+          onMouseEnter={() => handleMouseEnter(i)}
+          onMouseLeave={handleMouseLeave}
+          strokeOpacity={0.8}
+          onMouseMove={handleMouseMove}
+        />
+      </g>
+    );
+  };
+
+  const renderTooltip = () => {
+    return (
+      <div
+        className="ff-donut-chart-tooltip"
+        style={{
+          left: tooltipPosition.x,
+          top: tooltipPosition.y,
+        }}
+      >
+        <Typography fontSize={12}>
+          {hoveredItemIndex !== null &&
+            `${nonZeroValues[hoveredItemIndex]?.key} : `}
+        </Typography>
+        <Typography fontSize={12}>
+          {hoveredItemIndex !== null &&
+            (legendType === 'memoryLegend'
+              ? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}`
+              : nonZeroValues[hoveredItemIndex]?.value)}
+        </Typography>
+      </div>
+    );
+  };
+
+  const renderLegend = (
+    legendData: NormalizedChartItem[],
+    legendType: LegendType
+  ) => {
+    switch (legendType) {
+      case 'numberLegend':
+        return (
+          <div className="ff-legend-container numberLegend">
+            {legendData.map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <Typography
+                  fontSize={20}
+                  fontWeight="semi-bold"
+                  className="ff-legend-value"
+                  color={
+                    item.color
+                      ? item.color
+                      : colorMapping[index % colorMapping.length]
+                  }
+                >
+                  {item.value} {showUnit && unit?.toUpperCase()}
+                </Typography>
+                <Typography fontSize={10} className="ff-legend-key">
+                  {item.key}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      case 'pillLegend':
+        return (
+          <div className="ff-legend-container pillLegend">
+            {legendData.map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <span
+                  className="ff-legend-capsule"
+                  style={{
+                    backgroundColor: item.color
+                      ? item.color
+                      : colorMapping[index % colorMapping.length],
+                  }}
+                >
+                  <Typography fontSize={10}>{item.value}</Typography>
+                </span>
+                <Typography className="ff-legend-key">{item.key}</Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      case 'memoryLegend':
+        return (
+          <div className="ff-legend-container memoryLegend">
+            {legendData.map((item, index) => (
+              <React.Fragment key={index}>
+                <div className="ff-legend-item">
+                  <Typography
+                    fontSize={22}
+                    fontWeight="medium"
+                    className="ff-legend-value"
+                    color={
+                      item.color
+                        ? item.color
+                        : colorMapping[index % colorMapping.length]
+                    }
+                  >
+                    {item.labelValue} {item.unit}
+                  </Typography>
+                  <Typography className="ff-legend-key">{item.key}</Typography>
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        );
+
+      case 'tableLegend':
+        return (
+          <div className="ff-legend-table-wrapper">
+            <table className="ff-legend-table tableLegend">
+              <thead>
+                <tr>
+                  <th className="ff-table-header">Name</th>
+                  <th className="ff-table-header">%</th>
+                  <th className="ff-table-header">Count</th>
+                </tr>
+              </thead>
+              <tbody>
+                {legendData.map((item, index) => (
+                  <tr
+                    className="ff-legend-item"
+                    key={index}
+                    onMouseEnter={() => setHoveredItemIndex(index)}
+                    onMouseLeave={() => setHoveredItemIndex(null)}
+                  >
+                    <td className="ff-legend-name">
+                      <span
+                        className="ff-legend-capsule"
+                        style={{
+                          backgroundColor: item.color
+                            ? item.color
+                            : colorMapping[index % colorMapping.length],
+                        }}
+                      >
+                        <Typography fontSize={10}>{item.value}</Typography>
+                      </span>
+                      <Typography fontSize={10}>{item.key}</Typography>
+                    </td>
+                    <td className="ff-legend-percentage">
+                      {typeof item.value === 'string'
+                        ? ((parseFloat(item.value) / total) * 100).toFixed(1)
+                        : ((item.value / total) * 100).toFixed(1)}
+                    </td>
+                    <td className="ff-legend-count">{item.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  function wrapText(
+    text: string,
+    maxWidth: number,
+    fontSize: number
+  ): string[] {
+    const words: string[] = text.split(' ');
+    const lines: string[] = [];
+    let currentLine: string = '';
+
+    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: string, fontSize: number): number {
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Unable to get canvas context');
+    }
+    context.font = `${fontSize}px Poppins`; // Font size and family of SVG font
+    return context.measureText(text).width;
+  }
+
+  return (
+    <div
+      className={classNames('ff-dashboard-donut-chart-section', {
+        'ff-dashboard-donut-chart-section-table-legend':
+          legendType === 'tableLegend',
+      })}
+    >
+      <div className="ff-dashboard-donut-chart-svg-container">
+        <svg
+          width={DONUT_SVG_SIZE}
+          height={DONUT_SVG_SIZE}
+          viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
+        >
+          <g
+            transform={`translate(${radius + lineWidth / 2 + SVG_PADDING}, ${
+              radius + lineWidth / 2 + SVG_PADDING
+            })`}
+          >
+            {nonZeroValues?.map((status, i) => {
+              const valuePercentage = status.value / total;
+              let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
+              angle += remainingAngle * (valuePercentage / total);
+              const endAngle = currentAngle + angle;
+
+              return renderArc(status, endAngle, i);
+            })}
+
+            {showOnlyLabel ? (
+              <text
+                x="0"
+                y="5"
+                className="ff-svg-label-text"
+                textAnchor="middle"
+                fill={colorMapping[3]}
+                style={{ fontSize: `${labelFontSize}px` }}
+              >
+                {wrapText(
+                  legendDetailsType,
+                  LABEL_MAX_WIDTH,
+                  labelFontSize
+                ).map((line, index, lines) => (
+                  <tspan
+                    x="0"
+                    dy={index === 0 ? (lines.length > 1 ? -8 : 0) : 24}
+                    key={index}
+                  >
+                    {line}
+                  </tspan>
+                ))}
+              </text>
+            ) : (
+              (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
+                <>
+                  <text
+                    x="0"
+                    y="5"
+                    textAnchor="middle"
+                    fill={colorMapping[3]}
+                    style={{ fontSize: `${labelFontSize}px` }}
+                  >
+                    {wrapText(
+                      legendType === 'tableLegend' &&
+                        hoveredItemIndex !== null &&
+                        nonZeroValues[hoveredItemIndex]
+                        ? `${(
+                            (nonZeroValues[hoveredItemIndex].value / total) *
+                            100
+                          ).toFixed(1)}%`
+                        : legendType === 'memoryLegend'
+                        ? `${totalMemory}`
+                        : `${total} ${
+                            showUnit && unit ? `${unit.toUpperCase()}` : ''
+                          }`,
+                      LABEL_MAX_WIDTH,
+                      labelFontSize
+                    ).map((line, index) => (
+                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                        {line}
+                      </tspan>
+                    ))}
+                  </text>
+
+                  <text
+                    x="0"
+                    y="26"
+                    textAnchor="middle"
+                    fill="var(--text-color)"
+                    style={{ fontSize: `${subLabelFontSize}px` }}
+                  >
+                    {wrapText(
+                      legendType === 'tableLegend' &&
+                        hoveredItemIndex !== null &&
+                        nonZeroValues[hoveredItemIndex]
+                        ? nonZeroValues[hoveredItemIndex].key
+                        : legendDetailsType,
+                      LABEL_MAX_WIDTH,
+                      subLabelFontSize
+                    ).map((line, index) => (
+                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                        {line}
+                      </tspan>
+                    ))}
+                  </text>
+                </>
+              )
+            )}
+          </g>
+        </svg>
+
+        {legendType === 'tableLegend' && (
+          <div>
+            <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
+            <Typography> {`Total ${legendDetailsType} - ${total}`} </Typography>
+          </div>
+        )}
+        {showTooltip && renderTooltip()}
+      </div>
+      {isLegendDetails && renderLegend(nonZeroValues, legendType)}
+    </div>
+  );
+};
+
+export default DashboardDonutChart;