import { AreaChart, ReferenceLine, 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',
    uv: 2780,
    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,
  },
];

// #endregion
const ReferenceLineExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <AreaChart
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    data={data}
    margin={{
      top: 20,
      right: 0,
      left: 0,
      bottom: 0,
    }}
  >
    <XAxis dataKey="name" />
    <YAxis width="auto" />
    <CartesianGrid />
    <Tooltip />
    <Area type="monotone" dataKey="uv" fillOpacity={0.3} isAnimationActive={isAnimationActive} />
    <ReferenceLine
      x="Page C"
      stroke="green"
      label={{ value: 'prop `x` creates vertical lines', position: 'insideTop', offset: 70 }}
    />
    <ReferenceLine
      y={4000}
      label={{ value: 'prop `y` creates horizontal lines', position: 'insideTopRight' }}
      stroke="red"
      strokeDasharray="3 3"
    />
    <ReferenceLine
      label={{ value: 'prop `segment` connects two arbitrary points', position: 'middle' }}
      stroke="green"
      strokeDasharray="3 3"
      segment={[
        { x: 'Page D', y: 0 },
        { x: 'Page F', y: 1500 },
      ]}
    />
    <RechartsDevtools />
  </AreaChart>
);

export default ReferenceLineExample;

import { ReferenceLine, XAxis, YAxis, CartesianGrid, Tooltip, BarChart, Bar } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const smallData = [
  {
    name: 'Page A',
    pv: 2400,
  },
  {
    name: 'Page B',
    pv: 1398,
  },
  {
    name: 'Page C',
    pv: 9800,
  },
];

// #endregion
export const ReferenceLinePositionExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <BarChart
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    data={smallData}
  >
    <XAxis dataKey="name" />
    <YAxis width="auto" />
    <CartesianGrid />
    <Tooltip />
    <ReferenceLine x="Page B" label={{ value: 'position: start' }} position="start" />
    <ReferenceLine x="Page B" label={{ value: 'position: middle' }} position="middle" />
    <ReferenceLine x="Page B" label={{ value: 'position: end' }} position="end" />
    <Bar dataKey="pv" fillOpacity={0.3} isAnimationActive={isAnimationActive} />
    <RechartsDevtools />
  </BarChart>
);

export default ReferenceLinePositionExample;