pixel-react 1.8.4 → 1.8.6

package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx

@@ -1,306 +1,310 @@
-import React, { useState } from 'react';
-import { MultiRadialChartProps, ChartItem, LegendType } from './types';
-import './MultiRadialChart.scss';
-import Typography from '../../Typography';
-import { truncateText } from '../../../utils/truncateText/truncateText';
-
-const calculateArc = (
-  centerX: number,
-  centerY: number,
-  radius: number,
-  startAngle: number,
-  endAngle: number
-) => {
-  const startX = centerX + radius * Math.cos(startAngle);
-  const startY = centerY + radius * Math.sin(startAngle);
-  const endX = centerX + radius * Math.cos(endAngle);
-  const endY = centerY + 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 MultiRadialChart: React.FC<MultiRadialChartProps> = ({
-  radius,
-  lineWidth,
-  lineCap,
-  barValues,
-  labelHeading,
-  legendType = 'numberLegend',
-  isLegendDetails = true,
-  labelFontSize = 12,
-  subLabelFontSize = 8,
-}) => {
-  const [tooltip, setTooltip] = useState<{
-    visible: boolean;
-    x: number;
-    y: number;
-    content: string;
-  }>({
-    visible: false,
-    x: 0,
-    y: 0,
-    content: '',
-  });
-
-  const totalBarValue = barValues.reduce(
-    (acc, status) => acc + status.value,
-    0
-  );
-  const baseRadius = radius;
-  const radiusIncrement = lineWidth + 10;
-  const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
-  const svgSize = 2 * (maxRadius + lineWidth);
-  const reversedBarValues = [...barValues].reverse();
-
-  const labelLines = labelHeading.trim().split(' ');
-
-  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
-    switch (legendType) {
-      case 'numberLegend':
-        return (
-          <div className="ff-legend-container ff-number-legend">
-            {legendData.map((item, index) => (
-              <div className="ff-legend-item" key={index}>
-                <Typography
-                  fontSize={20}
-                  fontWeight="semi-bold"
-                  className="ff-legend-value"
-                  color={item.arcColor}
-                >
-                  {item.value}
-                </Typography>
-                <Typography
-                  fontSize={10}
-                  className="ff-legend-key"
-                  color="  var(--text-color)"
-                >
-                  {item.label}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        );
-
-      case 'pillLegend':
-        return (
-          <div className={`ff-legend-container ff-pill-legend`}>
-            {legendData.reverse().map((item, index) => (
-              <div className="ff-legend-item" key={index}>
-                <span
-                  className="ff-legend-capsule"
-                  style={{
-                    backgroundColor: item.arcColor,
-                  }}
-                >
-                  <Typography fontSize={10}>{item.value}</Typography>
-                </span>
-                <Typography
-                  className="ff-legend-key"
-                  color="  var(--text-color)"
-                >
-                  {item.label}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const handleMouseEnter = (e: React.MouseEvent, content: string) => {
-    const { clientX, clientY } = e;
-    setTooltip({
-      visible: true,
-      x: clientX,
-      y: clientY,
-      content: content,
-    });
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    const { clientX, clientY } = e;
-    setTooltip((prev) => ({
-      ...prev,
-      x: clientX,
-      y: clientY,
-    }));
-  };
-
-  const handleMouseLeave = () => {
-    setTooltip({ visible: false, x: 0, y: 0, content: '' });
-  };
-
-  const textData = (text: string, maxLength: number) => {
-    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
-  };
-  const getArcColorFromTooltip = () => {
-    if (!tooltip.visible) return '';
-    const value = tooltip.content.split(':')[1]?.trim();
-    const matchingBar = barValues.find((val) => `${val.value}` === value);
-    return matchingBar?.arcColor || '';
-  };
-  return (
-    <div
-      className={`ff-multi-radial-chart-container ${
-        legendType === 'numberLegend'
-          ? 'ff-multi-radial-chart-number'
-          : 'ff-multi-radial-chart-pill'
-      }`}
-    >
-      <div className="relative" style={{ width: svgSize, height: svgSize }}>
-        <svg
-          width={svgSize}
-          height={svgSize}
-          viewBox={`0 0 ${svgSize} ${svgSize}`}
-          className="absolute top-0 left-0"
-        >
-          <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
-            {reversedBarValues.map((values, i) => {
-              const originalIndex = barValues.length - 1 - i;
-              const percentage = values.value / totalBarValue;
-              const angleIncrement = percentage * 2 * Math.PI;
-              let startAngle = -Math.PI / 2;
-              let endAngle = startAngle + angleIncrement;
-              if (values.value === totalBarValue) {
-                startAngle = 0;
-                endAngle = 2 * Math.PI;
-              }
-              const currentRadius =
-                baseRadius + radiusIncrement * originalIndex;
-              const backGroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                0,
-                2 * Math.PI
-              );
-
-              const foregroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                startAngle,
-                endAngle
-              );
-              return (
-                <g key={originalIndex}>
-                  <path
-                    d={backGroundArcPath}
-                    fill="none"
-                    stroke={values.arcBackgroundColor}
-                    strokeWidth={lineWidth}
-                    className="transition-all duration-300"
-                  />
-                  <path
-                    d={foregroundArcPath}
-                    fill="none"
-                    stroke={values.arcColor}
-                    strokeWidth={lineWidth}
-                    strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
-                    onMouseEnter={(e) =>
-                      handleMouseEnter(
-                        e,
-                        `${values.barLabel || 'Data'}: ${values.value}`
-                      )
-                    }
-                    onMouseMove={handleMouseMove}
-                    onMouseLeave={handleMouseLeave}
-                    style={{
-                      pointerEvents: 'stroke',
-                    }}
-                  />
-                </g>
-              );
-            })}
-            <text
-              x="0"
-              y="-20"
-              fill={getArcColorFromTooltip()}
-              textAnchor="middle"
-              dominantBaseline="central"
-            >
-              {tooltip.visible ? (
-                <>
-                  <tspan x="0" dy={10} className="ff-center-text-tooltip">
-                    {textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
-                  </tspan>
-                  <tspan x="0" dy={18} className="ff-center-text-tooltip">
-                    {textData(tooltip.content.split(':')[0] ?? '', 8)}
-                  </tspan>
-                </>
-              ) : (
-                <>
-                  {labelLines.map((line, index) => {
-                    if (index === 0) {
-                      const [firstWord, ...restWords] = line.split(' ');
-                      return (
-                        <tspan key={index}>
-                          <tspan
-                            x="0"
-                            dy="0"
-                            style={{ fontSize: `${labelFontSize}px` }}
-                            className="ff-center-first-text"
-                          >
-                            {firstWord}
-                          </tspan>
-                          <tspan
-                            x="0"
-                            dy={18}
-                            style={{ fontSize: `${subLabelFontSize}px` }}
-                            className="ff-center-text"
-                          >
-                            {restWords.join(' ')}
-                          </tspan>
-                        </tspan>
-                      );
-                    }
-                    return (
-                      <tspan
-                        key={index}
-                        x="0"
-                        dy={index === 0 ? 0 : 18}
-                        className="ff-center-text"
-                        style={{ fontSize: `${subLabelFontSize}px` }}
-                      >
-                        {line}
-                      </tspan>
-                    );
-                  })}
-                </>
-              )}
-            </text>
-          </g>
-        </svg>
-        {tooltip.visible && (
-          <div
-            className="ff-multi-radial-tooltip"
-            style={{
-              top: tooltip.y + 10,
-              left: tooltip.x + 10,
-              zIndex: 1000,
-            }}
-          >
-            {tooltip.content}
-          </div>
-        )}
-      </div>
-      {isLegendDetails &&
-        renderLegend(
-          barValues.map((value) => ({
-            ...value,
-            label: truncateText(value?.barLabel, 8),
-            key: value.value.toString(),
-          })),
-          legendType
-        )}
-    </div>
-  );
-};
-
-export default MultiRadialChart;
+import React, { useState } from 'react';
+import { MultiRadialChartProps, ChartItem, LegendType } from './types';
+import './MultiRadialChart.scss';
+import Typography from '../../Typography';
+const calculateArc = (
+  centerX: number,
+  centerY: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number
+) => {
+  const startX = centerX + radius * Math.cos(startAngle);
+  const startY = centerY + radius * Math.sin(startAngle);
+  const endX = centerX + radius * Math.cos(endAngle);
+  const endY = centerY + 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 MultiRadialChart: React.FC<MultiRadialChartProps> = ({
+  radius,
+  lineWidth,
+  lineCap,
+  barValues,
+  labelHeading,
+  legendType = 'numberLegend',
+  isLegendDetails = true,
+  labelFontSize = 12,
+  subLabelFontSize = 8,
+}) => {
+  const [tooltip, setTooltip] = useState<{
+    visible: boolean;
+    x: number;
+    y: number;
+    content: string;
+  }>({
+    visible: false,
+    x: 0,
+    y: 0,
+    content: '',
+  });
+
+  const totalBarValue = barValues.reduce(
+    (acc, status) => acc + status.value,
+    0
+  );
+  const baseRadius = radius;
+  const radiusIncrement = lineWidth + 10;
+  const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
+  const svgSize = 2 * (maxRadius + lineWidth);
+  const reversedBarValues = [...barValues].reverse();
+
+  const labelLines = labelHeading.trim().split(' ');
+
+  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
+    switch (legendType) {
+      case 'numberLegend':
+        return (
+          <div className="ff-legend-container ff-number-legend">
+            {legendData.map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <Typography
+                  fontSize={20}
+                  fontWeight="semi-bold"
+                  className="ff-legend-value"
+                  color={item.arcColor}
+                >
+                  {item.value}
+                </Typography>
+                <Typography
+                  fontSize={10}
+                  className="ff-legend-key"
+                  color="  var(--text-color)"
+                >
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      case 'pillLegend':
+        return (
+          <div className="ff-legend-container ff-pill-legend">
+            {legendData.reverse().map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <span
+                  className="ff-legend-capsule"
+                  style={{
+                    backgroundColor: item.arcColor,
+                  }}
+                >
+                  <Typography fontSize={10} color="var(--tooltip-text-color)">{item.value}</Typography>
+                </span>
+                <Typography className="ff-legend-key">
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent, content: string) => {
+    const { clientX, clientY } = e;
+    setTooltip({
+      visible: true,
+      x: clientX,
+      y: clientY,
+      content: content,
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const { clientX, clientY } = e;
+    setTooltip((prev) => ({
+      ...prev,
+      x: clientX,
+      y: clientY,
+    }));
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip({ visible: false, x: 0, y: 0, content: '' });
+  };
+
+  const textData = (text: string, maxLength: number) => {
+    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+  };
+
+  const getArcColorFromTooltip = () => {
+    if (!tooltip.visible) return '';
+    const valueString = tooltip.content.split(':')[1]?.trim(); 
+    const value = valueString ? Number(valueString) : undefined; 
+    if (value === undefined) return ''; 
+    const matchingBar = barValues.find((val) => val.value === value); 
+    return matchingBar?.arcColor || ''; 
+  };
+
+  return (
+    <div
+      className={`ff-multi-radial-chart-container ${
+        legendType === 'numberLegend'
+          ? 'ff-multi-radial-chart-number'
+          : 'ff-multi-radial-chart-pill'
+      }`}
+    >
+      <div className="relative" style={{ width: svgSize, height: svgSize }}>
+        <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
+          <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
+            {reversedBarValues.map((values, i) => {
+              const originalIndex = barValues.length - 1 - i;
+              const percentage = values.value / totalBarValue;
+              const angleIncrement = percentage * 2 * Math.PI;
+              let startAngle = -Math.PI / 2; 
+              let endAngle = startAngle + angleIncrement;
+              if (values.value === totalBarValue) {
+                startAngle = 0;
+                endAngle = 2 * Math.PI;
+              }
+              const currentRadius = baseRadius + radiusIncrement * originalIndex;
+
+              const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
+
+              // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
+              if (values.value === 0) {
+                const dotX = currentRadius * Math.cos(-Math.PI / 2);
+                const dotY = currentRadius * Math.sin(-Math.PI / 2); 
+                return (
+                  <g key={originalIndex}>
+                    <path
+                      d={backGroundArcPath}
+                      fill="none"
+                      stroke={values.arcBackgroundColor}
+                      strokeWidth={lineWidth}
+                      className="transition-all duration-300"
+                    />
+                    <circle
+                      cx={dotX}
+                      cy={dotY}
+                      r={5}
+                      fill={values.arcColor}
+                      onMouseEnter={(e) =>
+                        handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                      }
+                      onMouseMove={handleMouseMove}
+                      onMouseLeave={handleMouseLeave}
+                    />
+                  </g>
+                );
+              }
+
+              const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
+              return (
+                <g key={originalIndex}>
+                  <path
+                    d={backGroundArcPath}
+                    fill="none"
+                    stroke={values.arcBackgroundColor}
+                    strokeWidth={lineWidth}
+                    className="transition-all duration-300"
+                  />
+                  <path
+                    d={foregroundArcPath}
+                    fill="none"
+                    stroke={values.arcColor}
+                    strokeWidth={lineWidth}
+                    strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
+                    onMouseEnter={(e) =>
+                      handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                    }
+                    onMouseMove={handleMouseMove}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                      pointerEvents: 'stroke',
+                    }}
+                  />
+                </g>
+              );
+            })}
+            <text
+              x="0"
+              y="-20"
+              fill={getArcColorFromTooltip()}
+              textAnchor="middle"
+              dominantBaseline="central"
+            >
+              {tooltip.visible ? (
+                <>
+                  <tspan x="0" dy={10} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
+                  </tspan>
+                  <tspan x="0" dy={18} className="ff-center-text-tooltip">
+                    {textData(tooltip.content.split(':')[0] ?? '', 8)}
+                  </tspan>
+                </>
+              ) : (
+                <>
+                  {labelLines.map((line, index) => {
+                    if (index === 0) {
+                      const [firstWord, ...restWords] = line.split(' ');
+                      return (
+                        <tspan key={index}>
+                          <tspan
+                            x="0"
+                            dy="0"
+                            style={{ fontSize: `${labelFontSize}px` }}
+                            className="ff-center-first-text"
+                          >
+                            {firstWord}
+                          </tspan>
+                          <tspan
+                            x="0"
+                            dy={18}
+                            style={{ fontSize: `${subLabelFontSize}px` }}
+                            className="ff-center-text"
+                          >
+                            {restWords.join(' ')}
+                          </tspan>
+                        </tspan>
+                      );
+                    }
+                    return (
+                      <tspan
+                        key={index}
+                        x="0"
+                        dy={index === 0 ? 0 : 18}
+                        className="ff-center-text"
+                        style={{ fontSize: `${subLabelFontSize}px` }}
+                      >
+                        {line}
+                      </tspan>
+                    );
+                  })}
+                </>
+              )}
+            </text>
+          </g>
+        </svg>
+        {tooltip.visible && (
+          <div
+            className="ff-multi-radial-tooltip"
+            style={{
+              top: tooltip.y + 10,
+              left: tooltip.x + 10,
+              zIndex: 1000,
+            }}
+          >
+            {tooltip.content}
+          </div>
+        )}
+      </div>
+      {isLegendDetails &&
+        renderLegend(
+          barValues.map((value) => ({
+            ...value,
+            label:value?.barLabel,
+            key: value.value.toString(),
+          })),
+          legendType
+        )}
+    </div>
+  );
+};
+
+export default MultiRadialChart;

package/src/components/Charts/MultiRadialChart/index.ts

@@ -1 +1 @@
-export { default } from './MultiRadialChart';
+export { default } from './MultiRadialChart';