pixel-react 1.10.15 → 1.10.16

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

@@ -1,199 +0,0 @@
-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',
-  component: LineChart,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const DefaultLineChart: StoryObj<LineChartProps> = {
-  args: {
-    data: [
-      {
-        color: '#4C90FF',
-        name: 'default',
-        data: [
-          {
-            date: '25 Oct',
-            totalMemory: '1 GB',
-          },
-
-          {
-            date: '29 Oct',
-            totalMemory: '200 KB',
-          },
-          {
-            date: '30 Oct',
-            totalMemory: '40 MB',
-          },
-          {
-            date: '3 Nov',
-            totalMemory: '20 MB',
-          },
-          {
-            date: '23 Nov',
-            totalMemory: '90 MB',
-          },
-        ],
-      },
-    ],
-    width: 1010,
-    height: 232,
-    axisColor: '#000000',
-    lineChartWidth: 3,
-    yAxisLabel: 'Total Memory (GB)',
-    yAxisValueColor: '#252C37',
-    xAxisColor: '#D9D9D9',
-    yAxisColor: '#252C37',
-    numberSize: '10px',
-    proportionalSpacing: false,
-    chartName: 'memory',
-  },
-  render: (args) => (
-    <div className="linechart-container">
-      <LineChart {...args} />
-    </div>
-  ),
-};
-
-export const multiLineScriptsChart: StoryObj<LineChartProps> = {
-  args: {
-    data: [
-      {
-        color: '#3F5AC4',
-        name: 'Flaky',
-        show: true,
-        data: [
-          { 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 },
-        ],
-      },
-    ],
-    width: 700,
-    height: 232,
-    axisColor: '#000000',
-    lineChartWidth: 2,
-    yAxisLabel: 'Number Of Scripts',
-    xAxisLabel: 'Number Of Days',
-    yAxisValueColor: '#252C37',
-    xAxisColor: '#D9D9D9',
-    yAxisColor: '#252C37',
-    yAxisLabelColor: '#252C37',
-    textSize: '12px',
-    proportionalSpacing: false,
-    chartName: 'scripts',
-  },
-  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: 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: 0 },
-        ],
-      },
-      {
-        color: '#E2750F',
-        name: 'Warning',
-        show: true,
-        data: [
-          { date: '1 oct', value: 10 },
-          { date: '2 oct', value: 20 },
-          { date: '3 oct', value: 0 },
-          { 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: 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: 0 },
-        ],
-      },
-      {
-        color: '#3F5AC4',
-        name: 'Flaky',
-        show: true,
-        data: [
-          { date: '1 oct', value: 50 },
-          { date: '2 oct', value: 40 },
-          { date: '3 oct', value: 30 },
-          { date: '4 oct', value: 20 },
-          { date: '5 oct', value: 0 },
-          { date: '6 oct', value: 40 },
-          { date: '7 oct', value: 20 },
-        ],
-      },
-    ],
-    width: 700,
-    height: 232,
-    axisColor: '#000000',
-    lineChartWidth: 2,
-    yAxisLabel: 'Number Of Defects',
-    xAxisLabel: 'Number Of Days',
-    yAxisValueColor: '#252C37',
-    xAxisColor: '#D9D9D9',
-    yAxisColor: '#252C37',
-    yAxisLabelColor: '#252C37',
-    textSize: '12px',
-    fontWeight: 'semi-bold',
-    proportionalSpacing: false,
-    chartName: 'defects',
-    xAxisLabelGap:20,
-  },
-  render: (args) => (
-    <div className="linechart-container">
-      <LineChart {...args} />
-    </div>
-  ),
-};

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

