lti-web-client/src/components/pages/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx

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 min-h-[256px]'>
        <div className='relative w-full h-full flex flex-col items-center justify-end min-w-0'>
          <ResponsiveContainer width='100%' height={256}>
            <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;