pixel-react 1.1.1 → 1.1.2

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

@@ -0,0 +1,335 @@
+import React, { useState } from 'react';
+import { DashboardDonutChartProps, ChartItem, LegendType } from './types';
+import Typography from '../../Typography';
+import './DashBoardDonutChart.scss';
+import classNames from 'classnames';
+
+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 colorMapping = [
+  'var(--status-success-text-color)',
+  'var(--status-rejected-text-color)',
+  'var(--status-warning-text-color)',
+  'var(--status-skipped-text-color)',
+  'var(--brand-color)',
+];
+
+const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
+  radius = 60,
+  lineWidth = 15,
+  statusValues = [],
+  gapAngle = 0,
+  legendDetailsType = '',
+  isLegendDetails = true,
+  legendType = 'numberLegend',
+  showOnlyLabel = false,
+}) => {
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
+  const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
+
+  // 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 = (itemIndex: number) => {
+    setHoveredItemIndex(itemIndex);
+    setShowTooltip(true);
+  };
+  const handleMouseLeave = () => {
+    setTooltipPosition({ x: 0, y: 0 });
+    setHoveredItemIndex(null);
+    setShowTooltip(false);
+  };
+  const handleMouseMove = (event: React.MouseEvent) => {
+    setTooltipPosition({
+      x: event.clientX + 10,
+      y: event.clientY + 10,
+    });
+  };
+
+  const SVG_PADDING = 4;
+  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+
+  const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
+    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);
+
+    currentAngle = endAngle + gapAngle;
+
+    return (
+      <g key={i}>
+        {/* Main arc */}
+        <path
+          d={foregroundArcPath}
+          fill="none"
+          stroke={
+            chartItem?.color
+              ? chartItem.color
+              : colorMapping[i % colorMapping.length]
+          }
+          strokeWidth={lineWidth}
+          onMouseEnter={() => handleMouseEnter(i)}
+          onMouseLeave={handleMouseLeave}
+          strokeOpacity={0.8}
+          onMouseMove={handleMouseMove}
+        />
+      </g>
+    );
+  };
+
+  const renderTooltip = () => {
+    return (
+      <div
+        className="ff-donut-chart-tooltip"
+        style={{
+          left: tooltipPosition.x,
+          top: tooltipPosition.y,
+        }}
+      >
+        <Typography fontSize={12}>
+          {hoveredItemIndex !== null &&
+            `${nonZeroValues[hoveredItemIndex]?.key} : `}
+        </Typography>
+        <Typography fontSize={12}>
+          {hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value}
+        </Typography>
+      </div>
+    );
+  };
+
+  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
+    switch (legendType) {
+      case 'numberLegend':
+        return (
+          <div className="ff-legend-container numberLegend">
+            {legendData.map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <Typography
+                  fontSize={22}
+                  fontWeight="semi-bold"
+                  className="ff-legend-value"
+                  color={
+                    item.color
+                      ? item.color
+                      : colorMapping[index % colorMapping.length]
+                  }
+                >
+                  {item.value}
+                </Typography>
+                <Typography fontSize={12} className="ff-legend-key">
+                  {item.key}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      case 'pillLegend':
+        return (
+          <div className="ff-legend-container pillLegend">
+            {legendData.map((item, index) => (
+              <div className="ff-legend-item" key={index}>
+                <span
+                  className="ff-legend-capsule"
+                  style={{
+                    backgroundColor: item.color
+                      ? item.color
+                      : colorMapping[index % colorMapping.length],
+                  }}
+                >
+                  <Typography fontSize={10}>{item.value}</Typography>
+                </span>
+                <Typography className="ff-legend-key">{item.key}</Typography>
+              </div>
+            ))}
+          </div>
+        );
+
+      case 'memoryLegend':
+        return (
+          <div className="ff-legend-container memoryLegend">
+            {legendData.map((item, index) => (
+              <React.Fragment key={index}>
+                <div className="ff-legend-item">
+                  <Typography
+                    fontSize={22}
+                    fontWeight="medium"
+                    className="ff-legend-value"
+                    color={
+                      item.color
+                        ? item.color
+                        : colorMapping[index % colorMapping.length]
+                    }
+                  >
+                    {item.value}
+                  </Typography>
+                  <Typography className="ff-legend-key">{item.key}</Typography>
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+        );
+
+      case 'tableLegend':
+        return (
+          <div className="ff-legend-table-wrapper">
+            <table className="ff-legend-table tableLegend">
+              <thead>
+                <tr>
+                  <th className="ff-table-header">Name</th>
+                  <th className="ff-table-header">%</th>
+                  <th className="ff-table-header">Count</th>
+                </tr>
+              </thead>
+              <tbody>
+                {legendData.map((item, index) => (
+                  <tr
+                    className="ff-legend-item"
+                    key={index}
+                    onMouseEnter={() => setHoveredItemIndex(index)}
+                    onMouseLeave={() => setHoveredItemIndex(null)}
+                  >
+                    <td className="ff-legend-name">
+                      <span
+                        className="ff-legend-capsule"
+                        style={{
+                          backgroundColor: item.color
+                            ? item.color
+                            : colorMapping[index % colorMapping.length],
+                        }}
+                      >
+                        <Typography fontSize={10}>{item.value}</Typography>
+                      </span>
+                      <Typography fontSize={10}>{item.key}</Typography>
+                    </td>
+                    <td className="ff-legend-percentage">
+                      {((item.value / total) * 100).toFixed(1)}
+                    </td>
+                    <td className="ff-legend-count">{item.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      className={classNames('ff-dashboard-donut-chart-section', {
+        'ff-dashboard-donut-chart-section-table-legend':
+          legendType === 'tableLegend',
+      })}
+    >
+      <div className="ff-dashboard-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);
+              const endAngle = currentAngle + angle;
+
+              return renderArc(status, endAngle, i);
+            })}
+            {showOnlyLabel ? (
+              <text
+                x="0"
+                y="5"
+                className="ff-svg-label-text"
+                textAnchor="middle"
+                fill={colorMapping[3]}
+              >
+                {legendDetailsType}
+              </text>
+            ) : (
+              (legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
+                <>
+                  <text x="0" y="5" textAnchor="middle" fill={colorMapping[3]}>
+                    {legendType === 'tableLegend' &&
+                    hoveredItemIndex !== null &&
+                    nonZeroValues[hoveredItemIndex]
+                      ? `${(
+                          (nonZeroValues[hoveredItemIndex].value / total) *
+                          100
+                        ).toFixed(1)}%`
+                      : total}
+                  </text>
+
+                  <text
+                    x="0"
+                    y="26"
+                    textAnchor="middle"
+                    fill="var(--text-color)"
+                  >
+                    {legendType === 'tableLegend' &&
+                    hoveredItemIndex !== null &&
+                    nonZeroValues[hoveredItemIndex]
+                      ? nonZeroValues[hoveredItemIndex].key
+                      : legendDetailsType}
+                  </text>
+                </>
+              )
+            )}
+          </g>
+        </svg>
+        {legendType === 'tableLegend' && (
+          <div>
+            <Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
+            <Typography> {`Total ${legendDetailsType} - ${total}`} </Typography>
+          </div>
+        )}
+        {showTooltip && renderTooltip()}
+      </div>
+      {isLegendDetails && renderLegend(nonZeroValues, legendType)}
+    </div>
+  );
+};
+
+export default DashboardDonutChart;

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

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

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

@@ -0,0 +1,33 @@
+export type Status =
+  | 'passed'
+  | 'failed'
+  | 'warning'
+  | 'skipped'
+  | 'Passed'
+  | 'Failed'
+  | 'Skipped'
+  | 'Warning';
+
+export type StatusValue = {
+  status: Status;
+  value: number;
+};
+
+export type ChartItem = {
+    key: string;
+    value: number;
+    color?: string;
+  };
+
+export type LegendType = 'numberLegend' | 'pillLegend' | 'memoryLegend' | 'tableLegend'
+
+export type DashboardDonutChartProps = {
+  radius: number;
+  lineWidth: number;
+  statusValues: ChartItem[];
+  legendDetailsType: string;
+  isLegendDetails: boolean;
+  gapAngle?: number;
+  legendType: LegendType;
+  showOnlyLabel : boolean;
+};

package/src/components/Charts/PieChart/PieChart.scss

@@ -0,0 +1,39 @@
+.ff-pie-chart-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: var(--fontSize);
+  .ff-pie-chart-border {
+    display: inline-block;
+    border: 2px solid var(--pie-chart-border-color);
+    border-radius: 50%;
+  }
+
+  .ff-pie-chart-tooltip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    padding: 8px;
+    border-radius: 4px;
+    background-color: var(--tooltip-bg-color);
+    color: var(--primary-icon-color);
+    border: 10px solid;
+    font-size: 14px;
+    font-weight: 400;
+    pointer-events: none;
+    opacity: 0.8;
+  }
+
+  .ff-pie-chart-legend {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    .ff-pie-chart-legend-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PieChart from './PieChart';
+
+const meta: Meta<typeof PieChart> = {
+  title: 'Components/PieChart',
+  component: PieChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    radius: { control: 'number' },
+    colors: { control: 'object' },
+    data: { control: 'object' },
+    chartBorder: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PieChart>;
+
+export const PieChartDashBoard: Story = {
+  args: {
+    radius: 55,
+    colors: ['#71347B', '#4C90FF', '#F8A509'],
+    data: [
+      { label: 'SuperAdmin', value: 2 },
+      { label: 'Admin', value: 6 },
+      { label: 'Users', value: 2 },
+    ],
+    chartBorder: false,
+  },
+};
+
+export const PieChartDashBoardWithBorder: Story = {
+  args: {
+    radius: 55,
+    colors: ['#b6b6b6', '#08CB84', '#BE3131'],
+    data: [
+      { label: 'All User', value: 0 },
+      { label: 'Active', value: 8 },
+      { label: 'Pending', value: 2 },
+    ],
+    chartBorder: true,
+  },
+};

package/src/components/Charts/PieChart/PieChart.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import './PieChart.scss';
+import { PieChartProps, ArcParams, ArcResult, ArcAnglesResult } from './types';
+import Typography from '../../Typography';
+
+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} L ${x} ${y} Z`;
+};
+
+const calculateArcAngles = (
+  value: number,
+  total: number,
+  currentAngle: number,
+  radius: number
+): ArcAnglesResult => {
+  if (total === 0) {
+    return {
+      endAngle: currentAngle,
+      backgroundArcPath: '',
+      foregroundArcPath: '',
+      percentage: 0,
+    };
+  }
+
+  const percentage = value / total;
+  const angleIncrement = percentage * 2 * Math.PI;
+  const startAngle = currentAngle;
+  const endAngle = startAngle + angleIncrement;
+
+  const path = calculateArc({
+    x: 0,
+    y: 0,
+    radius,
+    startAngle,
+    endAngle,
+  });
+
+  return {
+    endAngle,
+    backgroundArcPath: path,
+    foregroundArcPath: path,
+    percentage,
+  };
+};
+
+type Tooltip = {
+  label: string;
+  value: number;
+  color: string;
+};
+
+const PieChart: React.FC<PieChartProps> = ({
+  radius = 15,
+  colors = [],
+  data = [],
+  chartBorder = false,
+}) => {
+  const [tooltip, setTooltip] = useState<Tooltip | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState<{
+    x: number;
+    y: number;
+  }>({ x: 0, y: 0 });
+
+  const total = data.reduce((acc, item) => acc + item.value, 0);
+  let currentAngle = -Math.PI / 2;
+  const svgSize = 2 * (radius + 5);
+
+  const chartData =
+    chartBorder && data.length > 0
+      ? [
+          {
+            label: data[0]?.label || '',
+            value: data.slice(1).reduce((acc, item) => acc + item.value, 0),
+          },
+          ...data.slice(1),
+        ]
+      : data;
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const { clientX: x, clientY: y } = e;
+    setTooltipPosition({ x, y });
+  };
+
+  const handleMouseEnter = (
+    item: { label: string; value: number },
+    color: string
+  ) => {
+    setTooltip({ label: item.label, value: item.value, color });
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip(null);
+  };
+  const legendItems = chartData.map((item, index) => (
+    <div key={item.label} className="ff-pie-chart-legend-item">
+      <Typography
+        as="div"
+        fontSize={24}
+        fontWeight="semi-bold"
+        lineHeight="36px"
+        color={colors[index % colors.length] || ''}
+      >
+        {item.value}
+      </Typography>
+      <Typography
+        as="div"
+        fontSize={10}
+        fontWeight="regular"
+        lineHeight="18px"
+        className="ff-Pie-chart-legend-value"
+      >
+        {item.label}
+      </Typography>
+    </div>
+  ));
+
+  return (
+    <div className="ff-pie-chart-container" onMouseMove={handleMouseMove}>
+      <div
+        className={` ${chartBorder ? 'ff-pie-chart-border' : ''}`}
+        style={{ width: svgSize, height: svgSize }}
+      >
+        <svg
+          width={svgSize}
+          height={svgSize}
+          viewBox={`0 0 ${svgSize} ${svgSize}`}
+        >
+          <g transform={`translate(${radius + 5}, ${radius + 5})`}>
+            {chartData.map((item, index) => {
+              const { endAngle, backgroundArcPath } = calculateArcAngles(
+                item.value,
+                total,
+                currentAngle,
+                radius
+              );
+              currentAngle = endAngle;
+              const color = colors[index % colors.length] || '';
+
+              return (
+                <g key={item.label}>
+                  <path
+                    d={backgroundArcPath}
+                    fill={color}
+                    stroke="white"
+                    strokeWidth={0.5}
+                    onMouseEnter={() => handleMouseEnter(item, color)}
+                    onMouseLeave={handleMouseLeave}
+                  />
+                  <text
+                    x={(radius / 2) * Math.cos((currentAngle + endAngle) / 2)}
+                    y={(radius / 2) * Math.sin((currentAngle + endAngle) / 2)}
+                    fill="white"
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                  ></text>
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+      </div>
+
+      {tooltip && (
+        <div
+          className="ff-pie-chart-tooltip"
+          style={{
+            top: tooltipPosition.y,
+            left: tooltipPosition.x,
+            border: `2px solid ${tooltip.color}`,
+          }}
+        >
+          {tooltip.label} : {tooltip.value}
+        </div>
+      )}
+
+      <div className="ff-pie-chart-legend">{legendItems}</div>
+    </div>
+  );
+};
+
+export default PieChart;

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

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

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

@@ -0,0 +1,28 @@
+export type Status = {
+  status: 'Passed';
+  value: number;
+};
+
+export interface PieChartProps {
+  radius: number;
+  data: Array<{ label: string; value: number }>; 
+  colors: string[]; 
+  chartBorder: boolean;
+}
+
+export type ArcParams = {
+  x: number;
+  y: number;
+  radius: number;
+  startAngle: number;
+  endAngle: number;
+};
+
+export type ArcResult = string;
+
+export type ArcAnglesResult = {
+  endAngle: number;
+  backgroundArcPath: string;
+  foregroundArcPath: string;
+  percentage: number;
+};

package/src/components/Icon/iconList.ts

@@ -65,6 +65,10 @@ import AndroidIcon from '../../assets/icons/android_icon.svg?react';
 
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
+import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react'
+import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react'
+
+
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -130,5 +134,7 @@ Components['android_icon'] = AndroidIcon;
 
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
+Components['wswb_delete_icon'] = WSWBDeleteIcon;
+Components['wswb_plus_icon'] = WSWBPlusIcon;
 
 export default Components;