import { format } from 'date-fns'
import { LineChart } from './index.js'

const TEST_DATA = Array.from({ length: 720 }, (_, i) => ({
  ts: Date.now() + i * 60 * 1000,
  value1: Math.floor(
    350 + 150 * Math.sin((i / 360) * 2 * Math.PI) + Math.random() * 2.5,
  ),
  value2: Math.floor(
    500 + 150 * Math.cos((i / 360) * 2 * Math.PI) + Math.random() * 5,
  ),
  value3: Math.floor(
    300 + 100 * Math.sin((i / 360) * 4 * Math.PI) + Math.random() * 10,
  ),
}))

export const Default = () => {
  return (
    <div
      style={{
        height: 300,
        width: '100%',
        display: 'flex',
      }}
    >
      <LineChart
        data={TEST_DATA}
        xKey="ts"
        yKeys={['value1', 'value2', 'value3']}
        xFormat={(x) => format(new Date(x), 'HH:mm')}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}
