pixel-react 1.7.7 → 1.7.9

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import './Button.scss';
 import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
@@ -6,6 +6,9 @@ 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>(
   (
     {
@@ -15,28 +18,41 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       label,
       disabled = false,
-      children = null,
       type = 'button',
       className = '',
       style = {},
       iconName,
       iconPosition = 'left',
+      isChooseFile = false,
+      buttonWidth = 'auto',
+      handleCloseIcon,
+      selectedFile,
       ...props
     }: ButtonProps,
     ref
   ) => {
     const renderIcon = () =>
       iconName && (
-        <div>
+        <div
+          onClick={(e) => {
+            if (iconName === 'close') {
+              e.stopPropagation();
+              handleCloseIcon?.();
+            }
+          }}
+        >
           <Icon
-            height={8}
-            width={8}
+            height={isChooseFile ? 14 : 8}
+            width={isChooseFile ? 14 : 8}
             color={
-              variant === 'primary'
+              iconName === 'close'
+                ? 'var(--ff-delete-button-attachment)'
+                : variant === 'primary'
                 ? `var(--primary-icon-color)`
                 : `var(--secondary-icon-color)`
             }
             name={iconName}
+            className="ff-button-icon"
           />
         </div>
       );
@@ -49,9 +65,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           `ff-button--${size}`,
           `ff-button--${variant}`,
           `${className}`,
-          'button'
+          { 'ff-button-choose-file': isChooseFile },
+          { 'ff-button-choose-file-text': selectedFile }
         )}
-        style={{ backgroundColor, ...style }}
+        style={{ backgroundColor, ...style, width: buttonWidth }}
         onClick={onClick}
         disabled={disabled}
         {...props}
@@ -60,14 +77,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <Typography
           fontSize={10}
           fontWeight="semi-bold"
-          className={classNames(`ff-button-${variant}--text`)}
+          className={classNames(`ff-button-${variant}--text`, {
+            'ff-button-choose-file-text': selectedFile,
+          })}
         >
           {label}
         </Typography>
         {iconPosition === 'right' && renderIcon()}
-        {children}
       </button>
     );
   }
 );
-export default Button;
+export default memo(Button, areEqual);

package/src/components/Button/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 
 export interface ButtonProps {
   /**
@@ -66,4 +67,24 @@ export interface ButtonProps {
    * form to accept form id in string
    */
   form?: string;
+
+  /**
+   * Is the Type ChooseFile for the button
+   */
+  isChooseFile?: boolean;
+
+  /**
+   * Custom Width for the button
+   */
+  buttonWidth?: string;
+
+  /**
+   * selectedfile object will be send.
+   */
+  selectedFile?: File | DynamicObj | null;
+
+  /**
+   * handleCloseIcon function will set to the initial state .
+   */
+  handleCloseIcon?: () => void;
 }

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -18,14 +18,15 @@
 
   .ff-dashboard-donut-chart-svg-container {
     text-align: center;
+
     svg {
       display: block;
+
       text:nth-of-type(1) {
-        @extend .font2Xl;
         font-weight: 600;
       }
+
       text:nth-of-type(2) {
-        @extend .fontMd;
         font-weight: 500;
       }
     }
@@ -40,28 +41,95 @@
     }
   }
 
