added PieChart

components/PieChart/PieChart.helpers.ts

@@ -0,0 +1,11 @@
+export const getDegreeRotation = (percentage: number): number => {
+  // Normalize the percentage to be within 0 to 100
+  const clampedPercentage = Math.min(100, Math.max(0, percentage));
+  // Convert the percentage to degrees
+  let degrees = clampedPercentage * 3.6;
+  // If the degrees exceed 180, subtract 180 from it
+  if (degrees > 180) {
+    degrees = degrees - 180;
+  }
+  return degrees;
+};

components/PieChart/PieChart.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PieChart from './PieChart';
+
+const meta: Meta<typeof PieChart> = {
+  title: 'Components/PieChart',
+  component: PieChart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PieChart>;
+
+export const Default: Story = {
+  args: {
+    fillPercentage: 13,
+  },
+};
+
+export const Quarter: Story = {
+  args: {
+    fillPercentage: 25,
+  },
+};
+
+export const Half: Story = {
+  args: {
+    fillPercentage: 50,
+  },
+};
+
+export const Full: Story = {
+  args: {
+    fillPercentage: 100,
+  },
+};
+
+export const Empy: Story = {
+  args: {
+    fillPercentage: 0,
+  },
+};

components/PieChart/PieChart.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { getDegreeRotation } from './PieChart.helpers';
+import { cn } from '@/lib/utils';
+
+type PieChartProps = {
+  /**
+   * percentage of the pie chart , from 1 to 100
+   */
+  fillPercentage: number;
+};
+
+const PieChart = (props: PieChartProps) => {
+  const { fillPercentage } = props;
+
+  // Define the degree circle rotation class with conditional coloring
+  const degreeCircle2 = cn(
+    'absolute top-0 h-1/2 w-full bg-gray-300  origin-[center_bottom] ',
+    {
+      'bg-blue-600': fillPercentage > 50,
+      'bg-gray-300': fillPercentage <= 50,
+    }
+  );
+
+  return (
+    <div className="bg-gray-300 rounded-full relative overflow-hidden h-[192px] w-[192px] ">
+      <div className="absolute top-0 h-1/2 w-full bg-blue-600 origin-[center_bottom] " />
+      <div
+        className={degreeCircle2}
+        style={{ transform: `rotate(${getDegreeRotation(fillPercentage)}deg)` }}
+      />
+    </div>
+  );
+};
+
+export default PieChart;