Sankey.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="sankey"><figcaption>Solicitudes de acceso a la información pública · municipalidad · 2025</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M14 14C66 14 66 10 118 10L118 83.6C66 83.6 66 87.6 14 87.6Z" class="ui-chart__flujo"></path><path d="M14 87.6C66 87.6 66 91.6 118 91.6L118 110C66 110 66 106 14 106Z" class="ui-chart__flujo"></path><path d="M128 10C176 10 176 8 224 8L224 67.8C176 67.8 176 69.8 128 69.8Z" class="ui-chart__flujo"></path><path d="M128 69.8C176 69.8 176 75.8 224 75.8L224 89.6C176 89.6 176 83.6 128 83.6Z" class="ui-chart__flujo"></path><rect x="4" y="14" width="10" height="92" class="ui-chart__serie"></rect><rect x="118" y="10" width="10" height="73.6" class="ui-chart__serie"></rect><rect x="118" y="91.6" width="10" height="18.4" class="ui-chart__serie"></rect><rect x="224" y="8" width="10" height="59.8" class="ui-chart__serie"></rect><rect x="224" y="75.8" width="10" height="13.8" class="ui-chart__serie"></rect><text x="4" y="10" class="ui-chart__valor ui-chart__valor--chico">Ingresadas · 1.200</text><text x="132" y="49.8" class="ui-chart__valor ui-chart__valor--chico">Respondidas · 960</text><text x="132" y="103.8" class="ui-chart__valor ui-chart__valor--chico">Derivadas · 240</text><text x="238" y="40.9" class="ui-chart__valor ui-chart__valor--chico">Entregadas · 780</text><text x="238" y="85.7" class="ui-chart__valor ui-chart__valor--chico">Denegadas · 180</text></svg><p>Fuente: registro de solicitudes de transparencia pasiva · 2025 · número de solicitudes</p><details><summary>Ver datos</summary><table><thead><tr><th>Origen</th><th>Destino</th><th>Solicitudes</th></tr></thead><tbody><tr><th>Ingresadas</th><td>Respondidas</td><td>960</td></tr><tr><th>Ingresadas</th><td>Derivadas</td><td>240</td></tr><tr><th>Respondidas</th><td>Entregadas</td><td>780</td></tr><tr><th>Respondidas</th><td>Denegadas</td><td>180</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="sankey"><figcaption class="text-sm text-slate-600">Solicitudes de acceso a la información pública · municipalidad · 2025</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M14 14C66 14 66 10 118 10L118 83.6C66 83.6 66 87.6 14 87.6Z" class="ui-chart__flujo"></path><path d="M14 87.6C66 87.6 66 91.6 118 91.6L118 110C66 110 66 106 14 106Z" class="ui-chart__flujo"></path><path d="M128 10C176 10 176 8 224 8L224 67.8C176 67.8 176 69.8 128 69.8Z" class="ui-chart__flujo"></path><path d="M128 69.8C176 69.8 176 75.8 224 75.8L224 89.6C176 89.6 176 83.6 128 83.6Z" class="ui-chart__flujo"></path><rect x="4" y="14" width="10" height="92" class="ui-chart__serie"></rect><rect x="118" y="10" width="10" height="73.6" class="ui-chart__serie"></rect><rect x="118" y="91.6" width="10" height="18.4" class="ui-chart__serie"></rect><rect x="224" y="8" width="10" height="59.8" class="ui-chart__serie"></rect><rect x="224" y="75.8" width="10" height="13.8" class="ui-chart__serie"></rect><text x="4" y="10" class="ui-chart__valor ui-chart__valor--chico">Ingresadas · 1.200</text><text x="132" y="49.8" class="ui-chart__valor ui-chart__valor--chico">Respondidas · 960</text><text x="132" y="103.8" class="ui-chart__valor ui-chart__valor--chico">Derivadas · 240</text><text x="238" y="40.9" class="ui-chart__valor ui-chart__valor--chico">Entregadas · 780</text><text x="238" y="85.7" class="ui-chart__valor ui-chart__valor--chico">Denegadas · 180</text></svg><p>Fuente: registro de solicitudes de transparencia pasiva · 2025 · número de solicitudes</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">Origen</th><th class="border-b border-slate-300 p-2 align-top">Destino</th><th class="border-b border-slate-300 p-2 align-top">Solicitudes</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Ingresadas</th><td class="border-b border-slate-300 p-2 align-top">Respondidas</td><td class="border-b border-slate-300 p-2 align-top">960</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Ingresadas</th><td class="border-b border-slate-300 p-2 align-top">Derivadas</td><td class="border-b border-slate-300 p-2 align-top">240</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Respondidas</th><td class="border-b border-slate-300 p-2 align-top">Entregadas</td><td class="border-b border-slate-300 p-2 align-top">780</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Respondidas</th><td class="border-b border-slate-300 p-2 align-top">Denegadas</td><td class="border-b border-slate-300 p-2 align-top">180</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface ChartSankeyRow {
  /** 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 ChartSankeyProps {
  /** 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?: ChartSankeyRow[];
  /** 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.

// 1.200 solicitudes = 92 de alto; el grosor de cada flujo es proporcional a su fila de la tabla.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M14 14C66 14 66 10 118 10L118 83.6C66 83.6 66 87.6 14 87.6Z" className="ui-chart__flujo" />
    <path d="M14 87.6C66 87.6 66 91.6 118 91.6L118 110C66 110 66 106 14 106Z" className="ui-chart__flujo" />
    <path d="M128 10C176 10 176 8 224 8L224 67.8C176 67.8 176 69.8 128 69.8Z" className="ui-chart__flujo" />
    <path d="M128 69.8C176 69.8 176 75.8 224 75.8L224 89.6C176 89.6 176 83.6 128 83.6Z" className="ui-chart__flujo" />
    <rect x="4" y="14" width="10" height="92" className="ui-chart__serie" />
    <rect x="118" y="10" width="10" height="73.6" className="ui-chart__serie" />
    <rect x="118" y="91.6" width="10" height="18.4" className="ui-chart__serie" />
    <rect x="224" y="8" width="10" height="59.8" className="ui-chart__serie" />
    <rect x="224" y="75.8" width="10" height="13.8" className="ui-chart__serie" />
    <text x="4" y="10" className="ui-chart__valor ui-chart__valor--chico">Ingresadas · 1.200</text>
    <text x="132" y="49.8" className="ui-chart__valor ui-chart__valor--chico">Respondidas · 960</text>
    <text x="132" y="103.8" className="ui-chart__valor ui-chart__valor--chico">Derivadas · 240</text>
    <text x="238" y="40.9" className="ui-chart__valor ui-chart__valor--chico">Entregadas · 780</text>
    <text x="238" y="85.7" className="ui-chart__valor ui-chart__valor--chico">Denegadas · 180</text>
  </svg>
);

const FILAS: ChartSankeyRow[] = [
  { label: "Ingresadas", values: ["Respondidas", "960"] },
  { label: "Ingresadas", values: ["Derivadas", "240"] },
  { label: "Respondidas", values: ["Entregadas", "780"] },
  { label: "Respondidas", values: ["Denegadas", "180"] },
];

/**
 * Diagrama de Sankey: flujos entre etapas o categorías con grosor proporcional a la cantidad, para mostrar de dónde viene y a dónde va un total.
 *
 * 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="sankey"` identifica el tipo de gráfico.
 *
 * @example <ChartSankey title="Transiciones laborales · trimestre móvil" columns={["Origen", "Destino", "Personas"]} rows={[{ label: "Ocupados", values: ["Desocupados", "112 mil"] }, { label: "Desocupados", values: ["Ocupados", "98 mil"] }]}>{sankey}</ChartSankey>
 */
export function ChartSankey({
  title = "Solicitudes de acceso a la información pública · municipalidad · 2025",
  children = ESQUEMA,
  source = "Fuente: registro de solicitudes de transparencia pasiva · 2025 · número de solicitudes",
  columns = ["Origen", "Destino", "Solicitudes"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartSankeyProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="sankey">
      {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>
  );
}