import { AreaChart, ChartContainer } from '@moul-dev/ui';

import { AreaChart, ChartContainer } from '@moul-dev/ui';

export default function Example() {
  const data = [
    { date: 'Jan', Sales: 4000, Revenue: 2400 },
    { date: 'Feb', Sales: 3000, Revenue: 1398 },
    { date: 'Mar', Sales: 2000, Revenue: 9800 },
    { date: 'Apr', Sales: 2780, Revenue: 3908 },
    { date: 'May', Sales: 1890, Revenue: 4800 },
    { date: 'Jun', Sales: 2390, Revenue: 3800 },
  ];

  return (
    <ChartContainer
      title="Monthly Sales Performance"
      description="Comparing sales and revenue over time"
      legend={[{ name: 'Sales' }, { name: 'Revenue' }]}
    >
      <AreaChart
        data={data}
        indexKey="date"
        categories={['Sales', 'Revenue']}
        height={300}
        valueFormatter={(val) => `$${val.toLocaleString()}`}
      />
    </ChartContainer>
  );
}

import { AreaChart, ChartContainer } from '@moul-dev/ui';

export default function SparklineExample() {
  const sparkData = [
    { time: '01:00', load: 35 },
    { time: '02:00', load: 42 },
    { time: '03:00', load: 78 },
    { time: '04:00', load: 55 },
    { time: '05:00', load: 60 },
  ];

  return (
    <ChartContainer
      title="Server Load"
      description="Avg 54% over 24h"
      edgeToEdge
    >
      <AreaChart
        data={sparkData}
        indexKey="time"
        categories={['load']}
        height={140}
        showXAxis={false}
        showYAxis={false}
        gridLines={false}
      />
    </ChartContainer>
  );
}