pixel-react 1.8.3 → 1.8.5

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

@@ -22,31 +22,24 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
         data: [
           {
             date: '25 Oct',
-            totalMemory: 9.86,
-          },
-          {
-            date: '26 Oct',
-            totalMemory: 9.86,
-          },
-          {
-            date: '27 Oct',
-            totalMemory: 9.86,
+            totalMemory: '1 GB',
           },
+
           {
-            date: '28 Oct',
-            totalMemory: 9.9,
+            date: '29 Oct',
+            totalMemory: '200 KB',
           },
           {
-            date: '29 Oct',
-            totalMemory: 100,
+            date: '30 Oct',
+            totalMemory: '40 MB',
           },
           {
             date: '3 Nov',
-            totalMemory: 10.12,
+            totalMemory: '20 MB',
           },
           {
             date: '23 Nov',
-            totalMemory: 10.1,
+            totalMemory: '90 MB',
           },
         ],
       },
@@ -60,7 +53,8 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     numberSize: '10px',
-    proportionalSpacing :false,
+    proportionalSpacing: false,
+    chartName: 'memory',
   },
   render: (args) => (
     <div className="linechart-container">
@@ -72,74 +66,18 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
 export const multiLineScriptsChart: StoryObj<LineChartProps> = {
   args: {
     data: [
-      {
-        color: '#179C5F',
-        name: 'Success',
-        show: true,
-        data: [
-          { date: '1 oct', value: 10 },
-          { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 30 },
-          { date: '4 oct', value: 26 },
-          { date: '5 oct', value: 90 },
-          { date: '6 oct', value: 10 },
-          { date: '7 oct', value: 12 },
-        ],
-      },
-      {
-        color: '#9C1732',
-        name: 'Failed',
-        show: true,
-        data: [
-          { date: '1 oct', value: 50 },
-          { date: '2 oct', value: 30 },
-          { date: '3 oct', value: 40 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 90 },
-          { date: '6 oct', value: 70 },
-          { date: '7 oct', value: 30 },
-        ],
-      },
-      {
-        color: '#E2750F',
-        name: 'Warning',
-        show: true,
-        data: [
-          { date: '1 oct', value: 10 },
-          { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 99 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 10 },
-          { date: '7 oct', value: 10 },
-        ],
-      },
-      {
-        color: '#A83FC4',
-        name: 'Skipped',
-        show: true,
-        data: [
-          { date: '1 oct', value: 40 },
-          { date: '2 oct', value: 10 },
-          { date: '3 oct', value: 10 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 30 },
-          { date: '7 oct', value: 10 },
-        ],
-      },
       {
         color: '#3F5AC4',
         name: 'Flaky',
         show: true,
         data: [
-          { date: '1 oct', value: 20 },
-          { date: '2 oct', value: 40 },
-          { date: '3 oct', value: 30 },
-          { date: '4 oct', value: 10 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 20 },
-          { date: '7 oct', value: 40 },
+          { date: '1 oct', value: 10 },
+          { date: '2 oct', value: 0 },
+          { date: '3 oct', value: 0 },
+          { date: '4 oct', value: 0 },
+          { date: '5 oct', value: 0 },
+          { date: '6 oct', value: 0 },
+          { date: '7 oct', value: 0 },
         ],
       },
     ],
@@ -154,8 +92,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
     textSize: '12px',
-    proportionalSpacing :false,
-
+    proportionalSpacing: false,
+    chartName: 'scripts',
   },
   render: (args) => (
     <div className="linechart-container">
@@ -186,12 +124,12 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         show: true,
         data: [
           { date: '1 oct', value: 50 },
-          { date: '2 oct', value: 30 },
+          { date: '2 oct', value: 0 },
           { date: '3 oct', value: 40 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 90 },
           { date: '6 oct', value: 70 },
-          { date: '7 oct', value: 30 },
+          { date: '7 oct', value: 0 },
         ],
       },
       {
@@ -201,7 +139,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         data: [
           { date: '1 oct', value: 10 },
           { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 90 },
+          { date: '3 oct', value: 0 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 10 },
@@ -213,13 +151,13 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
         name: 'Skipped',
         show: true,
         data: [
-          { date: '1 oct', value: 40 },
+          { date: '1 oct', value: 0 },
           { date: '2 oct', value: 20 },
           { date: '3 oct', value: 10 },
           { date: '4 oct', value: 20 },
           { date: '5 oct', value: 10 },
           { date: '6 oct', value: 30 },
-          { date: '7 oct', value: 10 },
+          { date: '7 oct', value: 0 },
         ],
       },
       {
@@ -231,7 +169,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
           { date: '2 oct', value: 40 },
           { date: '3 oct', value: 30 },
           { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 10 },
+          { date: '5 oct', value: 0 },
           { date: '6 oct', value: 40 },
           { date: '7 oct', value: 20 },
         ],
@@ -249,7 +187,8 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
     yAxisLabelColor: '#252C37',
     textSize: '12px',
     fontWeight: 'semi-bold',
-    proportionalSpacing :false,
+    proportionalSpacing: false,
+    chartName: 'defects',
   },
   render: (args) => (
     <div className="linechart-container">

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

@@ -2,6 +2,11 @@ import React, { useState } from 'react';
 import { LineChartProps } from './types';
 import './LineChart.scss';
 import Typography from '../../Typography';
+import {
+  MEMORY_VALIDATION_REGEX,
+  NUMBER_REGEX,
+  UNIT_REGEX,
+} from '../../../validations/regex';
 
 interface HoverState {
   cursorX: number | null;
@@ -26,53 +31,121 @@ const LineChart: React.FC<LineChartProps> = ({
   fontWeight,
   numberSize,
   proportionalSpacing,
+  chartName,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
   const yMax = height - margin * 2;
 
+  const roundUp = (value: any, decimals = 2) => {
+    let unit = '';
+
+    if (typeof value === 'string') {
+      const match = value.match(NUMBER_REGEX);
+      const unitMatch = value.match(UNIT_REGEX);
+      if (match) {
+        value = parseFloat(match[0]);
+      }
+      if (unitMatch) {
+        unit = unitMatch[0];
+      }
+    }
+
+    const multiplier = Math.pow(10, decimals);
+    const roundedValue = Math.ceil(value * multiplier) / multiplier;
+
+    return `${roundedValue} ${unit}`.trim();
+  };
+  function convertToMB(input: any) {
+    if (!isNaN(input)) {
+      return parseFloat(input);
+    }
+
+    const regex = MEMORY_VALIDATION_REGEX;
+    const match = input.match(regex);
+
+    if (!match) {
+      throw new Error(
+        "Invalid input format. Use '<value> <unit>' format (e.g., '10.9580078125 KB') or just a number."
+      );
+    }
+
+    const value = parseFloat(match[1]);
+    const unit = match[2] ? match[2].toUpperCase() : null;
+
+    switch (unit) {
+      case 'GB':
+        return parseFloat((value * 1024).toFixed(2));
+      case 'MB':
+        return parseFloat(value.toFixed(2));
+      case 'KB':
+        return parseFloat((value / 1024).toFixed(2));
+      default:
+        throw new Error('Invalid unit. Supported units are GB, MB, and KB.');
+    }
+  }
+
   const isDefaultLineChart =
     data[0]?.data[0]?.hasOwnProperty('date') &&
     data[0]?.data[0]?.hasOwnProperty('totalMemory');
   const xKey = isDefaultLineChart ? 'date' : 'date';
   const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
   const xScale = (x: string) => {
-  if (proportionalSpacing) {
-    const date = new Date(x);
-    const time = date.getTime();
-    const minDate = new Date(
-      Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-    const maxDate = new Date(
-      Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
-    );
-
-    return (
-      ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
-      xMax
-    );
-  } else {
-    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
-    if (index === -1) return 0;
-    const totalPoints = data[0].data.length;
-    return (index / (totalPoints - 1)) * xMax;
-  }
-};
+    if (proportionalSpacing) {
+      const date = new Date(x);
+      const time = date.getTime();
+      const minDate = new Date(
+        Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+      );
+      const maxDate = new Date(
+        Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
+      );
+
+      return (
+        ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
+        xMax
+      );
+    } else {
+      const index = data[0].data.findIndex((point: any) => point[xKey] === x);
+      if (index === -1) return 0;
+      const totalPoints = data[0].data.length;
+      return (index / (totalPoints - 1)) * xMax;
+    }
+  };
 
+  const maxValue = Math.max(
+    ...data.flatMap((line) =>
+      line.data.map((point: any) => convertToMB(point[yKey]))
+    )
+  );
 
-  const yScale = (y: number) => yMax - (y * yMax) / 1024;
+  const yScale = (y: number) => {
+    if (chartName === 'memory') {
+      const maxMemoryValue = Math.max(
+        ...data.flatMap((line) =>
+          line.data.map((point: any) => convertToMB(point[yKey]))
+        )
+      );
+
+      const scaleMax = maxMemoryValue > 1024 ? maxMemoryValue : 1024;
+
+      return yMax - (y * yMax) / scaleMax;
+    } else {
+      return yMax - (y * yMax) / (maxValue === 0 ? 1024 : maxValue);
+    }
+  };
 
   const generateLinePath = (lineData: { [key: string]: any }[]) =>
     lineData.reduce((path, point, i) => {
       const x = xScale(point[xKey]);
-      const y = yScale(point[yKey]);
+      const y = yScale(convertToMB(point[yKey]));
       if (i === 0) {
         return `M ${x} ${y}`;
       }
 
       const prevPoint = lineData[i - 1];
       const prevX = prevPoint ? xScale(prevPoint[xKey]) : 0;
-      const prevY = prevPoint ? yScale(prevPoint[yKey]) : 0;
+      const prevY = prevPoint ? yScale(convertToMB(prevPoint[yKey])) : 0;
 
       return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
         x - (x - prevX) / 2
@@ -108,10 +181,10 @@ const LineChart: React.FC<LineChartProps> = ({
 
       if (nearestPoint) {
         nearestXValue = nearestPoint[xKey];
-        nearestValues.hoverValues[lineIndex] = nearestPoint[yKey];
+        nearestValues.hoverValues[lineIndex] = roundUp(nearestPoint[yKey]);
         nearestValues.dotPositions[lineIndex] = {
           x: nearestXValue ? xScale(nearestXValue) : 0,
-          y: yScale(nearestPoint[yKey]),
+          y: yScale(convertToMB(nearestPoint[yKey])),
         };
       }
     });
@@ -243,22 +316,45 @@ const LineChart: React.FC<LineChartProps> = ({
                 </text>
               ))}
 
-            {Array.from({ length: 6 }).map((_, i) => {
-              const yValueInGB = i * 0.2;
-              return (
-                <text
-                  key={yValueInGB}
-                  x={-15}
-                  y={yScale(yValueInGB * 1024)}
-                  textAnchor="middle"
-                  fill={yAxisValueColor}
-                  className="ff-line-chart-y-axis-text"
-                  style={{ fontSize: numberSize }}
-                >
-                  {yValueInGB.toFixed(1)}
-                </text>
-              );
-            })}
+            {chartName === 'memory'
+              ? Array.from({ length: 6 }).map((_, i) => {
+                  const dynamicMaxValue = maxValue < 1024 ? 1024 : maxValue;
+                  const isSmallScale = maxValue < 1024;
+                  const yValue = (i * dynamicMaxValue) / 5;
+                  const displayValue = isSmallScale
+                    ? yValue / 1024
+                    : yValue / 1024;
+
+                  return (
+                    <text
+                      key={yValue}
+                      x={-10}
+                      y={yScale(yValue)}
+                      textAnchor="end"
+                      fill={yAxisValueColor}
+                      className="ff-line-chart-y-axis-text"
+                      style={{ fontSize: numberSize }}
+                    >
+                      {displayValue.toFixed(1)}
+                    </text>
+                  );
+                })
+              : Array.from({ length: 6 }).map((_, i) => {
+                  const yValue = (i * maxValue) / 5;
+                  return (
+                    <text
+                      key={yValue}
+                      x={-10}
+                      y={yScale(yValue)}
+                      textAnchor="end"
+                      fill={yAxisValueColor}
+                      className="ff-line-chart-y-axis-text"
+                      style={{ fontSize: numberSize }}
+                    >
+                      {yValue.toFixed(0)}
+                    </text>
+                  );
+                })}
           </g>
         </svg>
         {hoverState.tooltip.visible && (

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

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

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

@@ -4,7 +4,7 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-
+  gap: 16px;
   &.ff-multi-radial-chart-number {
     flex-direction: column;
   }
@@ -68,8 +68,8 @@
           background-color: var(--status-success-text-color);
           color: var(--text-color);
           border-radius: 15px;
-          min-width: 25px;
-          height: 18px;
+          min-width: 21px;
+          height: 15px;
           display: flex;
           justify-content: center;
           align-items: center;

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

@@ -2,8 +2,6 @@ import React, { useState } from 'react';
 import { MultiRadialChartProps, ChartItem, LegendType } from './types';
 import './MultiRadialChart.scss';
 import Typography from '../../Typography';
-import { truncateText } from '../../../utils/truncateText/truncateText';
-
 const calculateArc = (
   centerX: number,
   centerY: number,
@@ -16,10 +14,7 @@ const calculateArc = (
   const endX = centerX + radius * Math.cos(endAngle);
   const endY = centerY + radius * Math.sin(endAngle);
   const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-  return `
-    M ${startX} ${startY}
-    A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}
-  `;
+  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
 };
 
 const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
@@ -86,7 +81,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className={`ff-legend-container ff-pill-legend`}>
+          <div className="ff-legend-container ff-pill-legend">
             {legendData.reverse().map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -95,12 +90,9 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     backgroundColor: item.arcColor,
                   }}
                 >
-                  <Typography fontSize={10}>{item.value}</Typography>
+                  <Typography fontSize={10} color="var(--tooltip-text-color)">{item.value}</Typography>
                 </span>
-                <Typography
-                  className="ff-legend-key"
-                  color="  var(--text-color)"
-                >
+                <Typography className="ff-legend-key">
                   {item.label}
                 </Typography>
               </div>
@@ -139,12 +131,16 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   const textData = (text: string, maxLength: number) => {
     return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
   };
+
   const getArcColorFromTooltip = () => {
     if (!tooltip.visible) return '';
-    const value = tooltip.content.split(':')[1]?.trim();
-    const matchingBar = barValues.find((val) => `${val.value}` === value);
-    return matchingBar?.arcColor || '';
+    const valueString = tooltip.content.split(':')[1]?.trim(); 
+    const value = valueString ? Number(valueString) : undefined; 
+    if (value === undefined) return ''; 
+    const matchingBar = barValues.find((val) => val.value === value); 
+    return matchingBar?.arcColor || ''; 
   };
+
   return (
     <div
       className={`ff-multi-radial-chart-container ${
@@ -154,40 +150,51 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
       }`}
     >
       <div className="relative" style={{ width: svgSize, height: svgSize }}>
-        <svg
-          width={svgSize}
-          height={svgSize}
-          viewBox={`0 0 ${svgSize} ${svgSize}`}
-          className="absolute top-0 left-0"
-        >
+        <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
           <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
             {reversedBarValues.map((values, i) => {
               const originalIndex = barValues.length - 1 - i;
               const percentage = values.value / totalBarValue;
               const angleIncrement = percentage * 2 * Math.PI;
-              let startAngle = -Math.PI / 2;
+              let startAngle = -Math.PI / 2; 
               let endAngle = startAngle + angleIncrement;
               if (values.value === totalBarValue) {
                 startAngle = 0;
                 endAngle = 2 * Math.PI;
               }
-              const currentRadius =
-                baseRadius + radiusIncrement * originalIndex;
-              const backGroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                0,
-                2 * Math.PI
-              );
+              const currentRadius = baseRadius + radiusIncrement * originalIndex;
 
-              const foregroundArcPath = calculateArc(
-                0,
-                0,
-                currentRadius,
-                startAngle,
-                endAngle
-              );
+              const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
+
+              // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
+              if (values.value === 0) {
+                const dotX = currentRadius * Math.cos(-Math.PI / 2);
+                const dotY = currentRadius * Math.sin(-Math.PI / 2); 
+                return (
+                  <g key={originalIndex}>
+                    <path
+                      d={backGroundArcPath}
+                      fill="none"
+                      stroke={values.arcBackgroundColor}
+                      strokeWidth={lineWidth}
+                      className="transition-all duration-300"
+                    />
+                    <circle
+                      cx={dotX}
+                      cy={dotY}
+                      r={5}
+                      fill={values.arcColor}
+                      onMouseEnter={(e) =>
+                        handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                      }
+                      onMouseMove={handleMouseMove}
+                      onMouseLeave={handleMouseLeave}
+                    />
+                  </g>
+                );
+              }
+
+              const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
               return (
                 <g key={originalIndex}>
                   <path
@@ -204,10 +211,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     strokeWidth={lineWidth}
                     strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
                     onMouseEnter={(e) =>
-                      handleMouseEnter(
-                        e,
-                        `${values.barLabel || 'Data'}: ${values.value}`
-                      )
+                      handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
                     }
                     onMouseMove={handleMouseMove}
                     onMouseLeave={handleMouseLeave}
@@ -294,7 +298,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
         renderLegend(
           barValues.map((value) => ({
             ...value,
-            label: truncateText(value?.barLabel, 8),
+            label:value?.barLabel,
             key: value.value.toString(),
           })),
           legendType

package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx

@@ -44,6 +44,7 @@ const Template: StoryFn<ConditionalDropdownProps> = (args) => {
         value={inputValue}
         onCreateVariableClick={() => setOpenCreateVariable(true)}
         ref={inputRef}
+        showAddVariableIcon
       />
       {openCreateVariable && (
         <CreateVariableSlider

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -30,6 +30,7 @@ const ConditionalDropdown = forwardRef<
       dropdownWidth = 'inherit',
       isHash = false,
       dataFiles = [],
+      showAddVariableIcon = true,
       ...props
     },
     ref
@@ -122,7 +123,7 @@ const ConditionalDropdown = forwardRef<
             label={label}
             placeholder={placeholder}
           />
-          {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
+          {!checkEmpty(value) && !isHash && showCreateVariableIcon && showAddVariableIcon && (
             <Icon
               onClick={onCreateVariableClick}
               name="add_variable"

package/src/components/ConditionalDropdown/types.ts

@@ -130,6 +130,10 @@ export interface ConditionalDropdownProps {
    * Options for the dropdown when `isHash` is true.
    */
   dataFiles?: dynamicObject[];
+  /**
+   * a boolean prop to show add variable icon or not.
+   */
+  showAddVariableIcon?: boolean;
 }
 
 export interface OptionsDropdownProps {

package/src/components/Drawer/Drawer.stories.tsx

@@ -143,6 +143,7 @@ export const Controlled: Story = {
         <Drawer
           {...defaultArgs}
           isOpen={showModal}
+          onCollapse={() => {}}
           onClose={() => setShowModal(false)}
           isFooterRequired={true}
           _isExpanded={false}