pixel-react 1.7.0 → 1.7.1

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

@@ -1,292 +1,292 @@
-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,
-}) => {
-  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.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.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" className="ff-center-first-text">
-                            {firstWord}
-                          </tspan>
-                          <tspan x="0" dy={18} className="ff-center-text">
-                            {restWords.join(' ')}
-                          </tspan>
-                        </tspan>
-                      );
-                    }
-                    return (
-                      <tspan
-                        key={index}
-                        x="0"
-                        dy={index === 0 ? 0 : 18}
-                        className="ff-center-text"
-                      >
-                        {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';
+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,
+}) => {
+  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.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.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" className="ff-center-first-text">
+                            {firstWord}
+                          </tspan>
+                          <tspan x="0" dy={18} className="ff-center-text">
+                            {restWords.join(' ')}
+                          </tspan>
+                        </tspan>
+                      );
+                    }
+                    return (
+                      <tspan
+                        key={index}
+                        x="0"
+                        dy={index === 0 ? 0 : 18}
+                        className="ff-center-text"
+                      >
+                        {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;

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

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

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

@@ -1,25 +1,25 @@
-export interface BarValue {
-  value: number; 
-  arcColor: string; 
-  arcBackgroundColor: string; 
-  barLabel: string; 
-}
-
-export type LegendType = 'numberLegend' | 'pillLegend';
-
-export interface MultiRadialChartProps {
-  radius: number; 
-  lineWidth: number; 
-  fontSize: number;
-  labelHeading: string; 
-  lineCap: 'square' | 'round';
-  barValues: BarValue[]; 
-  legendType?: LegendType; 
-  isLegendDetails?: boolean; 
-}
-export interface ChartItem extends BarValue{
-  label: string; 
-  key: string;
-  color?: string;
-}
-
+export interface BarValue {
+  value: number; 
+  arcColor: string; 
+  arcBackgroundColor: string; 
+  barLabel: string; 
+}
+
+export type LegendType = 'numberLegend' | 'pillLegend';
+
+export interface MultiRadialChartProps {
+  radius: number; 
+  lineWidth: number; 
+  fontSize: number;
+  labelHeading: string; 
+  lineCap: 'square' | 'round';
+  barValues: BarValue[]; 
+  legendType?: LegendType; 
+  isLegendDetails?: boolean; 
+}
+export interface ChartItem extends BarValue{
+  label: string; 
+  key: string;
+  color?: string;
+}
+