Vitrine : Le Pouvoir de la Visualisation

Cette page démontre les capacités de visualisation de données haut de gamme intégrées au thème.

Bienvenue dans la vitrine de visualisation d’Astro Glass. Cet article montre comment notre pile de visualisation principale — Shadcn Charts (Recharts), Visx et Expressive Code — s’associe pour créer une expérience visuelle riche en données et époustouflante.

1. Analytique & Tableaux de bord (Recharts)

Nous sommes allés au-delà des graphiques basiques. Notre implémentation personnalisée des Astro Glass Charts combine la puissance de Recharts avec la beauté de notre moteur de glassmorphism.

A. Le Tableau de bord

Une vue complète du tableau de bord avec des cartes KPI, des graphiques en aires infusés de dégradés et des graphiques en anneau lumineux. Remarquez comment les couleurs s’adaptent à votre thème actif (essayez de passer à “Neo” ou “Sunset” !).

B. Micro-Visualisations

Pour une densité de données sans encombrement visuel, nous utilisons des BarLists et des Trackers personnalisés. Ces composants présentent des animations fluides et des indicateurs de progression “liquides”.

2. Architecture Interactive (React Flow)

Nous ne nous contentons pas d’utiliser des diagrammes pour les fichiers. Nous les utilisons pour la visualisation de l’Architecture Système. Ce graphique interactif vous permet de faire glisser des nœuds, de zoomer et d’explorer la structure du projet.

A. Structure du Projet

La vue standard de l’arborescence des fichiers.

3. Blocs de Code Cinématiques (Expressive Code)

Le code est du contenu. Nous le faisons ressortir.

A. Mise en évidence & Focus

Dirigez l’œil de l’utilisateur sur ce qui compte exactement.

// 1. Nous importons la magie
import { motion } from 'framer-motion';

export const MagicCard = () => (
  // 2. Nous l'animons
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.5 }}
  >
    Magique !
  </motion.div>
);

B. Vues Diff avec Icônes de Fichiers

Vues claires des ajouts et suppressions avec du contexte.

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

C. Terminal & Cadres

Simulez un environnement 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 🚀

Conclusion

Cette vitrine prouve qu’Astro Glass est plus qu’un simple modèle — c’est un moteur de contenu haute performance. En tirant parti de ces outils, vous pouvez communiquer des données et une logique complexes avec des designs qui sont aussi beaux que fonctionnels.