pixel-react 1.7.1 → 1.7.3

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

@@ -1,41 +1,41 @@
-@use '../../../assets/styles/fonts';
-.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);
-    @extend .fontSm;
-    font-weight: 400;
-    pointer-events: none;
-  }
-
-  .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;
-    }
-    .ff-pie-chart-legend-value {
-      color: var(--drawer-title-color);
-    }
-  }
-}
+@use '../../../assets/styles/fonts';
+.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);
+    @extend .fontSm;
+    font-weight: 400;
+    pointer-events: none;
+  }
+
+  .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;
+    }
+    .ff-pie-chart-legend-value {
+      color: var(--drawer-title-color);
+    }
+  }
+}

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

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

@@ -1,192 +1,192 @@
-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,
-          }}
-        >
-          {tooltip.label} : {tooltip.value}
-        </div>
-      )}
-
-      <div className="ff-pie-chart-legend">{legendItems}</div>
-    </div>
-  );
-};
-
-export default PieChart;
+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,
+          }}
+        >
+          {tooltip.label} : {tooltip.value}
+        </div>
+      )}
+
+      <div className="ff-pie-chart-legend">{legendItems}</div>
+    </div>
+  );
+};
+
+export default PieChart;

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

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

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

@@ -1,28 +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;
-};
+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/Charts/RadialChart/RadialChart.scss

@@ -1,16 +1,16 @@
-@use '../../../assets/styles/fonts';
-
-.ff-radial-chart-container {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  svg {
-    vertical-align: middle;
-    text {
-      @extend .font-size-8;
-      font-size: var(--fontSize) !important;
-      font-weight: 400;
-    }
-  }
-}
+@use '../../../assets/styles/fonts';
+
+.ff-radial-chart-container {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  svg {
+    vertical-align: middle;
+    text {
+      @extend .font-size-8;
+      font-size: var(--fontSize) !important;
+      font-weight: 400;
+    }
+  }
+}