pixel-react 1.5.5 → 1.5.7

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import LineChart from './LineChart';
 import { LineChartProps } from './types';
+import React from 'react';
 
 const meta: Meta<typeof LineChart> = {
   title: 'Components/LineChart',
@@ -19,24 +20,49 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
         color: '#4C90FF',
         name: 'default',
         data: [
-          { date: '1 oct', totalMemory: 0 },
-          { date: '2 oct', totalMemory: 9 },
-          { date: '3 oct', totalMemory: 0 },
-          { date: '4 oct', totalMemory: 0 },
-          { date: '5 oct', totalMemory: 0 },
-          { date: '6 oct', totalMemory: 0 },
-          { date: '7 oct', totalMemory: 0 },
+          {
+            date: '25 Oct',
+            totalMemory: 9.86,
+          },
+          {
+            date: '26 Oct',
+            totalMemory: 9.86,
+          },
+          {
+            date: '27 Oct',
+            totalMemory: 9.86,
+          },
+          {
+            date: '28 Oct',
+            totalMemory: 9.9,
+          },
+          {
+            date: '29 Oct',
+            totalMemory: 100,
+          },
+          {
+            date: '30 Oct',
+            totalMemory: 10.12,
+          },
+          {
+            date: '31 Oct',
+            totalMemory: 10.1,
+          }, {
+            date: '1 nov',
+            totalMemory: 10.1,
+          },
         ],
       },
     ],
-    width: 600,
-    height: 272,
+    width: 604,
+    height: 232,
     axisColor: '#000000',
     lineChartWidth: 3,
     yAxisLabel: 'Total Memory (GB)',
     yAxisValueColor: '#252C37',
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
+    numberSize:"10px"
   },
   render: (args) => (
     <div className="linechart-container">
@@ -45,35 +71,35 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
   ),
 };
 
