Barras apiladas.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="stacked"><figcaption>Personas desocupadas por sexo · trimestres móviles 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M20 100H240" class="ui-chart__eje"></path><rect x="40" y="65.6" width="44" height="34.4" class="ui-chart__serie"></rect><rect x="40" y="26.8" width="44" height="38.8" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="110" y="66" width="44" height="34" class="ui-chart__serie"></rect><rect x="110" y="28.4" width="44" height="37.6" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="180" y="66.8" width="44" height="33.2" class="ui-chart__serie"></rect><rect x="180" y="30" width="44" height="36.8" class="ui-chart__serie ui-chart__serie--2"></rect><text x="62" y="21.8" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">915</text><text x="132" y="23.4" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">895</text><text x="202" y="25" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">875</text><text x="62" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="132" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="202" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><rect x="250" y="44" width="10" height="10" class="ui-chart__serie ui-chart__serie--2"></rect><text x="265" y="53" class="ui-chart__rotulo ui-chart__rotulo--chico">Hombres</text><rect x="250" y="64" width="10" height="10" class="ui-chart__serie"></rect><text x="265" y="73" class="ui-chart__rotulo ui-chart__rotulo--chico">Mujeres</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · mar-jul 2026 · miles de personas</p><details><summary>Ver datos</summary><table><thead><tr><th>Trimestre móvil</th><th>Mujeres</th><th>Hombres</th><th>Total</th></tr></thead><tbody><tr><th>Mar-may</th><td>430</td><td>485</td><td>915</td></tr><tr><th>Abr-jun</th><td>425</td><td>470</td><td>895</td></tr><tr><th>May-jul</th><td>415</td><td>460</td><td>875</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="stacked"><figcaption class="text-sm text-slate-600">Personas desocupadas por sexo · trimestres móviles 2026</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M20 100H240" class="ui-chart__eje"></path><rect x="40" y="65.6" width="44" height="34.4" class="ui-chart__serie"></rect><rect x="40" y="26.8" width="44" height="38.8" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="110" y="66" width="44" height="34" class="ui-chart__serie"></rect><rect x="110" y="28.4" width="44" height="37.6" class="ui-chart__serie ui-chart__serie--2"></rect><rect x="180" y="66.8" width="44" height="33.2" class="ui-chart__serie"></rect><rect x="180" y="30" width="44" height="36.8" class="ui-chart__serie ui-chart__serie--2"></rect><text x="62" y="21.8" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">915</text><text x="132" y="23.4" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">895</text><text x="202" y="25" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">875</text><text x="62" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text><text x="132" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text><text x="202" y="113" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text><rect x="250" y="44" width="10" height="10" class="ui-chart__serie ui-chart__serie--2"></rect><text x="265" y="53" class="ui-chart__rotulo ui-chart__rotulo--chico">Hombres</text><rect x="250" y="64" width="10" height="10" class="ui-chart__serie"></rect><text x="265" y="73" class="ui-chart__rotulo ui-chart__rotulo--chico">Mujeres</text></svg><p>Fuente: INE · Encuesta Nacional de Empleo · mar-jul 2026 · miles 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">Trimestre móvil</th><th class="border-b border-slate-300 p-2 align-top">Mujeres</th><th class="border-b border-slate-300 p-2 align-top">Hombres</th><th class="border-b border-slate-300 p-2 align-top">Total</th></tr></thead><tbody><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">430</td><td class="border-b border-slate-300 p-2 align-top">485</td><td class="border-b border-slate-300 p-2 align-top">915</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">425</td><td class="border-b border-slate-300 p-2 align-top">470</td><td class="border-b border-slate-300 p-2 align-top">895</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">415</td><td class="border-b border-slate-300 p-2 align-top">460</td><td class="border-b border-slate-300 p-2 align-top">875</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

/** Fila de la tabla de datos: etiqueta de la fila y una celda por cada columna después de la primera. */
export interface ChartStackedRow {
  /** 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 ChartStackedProps {
  /** 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?: ChartStackedRow[];
  /** 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.
// Los tramos van en dos series (ui-chart__serie y --2): sin eso salen del mismo negro y se funden.

// Escala de 0 (y = 100) a 1.000 mil personas (y = 20); tramos y totales son las columnas de la tabla.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M20 100H240" className="ui-chart__eje" />
    <rect x="40" y="65.6" width="44" height="34.4" className="ui-chart__serie" />
    <rect x="40" y="26.8" width="44" height="38.8" className="ui-chart__serie ui-chart__serie--2" />
    <rect x="110" y="66" width="44" height="34" className="ui-chart__serie" />
    <rect x="110" y="28.4" width="44" height="37.6" className="ui-chart__serie ui-chart__serie--2" />
    <rect x="180" y="66.8" width="44" height="33.2" className="ui-chart__serie" />
    <rect x="180" y="30" width="44" height="36.8" className="ui-chart__serie ui-chart__serie--2" />
    <text x="62" y="21.8" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">915</text>
    <text x="132" y="23.4" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">895</text>
    <text x="202" y="25" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">875</text>
    <text x="62" y="113" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Mar-may</text>
    <text x="132" y="113" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Abr-jun</text>
    <text x="202" y="113" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">May-jul</text>
    <rect x="250" y="44" width="10" height="10" className="ui-chart__serie ui-chart__serie--2" />
    <text x="265" y="53" className="ui-chart__rotulo ui-chart__rotulo--chico">Hombres</text>
    <rect x="250" y="64" width="10" height="10" className="ui-chart__serie" />
    <text x="265" y="73" className="ui-chart__rotulo ui-chart__rotulo--chico">Mujeres</text>
  </svg>
);

const FILAS: ChartStackedRow[] = [
  { label: "Mar-may", values: ["430", "485", "915"] },
  { label: "Abr-jun", values: ["425", "470", "895"] },
  { label: "May-jul", values: ["415", "460", "875"] },
];

/**
 * Gráfico de barras apiladas para mostrar cómo se reparte un total entre componentes en cada categoría o período, con título, fuente y tabla de datos desplegable.
 *
 * 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="stacked"` identifica el tipo de gráfico.
 *
 * @example <ChartStacked title="Personas desocupadas por sexo · miles" columns={["Trimestre móvil", "Mujeres", "Hombres", "Total"]} rows={[{ label: "Abr-jun", values: ["425", "470", "895"] }, { label: "May-jul", values: ["415", "460", "875"] }]}>{svg}</ChartStacked>
 */
export function ChartStacked({
  title = "Personas desocupadas por sexo · trimestres móviles 2026",
  children = ESQUEMA,
  source = "Fuente: INE · Encuesta Nacional de Empleo · mar-jul 2026 · miles de personas",
  columns = ["Trimestre móvil", "Mujeres", "Hombres", "Total"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartStackedProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="stacked">
      {title ? <figcaption>{title}</figcaption> : null}
      {children}
      {source ? <p>{source}</p> : null}
      {rows.length ? (
        <details open={dataOpen}>
          {dataLabel ? <summary>{dataLabel}</summary> : null}
          <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>
  );
}