Radar.

<figure class="ui-sample ui-chart" data-renderer="cochid-graphs" data-chart="radar"><figcaption>Evaluación de la atención municipal · encuesta a vecinos · 2026</figcaption><svg viewBox="0 0 320 120" aria-hidden="true"><path d="M160 18L201.8 48.4L185.9 97.6L134.1 97.6L118.2 48.4ZM160 40L180.9 55.2L172.9 79.8L147.1 79.8L139.1 55.2Z" class="ui-chart__guia"></path><path d="M160 62L160 18M160 62L201.8 48.4M160 62L185.9 97.6M160 62L134.1 97.6M160 62L118.2 48.4" class="ui-chart__guia"></path><polygon points="160,25 183.4,54.4 178.6,87.6 144,84.1 127.4,51.4" class="ui-chart__area"></polygon><text x="160" y="13" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Trato · 4,2</text><text x="208.5" y="49.2" class="ui-chart__rotulo ui-chart__rotulo--chico">Tiempo de espera · 2,8</text><text x="190" y="112.3" class="ui-chart__rotulo ui-chart__rotulo--chico">Información · 3,6</text><text x="130" y="112.3" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Resolución · 3,1</text><text x="111.5" y="49.2" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Canales en línea · 3,9</text></svg><p>Fuente: encuesta de satisfacción de usuarios · 2026 · promedio en escala de 0 a 5</p><details><summary>Ver datos</summary><table><thead><tr><th>Dimensión</th><th>Promedio</th></tr></thead><tbody><tr><th>Trato</th><td>4,2</td></tr><tr><th>Tiempo de espera</th><td>2,8</td></tr><tr><th>Información</th><td>3,6</td></tr><tr><th>Resolución</th><td>3,1</td></tr><tr><th>Canales en línea</th><td>3,9</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="radar"><figcaption class="text-sm text-slate-600">Evaluación de la atención municipal · encuesta a vecinos · 2026</figcaption><svg class="h-auto w-full" viewBox="0 0 320 120" aria-hidden="true"><path d="M160 18L201.8 48.4L185.9 97.6L134.1 97.6L118.2 48.4ZM160 40L180.9 55.2L172.9 79.8L147.1 79.8L139.1 55.2Z" class="ui-chart__guia"></path><path d="M160 62L160 18M160 62L201.8 48.4M160 62L185.9 97.6M160 62L134.1 97.6M160 62L118.2 48.4" class="ui-chart__guia"></path><polygon points="160,25 183.4,54.4 178.6,87.6 144,84.1 127.4,51.4" class="ui-chart__area"></polygon><text x="160" y="13" text-anchor="middle" class="ui-chart__rotulo ui-chart__rotulo--chico">Trato · 4,2</text><text x="208.5" y="49.2" class="ui-chart__rotulo ui-chart__rotulo--chico">Tiempo de espera · 2,8</text><text x="190" y="112.3" class="ui-chart__rotulo ui-chart__rotulo--chico">Información · 3,6</text><text x="130" y="112.3" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Resolución · 3,1</text><text x="111.5" y="49.2" text-anchor="end" class="ui-chart__rotulo ui-chart__rotulo--chico">Canales en línea · 3,9</text></svg><p>Fuente: encuesta de satisfacción de usuarios · 2026 · promedio en escala de 0 a 5</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">Dimensión</th><th class="border-b border-slate-300 p-2 align-top">Promedio</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top">Trato</th><td class="border-b border-slate-300 p-2 align-top">4,2</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Tiempo de espera</th><td class="border-b border-slate-300 p-2 align-top">2,8</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Información</th><td class="border-b border-slate-300 p-2 align-top">3,6</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Resolución</th><td class="border-b border-slate-300 p-2 align-top">3,1</td></tr><tr><th class="border-b border-slate-300 p-2 align-top">Canales en línea</th><td class="border-b border-slate-300 p-2 align-top">3,9</td></tr></tbody></table></details></figure>

import type { ReactNode } from "react";

export interface ChartRadarRow {
  /** 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 ChartRadarProps {
  /** 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?: ChartRadarRow[];
  /** 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.
// ui-chart__area separa la serie de la grilla (ui-chart__guia).

// Cinco ejes de 0 (centro) a 5 (radio 44), con grilla en 2,5 y 5; un vértice por fila de la tabla.
const ESQUEMA = (
  <svg viewBox="0 0 320 120" aria-hidden="true">
    <path d="M160 18L201.8 48.4L185.9 97.6L134.1 97.6L118.2 48.4ZM160 40L180.9 55.2L172.9 79.8L147.1 79.8L139.1 55.2Z" className="ui-chart__guia" />
    <path d="M160 62L160 18M160 62L201.8 48.4M160 62L185.9 97.6M160 62L134.1 97.6M160 62L118.2 48.4" className="ui-chart__guia" />
    <polygon points="160,25 183.4,54.4 178.6,87.6 144,84.1 127.4,51.4" className="ui-chart__area" />
    <text x="160" y="13" textAnchor="middle" className="ui-chart__rotulo ui-chart__rotulo--chico">Trato · 4,2</text>
    <text x="208.5" y="49.2" className="ui-chart__rotulo ui-chart__rotulo--chico">Tiempo de espera · 2,8</text>
    <text x="190" y="112.3" className="ui-chart__rotulo ui-chart__rotulo--chico">Información · 3,6</text>
    <text x="130" y="112.3" textAnchor="end" className="ui-chart__rotulo ui-chart__rotulo--chico">Resolución · 3,1</text>
    <text x="111.5" y="49.2" textAnchor="end" className="ui-chart__rotulo ui-chart__rotulo--chico">Canales en línea · 3,9</text>
  </svg>
);

const FILAS: ChartRadarRow[] = [
  { label: "Trato", values: ["4,2"] },
  { label: "Tiempo de espera", values: ["2,8"] },
  { label: "Información", values: ["3,6"] },
  { label: "Resolución", values: ["3,1"] },
  { label: "Canales en línea", values: ["3,9"] },
];

/**
 * Gráfico de radar: valores de varias dimensiones sobre ejes radiales, para comparar un perfil con una referencia.
 *
 * 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="radar"` identifica el tipo de gráfico.
 *
 * @example <ChartRadar title="Perfil regional por dimensión" columns={["Dimensión", "Región", "Promedio nacional"]} rows={[{ label: "Empleo", values: ["0,72", "0,65"] }, { label: "Ingresos", values: ["0,58", "0,61"] }]}>{radar}</ChartRadar>
 */
export function ChartRadar({
  title = "Evaluación de la atención municipal · encuesta a vecinos · 2026",
  children = ESQUEMA,
  source = "Fuente: encuesta de satisfacción de usuarios · 2026 · promedio en escala de 0 a 5",
  columns = ["Dimensión", "Promedio"],
  rows = FILAS,
  dataLabel = "Ver datos",
  dataOpen,
  renderer = "cochid-graphs",
  className,
}: ChartRadarProps) {
  return (
    <figure className={["ui-chart", className].filter(Boolean).join(" ")} data-renderer={renderer || undefined} data-chart="radar">
      {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>
  );
}