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
Composants de visualisation de données
Un composant de visualisation de données réactif avec des éléments de conception 3D avec prise en charge des thèmes sombres.
Composants de visualisation de données
Composant Web pour la visualisation de données à l’aide du style Material Design avec Tailwind CSS, avec des mises en page réactives, la prise en charge des thèmes sombres et des images d’espace réservé.
Composants de visualisation de données
Un composant de visualisation de données e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.