pixel-react-excel-sheet 1.0.37 → 1.0.39

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo } from 'react';
+import { forwardRef } from 'react';
 import './Button.scss';
 import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
@@ -6,8 +6,7 @@ import { ButtonProps } from './types';
 import classNames from 'classnames';
 import Typography from '../Typography';
 
-const areEqual = (prevProps: ButtonProps, nextProps: ButtonProps) =>
-  prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -88,4 +87,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 );
-export default memo(Button, areEqual);
+export default Button;

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

@@ -22,16 +22,47 @@ export const Default: Story = {
     legendDetailsType: 'Scripts',
     isLegendDetails: true,
     statusValues: [
-      { key: 'Passed', value: 60, color: 'var(--status-success-text-color)' },
-      { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
-      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
-      { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
-      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
-      { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
+      {
+        key: 'Passed',
+        value: 60,
+        color: 'var(--status-success-text-color)',
+        percentage: '',
+      },
+      {
+        key: 'failed',
+        value: 20,
+        color: 'var(--status-rejected-text-color)',
+        percentage: '',
+      },
+      {
+        key: 'Warning',
+        value: 10,
+        color: 'var(--status-warning-text-color)',
+        percentage: '',
+      },
+      {
+        key: 'skipped',
+        value: 10,
+        color: 'var(--status-button-text-skipped)',
+        percentage: '',
+      },
+      {
+        key: 'Warning',
+        value: 0,
+        color: 'var(--status-warning-text-color)',
+        percentage: '',
+      },
+      {
+        key: 'skipped',
+        value: 7,
+        color: 'var(--status-button-text-skipped)',
+        percentage: '',
+      },
     ],
     gapAngle: 0,
     legendType: 'numberLegend',
     showOnlyLabel: false,
+    apiDataLabel:""
   },
 };
 
@@ -54,5 +85,6 @@ export const MemoryLegend: Story = {
     ],
     gapAngle: 0,
     legendType: 'memoryLegend',
+    apiDataLabel:""
   },
 };

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

@@ -48,6 +48,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   isLegendDetails = true,
   legendType = 'numberLegend',
   showOnlyLabel = false,
+  apiDataLabel,
   unit,
   showUnit = true,
   labelFontSize = 24,
@@ -104,6 +105,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     color: item.color,
     unit: item.unit,
     labelValue: item.labelValue,
+    percentage: item.percentage,
   }));
 
   const total = chartValues?.reduce((acc, { value }) => acc + value, 0);
@@ -368,9 +370,13 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                       <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 className="ff-legend-percentage">
+                        {item.percentage
+                          ? item.percentage
+                          : typeof item.value === 'string'
+                          ? ((parseFloat(item.value) / total) * 100).toFixed(1)
+                          : ((item.value / total) * 100).toFixed(1)}
+                      </td>
                     </td>
                     <td className="ff-legend-count">{item.value}</td>
                   </tr>
@@ -509,7 +515,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                         dy={index === 0 ? 0 : labelFontSize}
                         key={index}
                       >
-                        {line}
+                        {apiDataLabel ? apiDataLabel : line}
                       </tspan>
                     ))}
                   </text>

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