+  @mixin ff-legend-item-styles {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+
+    .ff-legend-value {
+      white-space: nowrap;
+    }
+  }
+
+  @mixin ff-side-legend-styles {
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 200px;
+    width: auto;
+    justify-content: center;
+
+    .ff-legend-item {
+      flex: 0 0 auto !important;
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
   .ff-legend-container {
-    display: grid;
-    grid-auto-rows: 1fr;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--donut-legend-gap, 5px); // Dynamic gap support with fallback
+
+    .ff-legend-item {
+      @include ff-legend-item-styles;
+    }
+
+    &.ff-count-2,
+    &.ff-count-4 {
+      .ff-legend-item {
+        flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
+      }
+    }
 
-    &.ff-number-legend {
-      grid-template-columns: repeat(3, 100px);
+    &.ff-count-5 {
+      .ff-legend-item:nth-child(-n + 3) {
+        flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+      }
 
-      &.ff-side-legend {
-        grid-template-columns: repeat(2, 100px);
+      .ff-legend-item:nth-child(n + 4) {
+        flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
       }
+    }
+
+    &.ff-count-3,
+    &.ff-count-6,
+    &.ff-count-more {
       .ff-legend-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+        flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
+      }
+    }
+
+    &.ff-side-legend {
+      @include ff-side-legend-styles;
+
+      &.ff-count-2,
+      &.ff-count-4 {
+        .ff-legend-item {
+          height: calc(50% - var(--donut-legend-gap, 5px));
+        }
+      }
+
+      &.ff-count-3,
+      &.ff-count-5,
+      &.ff-count-6,
+      &.ff-count-more {
+        .ff-legend-item {
+          height: calc(33.33% - var(--donut-legend-gap, 5px));
+        }
       }
     }
 
     &.ff-pill-legend {
-      grid-template-columns: repeat(2, 130px);
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--donut-legend-gap, 5px);
 
       .ff-legend-item {
         display: flex;
+        flex-direction: row;
         align-items: center;
 
         .ff-legend-capsule {
@@ -80,22 +148,6 @@
         }
       }
     }
-
-    &.ff-memory-legend {
-      grid-template-columns: repeat(3, 100px);
-
-      &.ff-side-legend {
-        grid-template-columns: repeat(2, 100px);
-      }
-
-      .ff-legend-item {
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-      }
-    }
   }
 
   .ff-legend-table-wrapper {
@@ -112,9 +164,9 @@
     text-align: left;
 
     .ff-legend-table-thead {
-      position: static; 
+      position: static;
       top: auto;
-    } 
+    }
     .ff-table-header {
       @extend .fontXs;
       font-weight: bold;
@@ -160,6 +212,7 @@
         gap: 5px;
         color: var(--input-hover-border-color);
       }
+
       .ff-legend-count {
         text-align: right;
       }

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

@@ -18,6 +18,7 @@ export const Default: Story = {
     radius: 70,
     lineWidth: 15,
     tableWidth: 500,
+    tableHeight: 190,
     legendDetailsType: 'Scripts',
     isLegendDetails: true,
     statusValues: [
@@ -25,6 +26,8 @@ export const Default: Story = {
       { 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)' },
     ],
     gapAngle: 0,
     legendType: 'numberLegend',

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

@@ -40,6 +40,7 @@ const colorMapping = [
 const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   radius = 60,
   tableWidth,
+  tableHeight = 190,
   lineWidth = 15,
   statusValues = [],
   gapAngle = 0,
@@ -58,6 +59,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   legendKeyFontSize = 12,
   labelYoffSet = -5,
   subLabelYoffSet = 20,
+  onSelectedStatus = (_value) => {},
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -142,6 +144,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     });
   };
 
+  const handleSelectStatus = (value: string) => {
+    onSelectedStatus(value);
+  };
+
   const SVG_PADDING = 3;
   const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
   const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
@@ -172,6 +178,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
           onMouseLeave={handleMouseLeave}
           strokeOpacity={0.8}
           onMouseMove={handleMouseMove}
+          onClick={() => handleSelectStatus(chartItem?.key)}
         />
       </g>
     );
@@ -188,7 +195,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       >
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
-            `${nonZeroValues[hoveredItemIndex]?.key}:`}
+            `${nonZeroValues[hoveredItemIndex]?.key} : `}
         </Typography>
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
@@ -205,15 +212,25 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
     legendType: LegendType,
     legendPosition: string
   ) => {
+    const legendCount = legendData.length;
+    const legendCountClass =
+      legendCount > 6 ? 'ff-count-more' : `ff-count-${legendCount}`;
+    const isSideLegend =
+      legendPosition === 'left' || legendPosition === 'right';
+
     switch (legendType) {
-      case 'numberLegend':
+      case 'numberLegend': {
         return (
           <div
-            className={classNames('ff-legend-container ff-number-legend', {
-              'ff-side-legend':
-                legendPosition === 'left' || legendPosition === 'right',
-            })}
-            style={{ gap: `${legendGap}px` }}
+            className={classNames(
+              'ff-legend-container',
+              'ff-number-legend',
+              legendCountClass,
+              { 'ff-side-legend': isSideLegend }
+            )}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
@@ -240,12 +257,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             ))}
           </div>
         );
