Grafo incorporado.

<figure class="ui-sample ui-chart" data-embed="graph" data-integration="cochid-graphs" data-render-mode="contract-demo" data-renderer="cochid-graphs" data-chart="network"><figcaption>Estaciones de combinación entre las líneas 1, 2, 4 y 5 del Metro de Santiago</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M70 60H250M70 60L160 22L250 60M70 60L160 98L250 60"></path><circle cx="70" cy="60" r="10"></circle><circle cx="160" cy="22" r="7"></circle><circle cx="160" cy="98" r="7"></circle><circle cx="250" cy="60" r="10"></circle><text x="54" y="63" text-anchor="end" class="ui-chart__rotulo">Línea 1</text><text x="173" y="25" class="ui-chart__rotulo">Línea 4</text><text x="173" y="101" class="ui-chart__rotulo">Línea 2</text><text x="266" y="63" class="ui-chart__rotulo">Línea 5</text></svg><p>Fuente: Metro de Santiago · red en operación a septiembre de 2026</p><details><summary>Ver líneas</summary><table><thead><tr><th>Línea</th><th>Conexiones</th><th>Estaciones de combinación</th></tr></thead><tbody><tr><th>Línea 1</th><td>3</td><td>4</td></tr><tr><th>Línea 2</th><td>2</td><td>2</td></tr><tr><th>Línea 4</th><td>2</td><td>2</td></tr><tr><th>Línea 5</th><td>3</td><td>4</td></tr></tbody></table></details><details><summary>Ver conexiones</summary><table><thead><tr><th>Conexión</th><th>Estaciones de combinación</th></tr></thead><tbody><tr><th>Línea 1 y Línea 2</th><td>Los Héroes</td></tr><tr><th>Línea 1 y Línea 4</th><td>Tobalaba</td></tr><tr><th>Línea 1 y Línea 5</th><td>Baquedano, San Pablo</td></tr><tr><th>Línea 2 y Línea 5</th><td>Santa Ana</td></tr><tr><th>Línea 4 y Línea 5</th><td>Vicente Valdés</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-embed="graph" data-integration="cochid-graphs" data-render-mode="contract-demo" data-renderer="cochid-graphs" data-chart="network"><figcaption class="text-sm text-slate-600">Estaciones de combinación entre las líneas 1, 2, 4 y 5 del Metro de Santiago</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M70 60H250M70 60L160 22L250 60M70 60L160 98L250 60"></path><circle cx="70" cy="60" r="10"></circle><circle cx="160" cy="22" r="7"></circle><circle cx="160" cy="98" r="7"></circle><circle cx="250" cy="60" r="10"></circle><text x="54" y="63" text-anchor="end" class="ui-chart__rotulo">Línea 1</text><text x="173" y="25" class="ui-chart__rotulo">Línea 4</text><text x="173" y="101" class="ui-chart__rotulo">Línea 2</text><text x="266" y="63" class="ui-chart__rotulo">Línea 5</text></svg><p>Fuente: Metro de Santiago · red en operación a septiembre de 2026</p><details><summary>Ver líneas</summary><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Línea</th><th class="border-b border-slate-300 p-2 align-top">Conexiones</th><th class="border-b border-slate-300 p-2 align-top">Estaciones de combinación</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Línea 1</th><td class="border-b border-slate-300 p-2 align-top">3</td><td class="border-b border-slate-300 p-2 align-top">4</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 2</th><td class="border-b border-slate-300 p-2 align-top">2</td><td class="border-b border-slate-300 p-2 align-top">2</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 4</th><td class="border-b border-slate-300 p-2 align-top">2</td><td class="border-b border-slate-300 p-2 align-top">2</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 5</th><td class="border-b border-slate-300 p-2 align-top">3</td><td class="border-b border-slate-300 p-2 align-top">4</td></tr></tbody></table></details><details><summary>Ver conexiones</summary><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Conexión</th><th class="border-b border-slate-300 p-2 align-top">Estaciones de combinación</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Línea 1 y Línea 2</th><td class="border-b border-slate-300 p-2 align-top">Los Héroes</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 1 y Línea 4</th><td class="border-b border-slate-300 p-2 align-top">Tobalaba</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 1 y Línea 5</th><td class="border-b border-slate-300 p-2 align-top">Baquedano, San Pablo</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 2 y Línea 5</th><td class="border-b border-slate-300 p-2 align-top">Santa Ana</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Línea 4 y Línea 5</th><td class="border-b border-slate-300 p-2 align-top">Vicente Valdés</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

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

export interface GraphEmbedTable {
  /** Texto del control que despliega la tabla; por defecto «Ver datos». Con varias tablas, una etiqueta distinta por tabla («Ver nodos», «Ver conexiones»). */
  label?: string;
  /** Encabezados de columna; el primero corresponde a la primera celda de cada fila. */
  columns?: string[];
  /** Filas de la tabla; una tabla sin filas no se muestra. */
  rows: GraphEmbedRow[];
  /** La primera celda de cada fila va como encabezado de fila (`<th>`); por defecto sí. */
  rowHeaders?: boolean;
  /** Muestra la tabla desplegada (atributo nativo `open` de `<details>`). */
  open?: boolean;
}

