import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
  Title,
  Subtitle,
  Controls,
} from '@storybook/addon-docs/blocks'
import { LineChart } from './LineChart'
import * as LineChartStories from './LineChart.stories'
import { LifecycleTag } from '../../../docs/components/LifecycleTag'
import { SourceLinks } from '../../../docs/components'

<Meta title="Blocks/Chart/LineChart" of={LineChartStories} />

<Title>LineChart</Title>
<Subtitle>
  Interactive line charts for visualizing trends over time or categories.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'ApexCharts',
      href: 'https://apexcharts.com/docs/chart-types/line-chart/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas
  of={LineChartStories.SingleLineDefault}
  layout="padded"
  sourceState="shown"
/>
<Controls />

## Usage

To use line charts in your app, import the `<LineChart>` component and pass the necessary props:

```tsx
import React from 'react'
import { LineChart } from '@chainlink/blocks'

function MyLineChart() {
  const series = [
    {
      name: 'Sales',
      data: [
        { x: '2023-01', y: 100 },
        { x: '2023-02', y: 120 },
        { x: '2023-03', y: 130 },
        { x: '2023-04', y: 110 },
      ],
    },
  ]

  return (
    <LineChart
      height="300px"
      width="100%"
      series={series}
      showLegend={true}
      formatX={(value) =>
        new Date(value).toLocaleString('default', { month: 'short' })
      }
      formatY={(value) => `$${value}`}
      formatTooltipX={(value) => new Date(value).toLocaleDateString()}
      formatTooltipY={(value) => `$${value.toFixed(2)}`}
    />
  )
}
```

## Chart Library

This chart is built using the **ApexCharts** library, which provides powerful customization options and interactivity for visualizations.  
For more details on configuring line charts, refer to the [**ApexCharts documentation**](https://apexcharts.com/docs/chart-types/line-chart/).

## Features

- Supports single or multiple data series
- Customizable X and Y axis formatting
- Customizable tooltip formatting
- Optional legend display
- Responsive design

### Multi-Series Support

The LineChart component supports multiple data series. Simply provide an array of series objects:

```tsx
const multiSeries = [
  {
    name: 'Product A',
    data: [
      { x: '2023-01', y: 100 },
      { x: '2023-02', y: 120 },
      { x: '2023-03', y: 130 },
    ],
  },
  {
    name: 'Product B',
    data: [
      { x: '2023-01', y: 80 },
      { x: '2023-02', y: 100 },
      { x: '2023-03', y: 95 },
    ],
  },
]
```

### Label Formatting

Use the `formatTooltipX` and `formatTooltipY` props to customize the display of values in the tooltip, and use the `formatX` and `formatY` props to customize the formatting of the X and Y axes.

```tsx
<LineChart
  // ... other props
  formatX={(value) =>
    new Date(value).toLocaleString('default', { month: 'short' })
  }
  formatY={(value) => `$${value}`}
  formatTooltipX={(value) => new Date(value).toLocaleDateString()}
  formatTooltipY={(value) => `$${value.toFixed(2)}`}
/>
```

## Examples

### Custom tooltip Y formatters

Use `options.tooltip.y` to format each series value differently in the tooltip (e.g. locale number, currency, percentage) while keeping the default Blocks tooltip styling.

<Canvas
  of={LineChartStories.CustomTooltipYFormatters}
  layout="padded"
  sourceState="hidden"
/>

### Temperature Example

<Canvas
  of={LineChartStories.TemperatureExample}
  layout="padded"
  sourceState="hidden"
/>

### Crypto Prices Example

<Canvas
  of={LineChartStories.CryptoPricesExample}
  layout="padded"
  sourceState="hidden"
/>