# AssistantChart

A specialized data visualization component optimized for display within the AI Assistant panel. It provides a pre-configured responsive BarChart using the library's design system tokens.

---

## Import

```tsx
import { AssistantChart } from 'xertica-ui/ui';
```

---

## Usage

```tsx
const chartData = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
];

const chartConfig = {
  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};

<AssistantChart data={chartData} config={chartConfig} />;
```

---

## Props

| Prop     | Type          | Default      | Description                                      |
| -------- | ------------- | ------------ | ------------------------------------------------ |
| `data`   | `any[]`       | _(required)_ | The array of objects containing chart values.    |
| `config` | `ChartConfig` | _(required)_ | Mapping of data keys to labels and color tokens. |

---

## AI Rules

> [!IMPORTANT]
>
> - **Data Format**: Your data objects can use **any key names** — pass them via `chartData` and reference them in `chartConfig`. The keys `month`, `desktop`, and `mobile` are only examples from the Storybook demo; they are not required.
> - **Container Size**: This component is optimized for the narrow width of the AI Assistant sidebar (`~400px`). It uses `min-h-[200px]` to maintain readability.