pixel-react 1.6.7 → 1.6.8

package/src/components/AppHeader/AppHeader.tsx

@@ -1,8 +1,4 @@
-import {
-  appHeaderHiddenMenuItemProps,
-  AppHeaderProps,
-  appHeaderSubMenuItemProps,
-} from './types';
+import { AppHeaderProps } from './types';
 import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
@@ -11,14 +7,16 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import AllProjectsDropdown from '../AllProjectsDropdown';
 import MenuOption from '../MenuOption';
 import Tooltip from '../Tooltip';
-import React, { useState } from 'react';
+import React from 'react';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
+  width,
   leftContent,
   rightContent,
   projectsList,
   appHeaderMenuItems,
+  appHeaderHiddenMenuItems,
   selectedMenu,
   selectedSubMenu,
   selectedQuickMenu,
@@ -30,15 +28,6 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onProjectDropdownLabelClick = () => {},
   onMoreMenuOptionClick = () => {},
 }) => {
-  const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = useState<
-    appHeaderHiddenMenuItemProps[]
-  >([]);
-  const onSubMenuClickHandler = (subMenu: appHeaderSubMenuItemProps) => {
-    setAppHeaderHiddenMenuItems(
-      subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []
-    );
-    onSubMenuClick(subMenu);
-  };
   return (
     <div className="ff-app-header-main">
       <div className="ff-app-header">
@@ -51,7 +40,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
           )}
         </div>
         {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar">
+          <div className="ff-app-header-nav-bar" style={{ width: width }}>
             {projectsList && !checkEmpty(projectsList) && (
               <div>
                 {
@@ -68,106 +57,116 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <div className="ff-app-header-nav-bar-items fontSm">
               {appHeaderMenuItems.map((menuItem) => {
                 return (
-                  <div
-                    className={classNames('ff-app-header-nav-bar-item', {
-                      ['ff-app-header-nav-bar-item--selected']:
-                        menuItem.label === selectedMenu,
-                    })}
-                    key={menuItem.label}
-                  >
-                    <Typography
-                      as="div"
-                      className="ff-app-header-nav-bar-item-label"
-                      lineHeight="18px"
-                      onClick={() => onMenuClick(menuItem)}
+                  !appHeaderHiddenMenuItems?.find(
+                    (menu) => menu.label === menuItem.label
+                  ) && (
+                    <div
+                      className={classNames('ff-app-header-nav-bar-item', {
+                        ['ff-app-header-nav-bar-item--selected']:
+                          menuItem.label === selectedMenu,
+                      })}
+                      key={menuItem.label}
                     >
-                      {menuItem.label}
-                    </Typography>
-                    {menuItem.label === selectedMenu &&
-                      menuItem?.subMenuItems && (
-                        <>
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
-                              >
-                                <Typography
-                                  as="div"
-                                  className={classNames(
-                                    'ff-app-header-nav-bar-submenu-item',
-                                    {
-                                      ['ff-app-header-nav-bar-submenu-item--selected']:
-                                        subMenuItem.label === selectedSubMenu,
-                                    }
-                                  )}
-                                  lineHeight="18px"
-                                  onClick={() =>
-                                    onSubMenuClickHandler(subMenuItem)
-                                  }
+                      <Typography
+                        as="div"
+                        className="ff-app-header-nav-bar-item-label"
+                        lineHeight="18px"
+                        onClick={() => onMenuClick(menuItem)}
+                      >
+                        {menuItem.label}
+                      </Typography>
+                      {menuItem.label === selectedMenu &&
+                        menuItem?.subMenuItems && (
+                          <>
+                            {menuItem.subMenuItems.map((subMenuItem) => {
+                              return (
+                                <div
+                                  key={subMenuItem.label}
+                                  className="ff-app-header-submenu-container"
                                 >
-                                  {subMenuItem.label}
-                                </Typography>
-                              </div>
-                            );
-                          })}
-                          {menuItem.subMenuItems.map((subMenuItem) => {
-                            return (
-                              <div
-                                key={subMenuItem.label}
-                                className="ff-app-header-submenu-container"
-                              >
-                                {subMenuItem.label === selectedSubMenu &&
-                                  subMenuItem?.quickMenuItems && (
-                                    <div className="ff-app-header-quickmenu-container">
-                                      <div>
-                                        <Icon name="vertical_separator" />
-                                      </div>
-                                      {subMenuItem.quickMenuItems.map(
-                                        (quickMenuItem) => {
-                                          return (
-                                            <>
-                                              <div
-                                                key={quickMenuItem.iconName}
-                                                onClick={() =>
-                                                  onQuickMenuClick(
-                                                    quickMenuItem
-                                                  )
-                                                }
-                                                className={classNames(
-                                                  'ff-app-header-nav-bar-quickmenu-item',
-                                                  {
-                                                    ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                      quickMenuItem.iconName ===
-                                                      selectedQuickMenu,
+                                  <Typography
+                                    as="div"
+                                    className={classNames(
+                                      'ff-app-header-nav-bar-submenu-item',
+                                      {
+                                        ['ff-app-header-nav-bar-submenu-item--selected']:
+                                          subMenuItem.label === selectedSubMenu,
+                                      }
+                                    )}
+                                    lineHeight="18px"
+                                    onClick={() => onSubMenuClick(subMenuItem)}
+                                  >
+                                    {subMenuItem.label}
+                                  </Typography>
+                                </div>
+                              );
+                            })}
+                            {menuItem.subMenuItems.map((subMenuItem) => {
+                              return (
+                                <div
+                                  key={subMenuItem.label}
+                                  className="ff-app-header-submenu-container"
+                                >
+                                  {subMenuItem.label === selectedSubMenu &&
+                                    subMenuItem?.quickMenuItems && (
+                                      <div
+                                        // className="ff-app-header-quickmenu-container"
+                                        className={classNames(
+                                          'ff-app-header-quickmenu-container',
+                                          subMenuItem.quickMenuItems?.length
+                                            ? 'visible'
+                                            : ''
+                                        )}
+                                      >
+                                        <div>
+                                          <Icon name="vertical_separator" />
+                                        </div>
+                                        {subMenuItem.quickMenuItems.map(
+                                          (quickMenuItem) => {
+                                            return (
+                                              <>
+                                                <div
+                                                  key={quickMenuItem.iconName}
+                                                  onClick={() =>
+                                                    onQuickMenuClick(
+                                                      quickMenuItem
+                                                    )
                                                   }
-                                                )}
-                                              >
-                                                <Tooltip
-                                                  title={quickMenuItem?.label}
-                                                >
-                                                  <Icon
-                                                    name={
-                                                      quickMenuItem.iconName
+                                                  className={classNames(
+                                                    'ff-app-header-nav-bar-quickmenu-item',
+                                                    {
+                                                      ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                        quickMenuItem.iconName ===
+                                                        selectedQuickMenu,
                                                     }
-                                                    height={16}
-                                                    width={16}
-                                                    hoverEffect={true}
-                                                  />
-                                                </Tooltip>
-                                              </div>
-                                            </>
-                                          );
-                                        }
-                                      )}
-                                    </div>
-                                  )}
-                              </div>
-                            );
-                          })}
-                        </>
-                      )}
-                  </div>
+                                                  )}
+                                                >
+                                                  <Tooltip
+                                                    title={quickMenuItem?.label}
+                                                  >
+                                                    <Icon
+                                                      name={
+                                                        quickMenuItem.iconName
+                                                      }
+                                                      height={16}
+                                                      width={16}
+                                                      hoverEffect={true}
+                                                    />
+                                                  </Tooltip>
+                                                </div>
+                                              </>
+                                            );
+                                          }
+                                        )}
+                                      </div>
+                                    )}
+                                </div>
+                              );
+                            })}
+                          </>
+                        )}
+                    </div>
+                  )
                 );
               })}
             </div>

package/src/components/AppHeader/types.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { optionsType } from '../AllProjectsDropdown/types';
 export interface AppHeaderProps {
+  width?: string;
   logoIconName: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
   projectsList?: optionsType[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
+  appHeaderHiddenMenuItems?: appHeaderHiddenMenuItemProps[];
   selectedMenu: string;
   selectedSubMenu?: string;
   selectedQuickMenu?: string;

package/src/components/Charts/BarChart/BarChart.scss

@@ -5,6 +5,10 @@
   flex-direction: column;
   align-items: center;
 
+  svg {
+    display: block;
+  }
+
   .ff-legend-container {
     width: 100%;
     display: flex;
@@ -15,7 +19,6 @@
       margin-top: 10px;
       display: flex;
       justify-content: flex-end;
-      gap: 10px;
 
       .ff-bar-chart-legend-item {
         display: flex;

package/src/components/Charts/BarChart/BarChart.tsx

@@ -21,6 +21,7 @@ type BarChartProps = {
   iconSize?: number;
   backgroundColor?: string;
   legendPosition?: 'top' | 'bottom';
+  legendGap?: number;
 };
 
 const BarChart: React.FC<BarChartProps> = ({
@@ -39,6 +40,7 @@ const BarChart: React.FC<BarChartProps> = ({
   icons = [],
   iconSize,
   legendPosition = 'bottom',
+  legendGap = 5,
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -52,7 +54,7 @@ const BarChart: React.FC<BarChartProps> = ({
   const topPadding = 40;
   const leftPadding = 40;
   const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
-  const chartWidth = totalBarWidth + leftPadding * 2;
+  const chartWidth = totalBarWidth + leftPadding * 2 + 10;
 
   const renderGradients = (gradients: string[][]) => {
     return gradients.map((gradient, index) => (
@@ -119,13 +121,13 @@ const BarChart: React.FC<BarChartProps> = ({
   };
 
   return (
-    <div
-      className="ff-bar-chart-container"
-      style={{ width: chartWidth, height }}
-    >
+    <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
       {legend && legendPosition === 'top' && (
         <div className="ff-legend-container">
-          <div className="ff-bar-chart-legend">
+          <div
+            className="ff-bar-chart-legend"
+            style={{ gap: `${legendGap}px` }}
+          >
             {data.map((item, index) => (
               <div key={item.label} className="ff-bar-chart-legend-item">
                 {icons[index] && typeof icons[index] === 'string' ? (
@@ -158,7 +160,16 @@ const BarChart: React.FC<BarChartProps> = ({
       )}
 
       <div>
-        <svg width={chartWidth} height={height + topPadding + 40}>
+        <svg
+          width={chartWidth}
+          height={
+            height +
+            topPadding +
+            5 +
+            (showXAxisLabels ? 20 : 0) +
+            (xAxisLabel ? 20 : 0)
+          }
+        >
           {Array.isArray(colors) &&
             colors.length > 0 &&
             renderGradients(colors)}
@@ -250,7 +261,7 @@ const BarChart: React.FC<BarChartProps> = ({
           {xAxisLabel && (
             <text
               x={chartWidth / 2}
-              y={height + topPadding + 40}
+              y={height + topPadding + (showXAxisLabels ? 40 : 20)}
               fontSize="12"
               fill="black"
               textAnchor="middle"
@@ -278,7 +289,10 @@ const BarChart: React.FC<BarChartProps> = ({
 
       {legend && legendPosition === 'bottom' && (
         <div className="ff-legend-container">
-          <div className="ff-bar-chart-legend">
+          <div
+            className="ff-bar-chart-legend"
+            style={{ gap: `${legendGap}px` }}
+          >
             {data.map((item, index) => (
               <div key={item.label} className="ff-bar-chart-legend-item">
                 {icons[index] && typeof icons[index] === 'string' ? (

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

@@ -19,6 +19,7 @@
   .ff-dashboard-donut-chart-svg-container {
     text-align: center;
     svg {
+      display: block;
       text:nth-of-type(1) {
         @extend .font2Xl;
         font-weight: 600;
@@ -41,13 +42,12 @@
 
   .ff-legend-container {
     display: grid;
-    gap: 10px;
     grid-auto-rows: 1fr;
 
     &.ff-number-legend {
       grid-template-columns: repeat(3, 100px);
 
-      &.ff-side-legend{
+      &.ff-side-legend {
         grid-template-columns: repeat(2, 100px);
       }
       .ff-legend-item {
@@ -84,7 +84,7 @@
     &.ff-memory-legend {
       grid-template-columns: repeat(3, 100px);
 
-      &.ff-side-legend{
+      &.ff-side-legend {
         grid-template-columns: repeat(2, 100px);
       }
 
@@ -120,6 +120,10 @@
 
       &:last-child {
         text-align: right;
+        padding-right: 10px;
+      }
+      &:nth-last-child(2) {
+        width: 58px;
       }
     }
 
@@ -141,6 +145,9 @@
         padding: 0.5rem;
         @extend .fontXs;
         color: var(--input-hover-border-color);
+        &:last-child {
+          padding-right: 22px;
+        }
       }
 
       .ff-legend-name {

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react/*';
+import { Meta, StoryObj } from '@storybook/react';
 import DashboardDonutChart from './DashboardDonutChart';
 
 const meta: Meta<typeof DashboardDonutChart> = {
@@ -17,6 +17,7 @@ export const Default: Story = {
   args: {
     radius: 70,
     lineWidth: 15,
+    tableWidth: 500,
     legendDetailsType: 'Scripts',
     isLegendDetails: true,
     statusValues: [

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

@@ -39,6 +39,7 @@ const colorMapping = [
 
 const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   radius = 60,
+  tableWidth,
   lineWidth = 15,
   statusValues = [],
   gapAngle = 0,
@@ -51,7 +52,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   labelFontSize = 24,
   subLabelFontSize = 14,
   legendPosition = 'bottom',
-  legendGap = 0,
+  chartGap = 0,
+  legendGap = 5,
+  legendValueFontSize = 22,
+  legendKeyFontSize = 12,
+  labelYoffSet = -5,
+  subLabelYoffSet = 20,
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -138,7 +144,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
   const SVG_PADDING = 3;
   const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
-  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
+  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
 
   const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
     const isFullCircle = nonZeroValues.length === 1;
@@ -182,7 +188,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       >
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
-            `${nonZeroValues[hoveredItemIndex]?.key} : `}
+            `${nonZeroValues[hoveredItemIndex]?.key}:`}
         </Typography>
         <Typography fontSize={12}>
           {hoveredItemIndex !== null &&
@@ -207,11 +213,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
               'ff-side-legend':
                 legendPosition === 'left' || legendPosition === 'right',
             })}
+            style={{ gap: `${legendGap}px` }}
           >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={22}
+                  fontSize={legendValueFontSize}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -223,7 +230,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
                 <Typography
-                  fontSize={12}
+                  fontSize={legendKeyFontSize}
                   className="ff-legend-key"
                   textAlign="center"
                 >
@@ -236,7 +243,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className="ff-legend-container ff-pill-legend ">
+          <div
+            className="ff-legend-container ff-pill-legend"
+            style={{ gap: `${legendGap}px` }}
+          >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -249,7 +259,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   <Typography fontSize={10}>{item.value}</Typography>
                 </span>
-                <Typography className="ff-legend-key">{item.key}</Typography>
+                <Typography
+                  fontSize={legendKeyFontSize}
+                  className="ff-legend-key"
+                >
+                  {item.key}
+                </Typography>
               </div>
             ))}
           </div>
@@ -262,13 +277,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
               'ff-side-legend':
                 legendPosition === 'left' || legendPosition === 'right',
             })}
+            style={{ gap: `${legendGap}px` }}
           >
             {legendData.map((item, index) => (
               <React.Fragment key={index}>
                 <div className="ff-legend-item">
                   <Typography
-                    fontSize={22}
-                    fontWeight="medium"
+                    fontSize={legendValueFontSize}
+                    fontWeight="semi-bold"
                     className="ff-legend-value"
                     color={
                       item.color
@@ -276,9 +292,16 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                         : colorMapping[index % colorMapping.length]
                     }
                   >
-                    {item.labelValue} {item.unit}
+                    {Number.isInteger(item.labelValue)
+                      ? item.labelValue
+                      : item.labelValue?.toFixed(2)}{' '}
+                    {item.unit}
                   </Typography>
-                  <Typography className="ff-legend-key" textAlign="center">
+                  <Typography
+                    fontSize={legendKeyFontSize}
+                    className="ff-legend-key"
+                    textAlign="center"
+                  >
                     {item.key}
                   </Typography>
                 </div>
@@ -293,8 +316,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             <table className="ff-legend-table">
               <thead>
                 <tr>
-                  <th className="ff-table-header">Name</th>
-                  <th className="ff-table-header">%</th>
+                  <th className="ff-table-header" style={{ width: tableWidth }}>
+                    Name
+                  </th>
+                  <th className="ff-table-header ">%</th>
                   <th className="ff-table-header">Count</th>
                 </tr>
               </thead>
@@ -384,7 +409,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
         'legend-position-bottom': legendPosition === 'bottom',
         'legend-position-left': legendPosition === 'left',
       })}
-      style={{ gap: `${legendGap}px` }}
+      style={{ gap: `${chartGap}px` }}
     >
       <div className="ff-dashboard-donut-chart-svg-container">
         <svg
@@ -429,11 +454,13 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 ))}
               </text>
             ) : (
-              (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
+              (legendType !== 'tableLegend' ||
+                hoveredItemIndex !== null ||
+                hoveredItemIndex == null) && (
                 <>
                   <text
                     x="0"
-                    y="5"
+                    y={labelYoffSet}
                     textAnchor="middle"
                     fill={colorMapping[3]}
                     style={{ fontSize: `${labelFontSize}px` }}
@@ -454,7 +481,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                       LABEL_MAX_WIDTH,
                       labelFontSize
                     ).map((line, index) => (
-                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                      <tspan
+                        x="0"
+                        dy={index === 0 ? 0 : labelFontSize}
+                        key={index}
+                      >
                         {line}
                       </tspan>
                     ))}
@@ -462,7 +493,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
                   <text
                     x="0"
-                    y="26"
+                    y={subLabelYoffSet}
                     textAnchor="middle"
                     fill="var(--text-color)"
                     style={{ fontSize: `${subLabelFontSize}px` }}
@@ -476,7 +507,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                       LABEL_MAX_WIDTH,
                       subLabelFontSize
                     ).map((line, index) => (
-                      <tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
+                      <tspan
+                        x="0"
+                        dy={index === 0 ? 0 : subLabelFontSize}
+                        key={index}
+                      >
                         {line}
                       </tspan>
                     ))}
@@ -486,12 +521,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             )}
           </g>
         </svg>
-        {legendType === 'tableLegend' && (
-          <div>
-            <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
-            <Typography> {`Total ${legendDetailsType} - ${total}`} </Typography>
-          </div>
-        )}
         {showTooltip && renderTooltip()}
       </div>
       {isLegendDetails && renderLegend(chartValues, legendType, legendPosition)}

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

@@ -47,6 +47,12 @@ export type DashboardDonutChartProps = {
   showUnit?: boolean;
   labelFontSize?: number;
   subLabelFontSize?: number;
-  legendPosition? : 'bottom' | 'right' | 'left';
+  legendPosition?: 'bottom' | 'right' | 'left';
+  chartGap?: number;
   legendGap?: number;
+  tableWidth?: number;
+  legendValueFontSize?: number;
+  legendKeyFontSize?: number;
+  labelYoffSet?: number;
+  subLabelYoffSet?: number;
 };