lti-web-client/src/components/pages/uniformity/chart/UniformityBarChart.tsx

import React from 'react';
import {
  Bar,
  BarChart,
  CartesianGrid,
  Rectangle,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

interface Payload {
  value?: number;
  name?: string;
  dataKey?: string | number;
}

interface CustomTooltipProps {
  active?: boolean;
  payload?: readonly Payload[];
  label?: string | number;
}

interface BarChartData {
  name: string;
  uv: number;
}

interface UniformityBarChartProps {
  data: BarChartData[];
}

function CustomTooltip({ payload, label, active }: CustomTooltipProps) {
  if (active && payload && payload.length && label !== undefined) {
    const labelStr = String(label);
    return (
      <div className='bg-[#18181B] p-2.5 shadow-sm text-white rounded-2xl rounded-bl-none'>
        <p className='m-0 font-bold text-white/50'>Uniformity 2025</p>
        <div className='flex items-center gap-2 mt-2 justify-between'>
          <div className='flex items-center gap-2'>
            <div className='w-5 h-5 bg-[#0069E0] rounded-md'></div>
            {payload[0].value} of Birds
          </div>
          <span>{labelStr}</span>
        </div>
      </div>
    );
  }

  return null;
}

const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
  const margin = {
    top: 20,
    right: 30,
    left: 20,
    bottom: 5,
  };

  return (
    <ResponsiveContainer
      width='100%'
      height='100%'
      className='min-h-[300px] xl:min-h-[350px]'
    >
      <BarChart data={data} margin={margin} barGap={20}>
        <defs>
          <linearGradient id='activeBarGradient' x1='0' y1='0' x2='0' y2='1'>
            <stop offset='0%' stopColor='#0069E0' stopOpacity={0.01} />
            <stop offset='40%' stopColor='#0069E0' stopOpacity={1} />
            <stop offset='100%' stopColor='#0069E0' stopOpacity={1} />
          </linearGradient>
        </defs>
        <XAxis
          dataKey='name'
          axisLine={false}
          tickLine={false}
          label={{
            value: 'Body Weight Range',
            position: 'insideBottom',
            offset: -5,
            style: { textAnchor: 'middle', fontSize: 14, fill: '#18181B33' },
          }}
        />
        <YAxis
          axisLine={false}
          tickLine={false}
          label={{
            value: 'Number of Birds',
            angle: -90,
            position: 'insideLeft',
            style: { textAnchor: 'middle', fontSize: 14, fill: '#18181B33' },
          }}
        />
        <Tooltip
          cursor={false}
          content={CustomTooltip}
          wrapperStyle={{
            width: '200px',
          }}
        />
        <CartesianGrid vertical={false} />
        <Bar
          name='Birds'
          dataKey='uv'
          fill='#FFFFFF'
          stroke='#DDD'
          strokeWidth={2}
          radius={[25, 25, 0, 0]}
          activeBar={
            <Rectangle
              fill='url(#activeBarGradient)'
              stroke='#18181B'
              strokeWidth={0}
              radius={[25, 25, 0, 0]}
            />
          }
        />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default UniformityBarChart;