pixel-react 1.6.8 → 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;
+};

package/src/components/Charts/LineChart/LineChart.scss

@@ -1,92 +1,92 @@
-@use '../../../assets/styles/fonts';
-
-.ff-line-chart-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.ff-line-chart-text {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  .smooth-dot {
-    transition: cx 0.2s ease, cy 0.2s ease;
-  }
-}
-.ff-line-chart-yAxisLabel-warpper {
-  position: relative;
-  min-width: 20px;
-  height: 100%;
-  .ff-line-chart-yAxisLabel {
-    position: absolute;
-    right: 0;
-    top: 50%;
-    display: flex;
-    white-space: nowrap;
-    transform: rotate(270deg) translateX(60%);
-    transform-origin: right center;
-  }
-}
-
-.ff-line-chart-text1 {
-  transform-origin: center;
-  transform: rotate(-90deg);
-  transition: transform 1s ease-in-out;
-  position: relative;
-  left: 163px;
-  min-width: 10px;
-  color: var(--drawer-title-color);
-}
-
-.ff-line-chart-tooltip {
-  position: absolute;
-  background-color: var(--tooltip-bg-color);
-  border-radius: 4px;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  min-width: 30px;
-  min-height: 30px;
-  justify-content: center;
-  align-items: flex-start;
-  row-gap: 10px;
-  padding: 8px !important;
-}
-
-.ff-line-chart-status-dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-}
-.ff-line-chart-inner-tooltip {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  color: var(--arrow-button-bg-color);
-  @extend .fontSm;
-}
-
-.ff--line-chart-x-line-data {
-  @extend .fontSm;
-}
-.ff-line-chart-y-axis-text {
-  @extend .fontSm;
-}
-
-.ff-line-chart-date {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  border-bottom: 1px solid var(--arrow-button-bg-color);
-  color: var(--arrow-button-bg-color);
-  @extend .fontSm;
-}
-.ff-line-chart-x-axis-label {
-  @extend .font-size-8;
-  font-weight: 600;
-}
+@use '../../../assets/styles/fonts';
+
+.ff-line-chart-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ff-line-chart-text {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .smooth-dot {
+    transition: cx 0.2s ease, cy 0.2s ease;
+  }
+}
+.ff-line-chart-yAxisLabel-warpper {
+  position: relative;
+  min-width: 20px;
+  height: 100%;
+  .ff-line-chart-yAxisLabel {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    display: flex;
+    white-space: nowrap;
+    transform: rotate(270deg) translateX(60%);
+    transform-origin: right center;
+  }
+}
+
+.ff-line-chart-text1 {
+  transform-origin: center;
+  transform: rotate(-90deg);
+  transition: transform 1s ease-in-out;
+  position: relative;
+  left: 163px;
+  min-width: 10px;
+  color: var(--drawer-title-color);
+}
+
+.ff-line-chart-tooltip {
+  position: absolute;
+  background-color: var(--tooltip-bg-color);
+  border-radius: 4px;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  min-width: 30px;
+  min-height: 30px;
+  justify-content: center;
+  align-items: flex-start;
+  row-gap: 10px;
+  padding: 8px !important;
+}
+
+.ff-line-chart-status-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+}
+.ff-line-chart-inner-tooltip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  color: var(--arrow-button-bg-color);
+  @extend .fontSm;
+}
+
+.ff--line-chart-x-line-data {
+  @extend .fontSm;
+}
+.ff-line-chart-y-axis-text {
+  @extend .fontSm;
+}
+
+.ff-line-chart-date {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--arrow-button-bg-color);
+  color: var(--arrow-button-bg-color);
+  @extend .fontSm;
+}
+.ff-line-chart-x-axis-label {
+  @extend .font-size-8;
+  font-weight: 600;
+}