pixel-react 1.9.8 → 1.10.0

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

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import './BarChart.scss';
 import Typography from '../../Typography';
 import Icon from '../../Icon';
 import { truncateText } from '../../../utils/truncateText/truncateText';
 
 type BarChartProps = {
-  data: { label: string; value: number }[];
+  data: {
+    label: string;
+    value: number;
+  }[];
   barWidth: number;
   height: number;
   barGap?: number;
@@ -18,11 +21,13 @@ type BarChartProps = {
   barBorderRadius?: number;
   legend?: boolean;
   showXAxisLabels?: boolean;
-  icons?: (string | React.ReactNode)[]; 
+  icons?: (string | React.ReactNode)[];
   iconSize?: number;
   backgroundColor?: string;
   legendPosition?: 'top' | 'bottom';
   legendGap?: number;
+  extendBarChartRightWidth?: number;
+  isYAxisValuePercentage?: boolean;
   onSelectedBar?: (_label: string) => void;
 };
 
@@ -44,42 +49,44 @@ const BarChart: React.FC<BarChartProps> = ({
   iconSize,
   legendPosition = 'bottom',
   legendGap = 5,
+  extendBarChartRightWidth = 0,
+  isYAxisValuePercentage = false,
   onSelectedBar = (_label) => {},
 }) => {
-  const [tooltip, setTooltip] = useState<{
-    visible: boolean;
-    content: string;
-    x: number;
-    y: number;
-    borderColor: string;
-  }>({ visible: false, content: '', x: 0, y: 0, borderColor: 'transparent' });
-
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [selectedBar, setSelectedBar] = useState<string | null>(null);
   const maxValue = Math.max(...data.map((item) => item.value));
   const topPadding = 40;
   const leftPadding = 40;
   const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
-  const chartWidth = totalBarWidth + leftPadding * 2 + 10;
+  const chartWidth =
+    totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
 
   const renderGradients = (gradients: string[][]) => {
-    return gradients.map((gradient, index) => (
-      <defs key={index}>
-        <linearGradient
-          id={`gradient-${index}`}
-          x1="0%"
-          y1="0%"
-          x2="0%"
-          y2="100%"
-        >
-          {gradient.map((color, i) => (
-            <stop
-              key={i}
-              offset={`${(i / (gradient.length - 1)) * 100}%`}
-              stopColor={color}
-            />
-          ))}
-        </linearGradient>
-      </defs>
-    ));
+    const generateKey = Date.now();
+    return gradients.map((gradient, index) => {
+      return (
+        <defs key={`${generateKey}-${index}`}>
+          <linearGradient
+            id={`gradient-${index}`}
+            x1="0%"
+            y1="0%"
+            x2="0%"
+            y2="100%"
+          >
+            {gradient.map((color, i) => {
+              return (
+                <stop
+                  key={`${generateKey}-${index}-${i}`}
+                  offset={`${(i / (gradient.length - 1)) * 100}%`}
+                  stopColor={color}
+                />
+              );
+            })}
+          </linearGradient>
+        </defs>
+      );
+    });
   };
 
   const getFillColor = (index: number) =>
@@ -87,49 +94,45 @@ const BarChart: React.FC<BarChartProps> = ({
       ? `url(#gradient-${index % colors.length})`
       : 'grey';
 
-  const getBorderColor = (index: number) => {
-    return colors?.[index % colors.length]?.[0] || 'grey';
-  };
-
-  const handleMouseEnter = (
-    e: React.MouseEvent,
-    label: string,
-    value: number,
-    color: string
-  ) => {
-    setTooltip({
-      visible: true,
-      content: `${label}: ${value}`,
-      x: e.clientX,
-      y: e.clientY,
-      borderColor: color,
-    });
+  const handleMouseEnter = (label: string, value: number) => {
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      tooltip.style.display = 'block';
+      tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${
+        isYAxisValuePercentage ? '%' : ''
+      }`;
+    }
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    setTooltip((prevTooltip) => ({
-      ...prevTooltip,
-      x: e.clientX,
-      y: e.clientY,
-    }));
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      const rect = tooltip.parentElement?.getBoundingClientRect();
+      const xOffset = window.scrollX;
+      const yOffset = window.scrollY;
+      const tooltipX = e.clientX - (rect?.left || 0) + xOffset + 10;
+      const tooltipY = e.clientY - (rect?.top || 0) + yOffset + 10;
+      tooltip.style.left = `${tooltipX}px`;
+      tooltip.style.top = `${tooltipY}px`;
+    }
   };
 
   const handleMouseLeave = () => {
-    setTooltip({
-      visible: false,
-      content: '',
-      x: 0,
-      y: 0,
-      borderColor: 'transparent',
-    });
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      tooltip.style.display = 'none';
+    }
   };
 
   const handleSelectLabel = (label: string) => {
+    setSelectedBar(label);
     onSelectedBar(label);
   };
 
   return (
     <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
+      <div ref={tooltipRef} className="ff-bar-chart-tooltip" />
+
       {legend && legendPosition === 'top' && (
         <div className="ff-legend-container">
           <div
@@ -194,7 +197,17 @@ const BarChart: React.FC<BarChartProps> = ({
                 textAnchor="middle"
                 className="ff-bar-chart-labels"
               >
-                {((i * maxValue) / yAxisDivisions).toFixed(1)}
+                {`${
+                  isYAxisValuePercentage
+                    ? `${((i * maxValue) / yAxisDivisions)
+                        .toFixed(0)
+                        .toString()
+                        .padStart(2, '0')}%`
+                    : ((i * maxValue) / yAxisDivisions)
+                        .toFixed(0)
+                        .toString()
+                        .padStart(2, '0')
+                }`}
               </text>
             );
           })}
@@ -209,6 +222,8 @@ const BarChart: React.FC<BarChartProps> = ({
             const iconX = barX + barWidth / 2 - iconWidth / 2;
             const iconY = barY - iconWidth;
 
+            const isSelected = selectedBar === item.label;
+
             return (
               <g key={index}>
                 {icons[index] && typeof icons[index] === 'string' && (
@@ -230,14 +245,12 @@ const BarChart: React.FC<BarChartProps> = ({
                   fill={getFillColor(index)}
                   rx={barBorderRadius}
                   ry={barBorderRadius}
-                  onMouseEnter={(e) =>
-                    handleMouseEnter(
-                      e,
-                      item.label,
-                      item.value,
-                      getBorderColor(index)
-                    )
-                  }
+                  style={{
+                    fill: isSelected ? 'blue' : getFillColor(index),
+                    strokeWidth: isSelected ? 3 : 0,
+                    opacity: isSelected ? 0.9 : 1,
+                  }}
+                  onMouseEnter={() => handleMouseEnter(item.label, item.value)}
                   onMouseMove={handleMouseMove}
                   onMouseLeave={handleMouseLeave}
                   onClick={() => handleSelectLabel(item.label)}
@@ -245,15 +258,19 @@ const BarChart: React.FC<BarChartProps> = ({
 
                 {showXAxisLabels && (
                   <text
-                    x={barX + barWidth / 2}
+                    x={
+                      index == 0
+                        ? barX
+                        : index === data.length - 1
+                        ? barX + barWidth
+                        : barX + barWidth / 2
+                    }
                     y={height + topPadding + 15}
                     fill="black"
-                    textAnchor="middle"
+                    textAnchor={index == 0 ? 'start' : 'middle'}
                     className="ff-bar-chart-labels"
                   >
-                    {isTruncateText
-                      ? truncateText(item.label, 10)
-                      : item.label}
+                    {isTruncateText ? truncateText(item.label, 10) : item.label}
                   </text>
                 )}
               </g>
@@ -334,18 +351,6 @@ const BarChart: React.FC<BarChartProps> = ({
           </div>
         </div>
       )}
-
-      {tooltip.visible && (
-        <div
-          className="ff-bar-chart-tooltip"
-          style={{
-            top: tooltip.y - 20,
-            left: tooltip.x + 10,
-          }}
-        >
-          {tooltip.content}
-        </div>
-      )}
     </div>
   );
 };

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

@@ -381,6 +381,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                           ? item.percentage
                           : typeof item.value === 'string'
                           ? ((parseFloat(item.value) / total) * 100).toFixed(1)
+                          : total === 0
+                          ? 0
                           : ((item.value / total) * 100).toFixed(1)}
                       </td>
                     </td>

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

@@ -47,5 +47,6 @@ export const WithoutIcon: Story = {
     percentageValue: 30,
     label: 'Step',
     fontSize: 12,
+    labelColor:'black',
   },
 };

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

@@ -67,6 +67,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
   percentageValue,
   icon,
   fontSize = 10,
+  labelColor = '',
   arcColor = 'var(--brand-color)',
   backgroundArcColor = 'var(--ff-select-scroll-thumb-color)',
 }) => {
@@ -156,7 +157,7 @@ const IconRadialChart: React.FC<IconRadialChartProps> = ({
             <text
               x="0"
               y="0"
-              fill={arcColor}
+              fill={labelColor || arcColor}
               textAnchor="middle"
               dominantBaseline="central"
             >

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

@@ -4,9 +4,10 @@ export interface IconRadialChartProps {
   label: string;
   percentageValue: number;
   icon?: string;
-  fontSize: number;
-  arcColor: string;
-  backgroundArcColor: string;
+  fontSize?: number;
+  labelColor?:string;
+  arcColor?: string;
+  backgroundArcColor?: string;
 }
 
 //type for the calculateArc function

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

@@ -157,7 +157,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 30 },
-          { date: '7 oct', value: 0 },
+          { date: '7 oct ', value: 0 },
         ],
       },
       {
@@ -165,7 +165,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         name: 'Flaky',
         show: true,
         data: [
-          { date: '1 oct', value: 20 },
+          { date: '1 oct', value: 50 },
           { date: '2 oct', value: 40 },
           { date: '3 oct', value: 30 },
           { date: '4 oct', value: 20 },
@@ -189,6 +189,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
     fontWeight: 'semi-bold',
     proportionalSpacing: false,
     chartName: 'defects',
+    xAxisLabelGap:20,
   },
   render: (args) => (
     <div className="linechart-container">

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

@@ -32,6 +32,7 @@ const LineChart: React.FC<LineChartProps> = ({
   numberSize,
   proportionalSpacing,
   chartName,
+  xAxisLabelGap = 16,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -212,7 +213,10 @@ const LineChart: React.FC<LineChartProps> = ({
   const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
-    <div className="ff-line-chart-text" style={{ width: width + 20 }}>
+    <div
+      className="ff-line-chart-text"
+      style={{ width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }}
+    >
       <div
         className="ff-line-chart-yAxisLabel-warpper"
         style={{ height: height }}
@@ -302,12 +306,12 @@ const LineChart: React.FC<LineChartProps> = ({
             )}
             {data[0].data
               .filter((_: any, index: number) => index % xTickInterval === 0)
-              .map((point: { [key: string]: any }) => (
+              .map((point: { [key: string]: any }, index: number) => (
                 <text
                   key={String(point[xKey])}
                   x={xScale(point[xKey])}
                   y={yMax + 15}
-                  textAnchor="middle"
+                  textAnchor={index === 0 ? 'start' : 'middle'}
                   fill={yAxisColor}
                   className="ff--line-chart-x-line-data"
                   style={{ fontSize: numberSize }}

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

@@ -28,4 +28,5 @@ export interface LineChartProps {
   numberSize?: string | number;
   proportionalSpacing?: boolean;
   chartName?: string;
+  xAxisLabelGap?:number;
 }

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

@@ -1,6 +1,7 @@
 @use '../../../assets/styles/fonts';
 
 .ff-multi-radial-chart-container {
+  position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import MultiRadialChart from './MultiRadialChart';
 
@@ -42,8 +43,8 @@ export const Default: Story = {
     lineCap: 'round',
     legendType: 'numberLegend',
     isLegendDetails: true,
-     chartToPillGap: "16px",
-    pillLegendGap: "15px"
+    chartToLegendGap: '16px',
+    legendGap: '15px',
   },
 };
 
@@ -76,8 +77,8 @@ export const numberLegend: Story = {
     lineCap: 'square',
     legendType: 'numberLegend',
     isLegendDetails: true,
-     chartToPillGap: "16px",
-    pillLegendGap: "15px"
+    chartToLegendGap: '16px',
+    legendGap: '15px',
   },
 };
 
@@ -117,7 +118,53 @@ export const PillLegend: Story = {
     isLegendDetails: true,
     labelFontSize: 12,
     subLabelFontSize: 8,
-    chartToPillGap: "16px",
-    pillLegendGap: "15px"
+    chartToLegendGap: '16px',
+    legendGap: '15px',
+  },
+};
+
+export const ExecutionCompare: Story = {
+  render: () => {
+    return (
+      <MultiRadialChart
+        barValues={[
+          {
+            arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
+            arcColor: 'var(--ff-card-skipped-status-bg-color)',
+            barLabel: 'Skipped',
+            value: 0,
+          },
+          {
+            arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
+            arcColor: 'var(--ff-card-warning-status-bg-color)',
+            barLabel: 'Warning',
+            value: 0,
+          },
+          {
+            arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
+            arcColor: 'var(--ff-card-failed-status-bg-color)',
+            barLabel: 'Failed',
+            value: 0,
+          },
+          {
+            arcBackgroundColor: 'var(--ff-progress-bar-bg-color)',
+            arcColor: 'var(--ff-card-passed-status-bg-color)',
+            barLabel: 'Passed',
+            value: 0,
+          },
+        ]}
+        fontSize={12}
+        isLegendDetails
+        labelHeading="00 Module"
+        legendType="pillLegend"
+        lineCap="round"
+        subLabelFontSize={12}
+        lineWidth={3}
+        radius={35}
+        chartToLegendGap="16px"
+        legendGap="8px"
+        gapBetweenArch={6}
+      />
+    );
   },
 };