@@ -17,6 +17,7 @@ export type ChartItem = {
   key: string;
   value: string | number;
   color?: string;
+  percentage?: string | number;
 };
 
 export type NormalizedChartItem = {
@@ -26,6 +27,7 @@ export type NormalizedChartItem = {
   normalizedValue?: number;
   unit?: string;
   labelValue?: number;
+  percentage?: string | number;
 };
 
 export type LegendType =
@@ -42,6 +44,7 @@ export type DashboardDonutChartProps = {
   isLegendDetails: boolean;
   gapAngle?: number;
   legendType: LegendType;
+  apiDataLabel: string | number;
   showOnlyLabel?: boolean;
   unit?: string;
   showUnit?: boolean;
@@ -51,7 +54,7 @@ export type DashboardDonutChartProps = {
   chartGap?: number;
   legendGap?: number;
   tableWidth?: number;
-  tableHeight?:number;
+  tableHeight?: number;
   legendValueFontSize?: number;
   legendKeyFontSize?: number;
   labelYoffSet?: number;

package/src/components/Charts/LineChart/LineChart.stories.tsx

@@ -22,31 +22,24 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
         data: [
           {
             date: '25 Oct',
-            totalMemory: 9.86,
-          },
-          {
-            date: '26 Oct',
-            totalMemory: 9.86,
-          },
-          {
-            date: '27 Oct',
-            totalMemory: 9.86,
+            totalMemory: '1 GB',
           },
+
           {
-            date: '28 Oct',
-            totalMemory: 9.9,
+            date: '29 Oct',
+            totalMemory: '200 KB',
           },
           {
-            date: '29 Oct',
-            totalMemory: 100,
+            date: '30 Oct',
+            totalMemory: '40 MB',
           },
           {
             date: '3 Nov',
-            totalMemory: 10.12,
+            totalMemory: '20 MB',
           },
           {
             date: '23 Nov',
-            totalMemory: 10.1,
+            totalMemory: '90 MB',
           },
         ],
       },
@@ -60,7 +53,8 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     numberSize: '10px',
-    proportionalSpacing :false,
+    proportionalSpacing: false,
+    chartName: 'memory',
   },
   render: (args) => (
     <div className="linechart-container">
@@ -72,74 +66,18 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
 export const multiLineScriptsChart: StoryObj<LineChartProps> = {
   args: {
     data: [
-      {
-        color: '#179C5F',
-        name: 'Success',
-        show: true,
-        data: [
-          { date: '1 oct', value: 10 },
-          { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 30 },
-          { date: '4 oct', value: 26 },
-          { date: '5 oct', value: 90 },
-          { date: '6 oct', value: 10 },
-          { date: '7 oct', value: 12 },
-        ],
-      },
-      {
-        color: '#9C1732',
-        name: 'Failed',
-        show: true,
-        data: [
-          { date: '1 oct', value: 50 },
-          { date: '2 oct', value: 30 },
-          { date: '3 oct', value: 40 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 90 },
-          { date: '6 oct', value: 70 },
-          { date: '7 oct', value: 30 },
-        ],
-      },
-      {
-        color: '#E2750F',
-        name: 'Warning',
-        show: true,
-        data: [
-          { date: '1 oct', value: 10 },
-          { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 99 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 10 },
-          { date: '7 oct', value: 10 },
-        ],
-      },
-      {
-        color: '#A83FC4',
-        name: 'Skipped',
-        show: true,
-        data: [
-          { date: '1 oct', value: 40 },
-          { date: '2 oct', value: 10 },
-          { date: '3 oct', value: 10 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 30 },
-          { date: '7 oct', value: 10 },
-        ],
-      },
       {
         color: '#3F5AC4',
         name: 'Flaky',
         show: true,
         data: [
-          { date: '1 oct', value: 20 },
-          { date: '2 oct', value: 40 },
-          { date: '3 oct', value: 30 },
-          { date: '4 oct', value: 10 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 20 },
-          { date: '7 oct', value: 40 },
+          { date: '1 oct', value: 10 },
+          { date: '2 oct', value: 0 },
+          { date: '3 oct', value: 0 },
+          { date: '4 oct', value: 0 },
+          { date: '5 oct', value: 0 },
+          { date: '6 oct', value: 0 },
+          { date: '7 oct', value: 0 },
         ],
       },
     ],
@@ -154,8 +92,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
     textSize: '12px',
-    proportionalSpacing :false,
-
+    proportionalSpacing: false,
+    chartName: 'scripts',
   },
   render: (args) => (
     <div className="linechart-container">
@@ -186,12 +124,12 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         show: true,
         data: [
           { date: '1 oct', value: 50 },
-          { date: '2 oct', value: 30 },
+          { date: '2 oct', value: 0 },
           { date: '3 oct', value: 40 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 90 },
           { date: '6 oct', value: 70 },
-          { date: '7 oct', value: 30 },
+          { date: '7 oct', value: 0 },
         ],
       },
       {
@@ -201,7 +139,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         data: [
           { date: '1 oct', value: 10 },
           { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 90 },
+          { date: '3 oct', value: 0 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 10 },
@@ -213,13 +151,13 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         name: 'Skipped',
         show: true,
         data: [
-          { date: '1 oct', value: 40 },
+          { date: '1 oct', value: 0 },
           { date: '2 oct', value: 20 },
           { date: '3 oct', value: 10 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 30 },
-          { date: '7 oct', value: 10 },
+          { date: '7 oct', value: 0 },
         ],
       },
       {
@@ -231,7 +169,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
           { date: '2 oct', value: 40 },
           { date: '3 oct', value: 30 },
           { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
+          { date: '5 oct', value: 0 },
           { date: '6 oct', value: 40 },
           { date: '7 oct', value: 20 },
         ],
@@ -249,7 +187,8 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
     yAxisLabelColor: '#252C37',
     textSize: '12px',
     fontWeight: 'semi-bold',
-    proportionalSpacing :false,
+    proportionalSpacing: false,
+    chartName: 'defects',
   },
   render: (args) => (
     <div className="linechart-container">

package/src/components/Charts/LineChart/LineChart.tsx

@@ -2,6 +2,11 @@ import React, { useState } from 'react';
 import { LineChartProps } from './types';
 import './LineChart.scss';
 import Typography from '../../Typography';
+import {
+  MEMORY_VALIDATION_REGEX,
+  NUMBER_REGEX,
+  UNIT_REGEX,
+} from '../../../validations/regex';
 
 interface HoverState {
   cursorX: number | null;
@@ -26,53 +31,121 @@ const LineChart: React.FC<LineChartProps> = ({
   fontWeight,
   numberSize,
   proportionalSpacing,
+  chartName,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
   const yMax = height - margin * 2;
 
+  const roundUp = (value: any, decimals = 2) => {
+    let unit = '';
+
+    if (typeof value === 'string') {
+      const match = value.match(NUMBER_REGEX);
+      const unitMatch = value.match(UNIT_REGEX);
+      if (match) {
+        value = parseFloat(match[0]);
+      }
+      if (unitMatch) {
+        unit = unitMatch[0];
+      }
+    }
+
+    const multiplier = Math.pow(10, decimals);
+    const roundedValue = Math.ceil(value * multiplier) / multiplier;
+
+    return `${roundedValue} ${unit}`.trim();
+  };
+  function convertToMB(input: any) {
+    if (!isNaN(input)) {
+      return parseFloat(input);
+    }
+
+    const regex = MEMORY_VALIDATION_REGEX;
+    const match = input.match(regex);
+
+    if (!match) {
+      throw new Error(
+        "Invalid input format. Use '<value> <unit>' format (e.g., '10.9580078125 KB') or just a number."
+      );
+    }
+
+    const value = parseFloat(match[1]);
+    const unit = match[2] ? match[2].toUpperCase() : null;
+
+    switch (unit) {
+      case 'GB':
+        return parseFloat((value * 1024).toFixed(2));
+      case 'MB':
+        return parseFloat(value.toFixed(2));
+      case 'KB':
+        return parseFloat((value / 1024).toFixed(2));
+      default:
+        throw new Error('Invalid unit. Supported units are GB, MB, and KB.');
+    }
+  }
+
   const isDefaultLineChart =
     data[0]?.data[0]?.hasOwnProperty('date') &&
     data[0]?.data[0]?.hasOwnProperty('totalMemory');
   const xKey = isDefaultLineChart ? 'date' : 'date';
   const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
   const xScale = (x: string) => {
-  if (proportionalSpacing) {
-    const date = new Date(x);
-    const time = date.getTime();
-    const minDate = new Date(
-      Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-    const maxDate = new Date(
-      Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-
-    return (
-      ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
-      xMax
-    );
-  } else {
-    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
-    if (index === -1) return 0;
-    const totalPoints = data[0].data.length;
-    return (index / (totalPoints - 1)) * xMax;
-  }
-};
+    if (proportionalSpacing) {
+      const date = new Date(x);
+      const time = date.getTime();
+      const minDate = new Date(
+        Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+      );
+      const maxDate = new Date(
+        Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+      );
+
+      return (
+        ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
+        xMax
+      );
+    } else {
+      const index = data[0].data.findIndex((point: any) => point[xKey] === x);
+      if (index === -1) return 0;
+      const totalPoints = data[0].data.length;
+      return (index / (totalPoints - 1)) * xMax;
+    }
+  };
 
+  const maxValue = Math.max(
+    ...data.flatMap((line) =>
+      line.data.map((point: any) => convertToMB(point[yKey]))
+    )
+  );
 
-  const yScale = (y: number) => yMax - (y * yMax) / 1024;
+  const yScale = (y: number) => {
+    if (chartName === 'memory') {
+      const maxMemoryValue = Math.max(
+        ...data.flatMap((line) =>
+          line.data.map((point: any) => convertToMB(point[yKey]))
+        )
+      );
+
+      const scaleMax = maxMemoryValue > 1024 ? maxMemoryValue : 1024;
+
+      return yMax - (y * yMax) / scaleMax;
+    } else {
+      return yMax - (y * yMax) / (maxValue === 0 ? 1024 : maxValue);
+    }
+  };
 
   const generateLinePath = (lineData: { [key: string]: any }[]) =>
     lineData.reduce((path, point, i) => {
       const x = xScale(point[xKey]);
-      const y = yScale(point[yKey]);
+      const y = yScale(convertToMB(point[yKey]));
       if (i === 0) {
         return `M ${x} ${y}`;
       }
 
       const prevPoint = lineData[i - 1];
       const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
-      const prevY = prevPoint ? yScale(prevPoint[yKey]) : 0;
+      const prevY = prevPoint ? yScale(convertToMB(prevPoint[yKey])) : 0;
 
       return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
         x - (x - prevX) / 2
@@ -108,10 +181,10 @@ const LineChart: React.FC<LineChartProps> = ({
 
       if (nearestPoint) {
         nearestXValue = nearestPoint[xKey];
-        nearestValues.hoverValues[lineIndex] = nearestPoint[yKey];
+        nearestValues.hoverValues[lineIndex] = roundUp(nearestPoint[yKey]);
         nearestValues.dotPositions[lineIndex] = {
           x: nearestXValue ? xScale(nearestXValue) : 0,
-          y: yScale(nearestPoint[yKey]),
+          y: yScale(convertToMB(nearestPoint[yKey])),
         };
       }
     });
@@ -243,22 +316,45 @@ const LineChart: React.FC<LineChartProps> = ({
                 </text>
               ))}
 
-            {Array.from({ length: 6 }).map((_, i) => {
-              const yValueInGB = i * 0.2;
-              return (
-                <text
-                  key={yValueInGB}
-                  x={-15}
-                  y={yScale(yValueInGB * 1024)}
-                  textAnchor="middle"
-                  fill={yAxisValueColor}
-                  className="ff-line-chart-y-axis-text"
-                  style={{ fontSize: numberSize }}
-                >
-                  {yValueInGB.toFixed(1)}
-                </text>
-              );
-            })}
+            {chartName === 'memory'
+              ? Array.from({ length: 6 }).map((_, i) => {
+                  const dynamicMaxValue = maxValue < 1024 ? 1024 : maxValue;
+                  const isSmallScale = maxValue < 1024;
+                  const yValue = (i * dynamicMaxValue) / 5;
+                  const displayValue = isSmallScale
+                    ? yValue / 1024
+                    : yValue / 1024;
+
+                  return (
+                    <text
+                      key={yValue}
+                      x={-10}
+                      y={yScale(yValue)}
+                      textAnchor="end"
+                      fill={yAxisValueColor}
+                      className="ff-line-chart-y-axis-text"
+                      style={{ fontSize: numberSize }}
+                    >
+                      {displayValue.toFixed(1)}
+                    </text>
+                  );
+                })
+              : Array.from({ length: 6 }).map((_, i) => {
+                  const yValue = (i * maxValue) / 5;
+                  return (
+                    <text
+                      key={yValue}
+                      x={-10}
+                      y={yScale(yValue)}
+                      textAnchor="end"
+                      fill={yAxisValueColor}
+                      className="ff-line-chart-y-axis-text"
+                      style={{ fontSize: numberSize }}
+                    >
+                      {yValue.toFixed(0)}
+                    </text>
+                  );
+                })}
           </g>
         </svg>
         {hoverState.tooltip.visible && (

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

@@ -27,4 +27,5 @@ export interface LineChartProps {
   fontWeight?: string | number;
   numberSize?: string | number;
   proportionalSpacing?: boolean;
+  chartName?: string;
 }

package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss

@@ -4,7 +4,7 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-
+  gap: 16px;
   &.ff-multi-radial-chart-number {
     flex-direction: column;
   }
@@ -68,8 +68,8 @@
           background-color: var(--status-success-text-color);
           color: var(--text-color);
           border-radius: 15px;
-          min-width: 25px;
-          height: 18px;
+          min-width: 21px;
+          height: 15px;
           display: flex;
           justify-content: center;
           align-items: center;