Gráfico incorporado.

<figure class="ui-sample ui-chart" data-embed="chart" data-integration="cochid-graphs" data-render-mode="contract-demo" data-renderer="cochid-graphs" data-chart="line"><figcaption>Desocupación · Región de Valparaíso</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M30 100H300M30 12V100"></path><polyline points="50,29.6 96,42.8 142,56 188,60.4 234,51.6 280,38.4"></polyline><circle cx="50" cy="29.6" r="3.5"></circle><circle cx="96" cy="42.8" r="3.5"></circle><circle cx="142" cy="56" r="3.5"></circle><circle cx="188" cy="60.4" r="3.5"></circle><circle cx="234" cy="51.6" r="3.5"></circle><circle cx="280" cy="38.4" r="3.5"></circle><text x="26" y="15" text-anchor="end" class="ui-chart__rotulo">9%</text><text x="26" y="103" text-anchor="end" class="ui-chart__rotulo">7%</text><text x="50" y="114" text-anchor="middle" class="ui-chart__rotulo">Dic-feb</text><text x="96" y="114" text-anchor="middle" class="ui-chart__rotulo">Ene-mar</text><text x="142" y="114" text-anchor="middle" class="ui-chart__rotulo">Feb-abr</text><text x="188" y="114" text-anchor="middle" class="ui-chart__rotulo">Mar-may</text><text x="234" y="114" text-anchor="middle" class="ui-chart__rotulo">Abr-jun</text><text x="280" y="114" text-anchor="middle" class="ui-chart__rotulo">May-jul</text><text x="280" y="28" text-anchor="middle" class="ui-chart__valor">8,4%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · trimestres móviles dic-feb a may-jul 2026 · porcentaje</p><details><summary>Ver datos de la serie</summary><table><thead><tr><th>Trimestre móvil</th><th>Tasa</th></tr></thead><tbody><tr><th>Dic-feb</th><td>8,6%</td></tr><tr><th>Ene-mar</th><td>8,3%</td></tr><tr><th>Feb-abr</th><td>8,0%</td></tr><tr><th>Mar-may</th><td>7,9%</td></tr><tr><th>Abr-jun</th><td>8,1%</td></tr><tr><th>May-jul</th><td>8,4%</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="chart" data-integration="cochid-graphs" data-render-mode="contract-demo" data-renderer="cochid-graphs" data-chart="line"><figcaption class="text-sm text-slate-600">Desocupación · Región de Valparaíso</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M30 100H300M30 12V100"></path><polyline points="50,29.6 96,42.8 142,56 188,60.4 234,51.6 280,38.4"></polyline><circle cx="50" cy="29.6" r="3.5"></circle><circle cx="96" cy="42.8" r="3.5"></circle><circle cx="142" cy="56" r="3.5"></circle><circle cx="188" cy="60.4" r="3.5"></circle><circle cx="234" cy="51.6" r="3.5"></circle><circle cx="280" cy="38.4" r="3.5"></circle><text x="26" y="15" text-anchor="end" class="ui-chart__rotulo">9%</text><text x="26" y="103" text-anchor="end" class="ui-chart__rotulo">7%</text><text x="50" y="114" text-anchor="middle" class="ui-chart__rotulo">Dic-feb</text><text x="96" y="114" text-anchor="middle" class="ui-chart__rotulo">Ene-mar</text><text x="142" y="114" text-anchor="middle" class="ui-chart__rotulo">Feb-abr</text><text x="188" y="114" text-anchor="middle" class="ui-chart__rotulo">Mar-may</text><text x="234" y="114" text-anchor="middle" class="ui-chart__rotulo">Abr-jun</text><text x="280" y="114" text-anchor="middle" class="ui-chart__rotulo">May-jul</text><text x="280" y="28" text-anchor="middle" class="ui-chart__valor">8,4%</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · trimestres móviles dic-feb a may-jul 2026 · porcentaje</p><details><summary>Ver datos de la serie</summary><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Trimestre móvil</th><th class="border-b border-slate-300 p-2 align-top">Tasa</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Dic-feb</th><td class="border-b border-slate-300 p-2 align-top">8,6%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Ene-mar</th><td class="border-b border-slate-300 p-2 align-top">8,3%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Feb-abr</th><td class="border-b border-slate-300 p-2 align-top">8,0%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Mar-may</th><td class="border-b border-slate-300 p-2 align-top">7,9%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Abr-jun</th><td class="border-b border-slate-300 p-2 align-top">8,1%</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">May-jul</th><td class="border-b border-slate-300 p-2 align-top">8,4%</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface ChartEmbedRow {
  /** 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 ChartEmbedTable {
  /** Texto del control que despliega la tabla; por defecto «Ver datos». Con varias tablas, una etiqueta distinta por tabla. */
  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: ChartEmbedRow[];
  /** 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 ChartEmbedProps {
  /** 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;
  /** Tablas de datos, cada una en su propio desplegable; la primera trae los mismos valores que dibuja el gráfico. */
  tables?: ChartEmbedTable[];
  /** Tipo de gráfico (`data-chart`): `line`, `bar`, `donut`, `scatter`, etc. */
  chartType?: string;
  /** Renderer que produjo el SVG (`data-renderer`); vacío omite el atributo. */
  renderer?: string;
  /** Servicio que entrega el gráfico 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.

// Serie de seis trimestres móviles, escala de 7 % (y = 100) a 9 % (y = 12); los
// mismos seis valores van en la primera tabla.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M30 100H300M30 12V100" />
    <polyline points="50,29.6 96,42.8 142,56 188,60.4 234,51.6 280,38.4" />
    <circle cx="50" cy="29.6" r="3.5" />
    <circle cx="96" cy="42.8" r="3.5" />
    <circle cx="142" cy="56" r="3.5" />
    <circle cx="188" cy="60.4" r="3.5" />
    <circle cx="234" cy="51.6" r="3.5" />
    <circle cx="280" cy="38.4" r="3.5" />
    <text x="26" y="15" textAnchor="end" className="ui-chart__rotulo">9%</text>
    <text x="26" y="103" textAnchor="end" className="ui-chart__rotulo">7%</text>
    <text x="50" y="114" textAnchor="middle" className="ui-chart__rotulo">Dic-feb</text>
    <text x="96" y="114" textAnchor="middle" className="ui-chart__rotulo">Ene-mar</text>
    <text x="142" y="114" textAnchor="middle" className="ui-chart__rotulo">Feb-abr</text>
    <text x="188" y="114" textAnchor="middle" className="ui-chart__rotulo">Mar-may</text>
    <text x="234" y="114" textAnchor="middle" className="ui-chart__rotulo">Abr-jun</text>
    <text x="280" y="114" textAnchor="middle" className="ui-chart__rotulo">May-jul</text>
    <text x="280" y="28" textAnchor="middle" className="ui-chart__valor">8,4%</text>
  </svg>
);

const TABLAS: ChartEmbedTable[] = [
  {
    label: "Ver datos de la serie",
    columns: ["Trimestre móvil", "Tasa"],
    rows: [
      { label: "Dic-feb", values: ["8,6%"] },
      { label: "Ene-mar", values: ["8,3%"] },
      { label: "Feb-abr", values: ["8,0%"] },
      { label: "Mar-may", values: ["7,9%"] },
      { label: "Abr-jun", values: ["8,1%"] },
      { label: "May-jul", values: ["8,4%"] },
    ],
  },
];

/**
 * Gráfico incorporado: gráfico 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: la primera tabla desplegable es la versión accesible y trae los mismos valores que dibuja el gráfico. Si hay más de una tabla, cada una lleva su propia etiqueta (`label`); `open` la muestra desplegada.
 *
 * @example <ChartEmbed title="Desocupación · Región de Valparaíso" source="Fuente: INE · ENE · trimestres móviles mar-may a may-jul 2026 · porcentaje" tables={[{ label: "Ver datos de la serie", columns: ["Trimestre móvil", "Tasa"], rows: [{ label: "Mar-may", values: ["7,9%"] }, { label: "Abr-jun", values: ["8,1%"] }, { label: "May-jul", values: ["8,4%"] }] }]}>{svg}</ChartEmbed>
 */
export function ChartEmbed({
  title = "Desocupación · Región de Valparaíso",
  children = ESQUEMA,
  source = "Fuente: INE · Encuesta Nacional de Empleo · trimestres móviles dic-feb a may-jul 2026 · porcentaje",
  tables = TABLAS,
  chartType = "line",
  renderer = "cochid-graphs",
  integration = "cochid-graphs",
  renderMode = "contract-demo",
  className,
}: ChartEmbedProps) {
  return (
    <figure
      className={["ui-chart", className].filter(Boolean).join(" ")}
      data-embed="chart"
      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>
  );
}