Muestra: El Poder de la Visualización

Esta página demuestra las capacidades de visualización de datos premium integradas en el tema.

Bienvenido a la muestra de visualización de Astro Glass. Esta publicación demuestra cómo nuestra pila de visualización principal — Shadcn Charts (Recharts), Visx y Expressive Code — se unen para crear una experiencia rica en datos y visualmente impresionante.

1. Analíticas & Paneles de Control (Recharts)

Hemos ido más allá de los gráficos básicos. Nuestra implementación personalizada Astro Glass Charts combina el poder de Recharts con la belleza de nuestro motor de glassmorphism.

A. El Panel de Control

Una vista completa del panel de control con tarjetas de KPI, gráficos de áreas con degradados y gráficos de anillos brillantes. Note cómo los colores se adaptan a su tema activo (¡pruebe cambiar a “Neo” o “Sunset”!).

B. Micro-Visualizaciones

Para obtener densidad de datos sin interferencia visual, usamos BarLists y Trackers personalizados. Estos componentes cuentan con animaciones suaves e indicadores de progreso “líquidos”.

2. Arquitectura Interactiva (React Flow)

No solo utilizamos diagramas para archivos. Los utilizamos para la visualización de la Arquitectura del Sistema. Este gráfico interactivo le permite arrastrar nodos, acercar y explorar la estructura del proyecto.

A. Estructura del Proyecto

La vista estándar del árbol de archivos.

3. Bloques de Código Cinematográficos (Expressive Code)

El código es contenido. Nosotros lo hacemos destacar.

A. Resaltado y Enfoque

Dirija la atención del usuario a lo que realmente importa.

// 1. Importamos la magia
import { motion } from 'framer-motion';

export const MagicCard = () => (
  // 2. Lo animamos
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.5 }}
  >
    ¡Magia!
  </motion.div>
);

B. Vistas de Diferencias con Iconos de Archivos

Muestra las adiciones y eliminaciones claramente con contexto.

export default defineConfig({
  integrations: [
    react(),
    react({ include: ['**/react/*'] }),
    tailwind(),
  ],
});

C. Terminal y Marcos

Simule un entorno de terminal.

$ pnpm run build
> astro build

09:41:22 [build] output target: server
09:41:22 [build] deploying to Cloudflare...
09:41:23 [success] Deployed to https://astroglass-preview.pages.dev 🚀

Conclusión

Esta demostración prueba que Astro Glass es más que una simple plantilla: es un motor de contenido de alto rendimiento. Al aprovechar estas herramientas, puede comunicar datos complejos y lógica con diseños que son tan hermosos como funcionales.