import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const dataWithGaps = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    // no series has a value here
  },
  {
    name: 'Page D',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    // only uv is missing here
    pv: 4300,
    amt: 2100,
  },
];

// #endregion
const AreaChartConnectNulls = () => {
  return (
    <div style={{ width: '100%' }}>
      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={data}
        margin={{
          top: 20,
          right: 0,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis width="auto" />
        <Tooltip />
        <Area type="monotone" dataKey="uv" />
        <RechartsDevtools />
      </AreaChart>

      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={data}
        margin={{
          top: 20,
          right: 0,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis width="auto" />
        <Tooltip />
        <Area connectNulls type="monotone" dataKey="uv" />
        <RechartsDevtools />
      </AreaChart>

      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={data}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="uv" stackId="1" />
        <Area type="monotone" dataKey="pv" stackId="1" />
        <Area type="monotone" dataKey="amt" stackId="1" />
        <RechartsDevtools />
      </AreaChart>

      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={data}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area connectNulls type="monotone" dataKey="uv" stackId="1" />
        <Area connectNulls type="monotone" dataKey="pv" stackId="1" />
        <Area connectNulls type="monotone" dataKey="amt" stackId="1" />
        <RechartsDevtools />
      </AreaChart>

      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={dataWithGaps}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="uv" stackId="1" />
        <Area type="monotone" dataKey="pv" stackId="1" />
        <Area type="monotone" dataKey="amt" stackId="1" />
        <RechartsDevtools />
      </AreaChart>

      <AreaChart
        style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
        responsive
        data={dataWithGaps}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area connectNulls type="monotone" dataKey="uv" stackId="1" />
        <Area connectNulls type="monotone" dataKey="pv" stackId="1" />
        <Area connectNulls type="monotone" dataKey="amt" stackId="1" />
        <RechartsDevtools />
      </AreaChart>
    </div>
  );
};

export default AreaChartConnectNulls;