feat(FE-438): Add gauge skeleton and use in UniformityChart

src/components/pages/uniformity/UniformityChart.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import Card from '@/components/Card';
 import UniformityBarChart from '@/components/pages/uniformity/chart/UniformityBarChart';
 import UniformityGaugeChart from '@/components/pages/uniformity/chart/UniformityGaugeChart';
-import UniformityBarChartSkeleton from './skeleton/UniformityBarChartSkeleton';
+import UniformityBarChartSkeleton from '@/components/pages/uniformity/skeleton/UniformityBarChartSkeleton';
+import UniformityGaugeChartSkeleton from '@/components/pages/uniformity/skeleton/UniformityGaugeChartSkeleton';
 
 interface BarChartData {
   name: string;
@@ -69,14 +70,23 @@ const UniformityChart = () => {
 
   // TODO: Replace with actual API call
   const gaugeChartData: GaugeChartData = {
-    value: 52,
-    label: 'Uniformity',
+    value: 0,
+    label: '',
     kandang: 'Kandang Cirangga',
     week: 'Week 2',
     currentValue: 512,
     totalValue: 1024,
   };
 
+  // const gaugeChartData: GaugeChartData = {
+  //   value: 52,
+  //   label: 'Uniformity',
+  //   kandang: 'Kandang Cirangga',
+  //   week: 'Week 2',
+  //   currentValue: 512,
+  //   totalValue: 1024,
+  // };
+
   return (
     <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
       <Card
@@ -101,10 +111,10 @@ const UniformityChart = () => {
           title='Weekly Performance ⓘ'
           className={{
             wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
-            body: 'h-96',
+            body: 'h-110',
           }}
         >
-          <UniformityBarChartSkeleton />
+          <UniformityGaugeChartSkeleton />
         </Card>
       ) : (
         <Card

src/components/pages/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx

@@ -0,0 +1,81 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import React from 'react';
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+
+interface UniformityGaugeChartSkeletonProps {
+  label?: string;
+  kandang?: string;
+  week?: string;
+  currentValue?: number;
+  totalValue?: number;
+}
+
+const UniformityGaugeChartSkeleton: React.FC<
+  UniformityGaugeChartSkeletonProps
+> = ({}) => {
+  const numberOfSegments = 50;
+  const value = 0;
+  const filledSegments = Math.round((value / 100) * numberOfSegments);
+
+  const data = Array.from({ length: numberOfSegments }, (_, index) => ({
+    name: index,
+    value: 1,
+    filled: index < filledSegments,
+  }));
+
+  const activeColor = '#1890ff';
+  const inactiveColor = '#f0f0f0';
+
+  return (
+    <div className='flex flex-col w-full'>
+      <div className='h-64 w-full relative flex justify-center'>
+        <div className='relative w-full h-full flex flex-col items-center justify-end'>
+          <ResponsiveContainer width='100%' height='100%'>
+            <PieChart>
+              <Pie
+                data={data}
+                cx='50%'
+                cy='70%'
+                startAngle={180}
+                endAngle={0}
+                innerRadius='75%'
+                outerRadius='100%'
+                paddingAngle={2}
+                dataKey='value'
+                stroke='none'
+                isAnimationActive={false}
+              >
+                {data.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={entry.filled ? activeColor : inactiveColor}
+                  />
+                ))}
+              </Pie>
+            </PieChart>
+          </ResponsiveContainer>
+          <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
+            <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center mt-5'>
+              <Button className='rounded-2xl border border-sky-500 bg-[#0069E0]  text-white'>
+                <Icon
+                  icon={'heroicons:funnel'}
+                  className='text-4xl text-whitd'
+                />
+              </Button>
+            </div>
+            <span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
+              No Filters Selected
+            </span>
+            <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+              Please choose filters to narrow down your results and make your
+              search easier.
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UniformityGaugeChartSkeleton;