`src/components/charts/PriceDistribution.tsx`

70 lines
'use client';

import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell } from 'recharts';
import { formatCurrency } from '@/lib/utils';

interface DistributionBucket {
  range_low: number;
  range_high: number;
  count: number;
}

interface PriceDistributionProps {
  data: DistributionBucket[];
  title?: string;
  color?: string;
}

const CustomTooltip = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-navy-800 border border-navy-600 rounded-lg p-3 shadow-xl">
      <p className="text-xs text-navy-300">
        {formatCurrency(d.range_low)} — {formatCurrency(d.range_high)}
      </p>
      <p className="text-sm font-semibold text-omega-400">{d.count} transactions</p>
    </div>
  );
};

export default function PriceDistribution({ data, title, color = '#c89b3c' }: PriceDistributionProps) {
  if (!data?.length) {
    return (
      <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-8 text-center">
        <p className="text-navy-400">No distribution data available</p>
      </div>
    );
  }

  const chartData = data.map((b) => ({
    ...b,
    label: `$${(b.range_low / 1000).toFixed(0)}k`,
  }));

  const maxCount = Math.max(...data.map((b) => b.count));

  return (
    <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-4">
      {title && <h3 className="text-lg font-semibold text-white mb-4">{title}</h3>}
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
          <XAxis dataKey="label" stroke="#64748b" fontSize={10} />
          <YAxis stroke="#64748b" fontSize={11} />
          <Tooltip content={<CustomTooltip />} />
          <Bar dataKey="count" radius={[4, 4, 0, 0]}>
            {chartData.map((entry, i) => (
              <Cell
                key={i}
                fill={color}
                fillOpacity={0.3 + (entry.count / maxCount) * 0.7}
              />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}