Grafo de red.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="network"><figcaption>Proyectos en comisiones unidas · Senado · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M160 60L70 28" stroke-width="5"></path><path d="M160 60L250 28" stroke-width="4"></path><path d="M160 60L82 96" stroke-width="3"></path><path d="M160 60L240 96" stroke-width="2"></path><path d="M70 28L82 96" stroke-width="2"></path><path d="M250 28L240 96" stroke-width="1"></path><circle cx="160" cy="60" r="12"></circle><circle cx="70" cy="28" r="8.5"></circle><circle cx="250" cy="28" r="7"></circle><circle cx="82" cy="96" r="7"></circle><circle cx="240" cy="96" r="5.5"></circle><g fill="currentColor" font-size="7"><text x="160" y="44" text-anchor="middle">Hacienda</text><text x="58" y="30.5" text-anchor="end">Trabajo</text><text x="261" y="30.5">Economía</text><text x="71" y="98.5" text-anchor="end">Educación</text><text x="249" y="98.5">Salud</text></g></svg><p>Fuente: Senado de Chile · tramitación legislativa · ene-ago 2026 · número de proyectos</p><details><summary>Ver datos</summary><table><thead><tr><th>Comisiones</th><th>Proyectos</th></tr></thead><tbody><tr><th>Hacienda y Trabajo</th><td>5</td></tr><tr><th>Hacienda y Economía</th><td>4</td></tr><tr><th>Hacienda y Educación</th><td>3</td></tr><tr><th>Hacienda y Salud</th><td>2</td></tr><tr><th>Trabajo y Educación</th><td>2</td></tr><tr><th>Economía y Salud</th><td>1</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="network"><figcaption class="text-sm text-slate-600">Proyectos en comisiones unidas · Senado · 2026</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M160 60L70 28" stroke-width="5"></path><path d="M160 60L250 28" stroke-width="4"></path><path d="M160 60L82 96" stroke-width="3"></path><path d="M160 60L240 96" stroke-width="2"></path><path d="M70 28L82 96" stroke-width="2"></path><path d="M250 28L240 96" stroke-width="1"></path><circle cx="160" cy="60" r="12"></circle><circle cx="70" cy="28" r="8.5"></circle><circle cx="250" cy="28" r="7"></circle><circle cx="82" cy="96" r="7"></circle><circle cx="240" cy="96" r="5.5"></circle><g fill="currentColor" font-size="7"><text x="160" y="44" text-anchor="middle">Hacienda</text><text x="58" y="30.5" text-anchor="end">Trabajo</text><text x="261" y="30.5">Economía</text><text x="71" y="98.5" text-anchor="end">Educación</text><text x="249" y="98.5">Salud</text></g></svg><p>Fuente: Senado de Chile · tramitación legislativa · ene-ago 2026 · número de proyectos</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">Comisiones</th><th class="border-b border-slate-300 p-2 align-top">Proyectos</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Hacienda y Trabajo</th><td class="border-b border-slate-300 p-2 align-top">5</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Hacienda y Economía</th><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">Hacienda y Educación</th><td class="border-b border-slate-300 p-2 align-top">3</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Hacienda y Salud</th><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">Trabajo y Educación</th><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">Economía y Salud</th><td class="border-b border-slate-300 p-2 align-top">1</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface GraphNetworkRow {
  /** Etiqueta de la fila: en un grafo, el par de nodos que une la conexión («Hacienda y Trabajo»); 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 GraphNetworkProps {
  /** 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?: GraphNetworkRow[];
  /** Texto del control que despliega la tabla. */
  dataLabel?: string;
  /** Muestra la tabla desplegada (atributo nativo `open` de `<details>`). */
  dataOpen?: boolean;
  /** Herramienta que dibujó el SVG (`data-renderer`); vacío omite el atributo. */
  renderer?: string;
  className?: string;
}

// Red de muestra: cinco comisiones (nodos) y seis pares que sesionaron unidos
// (conexiones). El grosor de cada conexión y el radio de cada nodo siguen las
// cifras de FILAS; la tabla lista una fila por conexión.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M160 60L70 28" strokeWidth="5" />
    <path d="M160 60L250 28" strokeWidth="4" />
    <path d="M160 60L82 96" strokeWidth="3" />
    <path d="M160 60L240 96" strokeWidth="2" />
    <path d="M70 28L82 96" strokeWidth="2" />
    <path d="M250 28L240 96" strokeWidth="1" />
    <circle cx="160" cy="60" r="12" />
    <circle cx="70" cy="28" r="8.5" />
    <circle cx="250" cy="28" r="7" />
    <circle cx="82" cy="96" r="7" />
    <circle cx="240" cy="96" r="5.5" />
    <g fill="currentColor" fontSize="7">
      <text x="160" y="44" textAnchor="middle">Hacienda</text>
      <text x="58" y="30.5" textAnchor="end">Trabajo</text>
      <text x="261" y="30.5">Economía</text>
      <text x="71" y="98.5" textAnchor="end">Educación</text>
      <text x="249" y="98.5">Salud</text>
    </g>
  </svg>
);

const FILAS: GraphNetworkRow[] = [
  { label: "Hacienda y Trabajo", values: ["5"] },
  { label: "Hacienda y Economía", values: ["4"] },
  { label: "Hacienda y Educación", values: ["3"] },
  { label: "Hacienda y Salud", values: ["2"] },
  { label: "Trabajo y Educación", values: ["2"] },
  { label: "Economía y Salud", values: ["1"] },
];

/**
 * Grafo de red: nodos unidos por conexiones, para mostrar relaciones entre personas, instituciones o documentos.
 *
 * El SVG llega como `children` desde cochid-graphs u otra herramienta de dibujo y va oculto a lectores de pantalla: la tabla bajo «Ver datos» es la versión accesible y debe traer los mismos datos, con una fila por conexión. `data-chart="network"` identifica el tipo de gráfico.
 *
 * @example <GraphNetwork title="Proyectos en comisiones unidas · Senado · 2026" columns={["Comisiones", "Proyectos"]} rows={[{ label: "Hacienda y Trabajo", values: ["5"] }, { label: "Hacienda y Economía", values: ["4"] }]}>{grafo}</GraphNetwork>
 */
export function GraphNetwork({
  title = "Proyectos en comisiones unidas · Senado · 2026",
  children = ESQUEMA,
  source = "Fuente: Senado de Chile · tramitación legislativa · ene-ago 2026 · número de proyectos",
  columns = ["Comisiones", "Proyectos"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: GraphNetworkProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="network">
      {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>
  );
}