Composants Composants de visualisation de données Composant Composants de visualisation de données

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.

Aperçu

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>&#9633;</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

Sports_Fitness_Dashboard_Monospace

Un composant de tableau de bord de sport/fitness épuré et inspiré du code, avec des polices monospaces, une esthétique de terminal et des tons océan/bleu. Il présente un design réactif, une prise en charge du mode sombre et des éléments de visualisation de données adaptés aux équipes sportives et aux applications de fitness.

Ouvrir

Composant Composants de visualisation de données

Composant de visualisation de données Glassmorphism pour blog/contenu

Ouvrir

Weather_Climate_Retro_Dark_Dashboard

Un composant de tableau de bord simple et rétro en mode sombre pour les données météorologiques et climatiques, réactif sur tous les appareils.

Ouvrir