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

<Meta title="Blocks/Chart/BarChart" of={BarChartStories} />

<Title>BarChart</Title>
<Subtitle>
  Interactive bar charts for comparing data across categories or time periods.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'ApexCharts',
      href: 'https://apexcharts.com/docs/chart-types/bar-chart/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas
  of={BarChartStories.SingleBarDefault}
  layout="padded"
  sourceState="shown"
/>
<Controls />

## Usage

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

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

function MyBarChart() {
  const series = [
    {
      name: 'Sales',
      data: [
        { x: 'Q1', y: 1000 },
        { x: 'Q2', y: 1200 },
        { x: 'Q3', y: 1300 },
        { x: 'Q4', y: 1100 },
      ],
    },
  ]

  return (
    <BarChart
      height="300px"
      width="600px"
      series={series}
      showLegend={true}
      formatY={(value) => `$${value}`}
      formatTooltipY={(value) => `$${value.toFixed(2)}`}
      columnWidth="60px"
    />
  )
}
```

## Chart Library

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

## Features

- Supports single or multiple data series
- Optional horizontal orientation
- Customizable bar width with `columnWidth` prop
- Customizable X and Y axis formatting
- Customizable tooltip formatting
- Optional legend display
- Responsive design

### Multi-Series Support

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

```tsx
const multiSeries = [
  {
    name: 'Product A',
    data: [
      { x: 'Q1', y: 1000 },
      { x: 'Q2', y: 1200 },
      { x: 'Q3', y: 1300 },
    ],
  },
  {
    name: 'Product B',
    data: [
      { x: 'Q1', y: 800 },
      { x: 'Q2', y: 1000 },
      { x: 'Q3', y: 950 },
    ],
  },
]
```

### 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
<BarChart
  // ... other props
  formatX={(value) => `${value}`}
  formatY={(value) => `$${value}`}
  formatTooltipX={(value) => `Quarter: ${value}`}
  formatTooltipY={(value) => `$${value.toFixed(2)}`}
/>
```

### Column Width

Use the `columnWidth` prop to set the width of each bar. This can be specified in pixels or as a percentage.

```typescriptreact
<BarChart
  // ... other props
  columnWidth="60px"
  // or
  columnWidth="80%"
/>
```

## Examples

### Temperature Example

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

### Market Cap Example

<Canvas
  of={BarChartStories.MarketCapExample}
  layout="padded"
  sourceState="hidden"
/>