Bar chart

'use client';

import * as React from 'react';
import { type ChartPeriod, EarningsChart } from './earnings-chart';

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const LONG = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

// Monthly earnings from November 2024 to October 2026.
const VALUES = [
  5460, 5980, 5120, 5390, 5870, 5640, 6020, 6310, 5950, 6480, 7040, 6720, 7280, 7400, 6600, 7100, 7310, 7300,
  6210, 7140, 6820, 8320, 9090, 10740,
];

const bars = VALUES.map((value, i) => {
  const month = (10 + i) % 12;
  const year = 2024 + Math.floor((10 + i) / 12);
  return {
    key: `${year}-${String(month + 1).padStart(2, '0')}`,
    label: MONTHS[month] as string,
    title: `${LONG[month]} ${year}`,
    value,
  };
});

const PERIODS: ChartPeriod[] = [
  { id: '6m', label: '6M', bars: bars.slice(-6), previous: 42990, comparison: 'vs the 6 months before' },
  { id: '1y', label: '1Y', bars: bars.slice(-12), previous: 94820, comparison: 'vs the year before' },
  { id: 'all', label: 'All', bars, comparison: 'since November 2024' },
];

/** Moves a pretend pointer over the plot, so Replay can show the hover column. */
function pointAt(root: HTMLElement | null, fraction: number | null) {
  const plot = root?.querySelector<HTMLElement>('[data-slot="earnings-chart-plot"]');
  if (!plot) return;
  const box = plot.getBoundingClientRect();
  if (fraction === null) {
    plot.dispatchEvent(new PointerEvent('pointerleave', { bubbles: false }));
    return;
  }
  plot.dispatchEvent(
    new PointerEvent('pointermove', {
      bubbles: true,
      clientX: box.left + box.width * fraction,
      clientY: box.top + 40,
    }),
  );
}

export default function EarningsChartDemo({ replay = 0 }: { replay?: number }) {
  const [period, setPeriod] = React.useState('6m');
  const ref = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    const steps: [number, () => void][] = [
      [0, () => setPeriod('1y')],
      [1500, () => pointAt(ref.current, 4.5 / 12)],
      [2100, () => pointAt(ref.current, 7.5 / 12)],
      [2700, () => pointAt(ref.current, 9.5 / 12)],
      [3400, () => pointAt(ref.current, null)],
      [3800, () => setPeriod('6m')],
    ];
    const timers = steps.map(([at, run]) => window.setTimeout(run, at));
    return () => {
      for (const id of timers) window.clearTimeout(id);
    };
  }, [replay]);

  return (
    <div ref={ref} className="w-full max-w-[640px]">
      <EarningsChart periods={PERIODS} value={period} onValueChange={setPeriod} locales="en-US" />
    </div>
  );
}