`src/components/charts/CollectionPriceChart.tsx`

62 lines
'use client';

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

interface CollectionData {
  collection: string;
  avg: number;
  min: number;
  max: number;
  count: number;
}

interface CollectionPriceChartProps {
  data: CollectionData[];
  title?: string;
}

const COLORS = ['#d4842e', '#6366f1', '#22c55e', '#f59e0b', '#14b8a6', '#ec4899'];

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-sm font-semibold text-white">{d.collection}</p>
      <p className="text-xs text-omega-400">Avg: {formatCurrency(d.avg)}</p>
      <p className="text-xs text-navy-300">Range: {formatCurrency(d.min)} – {formatCurrency(d.max)}</p>
      <p className="text-xs text-navy-400">{d.count} events</p>
    </div>
  );
};

export default function CollectionPriceChart({ data, title }: CollectionPriceChartProps) {
  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 collection price data available</p>
      </div>
    );
  }

  return (
    <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-4">
      {title && <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">{title}</h3>}
      <ResponsiveContainer width="100%" height={280}>
        <BarChart data={data} margin={{ top: 5, right: 10, bottom: 5, left: 10 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
          <XAxis dataKey="collection" stroke="#64748b" fontSize={11} tick={{ fill: '#94a3b8' }} />
          <YAxis stroke="#64748b" fontSize={11} tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} />
          <Tooltip content={<CustomTooltip />} />
          <Bar dataKey="avg" radius={[4, 4, 0, 0]}>
            {data.map((_, i) => (
              <Cell key={i} fill={COLORS[i % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}