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

<Meta title="Blocks/Chart/PieChart" of={PieChartStories} />

<Title>PieChart</Title>
<Subtitle>
  Interactive pie and donut charts for visualizing part-to-whole relationships.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'ApexCharts',
      href: 'https://apexcharts.com/docs/chart-types/pie-donut/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas of={PieChartStories.PieDefault} layout="padded" sourceState="shown" />
<Controls />

## Usage

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

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

function MyPieChart() {
  const series = [
    { name: 'Category A', color: '#60A5FA', data: 30 },
    { name: 'Category B', color: '#4ADE80', data: 25 },
    { name: 'Category C', color: '#FBBF24', data: 20 },
    { name: 'Category D', color: '#F87171', data: 15 },
    { name: 'Category E', color: '#A78BFA', data: 10 },
  ]

  return (
    <PieChart
      height="300px"
      width="100%"
      series={series}
      showLegend={true}
      isDonut={false}
    />
  )
}
```

## Chart Library

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

## Features

- Supports both pie and donut chart types
- Customizable colors for each segment
- Optional legend display
- Customizable donut size (for donut charts)
- Responsive design

## Examples

### Budget Allocation Example

<Canvas
  of={PieChartStories.BudgetAllocationExample}
  layout="padded"
  sourceState="hidden"
/>

### Market Share Example

<Canvas
  of={PieChartStories.MarketShareExample}
  layout="padded"
  sourceState="hidden"
/>