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

<Meta title="Blocks/Chart/MixedChart" of={MixedChartStories} />

<Title>MixedChart</Title>
<Subtitle>
  Interactive charts that combine different chart types, such as bar and line,
  to display diverse data sets in a single view.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'ApexCharts',
      href: 'https://apexcharts.com/docs/chart-types/mixed-charts/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas
  of={MixedChartStories.StackedBarAndLine}
  layout="padded"
  sourceState="shown"
/>
<Controls />

## Usage

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

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

function MyMixedChart() {
  const series: [
    {
      name: 'PRODUCT A'
      type: 'bar'
      data: [
        { x: '2021'; y: 400 },
        { x: '2022'; y: 430 },
        { x: '2023'; y: 448 },
      ]
    },
    {
      name: 'PRODUCT B'
      type: 'bar'
      data: [
        { x: '2021'; y: 200 },
        { x: '2022'; y: 300 },
        { x: '2023'; y: 248 },
      ]
    },
    {
      name: 'PRODUCT C'
      type: 'line'
      data: [
        { x: '2021'; y: 600 },
        { x: '2022'; y: 730 },
        { x: '2023'; y: 648 },
      ]
    },
  ]

  return (
    <MixedChart
      height="300px"
      width="600px"
      series={series}
      showLegend={true}
      formatY={(value) => `$${value}`}
      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 mixed charts, refer to the [**ApexCharts documentation**](https://apexcharts.com/docs/chart-types/mixed-charts/).

## Features

- Supports combining different chart types (e.g., bar, line, area)
- Optional stacking for bar charts
- Customizable X and Y axis formatting
- Customizable tooltip formatting
- Optional legend display
- Responsive design

### Stacking

The `MixedChart` component supports stacking for bar charts. To enable stacking, set the `stacked` prop to `true`.

```tsx
<MixedChart
  // ... other props
  stacked={true}
/>
```

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

## Examples

### Stacked BarChart + LineChart Mixed

<Canvas
  of={MixedChartStories.StackedBarAndLine}
  layout="padded"
  sourceState="hidden"
/>