-
+      }
       case 'pillLegend':
         return (
           <div
             className="ff-legend-container ff-pill-legend"
-            style={{ gap: `${legendGap}px` }}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
@@ -273,11 +292,15 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       case 'memoryLegend':
         return (
           <div
-            className={classNames('ff-legend-container ff-memory-legend', {
-              'ff-side-legend':
-                legendPosition === 'left' || legendPosition === 'right',
-            })}
-            style={{ gap: `${legendGap}px` }}
+            className={classNames(
+              'ff-legend-container',
+              'ff-memory-legend',
+              legendCountClass,
+              { 'ff-side-legend': isSideLegend }
+            )}
+            style={
+              { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
+            }
           >
             {legendData.map((item, index) => (
               <React.Fragment key={index}>
@@ -313,8 +336,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       case 'tableLegend':
         return (
           <div className="ff-legend-table-wrapper">
-            <table className="ff-legend-table">
-              <thead className='ff-legend-table-thead'>
+            <table className="ff-legend-table" style={{ height: tableHeight }}>
+              <thead className="ff-legend-table-thead">
                 <tr>
                   <th className="ff-table-header" style={{ width: tableWidth }}>
                     Name

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

@@ -51,8 +51,10 @@ export type DashboardDonutChartProps = {
   chartGap?: number;
   legendGap?: number;
   tableWidth?: number;
+  tableHeight?:number;
   legendValueFontSize?: number;
   legendKeyFontSize?: number;
   labelYoffSet?: number;
   subLabelYoffSet?: number;
+  onSelectedStatus?: (_value: string) => void;
 };

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

@@ -19,7 +19,6 @@
     font-weight: 600;
   }
   .ff-center-text {
-    @extend .fontSm;
     color: var(--text-color);
     font-weight: 400;
   }

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

@@ -82,7 +82,6 @@ export const PillLegend: Story = {
     radius: 50,
     lineWidth: 4,
     labelHeading: '00 module',
-    fontSize: 16,
     barValues: [
       {
         value: 10,
@@ -112,5 +111,7 @@ export const PillLegend: Story = {
     lineCap: 'round',
     legendType: 'pillLegend',
     isLegendDetails: true,
+    labelFontSize: 12,
+    subLabelFontSize: 8
   },
 };

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

@@ -30,6 +30,8 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   labelHeading,
   legendType = 'numberLegend',
   isLegendDetails = true,
+  labelFontSize = 12,
+  subLabelFontSize = 8,
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -53,7 +55,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   const svgSize = 2 * (maxRadius + lineWidth);
   const reversedBarValues = [...barValues].reverse();
 
-  const labelLines = labelHeading.split(' ');
+  const labelLines = labelHeading.trim().split(' ');
 
   const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
     switch (legendType) {
@@ -85,7 +87,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
       case 'pillLegend':
         return (
           <div className={`ff-legend-container ff-pill-legend`}>
-            {legendData.map((item, index) => (
+            {legendData.reverse().map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
                   className="ff-legend-capsule"
@@ -178,6 +180,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 0,
                 2 * Math.PI
               );
+
               const foregroundArcPath = calculateArc(
                 0,
                 0,
@@ -238,10 +241,20 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                       const [firstWord, ...restWords] = line.split(' ');
                       return (
                         <tspan key={index}>
-                          <tspan x="0" dy="0" className="ff-center-first-text">
+                          <tspan
+                            x="0"
+                            dy="0"
+                            style={{ fontSize: `${labelFontSize}px` }}
+                            className="ff-center-first-text"
+                          >
                             {firstWord}
                           </tspan>
-                          <tspan x="0" dy={18} className="ff-center-text">
+                          <tspan
+                            x="0"
+                            dy={18}
+                            style={{ fontSize: `${subLabelFontSize}px` }}
+                            className="ff-center-text"
+                          >
                             {restWords.join(' ')}
                           </tspan>
                         </tspan>
@@ -253,6 +266,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                         x="0"
                         dy={index === 0 ? 0 : 18}
                         className="ff-center-text"
+                        style={{ fontSize: `${subLabelFontSize}px` }}
                       >
                         {line}
                       </tspan>

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

@@ -15,7 +15,10 @@ export interface MultiRadialChartProps {
   lineCap: 'square' | 'round';
   barValues: BarValue[]; 
   legendType?: LegendType; 
-  isLegendDetails?: boolean; 
+  isLegendDetails?: boolean;
+  labelFontSize?: number,
+  subLabelFontSize?: number 
+  gapAngle?:number;
 }
 export interface ChartItem extends BarValue{
   label: string;