# Charts - Patrón de Visualización de Datos

> **Los charts NO son componentes de `@dynamic-framework/ui-react`.**
> Son patrones de composición que usan [Recharts](https://recharts.org/) directamente.
> Recharts se instala como dependency del widget, no viene con la librería.

---

## Instalación

Recharts NO es parte de Dynamic UI. Agrégalo como dependencia de tu widget:

```bash
npm install recharts@~3.3.0
```

En `package.json` del widget:
```json
{
  "dependencies": {
    "recharts": "~3.3.0"
  }
}
```

---

## Patrón de Uso Común

**IMPORTANTE:** Todos los charts de Recharts requieren que definas dimensiones en el contenedor padre:

```tsx
// CORRECTO - Contenedor con dimensiones
<div style={{ width: '100%', height: 300 }}>
  <ResponsiveContainer width="100%" height="100%">
    <BarChart data={data}>...</BarChart>
  </ResponsiveContainer>
</div>

// INCORRECTO - Sin dimensiones en contenedor
<BarChart data={data}>...</BarChart>
```

---

## Patrones Disponibles

Los siguientes son snippets de referencia basados en los ejemplos del
[Storybook de Dynamic UI](https://react.dynamicframework.dev/latest/?path=/docs/design-system-examples-graphs--docs).
Cópialos y adáptalos a tu widget.

---

### BarChart

Gráfico de barras minimalista para comparación de valores categóricos.

```tsx
import {
  BarChart, Bar, ResponsiveContainer, CartesianGrid, XAxis,
} from 'recharts';

type BarChartProps = {
  data: { name: string; value: number }[];
  barColor?: string;
};

export default function SimpleBarChart({
  data,
  barColor = '#0d6efd',
}: BarChartProps) {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <Bar
          dataKey="value"
          fill={barColor}
          radius={[5, 5, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}
```

**Uso con Dynamic UI:**
```tsx
import { DBox } from '@dynamic-framework/ui-react';

<DBox>
  <h6 className="text-muted mb-3">Ventas Mensuales</h6>
  <div style={{ width: '100%', height: 200 }}>
    <SimpleBarChart data={salesData} barColor="#0d6efd" />
  </div>
</DBox>
```

---

### PieChart

Gráfico circular/donut para visualización de proporciones.

```tsx
import {
  PieChart, Pie, Cell, ResponsiveContainer,
} from 'recharts';

type PieChartProps = {
  data: { name: string; value: number; color: string }[];
};

export default function SimplePieChart({ data }: PieChartProps) {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
          nameKey="name"
          paddingAngle={5}
          cornerRadius={5}
          labelLine={false}
          label={false}
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.color} />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
  );
}
```

---

### RadialBarChart

Barra radial/gauge para visualización de porcentajes (0-100%).

```tsx
import {
  RadialBarChart, RadialBar, ResponsiveContainer, PolarAngleAxis,
} from 'recharts';

type RadialChartProps = {
  value: number;
  color?: string;
};

export default function SimpleRadialBarChart({
  value,
  color = '#0d6efd',
}: RadialChartProps) {
  const data = [{ name: 'Progress', value, fill: color }];

  return (
    <ResponsiveContainer width="100%" height="100%">
      <RadialBarChart
        innerRadius="70%"
        outerRadius="90%"
        data={data}
        startAngle={90}
        endAngle={-270}
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        <PolarAngleAxis
          type="number"
          domain={[0, 100]}
          angleAxisId={0}
          tick={false}
        />
        <RadialBar background dataKey="value" />
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          className="h5"
          fill="#343a40"
        >
          {`${value}%`}
        </text>
      </RadialBarChart>
    </ResponsiveContainer>
  );
}
```

**Uso con Dynamic UI:**
```tsx
import { DBox } from '@dynamic-framework/ui-react';

<DBox className="text-center">
  <div style={{ width: 120, height: 120, margin: '0 auto' }}>
    <SimpleRadialBarChart value={75} color="#198754" />
  </div>
  <p className="text-muted mt-2">Meta de Ahorro</p>
</DBox>
```

---

### MinimalLineChart (Sparkline)

Sparkline ultra-minimalista para visualización inline de tendencias.

```tsx
import { LineChart, Line, ResponsiveContainer } from 'recharts';

type SparklineProps = {
  data: { time: string; value: number }[];
  lineColor?: string;
};

export default function Sparkline({
  data,
  lineColor = '#2962FF',
}: SparklineProps) {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart
        data={data}
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        <Line
          type="monotone"
          dataKey="value"
          stroke={lineColor}
          strokeWidth={2}
          dot={false}
          activeDot={false}
          isAnimationActive={false}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}
```

**Uso inline con Dynamic UI:**
```tsx
<div className="d-flex align-items-center">
  <div>
    <h6 className="mb-1">Project Alpha</h6>
    <small className="text-muted">Product Launch</small>
  </div>
  <div className="ms-auto" style={{ width: 100, height: 30 }}>
    <Sparkline data={trendData} lineColor="#0d6efd" />
  </div>
</div>
```

---

### MultiLineChart

Gráfico multi-líneas para comparación de múltiples series temporales.

```tsx
import {
  LineChart, Line, ResponsiveContainer, CartesianGrid,
} from 'recharts';

type MultiLineChartProps = {
  data: unknown[];
  lineConfigs: { dataKey: string; color: string }[];
};

export default function MultiLineChart({
  data,
  lineConfigs,
}: MultiLineChartProps) {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart
        data={data}
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" horizontal vertical={false} />
        {lineConfigs.map((config, index) => (
          <Line
            key={index}
            type="monotone"
            dataKey={config.dataKey}
            stroke={config.color}
            strokeWidth={2}
            dot={false}
            activeDot={false}
            isAnimationActive={false}
          />
        ))}
      </LineChart>
    </ResponsiveContainer>
  );
}
```

**Uso con Dynamic UI:**
```tsx
import { DBox, DIcon } from '@dynamic-framework/ui-react';

<DBox>
  <div className="d-flex align-items-center gap-2 mb-4">
    <DIcon hasCircle icon="TrendingUp" size=".75rem" />
    <h5 className="mb-0">Sales Performance</h5>
  </div>
  <div style={{ height: 200 }}>
    <MultiLineChart
      data={salesData}
      lineConfigs={[
        { dataKey: 'sales', color: '#0d6efd' },
        { dataKey: 'expenses', color: '#198754' },
      ]}
    />
  </div>
</DBox>
```

---

## Troubleshooting

### Chart no se muestra

**Problema:** El chart aparece vacío.

**Solución:** Verifica dimensiones en contenedor padre:
```tsx
// INCORRECTO - Sin dimensiones
<SimpleBarChart data={data} />

// CORRECTO - Con dimensiones
<div style={{ width: '100%', height: 300 }}>
  <SimpleBarChart data={data} />
</div>
```

### Error "recharts is not defined"

**Problema:** `Module not found: Can't resolve 'recharts'`

**Solución:**
```bash
npm install recharts@~3.3.0
```

---

## Por qué no son componentes de librería

Dynamic UI no wrappea Recharts intencionalmente:
- Recharts ya es altamente customizable como componentes React estándar
- Evitar wrappers innecesarios mejora performance y flexibilidad
- Cada widget puede adaptar los gráficos a sus necesidades específicas

Referencia: [Storybook Graphs](https://react.dynamicframework.dev/latest/?path=/docs/design-system-examples-graphs--docs)