Data Visualization Components 구성 요소

<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>