Treemap.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="treemap"><figcaption>Generación eléctrica por fuente · Sistema Eléctrico Nacional · 2025</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><rect x="10" y="10" width="180" height="53.3" class="ui-chart__bloque"></rect><text x="17" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Solar</text><text x="17" y="38" class="ui-chart__valor ui-chart__valor--inverso">32%</text><rect x="10" y="63.3" width="180" height="46.7" class="ui-chart__bloque"></rect><text x="17" y="78.3" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Térmica</text><text x="17" y="91.3" class="ui-chart__valor ui-chart__valor--inverso">28%</text><rect x="190" y="10" width="120" height="62.5" class="ui-chart__bloque"></rect><text x="197" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Hidráulica</text><text x="197" y="38" class="ui-chart__valor ui-chart__valor--inverso">25%</text><rect x="190" y="72.5" width="120" height="37.5" class="ui-chart__bloque"></rect><text x="197" y="87.5" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Eólica</text><text x="197" y="100.5" class="ui-chart__valor ui-chart__valor--inverso">15%</text></svg><p>Fuente: Coordinador Eléctrico Nacional · generación bruta 2025 · porcentaje del total</p><details><summary>Ver datos</summary><table><thead><tr><th>Fuente</th><th>Participación</th></tr></thead><tbody><tr><th>Solar</th><td>32%</td></tr><tr><th>Térmica</th><td>28%</td></tr><tr><th>Hidráulica</th><td>25%</td></tr><tr><th>Eólica</th><td>15%</td></tr></tbody></table></details></figure>

<figure class="ui-sample ui-chart border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-renderer="cochid-graphs" data-chart="treemap"><figcaption class="text-sm text-slate-600">Generación eléctrica por fuente · Sistema Eléctrico Nacional · 2025</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><rect x="10" y="10" width="180" height="53.3" class="ui-chart__bloque"></rect><text x="17" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Solar</text><text x="17" y="38" class="ui-chart__valor ui-chart__valor--inverso">32%</text><rect x="10" y="63.3" width="180" height="46.7" class="ui-chart__bloque"></rect><text x="17" y="78.3" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Térmica</text><text x="17" y="91.3" class="ui-chart__valor ui-chart__valor--inverso">28%</text><rect x="190" y="10" width="120" height="62.5" class="ui-chart__bloque"></rect><text x="197" y="25" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Hidráulica</text><text x="197" y="38" class="ui-chart__valor ui-chart__valor--inverso">25%</text><rect x="190" y="72.5" width="120" height="37.5" class="ui-chart__bloque"></rect><text x="197" y="87.5" class="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Eólica</text><text x="197" y="100.5" class="ui-chart__valor ui-chart__valor--inverso">15%</text></svg><p>Fuente: Coordinador Eléctrico Nacional · generación bruta 2025 · porcentaje del total</p><details><summary>Ver datos</summary><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Fuente</th><th class="border-b border-slate-300 p-2 align-top">Participación</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Solar</th><td class="border-b border-slate-300 p-2 align-top">32%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Térmica</th><td class="border-b border-slate-300 p-2 align-top">28%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Hidráulica</th><td class="border-b border-slate-300 p-2 align-top">25%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Eólica</th><td class="border-b border-slate-300 p-2 align-top">15%</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface ChartTreemapRow {
  /** Etiqueta de la fila (período, región, categoría); va en la primera columna como encabezado de fila. */
  label: string;
  /** Una celda por cada columna después de la primera, con el valor ya formateado. */
  values: string[];
}

