Composant Composants de visualisation de données
Un composant de visualisation de données simple, propre et inspiré du code pour la documentation/les sites wiki, avec des polices monospace, une esthétique terminale et des tons de couleur sépia/marron, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="font-mono p-4 sm:p-6 md:p-8 bg-amber-50 text-amber-900 dark:bg-stone-900 dark:text-stone-100 min-h-screen">
<div class="max-w-4xl mx-auto border border-amber-200 dark:border-stone-700 shadow-md transform hover:shadow-lg transition-all duration-300 ease-in-out">
<!-- Header/Title Bar -->
<div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-b border-amber-200 dark:border-stone-700">
<div class="flex space-x-1.5">
<span class="block w-3 h-3 rounded-full bg-red-400"></span>
<span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="block w-3 h-3 rounded-full bg-green-400"></span>
</div>
<div class="text-xs text-amber-700 dark:text-stone-300">data_viz_component.sh</div>
<div class="flex space-x-2 text-amber-700 dark:text-stone-300 text-sm">
<span>_</span>
<span>□</span>
<span>X</span>
</div>
</div>
<!-- Content Area -->
<div class="p-4 sm:p-6 bg-amber-50 dark:bg-stone-900 overflow-x-auto">
<pre class="text-sm whitespace-pre-wrap">
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">cat</span> data_summary.json
{
<span class="text-orange-700 dark:text-amber-200">"project"</span>: <span class="text-orange-500 dark:text-orange-300">"Documentation Portal"</span>,
<span class="text-orange-700 dark:text-amber-200">"version"</span>: <span class="text-orange-500 dark:text-orange-300">"1.0.0"</span>,
<span class="text-orange-700 dark:text-amber-200">"last_updated"</span>: <span class="text-orange-500 dark:text-orange-300">"2023-10-27"</span>,
<span class="text-orange-700 dark:text-amber-200">"data_points"</span>: <span class="text-orange-500 dark:text-orange-300">567</span>,
<span class="text-orange-700 dark:text-amber-200">"avg_daily_views"</span>: <span class="text-orange-500 dark:text-orange-300">1234</span>,
<span class="text-orange-700 dark:text-amber-200">"status"</span>: <span class="text-orange-500 dark:text-orange-300">"Operational"</span>,
<span class="text-orange-700 dark:text-amber-200">"components"</span>: [
<span class="text-orange-500 dark:text-orange-300">"Charts"</span>,
<span class="text-orange-500 dark:text-orange-300">"Tables"</span>,
<span class="text-orange-500 dark:text-orange-300">"Graphs"</span>
]
}
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Generating simple data visualization..."
Generating simple data visualization...
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">./render_viz.sh</span>
<span class="block mt-4 w-full h-48 bg-amber-200 dark:bg-stone-700 relative overflow-hidden">
<!-- Simple Bar Chart Placeholder -->
<div class="absolute bottom-0 w-full flex items-end justify-around h-full p-2">
<div class="flex flex-col items-center h-full justify-end">
<div class="w-4 sm:w-6 h-1/4 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
<span class="text-xs text-amber-700 dark:text-stone-300">C1</span>
</div>
<div class="flex flex-col items-center h-full justify-end">
<div class="w-4 sm:w-6 h-2/3 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
<span class="text-xs text-amber-700 dark:text-stone-300">C2</span>
</div>
<div class="flex flex-col items-center h-full justify-end">
<div class="w-4 sm:w-6 h-1/2 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
<span class="text-xs text-amber-700 dark:text-stone-300">C3</span>
</div>
<div class="flex flex-col items-center h-full justify-end">
<div class="w-4 sm:w-6 h-3/4 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
<span class="text-xs text-amber-700 dark:text-stone-300">C4</span>
</div>
<div class="flex flex-col items-center h-full justify-end">
<div class="w-4 sm:w-6 h-1/3 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
<span class="text-xs text-amber-700 dark:text-stone-300">C5</span>
</div>
</div>
</span>
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Visualization complete."
Visualization complete.
</pre>
</div>
<!-- Footer/Status Bar -->
<div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-t border-amber-200 dark:border-stone-700 text-xs text-amber-700 dark:text-stone-300">
<span>user@host:~/docs/viz</span>
<span>[Status: OK]</span>
</div>
</div>
</div>Composants associés
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
Composants de visualisation de données
Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre
Composants de visualisation de données
Un composant de tableau de bord de visualisation de données de style rétro vintage avec un thème sombre qui présente des tons de terre et une mise en page simple.