pixel-react 1.6.7 → 1.6.9

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

@@ -1,51 +1,51 @@
-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,
-  },
-};
+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,
+  },
+};

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

@@ -1,173 +1,173 @@
-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,
-  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={arcColor}
-              textAnchor="middle"
-              dominantBaseline="central"
-            >
-              {`${Math.round(percentageValue)}%`}
-            </text>
-          )}
-        </g>
-      </svg>
-      {showTooltip && renderTooltip()}
-    </div>
-  );
-};
-
-export default IconRadialChart;
+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,
+  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={arcColor}
+              textAnchor="middle"
+              dominantBaseline="central"
+            >
+              {`${Math.round(percentageValue)}%`}
+            </text>
+          )}
+        </g>
+      </svg>
+      {showTooltip && renderTooltip()}
+    </div>
+  );
+};
+
+export default IconRadialChart;

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

@@ -1,28 +1,28 @@
-export interface IconRadialChartProps {
-  radius: number;
-  lineWidth: number;
-  label: string;
-  percentageValue: number;
-  icon?: string;
-  fontSize: number;
-  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;
-};
+export interface IconRadialChartProps {
+  radius: number;
+  lineWidth: number;
+  label: string;
+  percentageValue: number;
+  icon?: string;
+  fontSize: number;
+  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;
+};