-export const StatusLineChart: StoryObj<LineChartProps> = {
+export const multiLineScriptsChart: StoryObj<LineChartProps> = {
   args: {
     data: [
       {
-        color: '#179C5F', 
+        color: '#179C5F',
         name: 'Success',
         show: true,
         data: [
-          { date: '1 oct', value: 0 },
-          { date: '2 oct', value: 0 },
-          { date: '3 oct', value: 0 },
-          { date: '4 oct', value: 6 },
-          { date: '5 oct', value: 10 },
-          { date: '6 oct', value: 11 },
+          { 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', 
+        color: '#9C1732',
         name: 'Failed',
         show: true,
         data: [
-          { date: '1 oct', value: 5 },
-          { date: '2 oct', value: 3 },
-          { date: '3 oct', value: 4 },
-          { date: '4 oct', value: 2 },
-          { date: '5 oct', value: 6 },
-          { date: '6 oct', value: 7 },
-          { date: '7 oct', value: 3 },
+          { 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 },
         ],
       },
       {
@@ -81,46 +107,46 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
         name: 'Warning',
         show: true,
         data: [
-          { date: '1 oct', value: 1 },
-          { date: '2 oct', value: 2 },
-          { date: '3 oct', value: 4 },
-          { date: '4 oct', value: 2 },
-          { date: '5 oct', value: 1 },
-          { date: '6 oct', value: 1 },
-          { date: '7 oct', value: 0 },
+          { 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', 
+        color: '#A83FC4',
         name: 'Skipped',
         show: true,
         data: [
-          { date: '1 oct', value: 4 },
-          { date: '2 oct', value: 0 },
-          { date: '3 oct', value: 1 },
-          { date: '4 oct', value: 2 },
-          { date: '5 oct', value: 1 },
-          { date: '6 oct', value: 3 },
-          { date: '7 oct', value: 0 },
+          { 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', 
+        color: '#3F5AC4',
         name: 'Flaky',
         show: true,
         data: [
-          { date: '1 oct', value: 2 },
-          { date: '2 oct', value: 4 },
-          { date: '3 oct', value: 3 },
-          { date: '4 oct', value: 0 },
-          { date: '5 oct', value: 1 },
-          { date: '6 oct', value: 0 },
-          { date: '7 oct', value: 2 },
+          { 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 },
         ],
       },
     ],
-    width: 800,
-    height: 272,
+    width: 441,
+    height: 232,
     axisColor: '#000000',
     lineChartWidth: 2,
     yAxisLabel: 'Number Of Defects',
@@ -129,10 +155,103 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
-  },
+    textSize:"12px",  },
   render: (args) => (
     <div className="linechart-container">
       <LineChart {...args} />
     </div>
   ),
 };
+export const multiLineDefectsChart: StoryObj<LineChartProps> = {
+    args: {
+      data: [
+        {
+          color: '#179C5F',
+          name: 'Success',
+          show: true,
+          data: [
+            { date: '1 oct', value: 20 },
+            { date: '2 oct', value: 10 },
+            { date: '3 oct', value: 30 },
+            { date: '4 oct', value: 60 },
+            { 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: 90 },
+            { 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: 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 },
+          ],
+        },
+        {
+          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: 20 },
+            { date: '5 oct', value: 10 },
+            { date: '6 oct', value: 40 },
+            { date: '7 oct', value: 20 },
+          ],
+        },
+      ],
+      width: 700,
+      height: 232,
+      axisColor: '#000000',
+      lineChartWidth: 2,
+      yAxisLabel: 'Number Of script',
+      xAxisLabel: 'Number Of Days',
+      yAxisValueColor: '#252C37',
+      xAxisColor: '#D9D9D9',
+      yAxisColor: '#252C37',
+      yAxisLabelColor: '#252C37',
+    textSize:"12px",
+    fontWeight:"semi-bold"
+    },
+    render: (args) => (
+      <div className="linechart-container">
+        <LineChart {...args} />
+      </div>
+    ),
+  };

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { LineChartProps } from './types';
 import './LineChart.scss';
+import Typography from '../../Typography';
 
 interface HoverState {
   cursorX: number | null;
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
   xAxisColor,
   yAxisColor,
   yAxisLabelColor,
+  textSize,
+  fontWeight,
+  numberSize,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
   const isDefaultLineChart =
     data[0]?.data[0]?.hasOwnProperty('date') &&
     data[0]?.data[0]?.hasOwnProperty('totalMemory');
-  const xKey = isDefaultLineChart ? 'date' : 'date'; // 'date' for DefaultLineChart, 'x' for StatusLineChart
-  const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; // 'totalMemory' for DefaultLineChart, 'y' for StatusLineChart
-
-  const allZero = data.every((line) =>
-    line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
-  );
-
-  const yMaxExtended = allZero
-    ? 4
-    : Math.max(
-        ...data.flatMap((line) =>
-          line.data.map((d: { [key: string]: any }) => d[yKey])
-        )
-      ) + 3;
-
+  const xKey = isDefaultLineChart ? 'date' : 'date'; 
+  const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; 
   const xScale = (x: string) => {
-    if (isDefaultLineChart) {
-      return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
-    }
-    return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
+    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
+    );
   };
 
-  const yScale = (y: number) => yMax - (y * yMax) / yMaxExtended;
+  const yScale = (y: number) => yMax - (y * yMax) / 1024;
 
   const generateLinePath = (lineData: { [key: string]: any }[]) =>
     lineData.reduce((path, point, i) => {
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
       currentXValue: null,
     });
 
-  const xTickInterval = Math.floor(data[0].data.length / 6);
+  const xTickInterval = Math.floor(data[0].data.length / 4);
 
   return (
     <div className="ff-line-chart-text">
-      <p className="ff-line-chart-text1">{yAxisLabel}</p>
+      <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
       <svg
         width={width}
         height={height}
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
             textAnchor="middle"
             fill={yAxisLabelColor}
             className="ff-line-chart-x-axis-label"
+            style={{fontSize:textSize , fontWeight:fontWeight}}
           >
             {xAxisLabel}
           </text>
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
                       r={5}
                       fill="white"
                       stroke={line.color}
-                      strokeWidth={2}
+                      strokeWidth={lineChartWidth}
                       style={{ transition: 'cx 0.1s, cy 0.1s' }}
                     />
                     <line
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
                 textAnchor="middle"
                 fill={yAxisColor}
                 className="ff--line-chart-x-line-data"
+                style={{ fontSize:numberSize}}
               >
                 {point[xKey] != null ? String(point[xKey]) : ''}
               </text>
             ))}
 
           {Array.from({ length: 6 }).map((_, i) => {
-            const yValue = (i * yMaxExtended) / 5;
+            const yValueInGB = i * 0.2; 
             return (
               <text
-                key={yValue}
+                key={yValueInGB}
                 x={-15}
-                y={yScale(yValue)}
+                y={yScale(yValueInGB * 1024)} 
                 textAnchor="middle"
                 fill={yAxisValueColor}
                 className="ff-line-chart-y-axis-text"
+                style={{ fontSize:numberSize}}
               >
-                {yValue.toFixed(1)}
+                {yValueInGB.toFixed(1)}
               </text>
             );
           })}

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

@@ -1,27 +1,29 @@
 export interface LineChartDataPoint {
-    point: any;
-    x: string;
-    y: number;
+  point: any;
+  x: string;
+  y: number;
 }
 
 export interface Line {
-    show: boolean;
-    color: string; 
-    data: LineChartDataPoint[]; 
+  show: boolean;
+  color: string;
+  data: LineChartDataPoint[];
 }
 
 export interface LineChartProps {
-    data: any[]; 
-    width: number; 
-    height: number; 
-    axisColor: string; 
-    isStatusVariant?: boolean;
-    lineChartWidth?:number;
-    yAxisLabel?:string;
-    xAxisLabel?:string;
-    yAxisValueColor?:string;
-    xAxisColor?:string;
-    yAxisColor?:string;
-    yAxisLabelColor?:string;
-   
-}
+  data: any[];
+  width: number;
+  height: number;
+  axisColor: string;
+  isStatusVariant?: boolean;
+  lineChartWidth?: number;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  yAxisValueColor?: string;
+  xAxisColor?: string;
+  yAxisColor?: string;
+  yAxisLabelColor?: string;
+  textSize?: string | number;
+  fontWeight?: string | number;
+  numberSize?: string | number;
+}

package/src/components/DatePicker/DatePicker.scss

@@ -9,7 +9,7 @@
     --rdp-day-height: 24px;
     --rdp-day-width: 36px;
     @include fonts.fontPoppins(12px);
-    --rdp-font-family: 'Poppins';
+    --rdp-font-family: 'Poppins', sans-serif;
   }
 
   .ff-cursor-pointer {
@@ -48,7 +48,8 @@
       .ff-calendar-icon,
       .ff-clock-icon {
         position: absolute;
-        transform: translate(50%, 50%);
+        top: 50%;
+        transform: translate(25%, -50%);
         display: flex;
         align-items: center;
         pointer-events: none;
@@ -118,7 +119,7 @@
       border: 1px solid var(--border-color);
       background-color: var(--toggle-button-bg-color);
       box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
-      padding: 4px;
+      padding: 0px;
       border-radius: 30%;
       cursor: pointer;
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import CustomDatePicker from './DatePicker';
 import { useState } from 'react';
@@ -36,7 +37,7 @@ const meta: Meta<typeof CustomDatePicker> = {
     },
     onChange: {
       description: 'Function to handle date selection',
-      action: 'changed', 
+      action: 'changed',
     },
     placeholder: {
       description: 'Placeholder text for the input field',
@@ -60,14 +61,15 @@ const meta: Meta<typeof CustomDatePicker> = {
     },
     calendarWidth: {
       description: 'Custom width for the calendar in pixel',
-      control: "number"
+      control: 'number',
     },
     error: {
       description: 'Displays the input field in an error state',
       control: 'boolean',
     },
     helperText: {
-      description: 'Helper text to show below the input, often used for error messages',
+      description:
+        'Helper text to show below the input, often used for error messages',
       control: 'text',
     },
   },
@@ -82,14 +84,8 @@ export const Default: Story = {
   render: (args) => {
     const [date, setDate] = useState<Date | undefined>();
 
-    return(
-      <CustomDatePicker
-        {...args}
-        value={date}
-        onChange={setDate}
-      />
-    )
-  }
+    return <CustomDatePicker {...args} value={date} onChange={setDate} />;
+  },
 };
 
 // Start Date Filter story
@@ -102,7 +98,7 @@ export const StartDateFilter: Story = {
         {...args}
         value={startDate}
         onChange={setStartDate}
-        calendarWidth = {240}
+        calendarWidth={240}
         maxDate={new Date()} // Disable future dates for start date picker
       />
     );
@@ -143,7 +139,7 @@ export const EndDateInput: Story = {
 export const ScheduleDateInput: Story = {
   args: {
     error: false,
-    helperText: "Error"
+    helperText: 'Error',
   },
 
   render: (args) => {
@@ -157,5 +153,22 @@ export const ScheduleDateInput: Story = {
         minDate={new Date()} // Set minimum date to today
       />
     );
-  }
+  },
+};
+
+export const Dateonly: Story = {
+  render: (args) => {
+    const [selectedDate, setSelectDate] = useState<Date | undefined>();
+
+    console.log(selectedDate);
+    return (
+      <CustomDatePicker
+        {...args}
+        value={selectedDate}
+        onChange={setSelectDate}
+        calendarWidth={240}
+        dateOnly
+      />
+    );
+  },
 };