export interface GraphEmbedProps {
  /** Título del grafo (`<figcaption>`); vacío lo oculta. */
  title?: string;
  /** SVG del grafo, 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 grafo; vacía la oculta. */
  source?: string;
  /** Tablas de datos, cada una en su propio desplegable; la primera trae los mismos nodos o valores que dibuja el grafo. */
  tables?: GraphEmbedTable[];
  /** Tipo de gráfico (`data-chart`): `network` para nodos y conexiones; `sankey` o `treemap` si el grafo es un flujo o una jerarquía. */
  chartType?: string;
  /** Renderer que produjo el SVG (`data-renderer`); vacío omite el atributo. */
  renderer?: string;
  /** Servicio que entrega el grafo incorporado (`data-integration`); vacío omite el atributo. */
  integration?: string;
  /** Modo de render declarado por la integración (`data-render-mode`); vacío omite el atributo. */
  renderMode?: string;
  className?: string;
}

// Rótulos del esquema con la clase ui-chart__rotulo (tinta tenue en claro y en oscuro), no
// con style: un sitio con CSP estricto bloquea el style en línea.

// Cuatro líneas (nodos) y cinco conexiones (aristas). El radio crece con las
// estaciones de combinación de cada línea: 4 (r = 10) o 2 (r = 7).
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M70 60H250M70 60L160 22L250 60M70 60L160 98L250 60" />
    <circle cx="70" cy="60" r="10" />
    <circle cx="160" cy="22" r="7" />
    <circle cx="160" cy="98" r="7" />
    <circle cx="250" cy="60" r="10" />
    <text x="54" y="63" textAnchor="end" className="ui-chart__rotulo">Línea 1</text>
    <text x="173" y="25" className="ui-chart__rotulo">Línea 4</text>
    <text x="173" y="101" className="ui-chart__rotulo">Línea 2</text>
    <text x="266" y="63" className="ui-chart__rotulo">Línea 5</text>
  </svg>
);

const TABLAS: GraphEmbedTable[] = [
  {
    label: "Ver líneas",
    columns: ["Línea", "Conexiones", "Estaciones de combinación"],
    rows: [
      { label: "Línea 1", values: ["3", "4"] },
      { label: "Línea 2", values: ["2", "2"] },
      { label: "Línea 4", values: ["2", "2"] },
      { label: "Línea 5", values: ["3", "4"] },
    ],
  },
  {
    label: "Ver conexiones",
    columns: ["Conexión", "Estaciones de combinación"],
    rows: [
      { label: "Línea 1 y Línea 2", values: ["Los Héroes"] },
      { label: "Línea 1 y Línea 4", values: ["Tobalaba"] },
      { label: "Línea 1 y Línea 5", values: ["Baquedano, San Pablo"] },
      { label: "Línea 2 y Línea 5", values: ["Santa Ana"] },
      { label: "Línea 4 y Línea 5", values: ["Vicente Valdés"] },
    ],
  },
];

/**
 * Grafo incorporado: red de nodos y conexiones que entrega otro servicio (cochid-graphs u otro renderer) dentro de una página, con título, fuente y tablas de datos desplegables.
 *
 * El SVG llega como `children` y va oculto a lectores de pantalla: las tablas desplegables son la versión accesible. La primera trae los nodos que dibuja el grafo y la segunda sus conexiones, cada una con su propia etiqueta (`label`); `open` la muestra desplegada.
 *
 * @example <GraphEmbed title="Proyectos tramitados en conjunto por comisión · 2026" source="Fuente: Cámara de Diputadas y Diputados" tables={[{ label: "Ver comisiones", columns: ["Comisión", "Proyectos en conjunto"], rows: [{ label: "Hacienda", values: ["12"] }, { label: "Trabajo", values: ["7"] }] }, { label: "Ver conexiones", columns: ["Comisiones", "Proyectos en conjunto"], rows: [{ label: "Hacienda y Trabajo", values: ["4"] }] }]}>{grafo}</GraphEmbed>
 */
export function GraphEmbed({
  title = "Estaciones de combinación entre las líneas 1, 2, 4 y 5 del Metro de Santiago",
  children = ESQUEMA,
  source = "Fuente: Metro de Santiago · red en operación a septiembre de 2026",
  tables = TABLAS,
  chartType = "network",
  renderer = "cochid-graphs",
  integration = "cochid-graphs",
  renderMode = "contract-demo",
  className,
}: GraphEmbedProps) {
  return (
    <figure
      className={["ui-chart", className].filter(Boolean).join(" ")}
      data-embed="graph"
      data-integration={integration || undefined}
      data-render-mode={renderMode || undefined}
      data-renderer={renderer || undefined}
      data-chart={chartType || undefined}
    >
      {title ? <figcaption>{title}</figcaption> : null}
      {children}
      {source ? <p>{source}</p> : null}
      {tables.map((tabla, t) => {
        const resumen = tabla.label ?? "Ver datos";
        return tabla.rows.length ? (
          <details key={t} open={tabla.open}>
            {resumen ? <summary>{resumen}</summary> : null}
            <table>
              {tabla.columns?.length ? (
                <thead>
                  <tr>{tabla.columns.map((columna, i) => <th key={i}>{columna}</th>)}</tr>
                </thead>
              ) : null}
              <tbody>
                {tabla.rows.map((fila, i) => (
                  <tr key={i}>
                    {tabla.rowHeaders === false ? <td>{fila.label}</td> : <th>{fila.label}</th>}
                    {fila.values.map((valor, j) => <td key={j}>{valor}</td>)}
                  </tr>
                ))}
              </tbody>
            </table>
          </details>
        ) : null;
      })}
    </figure>
  );
}