pixel-react-excel-sheet 1.0.11 → 1.0.13

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;
 };

package/src/components/Charts/DonutChart/DonutChart.tsx

@@ -51,8 +51,7 @@ const DonutChart: React.FC<DonutChartProps> = ({
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
   let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
-  let currentAngle = Math.PI / 2;
-
+  let currentAngle = -Math.PI / 2;
   const MIN_PERCENTAGE = 1;
   const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
   let minAngleTotal = 0;
@@ -98,7 +97,11 @@ const DonutChart: React.FC<DonutChartProps> = ({
           strokeWidth={lineWidth}
           onMouseEnter={() => handleMouseEnter(normalizedStatus)}
           onMouseLeave={handleMouseLeave}
-          strokeOpacity={0.8}
+          strokeOpacity={
+            hoveredStatus === null || hoveredStatus === normalizedStatus
+              ? 0.8
+              : 0.3
+          }
         />
         {/* Hover effect */}
         {hoveredStatus === normalizedStatus && (
@@ -129,6 +132,8 @@ const DonutChart: React.FC<DonutChartProps> = ({
             ? 'ff-highlighted'
             : 'ff-fade'
         }`}
+        onMouseEnter={() => handleMouseEnter(statusKey)}
+        onMouseLeave={handleMouseLeave}
       >
         <div className="ff-status-label">
           <div

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

@@ -15,15 +15,19 @@
     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-yAxisLabel-warpper {
+  position: relative;
+  min-width: 20px;
+  height: 100%;
+  .ff-line-chart-yAxisLabel {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    display: flex;
+    white-space: nowrap;
+    transform: rotate(270deg) translateX(60%);
+    transform-origin: right center;
+  }
 }
 
 .ff-line-chart-text1 {

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

@@ -130,8 +130,11 @@ const LineChart: React.FC<LineChartProps> = ({
   const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
-    <div className="ff-line-chart-text" style={{ width: width }}>
-      <div>
+    <div className="ff-line-chart-text" style={{ width: width + 20 }}>
+      <div
+        className="ff-line-chart-yAxisLabel-warpper"
+        style={{ height: height }}
+      >
         {' '}
         <Typography
           className="ff-line-chart-yAxisLabel"
@@ -145,6 +148,7 @@ const LineChart: React.FC<LineChartProps> = ({
         {' '}
         <svg
           height={height}
+          width={width}
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
           className="ff-line-chart-svg"

package/src/components/Charts/RadialChart/RadialChart.scss

@@ -2,7 +2,11 @@
 
 .ff-radial-chart-container {
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   svg {
+    vertical-align: middle;
     text {
       @extend .font-size-8;
       font-size: var(--fontSize) !important;

package/src/components/Charts/RadialChart/RadialChart.tsx

@@ -6,6 +6,7 @@ import {
   ArcResult,
   ArcAnglesResult,
 } from './types';
+import Tooltip from '../../Tooltip';
 
 const useColorMappings = () =>
   useMemo(() => {
@@ -117,54 +118,59 @@ const RadialChart: React.FC<RadialChartProps> = ({
           calculateArcAngles(status.value, total, currentAngle, radius);
         currentAngle = endAngle;
         return (
-          <svg
-            key={status.status}
-            width={svgSize}
-            height={svgSize}
-            viewBox={`0 0 ${svgSize} ${svgSize}`}
-            onClick={() => onClick(status)}
-            role="img"
-            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
+          <Tooltip
+            title={`${status.status}: ${Math.round(percentage * 100)}%`}
+            zIndex={1000}
           >
-            <g
-              transform={`translate(${radius + lineWidth}, ${
-                radius + lineWidth
-              })`}
+            <svg
+              key={status.status}
+              width={svgSize}
+              height={svgSize}
+              viewBox={`0 0 ${svgSize} ${svgSize}`}
+              onClick={() => onClick(status)}
+              role="img"
+              aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
             >
-              {/* Background Circle */}
-              <path
-                d={backgroundArcPath}
-                fill="none"
-                stroke={
-                  backgroundColorMapping[
-                    normalizedStatus as keyof typeof colorMapping
-                  ]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Status Arc */}
-              <path
-                d={foregroundArcPath}
-                fill="none"
-                stroke={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Percentage Text */}
-              <text
-                x="0"
-                y="0"
-                fill={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                textAnchor="middle"
-                dominantBaseline="central"
+              <g
+                transform={`translate(${radius + lineWidth}, ${
+                  radius + lineWidth
+                })`}
               >
-                {`${Math.round(percentage * 100)}%`}
-              </text>
-            </g>
-          </svg>
+                {/* Background Circle */}
+                <path
+                  d={backgroundArcPath}
+                  fill="none"
+                  stroke={
+                    backgroundColorMapping[
+                      normalizedStatus as keyof typeof colorMapping
+                    ]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Status Arc */}
+                <path
+                  d={foregroundArcPath}
+                  fill="none"
+                  stroke={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Percentage Text */}
+                <text
+                  x="0"
+                  y="0"
+                  fill={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                >
+                  {`${Math.round(percentage * 100)}%`}
+                </text>
+              </g>
+            </svg>
+          </Tooltip>
         );
       })}
     </div>

package/src/components/Checkbox/Checkbox.scss

@@ -55,10 +55,49 @@
   .ff-checkbox-input:checked + .ff-checkbox-custom {
     background: var(--brand-color);
     border-color: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background-color: var(--ff-card-passed-status-bg-color);
+        border-color: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background-color: var(--ff-card-failed-status-bg-color);
+        border-color: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background-color: var(--ff-card-warning-status-bg-color);
+        border-color: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background-color: var(--ff-card-skipped-status-bg-color);
+        border-color: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background-color: var(-- ff-card-flaky-status-bg-color);
+        border-color: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
   }
 
   .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
     background: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
     &::after {
       opacity: 1;
     }
@@ -86,4 +125,22 @@
       }
     }
   }
+
+  .ff-checkbox {
+    &--passed {
+      border-color: var(--ff-card-passed-status-bg-color);
+    }
+    &--failed {
+      border-color: var(--ff-card-failed-status-bg-color);
+    }
+    &--warning {
+      border-color: var(--ff-card-warning-status-bg-color);
+    }
+    &--skipped {
+      border-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &--flaky {
+      border-color: var(-- ff-card-flaky-status-bg-color);
+    }
+  }
 }