export interface ChartTreemapProps {
  /** Título del gráfico (`<figcaption>`); vacío lo oculta. */
  title?: string;
  /** SVG del gráfico, con `aria-hidden="true"`; sin él se dibuja el esquema de la muestra. */
  children?: ReactNode;
  /** Línea de fuente, período y unidad bajo el gráfico; vacía la oculta. */
  source?: string;
  /** Encabezados de la tabla de datos; el primero corresponde a la etiqueta de cada fila. */
  columns?: string[];
  /** Filas de la tabla de datos, con los mismos valores que dibuja el gráfico; sin filas no hay tabla. */
  rows?: ChartTreemapRow[];
  /** Texto del control que despliega la tabla. */
  dataLabel?: string;
  /** Muestra la tabla desplegada (atributo nativo `open` de `<details>`). */
  dataOpen?: boolean;
  /** Renderer que produjo el SVG (`data-renderer`); vacío omite el atributo. */
  renderer?: string;
  className?: string;
}

// Colores y tipografía con clases del kit (ui-chart__*), no con style: un atributo
// de presentación SVG no acepta var() y un sitio con CSP estricto bloquea el style en línea.
// El texto va en --paper (ui-chart__valor--inverso) sobre el azul: se lee en claro y en oscuro.

// Área de 300 × 100 = 100 %; cada rectángulo mide su fila de la tabla (Solar 180 × 53,3 = 32 %).
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <rect x="10" y="10" width="180" height="53.3" className="ui-chart__bloque" />
    <text x="17" y="25" className="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Solar</text>
    <text x="17" y="38" className="ui-chart__valor ui-chart__valor--inverso">32%</text>
    <rect x="10" y="63.3" width="180" height="46.7" className="ui-chart__bloque" />
    <text x="17" y="78.3" className="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Térmica</text>
    <text x="17" y="91.3" className="ui-chart__valor ui-chart__valor--inverso">28%</text>
    <rect x="190" y="10" width="120" height="62.5" className="ui-chart__bloque" />
    <text x="197" y="25" className="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Hidráulica</text>
    <text x="197" y="38" className="ui-chart__valor ui-chart__valor--inverso">25%</text>
    <rect x="190" y="72.5" width="120" height="37.5" className="ui-chart__bloque" />
    <text x="197" y="87.5" className="ui-chart__valor ui-chart__valor--inverso ui-chart__valor--fuerte">Eólica</text>
    <text x="197" y="100.5" className="ui-chart__valor ui-chart__valor--inverso">15%</text>
  </svg>
);

const FILAS: ChartTreemapRow[] = [
  { label: "Solar", values: ["32%"] },
  { label: "Térmica", values: ["28%"] },
  { label: "Hidráulica", values: ["25%"] },
  { label: "Eólica", values: ["15%"] },
];

/**
 * Treemap: rectángulos con área proporcional al valor, para mostrar cómo se reparte un total entre categorías y subcategorías.
 *
 * El SVG llega como `children` desde cochid-graphs u otro renderer y va oculto a lectores de pantalla: la tabla bajo «Ver datos» es la versión accesible y debe traer los mismos datos. `data-chart="treemap"` identifica el tipo de gráfico.
 *
 * @example <ChartTreemap title="Presupuesto por partida · 2026" columns={["Partida", "Monto"]} rows={[{ label: "Educación", values: ["$ 16,2 billones"] }, { label: "Salud", values: ["$ 14,1 billones"] }]}>{treemap}</ChartTreemap>
 */
export function ChartTreemap({
  title = "Generación eléctrica por fuente · Sistema Eléctrico Nacional · 2025",
  children = ESQUEMA,
  source = "Fuente: Coordinador Eléctrico Nacional · generación bruta 2025 · porcentaje del total",
  columns = ["Fuente", "Participación"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartTreemapProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="treemap">
      {title ? <figcaption>{title}</figcaption> : null}
      {children}
      {source ? <p>{source}</p> : null}
      {rows.length ? (
        <details open={dataOpen}>
          <summary>{dataLabel}</summary>
          <table>
            {columns.length ? (
              <thead>
                <tr>{columns.map((columna, i) => <th key={i}>{columna}</th>)}</tr>
              </thead>
            ) : null}
            <tbody>
              {rows.map((fila, i) => (
                <tr key={i}>
                  <th>{fila.label}</th>
                  {fila.values.map((valor, j) => <td key={j}>{valor}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </details>
      ) : null}
    </figure>
  );
}