Datos · Gráficos
Gráficos
Chart.astro (Chart.js: line/area/bar/radar/scatter/bubble) es el único componente del sistema con JS de cliente real — un dashboard necesita tooltip e interacción de verdad, no una ilustración. El resto del DS es zero-JS por diseño. DonutChart.astro es la excepción inversa: donut y pie se calculan en build con d3-shape, cero JS, con texturas superpuestas al color para no depender solo de él.
Line
Serie continua. filled en false — ver Area para la variante rellena.
Area
type="line" + filled: mismo dato, énfasis en volumen/acumulado.
Bar
Vertical, comparativo entre dos series con tono distinto.
Bar horizontal
horizontal: mejor lectura cuando las categorías son nombres largos.
Bar apilado
stacked: composición de un total (goles + asistencias = participación en gol).
Radar
Comparación multiatributo — el caso de uso clásico en analítica de fútbol (comparar dos jugadores).
Scatter
Correlación entre dos métricas. Sin labels: el eje X es continuo, cada series[].data es {x,y}[].
Bubble
Tres métricas a la vez: X, Y y tamaño (r). data es {x,y,r}[].
Donut
Zero-JS. variant="donut" (default). Texturas por segmento (pattern, default true).
- Defensa 34%
- Mediocampo 40%
- Ataque 26%
Pie
Mismo componente, variant="pie" (radio interno cero).
- Victorias 58%
- Empates 25%
- Derrotas 17%