@@ -1,395 +0,0 @@
-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;
-  hoverValues: { [lineIndex: number]: number | string | null };
-  dotPositions: { [lineIndex: number]: { x: number; y: number } | null };
-  tooltip: { visible: boolean; left: number; top: number };
-  currentXValue: string | null;
-}
-
-const LineChart: React.FC<LineChartProps> = ({
-  data,
-  width,
-  height,
-  lineChartWidth,
-  yAxisLabel,
-  xAxisLabel,
-  yAxisValueColor,
-  xAxisColor,
-  yAxisColor,
-  yAxisLabelColor,
-  textSize,
-  fontWeight,
-  numberSize,
-  proportionalSpacing,
-  chartName,
-  xAxisLabelGap = 16,
-}) => {
-  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;
-    }
-  };
-
-  const maxValue = Math.max(
-    ...data.flatMap((line) =>
-      line.data.map((point: any) => convertToMB(point[yKey]))
-    )
-  );
-
-  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(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(convertToMB(prevPoint[yKey])) : 0;
-
-      return `${path} C ${prevX + (x - prevX) / 2} ${prevY}, ${
-        x - (x - prevX) / 2
-      } ${y}, ${x} ${y}`;
-    }, '');
-
-  const [hoverState, setHoverState] = useState<HoverState>({
-    cursorX: null,
-    hoverValues: {},
-    dotPositions: {},
-    tooltip: { visible: false, left: 0, top: 0 },
-    currentXValue: null,
-  });
-
-  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
-    const svgRect = e.currentTarget.getBoundingClientRect();
-    const mouseX = e.clientX - svgRect.left - margin;
-
-    let nearestValues = {
-      hoverValues: {} as HoverState['hoverValues'],
-      dotPositions: {} as HoverState['dotPositions'],
-    };
-    let nearestXValue: string | null = null;
-
-    data.forEach((line, lineIndex) => {
-      const nearestPoint = line.data.reduce(
-        (closest: { distance: number }, point: { [key: string]: any }) => {
-          const distance = Math.abs(mouseX - xScale(point[xKey]));
-          return distance < closest.distance ? { point, distance } : closest;
-        },
-        { point: null, distance: Infinity }
-      ).point;
-
-      if (nearestPoint) {
-        nearestXValue = nearestPoint[xKey];
-        nearestValues.hoverValues[lineIndex] = roundUp(nearestPoint[yKey]);
-        nearestValues.dotPositions[lineIndex] = {
-          x: nearestXValue ? xScale(nearestXValue) : 0,
-          y: yScale(convertToMB(nearestPoint[yKey])),
-        };
-      }
-    });
-
-    setHoverState({
-      cursorX: mouseX,
-      hoverValues: nearestValues.hoverValues,
-      dotPositions: nearestValues.dotPositions,
-      currentXValue: nearestXValue,
-      tooltip: nearestXValue
-        ? { visible: true, left: e.clientX + 10, top: e.clientY - 20 }
-        : { visible: false, left: 0, top: 0 },
-    });
-  };
-
-  const handleMouseLeave = () =>
-    setHoverState({
-      cursorX: null,
-      hoverValues: {},
-      dotPositions: {},
-      tooltip: { visible: false, left: 0, top: 0 },
-      currentXValue: null,
-    });
-
-  const xTickInterval = Math.floor(data[0].data.length / 4);
-
-  return (
-    <div
-      className="ff-line-chart-text"
-      style={{ width: width + 20 + xAxisLabelGap, gap: xAxisLabelGap }}
-    >
-      <div
-        className="ff-line-chart-yAxisLabel-warpper"
-        style={{ height: height }}
-      >
-        {' '}
-        <Typography
-          className="ff-line-chart-yAxisLabel"
-          fontSize={textSize}
-          fontWeight="semi-bold"
-        >
-          {yAxisLabel}
-        </Typography>
-      </div>
-      <div className="ff-line-chart-svg">
-        {' '}
-        <svg
-          height={height}
-          width={width}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
-          className="ff-line-chart-svg"
-        >
-          <g transform={`translate(${margin}, ${margin})`}>
-            <line x1={0} y1={0} x2={0} y2={yMax} strokeWidth={2} />
-            <line
-              x1={0}
-              y1={yMax}
-              x2={xMax}
-              y2={yMax}
-              stroke={xAxisColor}
-              strokeWidth={1}
-            />
-
-            <text
-              x={xMax / 2.1}
-              y={yMax + margin / 1.2}
-              textAnchor="middle"
-              fill={yAxisLabelColor}
-              className="ff-line-chart-x-axis-label"
-              style={{ fontSize: textSize, fontWeight: fontWeight }}
-            >
-              {xAxisLabel}
-            </text>
-
-            {data.map((line, index) =>
-              line.show !== false ? (
-                <g key={index}>
-                  <path
-                    d={generateLinePath(line.data)}
-                    fill="none"
-                    stroke={line.color}
-                    strokeWidth={lineChartWidth}
-                  />
-                  {hoverState.dotPositions[index] && (
-                    <>
-                      <line
-                        x1={hoverState.dotPositions[index]!.x}
-                        y1={0}
-                        x2={hoverState.dotPositions[index]!.x}
-                        y2={yMax}
-                        stroke="gray"
-                        strokeWidth={0.5}
-                        strokeDasharray="4"
-                      />
-                      <circle
-                        cx={hoverState.dotPositions[index]!.x}
-                        cy={hoverState.dotPositions[index]!.y}
-                        r={5}
-                        fill="white"
-                        stroke={line.color}
-                        strokeWidth={lineChartWidth}
-                        style={{ transition: 'cx 0.1s, cy 0.1s' }}
-                      />
-                      <line
-                        x1={0}
-                        y1={hoverState.dotPositions[index]!.y}
-                        x2={xMax}
-                        y2={hoverState.dotPositions[index]!.y}
-                        stroke="gray"
-                        strokeWidth={0.5}
-                        strokeDasharray="4"
-                      />
-                    </>
-                  )}
-                </g>
-              ) : null
-            )}
-            {data[0].data
-              .filter((_: any, index: number) => index % xTickInterval === 0)
-              .map((point: { [key: string]: any }, index: number) => (
-                <text
-                  key={String(point[xKey])}
-                  x={xScale(point[xKey])}
-                  y={yMax + 15}
-                  textAnchor={index === 0 ? 'start' : 'middle'}
-                  fill={yAxisColor}
-                  className="ff--line-chart-x-line-data"
-                  style={{ fontSize: numberSize }}
-                >
-                  {point[xKey] != null ? String(point[xKey]) : ''}
-                </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 && (
-          <div
-            className="ff-line-chart-tooltip"
-            style={{
-              left: hoverState.tooltip.left,
-              top: hoverState.tooltip.top,
-            }}
-          >
-            <div className="ff-line-chart-date">{hoverState.currentXValue}</div>
-
-            {Object.entries(hoverState.hoverValues).map(
-              ([index, value]) =>
-                data[Number(index)]?.show !== false && (
-                  <div key={index} className="ff-line-chart-inner-tooltip">
-                    {data[Number(index)]?.name !== 'default' && (
-                      <div
-                        className="ff-line-chart-status-dot"
-                        style={{ backgroundColor: data[Number(index)]?.color }}
-                      />
-                    )}
-                    {data[Number(index)]?.name}: {value}
-                  </div>
-                )
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default LineChart;

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

@@ -1 +0,0 @@
-export { default } from './LineChart';

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

@@ -1,32 +0,0 @@
-export interface LineChartDataPoint {
-  point: any;
-  x: string;
-  y: number;
-}
-
-export interface Line {
-  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;
-  textSize?: string | number;
-  fontWeight?: string | number;
-  numberSize?: string | number;
-  proportionalSpacing?: boolean;
-  chartName?: string;
-  xAxisLabelGap?:number;
-}