pixel-react 1.7.8 → 1.8.0

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; 

package/src/components/ChooseFile/ChooseFile.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import ChooseFile from './ChooseFile';
+import Drawer from '../Drawer/Drawer';
+import FileDropzone from '../FileDropzone/FileDropzone';
+import { RadioOption } from '../FileDropzone/types';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
+
+const meta: Meta<typeof ChooseFile> = {
+  title: 'Components/ChooseFile',
+  component: ChooseFile,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ChooseFile>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const ChooseFileDisplay: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+    const [selectedRadioOption, setSelectedRadioOption] =
+      useState<RadioOption>();
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
+
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const radioOptions: RadioOption[] = [
+      { value: 'Test Data', label: 'Test Data' },
+      { value: 'Local File', label: 'Local File' },
+    ];
+
+    const handleOptionChange = (option: RadioOption) => {
+      setSelectedRadioOption(option);
+      setShowModal(option.value === 'Test Data');
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      setSelectedFile(file || null);
+    };
+
+    const handleRemoveFile = () => setSelectedFile(null);
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
+    const handleCloseIcon = () => {
+      setSelectedFile(null);
+      setIsOpen(false);
+    };
+
+    const handleSaveChooseFile = () => {
+      setIsOpen(false);
+      
+    };
+
+    const renderFooterButtons = (onSave: () => void, onCancel: () => void) => (
+      <div className="footer_basic_button">
+        <Button
+          type="button"
+          variant="secondary"
+          size="small"
+          onClick={onCancel}
+          label="Cancel"
+        />
+        <Button
+          type="button"
+          variant="primary"
+          size="small"
+          onClick={onSave}
+          label="Save"
+        />
+      </div>
+    );
+
+    useEffect(() => {
+      setSelectedFile(testDataSelectedFile);
+    }, [testDataSelectedFile]);
+
+    return (
+      <>
+        <ChooseFile
+          label={selectedFile?.name || 'Choose File'}
+          variant="secondary"
+          buttonWidth="308px"
+          isChooseFile
+          iconName={selectedFile?.name ? 'close' : 'attachment_icon'}
+          onClick={() => setIsOpen(true)}
+          selectedFile={selectedFile}
+          handleCloseIcon={handleCloseIcon}
+        />
+
+        <Drawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          isFooterRequired={false}
+          _isExpanded={false}
+          size="medium"
+        >
+          <FileDropzone
+            {...defaultArgs}
+            accept={[
+              'image/png',
+              'image/jpeg',
+              'application/x-zip-compressed',
+              'application/zip',
+            ]}
+            validateMIMEType
+            isWebServiceFileDropZone
+            selectedRadioOption={selectedRadioOption}
+            radioOptions={radioOptions}
+            handleOptionChange={handleOptionChange}
+            setSelectedFile={setSelectedFile}
+            selectedFile={selectedFile}
+            handleFileChange={handleFileChange}
+            handleRemoveFile={handleRemoveFile}
+            setShowDrawer={setShowModal}
+          />
+          {selectedRadioOption?.value === 'Test Data' && (
+            <Drawer
+              isOpen={showModal}
+              onClose={() => setShowModal(false)}
+              isFooterRequired={false}
+              _isExpanded={false}
+              size="small"
+            >
+              <ConditionalDropdown
+                label="Select Path Using #"
+                placeholder="Enter # to search files"
+                isHash
+                dataFiles={testData}
+                dropdownWidth="auto"
+                setHashInputValue={setTestDataSelectedFile}
+              />
+              {renderFooterButtons(handleSaveButton, () => setShowModal(false))}
+            </Drawer>
+          )}
+          {renderFooterButtons(handleSaveChooseFile, () => setIsOpen(false))}
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/ChooseFile/ChooseFile.tsx

@@ -0,0 +1,46 @@
+import { memo, type FC } from 'react'
+import { ChooseFileProps } from './types'
+import Button from '../Button'
+
+const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
+    prevProps.selectedFile?.name === nextProps.selectedFile?.name;
+
+const ChooseFile:FC<ChooseFileProps> = ({
+    variant = 'primary',
+    size = 'small',
+    onClick,
+    label='Choose File',
+    disabled = false,
+    type = 'button',
+    className = '',
+    style = {},
+    iconName,
+    isChooseFile=false,
+    buttonWidth='auto',
+    selectedFile = {},
+    handleCloseIcon,
+  }) => {
+
+  return (
+    <div>
+     <Button 
+       variant={variant}
+       label={label}
+       type={type}
+       onClick={onClick}
+       buttonWidth={buttonWidth}
+       isChooseFile={isChooseFile}
+       size={size}
+       disabled={disabled}
+       className={className}
+       iconName={iconName}
+       style={style}
+       iconPosition='right'
+       selectedFile={selectedFile}
+       handleCloseIcon={handleCloseIcon}
+     />
+    </div>
+  )
+}
+
+export default memo(ChooseFile, areEqual);