Coropleta.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="choropleth"><figcaption>Pobreza por ingresos por comuna · Gran Concepción · 2022</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M40 18L78 27L100 60L82 102L34 90L22 51Z" class="ui-chart__bloque" fill-opacity="0.25"></path><path d="M103 24L151 16L182 40L174 94L120 106L98 60Z" class="ui-chart__bloque" fill-opacity="0.55"></path><path d="M186 29L218 43L230 81L200 104L177 86Z" class="ui-chart__bloque" fill-opacity="0.9"></path><text x="59.3" y="56" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Concepción</text><text x="59.3" y="68" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">5,1%</text><text x="138" y="54.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Talcahuano</text><text x="138" y="66.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">7,4%</text><text x="202.2" y="66.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">Coronel</text><text x="202.2" y="78.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">10,2%</text><rect x="246" y="34" width="10" height="10" class="ui-chart__serie" fill-opacity="0.25"></rect><text x="261" y="43" class="ui-chart__rotulo ui-chart__rotulo--chico">Menos de 6%</text><rect x="246" y="54" width="10" height="10" class="ui-chart__serie" fill-opacity="0.55"></rect><text x="261" y="63" class="ui-chart__rotulo ui-chart__rotulo--chico">6% a 9%</text><rect x="246" y="74" width="10" height="10" class="ui-chart__serie" fill-opacity="0.9"></rect><text x="261" y="83" class="ui-chart__rotulo ui-chart__rotulo--chico">Más de 9%</text></svg><p>Fuente: Ministerio de Desarrollo Social y Familia · estimación comunal · 2022 · porcentaje de personas</p><details><summary>Ver datos</summary><table><thead><tr><th>Comuna</th><th>Pobreza por ingresos</th></tr></thead><tbody><tr><th>Concepción</th><td>5,1%</td></tr><tr><th>Talcahuano</th><td>7,4%</td></tr><tr><th>Coronel</th><td>10,2%</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="choropleth"><figcaption class="text-sm text-slate-600">Pobreza por ingresos por comuna · Gran Concepción · 2022</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M40 18L78 27L100 60L82 102L34 90L22 51Z" class="ui-chart__bloque" fill-opacity="0.25"></path><path d="M103 24L151 16L182 40L174 94L120 106L98 60Z" class="ui-chart__bloque" fill-opacity="0.55"></path><path d="M186 29L218 43L230 81L200 104L177 86Z" class="ui-chart__bloque" fill-opacity="0.9"></path><text x="59.3" y="56" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Concepción</text><text x="59.3" y="68" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">5,1%</text><text x="138" y="54.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">Talcahuano</text><text x="138" y="66.7" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico">7,4%</text><text x="202.2" y="66.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">Coronel</text><text x="202.2" y="78.6" text-anchor="middle" class="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">10,2%</text><rect x="246" y="34" width="10" height="10" class="ui-chart__serie" fill-opacity="0.25"></rect><text x="261" y="43" class="ui-chart__rotulo ui-chart__rotulo--chico">Menos de 6%</text><rect x="246" y="54" width="10" height="10" class="ui-chart__serie" fill-opacity="0.55"></rect><text x="261" y="63" class="ui-chart__rotulo ui-chart__rotulo--chico">6% a 9%</text><rect x="246" y="74" width="10" height="10" class="ui-chart__serie" fill-opacity="0.9"></rect><text x="261" y="83" class="ui-chart__rotulo ui-chart__rotulo--chico">Más de 9%</text></svg><p>Fuente: Ministerio de Desarrollo Social y Familia · estimación comunal · 2022 · porcentaje de personas</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">Comuna</th><th class="border-b border-slate-300 p-2 align-top">Pobreza por ingresos</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Concepción</th><td class="border-b border-slate-300 p-2 align-top">5,1%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Talcahuano</th><td class="border-b border-slate-300 p-2 align-top">7,4%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Coronel</th><td class="border-b border-slate-300 p-2 align-top">10,2%</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface ChartMapRow {
  /** 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 ChartMapProps {
  /** 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?: ChartMapRow[];
  /** 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.
// ui-chart__bloque rellena los territorios (sin eso, la regla de path los deja como
// contornos); la opacidad de cada tramo es un dato y va como atributo fill-opacity.

// Tres tramos (menos de 6 %, 6 % a 9 %, más de 9 %) con opacidad 0,25, 0,55 y 0,9; un territorio por fila.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M40 18L78 27L100 60L82 102L34 90L22 51Z" className="ui-chart__bloque" fillOpacity={0.25} />
    <path d="M103 24L151 16L182 40L174 94L120 106L98 60Z" className="ui-chart__bloque" fillOpacity={0.55} />
    <path d="M186 29L218 43L230 81L200 104L177 86Z" className="ui-chart__bloque" fillOpacity={0.9} />
    <text x="59.3" y="56" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico">Concepción</text>
    <text x="59.3" y="68" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico">5,1%</text>
    <text x="138" y="54.7" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico">Talcahuano</text>
    <text x="138" y="66.7" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico">7,4%</text>
    <text x="202.2" y="66.6" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">Coronel</text>
    <text x="202.2" y="78.6" textAnchor="middle" className="ui-chart__valor ui-chart__valor--chico ui-chart__valor--inverso">10,2%</text>
    <rect x="246" y="34" width="10" height="10" className="ui-chart__serie" fillOpacity={0.25} />
    <text x="261" y="43" className="ui-chart__rotulo ui-chart__rotulo--chico">Menos de 6%</text>
    <rect x="246" y="54" width="10" height="10" className="ui-chart__serie" fillOpacity={0.55} />
    <text x="261" y="63" className="ui-chart__rotulo ui-chart__rotulo--chico">6% a 9%</text>
    <rect x="246" y="74" width="10" height="10" className="ui-chart__serie" fillOpacity={0.9} />
    <text x="261" y="83" className="ui-chart__rotulo ui-chart__rotulo--chico">Más de 9%</text>
  </svg>
);

const FILAS: ChartMapRow[] = [
  { label: "Concepción", values: ["5,1%"] },
  { label: "Talcahuano", values: ["7,4%"] },
  { label: "Coronel", values: ["10,2%"] },
];

/**
 * Coropleta: mapa con territorios coloreados según un valor, para comparar una tasa o un monto entre regiones o comunas.
 *
 * 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="choropleth"` identifica el tipo de gráfico.
 *
 * @example <ChartMap title="Desocupación por región · jul 2026" columns={["Región", "Tasa"]} rows={[{ label: "Valparaíso", values: ["8,4%"] }, { label: "Biobío", values: ["7,6%"] }]}>{mapa}</ChartMap>
 */
export function ChartMap({
  title = "Pobreza por ingresos por comuna · Gran Concepción · 2022",
  children = ESQUEMA,
  source = "Fuente: Ministerio de Desarrollo Social y Familia · estimación comunal · 2022 · porcentaje de personas",
  columns = ["Comuna", "Pobreza por ingresos"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartMapProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="choropleth">
      {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>
  );
}