added RadialProgressBar

monkeystylle · Jun 19, 2024 · 7426aac · 7426aac
1 parent b13398f
commit 7426aac
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 55 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,76 +1,89 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+@layer components {
+}
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+@layer utilities {
+  .clip-path-none {
+    clip-path: none;
   }
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+  .clip-path-halfCircle {
+    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+  }
+}
diff --git a/components/PieChart/PieChart.tsx b/components/PieChart/PieChart.tsx
@@ -12,7 +12,6 @@ type PieChartProps = {
 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] ',
     {

diff --git a/components/RadialProgressBar/RadialProgressBar.stories.tsx b/components/RadialProgressBar/RadialProgressBar.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import RadialProgressBar from './RadialProgressBar';
+
+const meta: Meta<typeof RadialProgressBar> = {
+  title: 'Components/RadialProgressBar',
+  component: RadialProgressBar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadialProgressBar>;
+
+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,
+  },
+};
diff --git a/components/RadialProgressBar/RadialProgressBar.tsx b/components/RadialProgressBar/RadialProgressBar.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { getDegreeRotation } from '../PieChart/PieChart.helpers';
+
+type RadialProgressBarProps = {
+  /**
+   * percentage of the radialProgressBar , from 1 to 100
+   */
+  fillPercentage: number;
+};
+
+const RadialProgressBar = (props: RadialProgressBarProps) => {
+  const { fillPercentage } = props;
+
+  // Normalize the percentage to be within 0 to 100
+  const clampedPercentage = Math.min(100, Math.max(0, fillPercentage));
+
+  // Define the degree circle rotation class
+  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-32 w-32 ">
+      <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)` }}
+      />
+
+      {/* center */}
+      <div
+        className={cn(
+          ' bg-white flex justify-center items-center rounded-full h-[80%] w-[80%]',
+          ' absolute z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+          ' text-lg font-medium'
+        )}
+      >
+        {`${clampedPercentage}%`}
+      </div>
+    </div>
+  );
+};
+
+export default RadialProgressBar;
diff --git a/components/RadialProgressBar/index.tsx b/components/RadialProgressBar/index.tsx