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

2026-05-25 07:45:47 +00:00 · 2025-12-26 10:36:29 +07:00
parent d9322cc17d
commit ae00f49e64
2 changed files with 96 additions and 5 deletions
@@ -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;