pixel-react 1.6.0 → 1.6.2

package/src/components/AppHeader/types.ts

@@ -6,12 +6,7 @@ export interface AppHeaderProps {
   rightContent?: ReactNode;
   projectsList?: optionsType[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems?: {
-    label: string;
-    value: string | string[];
-    icon: string;
-    disable?: boolean;
-  }[];
+
   selectedMenu: string;
   selectedSubMenu?: string;
   selectedQuickMenu?: string;
@@ -26,15 +21,33 @@ export interface AppHeaderProps {
 export interface appHeaderMenuItemProps {
   label: string;
   path?: string;
+  disable?: boolean;
+  disableText?:string;
+  hide?:boolean;
   subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
   label: string;
   path?: string;
+  disable?: boolean;
+  disableText?:string;
+  hide?:boolean;
   quickMenuItems?: appHeaderQuickMenuItemProps[];
+  hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
   label?: string;
   path?: string;
   iconName: string;
+  disable?: boolean;
+  disableText?:string;
+  hide?:boolean;
+}
+export interface appHeaderHiddenMenuItemProps {
+  label: string;
+  value: string | string[];
+  icon: string;
+  disable?: boolean;
+  disableText?:string;
+  hide?:boolean;
 }

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

@@ -1,16 +1,39 @@
 @use '../../../assets/styles/fonts';
 .ff-bar-chart-container {
-  margin-top: 40px;
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
 
-  .ff-bar-chart-border {
-    position: relative;
+  .ff-legend-container {
+    width: 100%;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
+    .ff-bar-chart-legend {
+      width: 290px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+
+      .ff-bar-chart-legend-item {
+        display: flex;
+        align-items: center;
+
+        .ff-bar-chart-legend-item-circle {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          margin-right: 5px;
+          border-radius: 50%;
+        }
+      }
+
+      .ff-legend-label {
+        margin-left: 5px;
+      }
+    }
   }
   .ff-bar-chart-icon {
     position: absolute;
@@ -26,41 +49,18 @@
     align-items: center;
   }
   .ff-bar-chart-labels {
-    @extend .fontXs;
+    @extend .fontSm;
     font-weight: 400;
-    color: var(--drawer-title-color);
+    color: var(--text-color);
   }
   .ff-bar-chart-tooltip {
     position: absolute;
     padding: 5px 10px;
-    background-color: var(--file-details-bg);
-    color: var(--status-skipped-text-color);
+    background-color: var(--tooltip-bg-color);
+    color: var(--primary-icon-color);
     border-radius: 4px;
     pointer-events: none;
-    @extend .fontXs;
+    @extend .fontSm;
     font-weight: 600;
   }
-  .ff-bar-chart-legend {
-    margin-top: 10px;
-    display: grid;
-    gap: 0.5rem;
-    grid-row-gap: 2;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: auto;
-    .ff-bar-chart-legend-item {
-      display: flex;
-      align-items: center;
-
-      .ff-bar-chart-legend-item-circle {
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        margin-right: 5px;
-        border-radius: 50%;
-      }
-    }
-    .ff-legend-label {
-      margin-left: 5px;
-    }
-  }
 }

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

@@ -33,7 +33,7 @@ export const BarChartDashboard: Story = {
       { label: 'Chrome', value: 25 },
       { label: 'Safari', value: 10 },
       { label: 'IE', value: 1 },
-      { label: 'Opera', value: 0 },
+      { label: 'Opera', value: 15 },
     ],
     barWidth: 20,
     height: 250,
@@ -53,6 +53,7 @@ export const BarChartDashboard: Story = {
     barBorderRadius: 0,
     legend: false,
     showXAxisLabels: true,
+    legendPosition: 'top',
     icons: [
       'fire_fox',
       'edge',
@@ -61,6 +62,6 @@ export const BarChartDashboard: Story = {
       'internet_explorer',
       'opera',
     ],
-    iconSize: 40,
+    iconSize: 20,
   },
 };

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

@@ -20,6 +20,7 @@ type BarChartProps = {
   icons?: (string | React.ReactNode)[];
   iconSize?: number;
   backgroundColor?: string;
+  legendPosition?: 'top' | 'bottom';
 };
 
 const BarChart: React.FC<BarChartProps> = ({
@@ -37,7 +38,7 @@ const BarChart: React.FC<BarChartProps> = ({
   showXAxisLabels = true,
   icons = [],
   iconSize,
-  backgroundColor = 'transparent',
+  legendPosition = 'bottom',
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -50,8 +51,8 @@ const BarChart: React.FC<BarChartProps> = ({
   const maxValue = Math.max(...data.map((item) => item.value));
   const topPadding = 40;
   const leftPadding = 40;
-  const chartWidth =
-    data.length * (barWidth + barGap) + padding * 2 + leftPadding;
+  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
+  const chartWidth = totalBarWidth + leftPadding * 2;
 
   const renderGradients = (gradients: string[][]) => {
     return gradients.map((gradient, index) => (
@@ -120,17 +121,43 @@ const BarChart: React.FC<BarChartProps> = ({
   return (
     <div
       className="ff-bar-chart-container"
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        position: 'relative',
-        backgroundColor,
-      }}
+      style={{ width: chartWidth, height }}
     >
-      <div
-        className="ff-bar-chart-border"
-        style={{ width: chartWidth, height }}
-      >
+      {legend && legendPosition === 'top' && (
+        <div className="ff-legend-container">
+          <div className="ff-bar-chart-legend">
+            {data.map((item, index) => (
+              <div key={item.label} className="ff-bar-chart-legend-item">
+                {icons[index] && typeof icons[index] === 'string' ? (
+                  <Icon
+                    name={String(icons[index])}
+                    width={iconSize}
+                    height={iconSize}
+                  />
+                ) : (
+                  <span
+                    className="ff-bar-chart-legend-item-circle"
+                    style={{
+                      backgroundColor:
+                        colors[index % colors.length]?.[0] || 'grey',
+                    }}
+                  ></span>
+                )}
+                <Typography
+                  as="div"
+                  fontSize={10}
+                  fontWeight="regular"
+                  className="ff-legend-label"
+                >
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
         <svg width={chartWidth} height={height + topPadding + 40}>
           {Array.isArray(colors) &&
             colors.length > 0 &&
@@ -172,11 +199,7 @@ const BarChart: React.FC<BarChartProps> = ({
                     y={String(iconY)}
                     width={iconWidth}
                     height={iconWidth}
-                    chartIcon={
-                      typeof icons[index] === 'string' && icons[index].length
-                        ? true
-                        : false
-                    }
+                    chartIcon={true}
                   />
                 )}
 
@@ -216,9 +239,9 @@ const BarChart: React.FC<BarChartProps> = ({
           })}
 
           <line
-            x1={55}
+            x1={60}
             y1={height + topPadding}
-            x2={chartWidth - 50}
+            x2={chartWidth}
             y2={height + topPadding}
             stroke="#D9D9D9"
             strokeWidth="1"
@@ -253,50 +276,51 @@ const BarChart: React.FC<BarChartProps> = ({
         </svg>
       </div>
 
+      {legend && legendPosition === 'bottom' && (
+        <div className="ff-legend-container">
+          <div className="ff-bar-chart-legend">
+            {data.map((item, index) => (
+              <div key={item.label} className="ff-bar-chart-legend-item">
+                {icons[index] && typeof icons[index] === 'string' ? (
+                  <Icon
+                    name={String(icons[index])}
+                    width={iconSize}
+                    height={iconSize}
+                  />
+                ) : (
+                  <span
+                    className="ff-bar-chart-legend-item-circle"
+                    style={{
+                      backgroundColor:
+                        colors[index % colors.length]?.[0] || 'grey',
+                    }}
+                  ></span>
+                )}
+                <Typography
+                  as="div"
+                  fontSize={10}
+                  fontWeight="regular"
+                  className="ff-legend-label"
+                >
+                  {item.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {tooltip.visible && (
         <div
           className="ff-bar-chart-tooltip"
           style={{
-            top: tooltip.y - 45,
-            left: tooltip.x,
-            border: `1px solid ${tooltip.borderColor}`,
+            top: tooltip.y - 20,
+            left: tooltip.x + 10,
           }}
         >
           {tooltip.content}
         </div>
       )}
-
-      {legend && (
-        <div className="ff-bar-chart-legend">
-          {data.map((item, index) => (
-            <div key={item.label} className="ff-bar-chart-legend-item">
-              {icons[index] && typeof icons[index] === 'string' ? (
-                <Icon
-                  name={String(icons[index])}
-                  width={iconSize}
-                  height={iconSize}
-                />
-              ) : (
-                <span
-                  className="ff-bar-chart-legend-item-circle"
-                  style={{
-                    backgroundColor:
-                      colors[index % colors.length]?.[0] || 'grey',
-                  }}
-                ></span>
-              )}
-              <Typography
-                as="div"
-                fontSize={10}
-                fontWeight="regular"
-                className="ff-legend-label"
-              >
-                {item.label}
-              </Typography>
-            </div>
-          ))}
-        </div>
-      )}
     </div>
   );
 };

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

@@ -2,9 +2,16 @@
 
 .ff-dashboard-donut-chart-section {
   display: flex;
-  flex-direction: column;
   align-items: center;
 
+  &.legend-position-bottom {
+    flex-direction: column;
+  }
+
+  &.legend-position-left {
+    flex-direction: row-reverse;
+  }
+
   &-table-legend {
     flex-direction: row;
   }
@@ -23,7 +30,7 @@
     }
 
     .ff-donut-chart-tooltip {
-      position: fixed;
+      position: absolute;
       padding: 5px;
       border-radius: 4px;
       pointer-events: none;
@@ -35,25 +42,27 @@
   .ff-legend-container {
     display: grid;
     gap: 10px;
+    grid-auto-rows: 1fr;
+
+    &.ff-number-legend {
+      grid-template-columns: repeat(3, 100px);
 
-    &.numberLegend {
-      grid-template-columns: repeat(3, 1fr);
+      &.ff-side-legend{
+        grid-template-columns: repeat(2, 100px);
+      }
       .ff-legend-item {
         display: flex;
         flex-direction: column;
         align-items: center;
-        white-space: nowrap;
-        text-overflow: ellipsis;
       }
     }
 
-    &.pillLegend {
-      grid-template-columns: repeat(2, 1fr);
+    &.ff-pill-legend {
+      grid-template-columns: repeat(2, 130px);
+
       .ff-legend-item {
         display: flex;
         align-items: center;
-        white-space: nowrap;
-        text-overflow: ellipsis;
 
         .ff-legend-capsule {
           background-color: var(--status-success-text-color);
@@ -72,21 +81,19 @@
       }
     }
 
-    &.memoryLegend {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-around;
+    &.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;
-        flex: 1 1 calc(33.33% - 10px);
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 100%;
-        padding-right: 10px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
       }
     }
   }

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

@@ -50,6 +50,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
   showUnit = true,
   labelFontSize = 24,
   subLabelFontSize = 14,
+  legendPosition = 'bottom',
+  legendGap = 0,
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -194,16 +196,22 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
   const renderLegend = (
     legendData: NormalizedChartItem[],
-    legendType: LegendType
+    legendType: LegendType,
+    legendPosition: string
   ) => {
     switch (legendType) {
       case 'numberLegend':
         return (
-          <div className="ff-legend-container numberLegend">
+          <div
+            className={classNames('ff-legend-container ff-number-legend', {
+              'ff-side-legend':
+                legendPosition === 'left' || legendPosition === 'right',
+            })}
+          >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={20}
+                  fontSize={22}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -214,7 +222,11 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={10} className="ff-legend-key">
+                <Typography
+                  fontSize={12}
+                  className="ff-legend-key"
+                  textAlign="center"
+                >
                   {item.key}
                 </Typography>
               </div>
@@ -224,7 +236,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className="ff-legend-container pillLegend">
+          <div className="ff-legend-container ff-pill-legend ">
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -245,7 +257,12 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
       case 'memoryLegend':
         return (
-          <div className="ff-legend-container memoryLegend">
+          <div
+            className={classNames('ff-legend-container ff-memory-legend', {
+              'ff-side-legend':
+                legendPosition === 'left' || legendPosition === 'right',
+            })}
+          >
             {legendData.map((item, index) => (
               <React.Fragment key={index}>
                 <div className="ff-legend-item">
@@ -261,7 +278,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                   >
                     {item.labelValue} {item.unit}
                   </Typography>
-                  <Typography className="ff-legend-key">{item.key}</Typography>
+                  <Typography className="ff-legend-key" textAlign="center">
+                    {item.key}
+                  </Typography>
                 </div>
               </React.Fragment>
             ))}
@@ -271,7 +290,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       case 'tableLegend':
         return (
           <div className="ff-legend-table-wrapper">
-            <table className="ff-legend-table tableLegend">
+            <table className="ff-legend-table">
               <thead>
                 <tr>
                   <th className="ff-table-header">Name</th>
@@ -362,7 +381,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
       className={classNames('ff-dashboard-donut-chart-section', {
         'ff-dashboard-donut-chart-section-table-legend':
           legendType === 'tableLegend',
+        'legend-position-bottom': legendPosition === 'bottom',
+        'legend-position-left': legendPosition === 'left',
       })}
+      style={{ gap: `${legendGap}px` }}
     >
       <div className="ff-dashboard-donut-chart-svg-container">
         <svg
@@ -383,7 +405,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
 
               return renderArc(status, endAngle, i);
             })}
-
             {showOnlyLabel ? (
               <text
                 x="0"
@@ -465,7 +486,6 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             )}
           </g>
         </svg>
-
         {legendType === 'tableLegend' && (
           <div>
             <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
@@ -474,7 +494,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
         )}
         {showTooltip && renderTooltip()}
       </div>
-      {isLegendDetails && renderLegend(nonZeroValues, legendType)}
+      {isLegendDetails && renderLegend(chartValues, legendType, legendPosition)}
     </div>
   );
 };

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

@@ -47,4 +47,6 @@ export type DashboardDonutChartProps = {
   showUnit?: boolean;
   labelFontSize?: number;
   subLabelFontSize?: number;
+  legendPosition? : 'bottom' | 'right' | 'left';
+  legendGap?: number;
 };

package/src/components/Charts/IconRadialChart/IconRadialChart.tsx

@@ -129,6 +129,9 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
             fill="none"
             stroke={backgroundArcColor}
             strokeWidth={lineWidth}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onMouseMove={handleMouseMove}
           />
           {/* Status Arc */}
           <path

package/src/components/Charts/LineChart/LineChart.scss

@@ -8,14 +8,23 @@
   align-items: center;
 }
 .ff-line-chart-text {
-  width: 890px;
   display: flex;
+  justify-content: flex-start;
+  align-items: center;
   .smooth-dot {
-    transition:
-      cx 0.2s ease,
-      cy 0.2s ease;
+    transition: cx 0.2s ease, cy 0.2s ease;
   }
 }
+.ff-line-chart-yAxisLabel {
+  display: flex;
+  white-space: nowrap;
+  transform: rotate(270deg) translateX(60px);
+  transform-origin: right center;
+}
+
+.ff-line-chart-svg {
+  width: inherit;
+}
 
 .ff-line-chart-text1 {
   transform-origin: center;