# Chart

A comprehensive charting component for visualizing data in various formats including bar, line, area, pie, and donut charts.

### **Import**
```tsx
import { Chart, CHART_COLORS } from '@app-studio/web';
```

### **Quick Start (Bar Chart)**
```tsx
import React from 'react';
import { Chart, CHART_COLORS, View } from '@app-studio/web';

export const SimpleBarChart = () => (
    <View height="300px">
        <Chart
            type="bar"
            title="Monthly Sales"
            data={{
                labels: ['Jan', 'Feb', 'Mar'],
                series: [{ name: 'Sales', data: [30, 50, 40], color: CHART_COLORS.blue }]
            }}
        />
    </View>
);
```

### **Chart Types**

#### **Line & Area Charts**
Useful for showing trends over time.

```tsx
<View height="300px">
    <Chart
        type="line" // or "area"
        title="User Growth"
        showGrid
        showTooltips
        data={{
            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
            series: [
                { name: '2023', data: [100, 120, 140, 180], color: CHART_COLORS.purple },
                { name: '2024', data: [150, 190, 220, 280], color: CHART_COLORS.teal }
            ]
        }}
    />
</View>
```

#### **Pie & Donut Charts**
Useful for showing proportional data.

```tsx
<View height="300px">
    <Chart
        type="donut" // or "pie"
        title="Device Usage"
        dataPoints={[
            { label: 'Mobile', value: 60, color: CHART_COLORS.indigo },
            { label: 'Desktop', value: 30, color: CHART_COLORS.cyan },
            { label: 'Tablet', value: 10, color: CHART_COLORS.gray }
        ]}
        onDataPointClick={(point, index) => alert(`Clicked ${point.label}`)}
    />
</View>
```

### **States (Loading, Error, No Data)**
Handle various UI states gracefully with built-in props.

```tsx
import React, { useState } from 'react';
import { Chart, Button, Vertical, Horizontal } from '@app-studio/web';

export const ChartStateDemo = () => {
    const [status, setStatus] = useState('normal'); 

    return (
        <Vertical gap={20}>
            <Horizontal gap={10}>
                <Button onClick={() => setStatus('loading')}>Load</Button>
                <Button onClick={() => setStatus('error')}>Error</Button>
                <Button onClick={() => setStatus('empty')}>Empty</Button>
            </Horizontal>

            <View height="300px">
                <Chart
                    type="bar"
                    title="Revenue"
                    isLoading={status === 'loading'}
                    error={status === 'error' ? 'Connection Failed' : undefined}
                    noData={status === 'empty'}
                    data={{ labels: ['A', 'B'], series: [{ name: 'Val', data: [1, 2] }] }}
                />
            </View>
        </Vertical>
    );
};
```

### **Interactive Events**
- **onSeriesClick**: Called when a bar (bar chart) or point (line/area) is clicked.
- **onDataPointClick**: Called when a slice (pie/donut) is clicked.

```tsx
<Chart
    type="bar"
    data={data}
    onSeriesClick={(seriesName, index) => {
        console.log(`Series: ${seriesName}, Index: ${index}`);
    }}
/>
```

### **Props Reference**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'bar' \| 'line' \| 'area' \| 'pie' \| 'donut'` | **Required** | The type of chart to render |
| `data` | `ChartData` | - | Data for multi-series charts (bar, line, area) |
| `dataPoints` | `ChartDataPoint[]` | - | Data points for single series charts (pie, donut) |
| `title` | `string` | - | The title of the chart |
| `showLegend` | `boolean` | `true` | Whether to show the legend |
| `showGrid` | `boolean` | `true` | Show background grid (cartesian charts) |
| `showTooltips` | `boolean` | `true` | Show tooltips on hover |
| `animated` | `boolean` | `true` | Animate entry |
| `isLoading` | `boolean` | `false` | Show loading overlay |
| `error` | `ReactNode` | - | Show error message overlay |
| `noData` | `boolean \| ReactNode` | - | Show no data message overlay |
| `height` / `width` | `number \| string` | `200` | Dimensions of the chart container |
| `views` | `ChartStyles` | - | Custom styles override object |

### **Available Colors (CHART_COLORS)**
`blue`, `green`, `purple`, `orange`, `red`, `teal`, `pink`, `indigo`, `yellow`, `cyan`.