Mapa de calor.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="heatmap"><figcaption>Tasa de desocupación por región y trimestre móvil · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><text x="117" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Feb-abr</text><text x="173" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="229" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="285" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><text x="84" y="35" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Metropolitana</text><rect x="90" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.5"></rect><text x="117" y="35" text-anchor="middle" class="ui-chart__valor">8,3%</text><rect x="146" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.53"></rect><text x="173" y="35" text-anchor="middle" class="ui-chart__valor">8,5%</text><rect x="202" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.56"></rect><text x="229" y="35" text-anchor="middle" class="ui-chart__valor">8,7%</text><rect x="258" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="285" y="35" text-anchor="middle" class="ui-chart__valor">8,9%</text><text x="84" y="67" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Valparaíso</text><rect x="90" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.6"></rect><text x="117" y="67" text-anchor="middle" class="ui-chart__valor">9,0%</text><rect x="146" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="173" y="67" text-anchor="middle" class="ui-chart__valor">8,9%</text><rect x="202" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.54"></rect><text x="229" y="67" text-anchor="middle" class="ui-chart__valor">8,6%</text><rect x="258" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.52"></rect><text x="285" y="67" text-anchor="middle" class="ui-chart__valor">8,4%</text><text x="84" y="99" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Biobío</text><rect x="90" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.31"></rect><text x="117" y="99" text-anchor="middle" class="ui-chart__valor">6,9%</text><rect x="146" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.35"></rect><text x="173" y="99" text-anchor="middle" class="ui-chart__valor">7,2%</text><rect x="202" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.39"></rect><text x="229" y="99" text-anchor="middle" class="ui-chart__valor">7,5%</text><rect x="258" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.4"></rect><text x="285" y="99" text-anchor="middle" class="ui-chart__valor">7,6%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · feb-jul 2026 · porcentaje</p><details><summary>Ver datos</summary><table><thead><tr><th>Región</th><th>Feb-abr</th><th>Mar-may</th><th>Abr-jun</th><th>May-jul</th></tr></thead><tbody><tr><th>Metropolitana</th><td>8,3%</td><td>8,5%</td><td>8,7%</td><td>8,9%</td></tr><tr><th>Valparaíso</th><td>9,0%</td><td>8,9%</td><td>8,6%</td><td>8,4%</td></tr><tr><th>Biobío</th><td>6,9%</td><td>7,2%</td><td>7,5%</td><td>7,6%</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="heatmap"><figcaption class="text-sm text-slate-600">Tasa de desocupación por región y trimestre móvil · 2026</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><text x="117" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Feb-abr</text><text x="173" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="229" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="285" y="10" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><text x="84" y="35" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Metropolitana</text><rect x="90" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.5"></rect><text x="117" y="35" text-anchor="middle" class="ui-chart__valor">8,3%</text><rect x="146" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.53"></rect><text x="173" y="35" text-anchor="middle" class="ui-chart__valor">8,5%</text><rect x="202" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.56"></rect><text x="229" y="35" text-anchor="middle" class="ui-chart__valor">8,7%</text><rect x="258" y="16" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="285" y="35" text-anchor="middle" class="ui-chart__valor">8,9%</text><text x="84" y="67" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Valparaíso</text><rect x="90" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.6"></rect><text x="117" y="67" text-anchor="middle" class="ui-chart__valor">9,0%</text><rect x="146" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.59"></rect><text x="173" y="67" text-anchor="middle" class="ui-chart__valor">8,9%</text><rect x="202" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.54"></rect><text x="229" y="67" text-anchor="middle" class="ui-chart__valor">8,6%</text><rect x="258" y="48" width="54" height="30" class="ui-chart__serie" fill-opacity="0.52"></rect><text x="285" y="67" text-anchor="middle" class="ui-chart__valor">8,4%</text><text x="84" y="99" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Biobío</text><rect x="90" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.31"></rect><text x="117" y="99" text-anchor="middle" class="ui-chart__valor">6,9%</text><rect x="146" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.35"></rect><text x="173" y="99" text-anchor="middle" class="ui-chart__valor">7,2%</text><rect x="202" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.39"></rect><text x="229" y="99" text-anchor="middle" class="ui-chart__valor">7,5%</text><rect x="258" y="80" width="54" height="30" class="ui-chart__serie" fill-opacity="0.4"></rect><text x="285" y="99" text-anchor="middle" class="ui-chart__valor">7,6%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · feb-jul 2026 · porcentaje</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">Región</th><th class="border-b border-slate-300 p-2 align-top">Feb-abr</th><th class="border-b border-slate-300 p-2 align-top">Mar-may</th><th class="border-b border-slate-300 p-2 align-top">Abr-jun</th><th class="border-b border-slate-300 p-2 align-top">May-jul</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Metropolitana</th><td class="border-b border-slate-300 p-2 align-top">8,3%</td><td class="border-b border-slate-300 p-2 align-top">8,5%</td><td class="border-b border-slate-300 p-2 align-top">8,7%</td><td class="border-b border-slate-300 p-2 align-top">8,9%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Valparaíso</th><td class="border-b border-slate-300 p-2 align-top">9,0%</td><td class="border-b border-slate-300 p-2 align-top">8,9%</td><td class="border-b border-slate-300 p-2 align-top">8,6%</td><td class="border-b border-slate-300 p-2 align-top">8,4%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Biobío</th><td class="border-b border-slate-300 p-2 align-top">6,9%</td><td class="border-b border-slate-300 p-2 align-top">7,2%</td><td class="border-b border-slate-300 p-2 align-top">7,5%</td><td class="border-b border-slate-300 p-2 align-top">7,6%</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

