pixel-react 1.10.15 → 1.10.16

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

@@ -1,246 +0,0 @@
-import React, { useState } from 'react';
-import './DonutChart.scss';
-import { Status, DonutChartProps, StatusValue } from './type';
-
-const calculateArc = (
-  x: number,
-  y: number,
-  radius: number,
-  startAngle: number,
-  endAngle: number
-): string => {
-  const startX = x + radius * Math.cos(startAngle);
-  const startY = y + radius * Math.sin(startAngle);
-  const endX = x + radius * Math.cos(endAngle);
-  const endY = y + radius * Math.sin(endAngle);
-  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-
-  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-};
-
-const useColorMappings = () => ({
-  colorMapping: {
-    passed: 'var(--status-success-text-color)',
-    failed: 'var(--status-rejected-text-color)',
-    warning: 'var(--status-warning-text-color)',
-    skipped: 'var(--status-skipped-text-color)',
-    default: 'var(--brand-color)',
-  },
-  hoverMapping: {
-    passed: 'var(--status-success-bg-color)',
-    failed: 'var(--status-rejected-bg-color)',
-    warning: 'var(--status-warning-bg-color)',
-    skipped: 'var(--status-skipped-bg-color)',
-    default: 'var(--status-percentage-growth-bg-color)',
-  },
-});
-
-const DonutChart: React.FC<DonutChartProps> = ({
-  radius = 60,
-  lineWidth = 15,
-  statusValues = [],
-  gapAngle = 0.06,
-  legendDetailsType = '',
-  isLegendDetails = true,
-}) => {
-  const [hoveredStatus, setHoveredStatus] = useState<Status | null>(null);
-  const { colorMapping, hoverMapping } = useColorMappings();
-  const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
-  const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
-  const statusColors = ['passed', 'failed', 'warning', 'skipped'];
-  // Calculate angles and gaps
-  const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
-  let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
-  let currentAngle = -Math.PI / 2;
-  const MIN_PERCENTAGE = 1;
-  const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
-  let minAngleTotal = 0;
-
-  // Adjust for small angles
-  nonZeroValues.forEach(({ value }) => {
-    const valuePercentage = value / total;
-    const angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
-    minAngleTotal += angle;
-    remainingAngle -= angle;
-  });
-
-  const handleMouseEnter = (status: Status) => setHoveredStatus(status);
-  const handleMouseLeave = () => setHoveredStatus(null);
-
-  const SVG_PADDING = 4;
-  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
-
-  const renderArc = (statusValue: StatusValue, endAngle: number, i: number) => {
-    const normalizedStatus = statusValue?.status?.toLowerCase() as Status;
-    const isFullCircle = nonZeroValues.length === 1;
-
-    // Full circle handling
-    const foregroundArcPath = isFullCircle
-      ? calculateArc(0, 0, radius, 0, 2 * Math.PI)
-      : calculateArc(0, 0, radius, currentAngle, endAngle);
-
-    // Outer arc for hover effect
-    const outerArcRadius = radius + lineWidth - 1;
-    const outerArcPath = isFullCircle
-      ? calculateArc(0, 0, outerArcRadius, 0, 2 * Math.PI)
-      : calculateArc(0, 0, outerArcRadius, currentAngle, endAngle);
-
-    currentAngle = endAngle + gapAngle;
-
-    return (
-      <g key={i}>
-        {/* Main arc */}
-        <path
-          d={foregroundArcPath}
-          fill="none"
-          stroke={colorMapping[normalizedStatus as keyof typeof colorMapping]}
-          strokeWidth={lineWidth}
-          onMouseEnter={() => handleMouseEnter(normalizedStatus)}
-          onMouseLeave={handleMouseLeave}
-          strokeOpacity={
-            hoveredStatus === null || hoveredStatus === normalizedStatus
-              ? 0.8
-              : 0.3
-          }
-        />
-        {/* Hover effect */}
-        {hoveredStatus === normalizedStatus && (
-          <path
-            d={outerArcPath}
-            fill="none"
-            stroke={colorMapping[normalizedStatus as keyof typeof colorMapping]}
-            strokeWidth={4}
-            strokeOpacity={0.3}
-          />
-        )}
-      </g>
-    );
-  };
-
-  const renderLegendItem = (statusKey: Status) => {
-    const statusData = statusValues?.find(
-      (s) => s.status?.toLowerCase() === statusKey?.toLowerCase()
-    );
-    const value = Math.round(statusData?.value || 0);
-    const percentage = ((statusData?.value || 0) / total) * 100;
-
-    return (
-      <div
-        key={statusKey}
-        className={`ff-status-item ${
-          hoveredStatus === null || hoveredStatus === statusKey
-            ? 'ff-highlighted'
-            : 'ff-fade'
-        }`}
-        onMouseEnter={() => handleMouseEnter(statusKey)}
-        onMouseLeave={handleMouseLeave}
-      >
-        <div className="ff-status-label">
-          <div
-            className="ff-status-color"
-            style={{
-              backgroundColor:
-                colorMapping[statusKey as keyof typeof colorMapping],
-            }}
-          />
-          <div className="ff-status-text">
-            {statusKey?.charAt(0)?.toUpperCase() +
-              statusKey?.slice(1)?.toLowerCase()}
-          </div>
-        </div>
-        <div className="ff-status-details">
-          <div className="ff-status-details-script-count">
-            {value}
-            <span>{legendDetailsType}</span>
-          </div>
-          <div className="ff-status-details-script-percentage">
-            ({percentage?.toFixed(2)}%)
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="ff-donut-chart-section">
-      <div className="ff-donut-chart-svg-container">
-        <svg
-          width={DONUT_SVG_SIZE}
-          height={DONUT_SVG_SIZE}
-          viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
-        >
-          <g
-            transform={`translate(${radius + lineWidth + SVG_PADDING}, ${
-              radius + lineWidth + SVG_PADDING
-            })`}
-          >
-            {nonZeroValues?.map((status, i) => {
-              const valuePercentage = status.value / total;
-              let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
-              angle += remainingAngle * (valuePercentage / (total / total));
-              const endAngle = currentAngle + angle;
-
-              return renderArc(status, endAngle, i);
-            })}
-            <text x="0" y="-18" textAnchor="middle" fill={colorMapping.default}>
-              {hoveredStatus ? hoveredStatus?.toUpperCase() : 'TOTAL'}
-            </text>
-            <text x="0" y="5" textAnchor="middle" fill={colorMapping.skipped}>
-              {hoveredStatus
-                ? `${
-                    statusValues?.find(
-                      (s) => s?.status?.toLowerCase() === hoveredStatus
-                    )?.value
-                  } ${legendDetailsType}`
-                : `${total} ${legendDetailsType}`}
-            </text>
-            <rect
-              x={-17}
-              y={14}
-              width={34}
-              height={18}
-              fill={
-                hoveredStatus
-                  ? hoverMapping[
-                      hoveredStatus?.toLowerCase() as keyof typeof hoverMapping
-                    ]
-                  : hoverMapping.default
-              }
-              rx="5"
-              ry="5"
-            />
-            <text
-              x="0"
-              y="26"
-              textAnchor="middle"
-              fill={
-                hoveredStatus
-                  ? colorMapping[
-                      hoveredStatus?.toLowerCase() as keyof typeof colorMapping
-                    ]
-                  : colorMapping['default' as keyof typeof colorMapping]
-              }
-            >
-              {hoveredStatus
-                ? `${(
-                    ((statusValues?.find(
-                      (s) => s?.status?.toLowerCase() === hoveredStatus
-                    )?.value || 0) /
-                      total) *
-                    100
-                  )?.toFixed(2)}%`
-                : '100%'}
-            </text>
-          </g>
-        </svg>
-      </div>
-      {isLegendDetails && (
-        <div className="ff-status-container">
-          {statusColors?.map((status) => renderLegendItem(status as Status))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DonutChart;

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

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

package/src/components/Charts/DonutChart/type.ts

@@ -1,23 +0,0 @@
-export type Status =
-  | 'passed'
-  | 'failed'
-  | 'warning'
-  | 'skipped'
-  | 'Passed'
-  | 'Failed'
-  | 'Skipped'
-  | 'Warning';
-
-export type StatusValue = {
-  status: Status;
-  value: number;
-};
-
-export type DonutChartProps = {
-  radius: number;
-  lineWidth: number;
-  statusValues: StatusValue[];
-  legendDetailsType: string;
-  isLegendDetails: boolean;
-  gapAngle?: number;
-};

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

@@ -1,52 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadialChart from './IconRadialChart';
-
-const meta: Meta<typeof IconRadialChart> = {
-  title: 'Components/IconRadialChart',
-  component: IconRadialChart,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    radius: { control: 'number' },
-    lineWidth: { control: 'number' },
-    percentageValue: { control: 'number' },
-    icon: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof IconRadialChart>;
-
-export const Default: Story = {
-  args: {
-    radius: 20,
-    lineWidth: 7,
-    percentageValue: 9,
-    icon: 'dashboard_web_icon',
-    label: 'Memory',
-  },
-};
-
-export const Mobile: Story = {
-  args: {
-    radius: 20,
-    lineWidth: 7,
-    percentageValue: 18,
-    icon: 'dashboard_mobile_icon',
-    label: 'Memory',
-    arcColor: 'var(--brand-color)',
-  },
-};
-
-export const WithoutIcon: Story = {
-  args: {
-    radius: 25,
-    lineWidth: 10,
-    percentageValue: 30,
-    label: 'Step',
-    fontSize: 12,
-    labelColor:'black',
-  },
-};

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

@@ -1,174 +0,0 @@
-import React, { useState } from 'react';
-import {
-  IconRadialChartProps,
-  ArcParams,
-  ArcResult,
-  ArcAnglesResult,
-} from './types';
-import Icon from '../../Icon';
-import './IconRadialChart.scss';
-import Typography from '../../Typography';
-
-// Function to generate SVG arc paths
-const calculateArc = ({
-  x,
-  y,
-  radius,
-  startAngle,
-  endAngle,
-}: ArcParams): ArcResult => {
-  const startX = x + radius * Math.cos(startAngle);
-  const startY = y + radius * Math.sin(startAngle);
-  const endX = x + radius * Math.cos(endAngle);
-  const endY = y + radius * Math.sin(endAngle);
-  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-
-  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-};
-
-// Function to calculate arc paths and angles
-const calculateArcPaths = (
-  percentage: number,
-  currentAngle: number,
-  radius: number
-): ArcAnglesResult => {
-  // Normalize percentage to 0-1 range
-  const normalizedPercentage = Math.max(0, Math.min(percentage, 100)) / 100;
-
-  const startAngle = currentAngle;
-  const angleIncrement = normalizedPercentage * 2 * Math.PI;
-  const endAngle = startAngle + angleIncrement;
-
-  // Background arc: always a full circle
-  const backgroundArcPath = calculateArc({
-    x: 0,
-    y: 0,
-    radius,
-    startAngle: 0,
-    endAngle: 2 * Math.PI,
-  });
-
-  // Foreground arc: a partial arc based on the normalized percentage
-  const foregroundArcPath = calculateArc({
-    x: 0,
-    y: 0,
-    radius,
-    startAngle,
-    endAngle,
-  });
-
-  return { backgroundArcPath, foregroundArcPath };
-};
-
-const IconRadialChart: React.FC<IconRadialChartProps> = ({
-  radius = 15,
-  lineWidth = 5,
-  label,
-  percentageValue,
-  icon,
-  fontSize = 10,
-  labelColor = '',
-  arcColor = 'var(--brand-color)',
-  backgroundArcColor = 'var(--ff-select-scroll-thumb-color)',
-}) => {
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const [showTooltip, setShowTooltip] = useState<boolean>(false);
-  let currentAngle = -Math.PI / 2;
-  const svgSize = 2 * (radius + lineWidth);
-  const { backgroundArcPath, foregroundArcPath } = calculateArcPaths(
-    percentageValue,
-    currentAngle,
-    radius
-  );
-
-  const handleMouseEnter = () => {
-    setShowTooltip(true);
-  };
-  const handleMouseLeave = () => {
-    setTooltipPosition({ x: 0, y: 0 });
-    setShowTooltip(false);
-  };
-  const handleMouseMove = (event: React.MouseEvent) => {
-    setTooltipPosition({
-      x: event.clientX + 10,
-      y: event.clientY + 10,
-    });
-  };
-
-  const renderTooltip = () => {
-    return (
-      <div
-        className="ff-icon-radial-chart-tooltip"
-        style={{
-          left: tooltipPosition.x,
-          top: tooltipPosition.y,
-        }}
-      >
-        <Typography>{`${label} : `}</Typography>
-        <Typography>{percentageValue}%</Typography>
-      </div>
-    );
-  };
-
-  return (
-    <div
-      className="ff-icon-radial-chart-container"
-      style={{ '--fontSize': `${fontSize}px` } as React.CSSProperties}
-    >
-      <svg
-        width={svgSize}
-        height={svgSize}
-        viewBox={`0 0 ${svgSize} ${svgSize}`}
-        role="img"
-      >
-        <g
-          transform={`translate(${radius + lineWidth}, ${radius + lineWidth})`}
-        >
-          {/* Background Circle */}
-          <path
-            d={backgroundArcPath}
-            fill="none"
-            stroke={backgroundArcColor}
-            strokeWidth={lineWidth}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            onMouseMove={handleMouseMove}
-          />
-          {/* Status Arc */}
-          <path
-            d={foregroundArcPath}
-            fill="none"
-            stroke={arcColor}
-            strokeWidth={lineWidth}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            onMouseMove={handleMouseMove}
-          />
-          {icon ? (
-            <foreignObject x="-10" y="-10" width="20" height="20">
-              <Icon
-                className="ff-radial-chart-icon-padding"
-                name={icon}
-                height={20}
-                width={20}
-              />
-            </foreignObject>
-          ) : (
-            <text
-              x="0"
-              y="0"
-              fill={labelColor || arcColor}
-              textAnchor="middle"
-              dominantBaseline="central"
-            >
-              {`${Math.round(percentageValue)}%`}
-            </text>
-          )}
-        </g>
-      </svg>
-      {showTooltip && renderTooltip()}
-    </div>
-  );
-};
-
-export default IconRadialChart;

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

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

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

@@ -1,29 +0,0 @@
-export interface IconRadialChartProps {
-  radius: number;
-  lineWidth: number;
-  label: string;
-  percentageValue: number;
-  icon?: string;
-  fontSize?: number;
-  labelColor?:string;
-  arcColor?: string;
-  backgroundArcColor?: string;
-}
-
-//type for the calculateArc function
-export type ArcParams = {
-  x: number;
-  y: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-};
-
-// type for the calculateArc function
-export type ArcResult = string;
-
-// type for the calculateArcAngles function
-export type ArcAnglesResult = {
-  backgroundArcPath: string;
-  foregroundArcPath: string;
-};