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

<Meta title="Blocks/Chart/RadialChart" of={RadialChartStories} />
<Title>RadialChart</Title>
<Subtitle>
  Interactive radial charts for visualizing progress or comparing values in a
  circular layout.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'ApexCharts',
      href: 'https://apexcharts.com/docs/chart-types/radialbar-gauge/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas
  of={RadialChartStories.SingleRadialDefault}
  layout="padded"
  sourceState="shown"
/>
<Controls />

## Usage

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

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

function MyRadialChart() {
  const series = [{ name: 'Progress', color: '#60A5FA', data: 75 }]

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

## Chart Library

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

## Features

- Supports single or multiple data series
- Customizable start and end angles
- Adjustable hollow size
- Optional track backgrounds
- Customizable colors for each segment
- Optional legend display
- Responsive design

## Examples

### Skillset Example

<Canvas
  of={RadialChartStories.SkillsetExample}
  layout="padded"
  sourceState="shown"
/>

### Crypto Adoption Example

<Canvas
  of={RadialChartStories.CryptoAdoptionExample}
  layout="padded"
  sourceState="shown"
/>