/** Fila de la tabla de datos: etiqueta de la fila y una celda por cada columna después de la primera. */
export interface ChartHeatmapRow {
  /** 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 ChartHeatmapProps {
  /** 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?: ChartHeatmapRow[];
  /** 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.
// La opacidad de cada celda es un dato y va como atributo fill-opacity; no pasa de 0,6
// para que la cifra en tinta se lea en claro y en oscuro.

// Intensidad lineal de 6,5 % (opacidad 0,25) a 9 % (0,6); cada celda es una celda de la tabla.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <text x="117" y="10" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Feb-abr</text>
    <text x="173" y="10" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text>
    <text x="229" y="10" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text>
    <text x="285" y="10" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text>
    <text x="84" y="35" textAnchor="end" className="ui-chart__rotulo ui-chart__rotulo--chico">Metropolitana</text>
    <rect x="90" y="16" width="54" height="30" className="ui-chart__serie" fillOpacity={0.5} />
    <text x="117" y="35" textAnchor="middle" className="ui-chart__valor">8,3%</text>
    <rect x="146" y="16" width="54" height="30" className="ui-chart__serie" fillOpacity={0.53} />
    <text x="173" y="35" textAnchor="middle" className="ui-chart__valor">8,5%</text>
    <rect x="202" y="16" width="54" height="30" className="ui-chart__serie" fillOpacity={0.56} />
    <text x="229" y="35" textAnchor="middle" className="ui-chart__valor">8,7%</text>
    <rect x="258" y="16" width="54" height="30" className="ui-chart__serie" fillOpacity={0.59} />
    <text x="285" y="35" textAnchor="middle" className="ui-chart__valor">8,9%</text>
    <text x="84" y="67" textAnchor="end" className="ui-chart__rotulo ui-chart__rotulo--chico">Valparaíso</text>
    <rect x="90" y="48" width="54" height="30" className="ui-chart__serie" fillOpacity={0.6} />
    <text x="117" y="67" textAnchor="middle" className="ui-chart__valor">9,0%</text>
    <rect x="146" y="48" width="54" height="30" className="ui-chart__serie" fillOpacity={0.59} />
    <text x="173" y="67" textAnchor="middle" className="ui-chart__valor">8,9%</text>
    <rect x="202" y="48" width="54" height="30" className="ui-chart__serie" fillOpacity={0.54} />
    <text x="229" y="67" textAnchor="middle" className="ui-chart__valor">8,6%</text>
    <rect x="258" y="48" width="54" height="30" className="ui-chart__serie" fillOpacity={0.52} />
    <text x="285" y="67" textAnchor="middle" className="ui-chart__valor">8,4%</text>
    <text x="84" y="99" textAnchor="end" className="ui-chart__rotulo ui-chart__rotulo--chico">Biobío</text>
    <rect x="90" y="80" width="54" height="30" className="ui-chart__serie" fillOpacity={0.31} />
    <text x="117" y="99" textAnchor="middle" className="ui-chart__valor">6,9%</text>
    <rect x="146" y="80" width="54" height="30" className="ui-chart__serie" fillOpacity={0.35} />
    <text x="173" y="99" textAnchor="middle" className="ui-chart__valor">7,2%</text>
    <rect x="202" y="80" width="54" height="30" className="ui-chart__serie" fillOpacity={0.39} />
    <text x="229" y="99" textAnchor="middle" className="ui-chart__valor">7,5%</text>
    <rect x="258" y="80" width="54" height="30" className="ui-chart__serie" fillOpacity={0.4} />
    <text x="285" y="99" textAnchor="middle" className="ui-chart__valor">7,6%</text>
  </svg>
);

const FILAS: ChartHeatmapRow[] = [
  { label: "Metropolitana", values: ["8,3%", "8,5%", "8,7%", "8,9%"] },
  { label: "Valparaíso", values: ["9,0%", "8,9%", "8,6%", "8,4%"] },
  { label: "Biobío", values: ["6,9%", "7,2%", "7,5%", "7,6%"] },
];

/**
 * Mapa de calor para comparar valores en una grilla de dos dimensiones (por ejemplo, región y mes), con título, fuente y tabla de datos desplegable.
 *
 * 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="heatmap"` identifica el tipo de gráfico.
 *
 * @example <ChartHeatmap title="Desocupación por región y mes" columns={["Región", "May", "Jun"]} rows={[{ label: "Valparaíso", values: ["7,9%", "8,1%"] }, { label: "Biobío", values: ["7,4%", "7,6%"] }]}>{svg}</ChartHeatmap>
 */
export function ChartHeatmap({
  title = "Tasa de desocupación por región y trimestre móvil · 2026",
  children = ESQUEMA,
  source = "Fuente: INE · Encuesta Nacional de Empleo · feb-jul 2026 · porcentaje",
  columns = ["Región", "Feb-abr", "Mar-may", "Abr-jun", "May-jul"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartHeatmapProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="heatmap">
      {title ? <figcaption>{title}</figcaption> : null}
      {children}
      {source ? <p>{source}</p> : null}
      {rows.length ? (
        <details open={dataOpen}>
          {dataLabel ? <summary>{dataLabel}</summary> : null}
          <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>
  );
}