v0.4.0: 41 gráficos SVG sin dependencias, 24 secciones nuevas y más de 290 bloques

Gráficos, por fin bien hechos

Ya está disponible astro-component-kit 0.4.0, y esta versión gira en torno a la visualización de datos. Hemos añadido 41 componentes nuevos de gráficos y estadísticas, así que la categoría Gráficos y Estadísticas tiene ahora 47 componentes. Sumando 24 secciones nuevas, la librería supera los 290 componentes y secciones.

Todos los gráficos nuevos son SVG puro, renderizado en tiempo de build. Eso significa:

• Cero dependencias. Nada de Chart.js, D3 ni ApexCharts. Astro calcula el marcado y lo entrega como HTML estático.
• Se pintan al instante. El gráfico ya está en la página al cargarla, sin saltos de layout ni librerías que descargar en el cliente.
• Accesibles de serie. Cada gráfico incluye leyenda, marcas enfocables con teclado y tooltip, y una tabla «Ver datos» para que los lectores de pantalla accedan a los números reales.
• Personalizables. Los colores salen de los tokens --chart-1…8, --chart-pos y --chart-neg de global.css: cambias la paleta en un sitio y se actualizan todos los gráficos.

---

Los 41 gráficos nuevos

📈 Tendencias en el tiempo

• Line Chart — Varias series con curva suave, lineal o escalonada y relleno de área opcional.
• Stacked Area Chart — Series acumuladas para ver cuánto aporta cada parte al total.
• Range Area Chart — Bandas de mínimo y máximo alrededor de un valor central.
• Forecast Line Chart — Datos reales más una proyección discontinua con banda de confianza.
• Slope Chart — Comparación antes/después entre dos momentos.
• Bump Chart — Cambios de posición en un ranking a lo largo del tiempo.
• Sparkline Chart — Mini tendencia en línea para tablas y tarjetas de KPI.
• Candlestick Chart — Velas financieras de apertura, máximo, mínimo y cierre.

📊 Comparar valores

• Grouped Bar Chart, Stacked Bar Chart y Horizontal Bar Chart para comparar en paralelo o como parte de un total.
• Diverging Bar Chart — Positivos frente a negativos alrededor de cero.
• Waterfall Chart — Cómo un valor inicial llega al final, paso a paso.
• Histogram Chart — Distribución de valores por intervalos.
• Lollipop Chart y Dumbbell Chart — Alternativas más ligeras a las barras y diferencias entre dos valores.
• Bullet Chart — Real frente a objetivo sobre rangos cualitativos.
• Population Pyramid — Dos distribuciones enfrentadas.

🥧 Partes de un todo

• Pie Chart (tarta o donut), Waffle Chart y Segmented Bar Chart.
• Treemap Chart y Sunburst Chart para jerarquías.
• Funnel Chart — Pasos de conversión con su tasa de abandono.
• Radial Bar Chart y Polar Area Chart.

🔬 Distribución y relaciones

• Scatter Plot con recta de regresión y R² opcionales, y Bubble Chart.
• Box Plot Chart — Mediana, cuartiles y valores atípicos.
• Heatmap Chart y Punch Card Chart — Intensidad en dos dimensiones.
• Radar Chart — Comparación de perfiles en varios ejes.
• Sankey Chart — Flujos entre etapas.

🎯 KPIs y progreso

• KPI Stat Tile y KPI Trend Grid — Cifras clave con variación y sparkline.
• Gauge Chart, Meter Gauge y Goal Progress Chart.
• Activity Rings — Anillos de progreso concéntricos.
• Retention Cohort Table y Metric Delta Table — Tablas de datos con escala de color y variaciones integradas.

Todos comparten un mismo Chart Frame para el título, la leyenda, el tooltip y la tabla de datos, y admiten las variantes glass, solid y ghost en tamaños sm, md y lg.

---
import 'astro-component-kit/global.css';
import { LineChart, KpiStatTile } from 'astro-component-kit/charts';
---

<KpiStatTile label="Ingresos" value="48,2k €" change={24} period="vs. mes anterior" />
<LineChart
  title="Usuarios activos mensuales"
  categories={['Ene', 'Feb', 'Mar', 'Abr']}
  series={[{ name: 'Web', data: [120, 180, 160, 240] }]}
/>

---

24 secciones de landing nuevas

La librería de secciones crece hasta 41 secciones completas, varias de ellas construidas con los nuevos gráficos:

• Heroes: Minimal Centered, Terminal, Waitlist y Dashboard Preview.
• Características: Icon Grid, Alternating Rows, Tabs Showcase, How It Works e Integrations Grid.
• Precios y prueba social: Pricing Toggle Cards, Single Plan, Testimonial Carousel, Featured Testimonial y Logo Wall.
• Datos: Stats Counter Band y Stats Dashboard.
• Conversión y contenido: Newsletter CTA, Split Image CTA, Careers, FAQ a dos columnas, Contacto con mapa, Blog Grid, Changelog y Mega Footer.

---

Actualizar

npm install astro-component-kit@0.4.0

Es una versión sin cambios incompatibles: tus imports actuales siguen funcionando y los componentes nuevos están disponibles desde astro-component-kit/charts, astro-component-kit/sections o el punto de entrada raíz.

Explora todo en las páginas de Gráficos y Estadísticas y Secciones, y cuéntanos en GitHub qué te gustaría ver después.