다크 모드 데이터 시각화 구성 요소

<!-- Dark Mode Data Visualization Component -->
<div class="w-full bg-gray-900 text-gray-100 p-4 md:p-6 rounded-xl shadow-xl">
  <!-- Header with title and filter options -->
  <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold text-gray-100">Analytics Dashboard</h2>
      <p class="text-gray-400 mt-1">Performance metrics for last quarter</p>
    </div>
    
    <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Daily
      </button>
      <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-indigo-500">
        Weekly
      </button>
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Monthly
      </button>
    </div>
  </div>
  
  <!-- Stats Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Pageviews -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Pageviews</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+24%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">152.4K</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 75%"></div>
      </div>
    </div>
    
    <!-- Bounce Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Bounce Rate</h3>
        <span class="bg-red-900/30 text-red-400 text-xs py-1 px-2 rounded-full">+2.1%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">38.2%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 38%"></div>
      </div>
    </div>
    
    <!-- Avg. Time on Site -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Avg. Session</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+12%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">4m 38s</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 65%"></div>
      </div>
    </div>
    
    <!-- Conversion Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Conversion</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+7.3%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">5.4%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 54%"></div>
      </div>
    </div>
  </div>
  
  <!-- Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Line Chart -->
    <div class="bg-gray-800 p-4 rounded-lg col-span-2">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">User Growth</h3>
        <div class="flex space-x-2">
          <span class="inline-block w-3 h-3 bg-indigo-500 rounded-full"></span>
          <span class="text-sm text-gray-400">New Users</span>
          <span class="inline-block w-3 h-3 bg-gray-500 rounded-full ml-2"></span>
          <span class="text-sm text-gray-400">Returning</span>
        </div>
      </div>
      
      <!-- Simplified Line Chart (CSS only) -->
      <div class="relative h-64 w-full">
        <div class="absolute bottom-0 left-0 w-full h-px bg-gray-700"></div>
        <div class="absolute left-0 top-0 h-full w-px bg-gray-700"></div>
        
        <!-- Y-axis labels -->
        <div class="absolute -left-6 top-0 text-gray-400 text-xs">100%</div>
        <div class="absolute -left-6 top-1/4 text-gray-400 text-xs">75%</div>
        <div class="absolute -left-6 top-2/4 text-gray-400 text-xs">50%</div>
        <div class="absolute -left-6 top-3/4 text-gray-400 text-xs">25%</div>
        <div class="absolute -left-6 bottom-0 text-gray-400 text-xs">0%</div>
        
        <!-- X-axis labels -->
        <div class="absolute bottom-[-20px] left-[12.5%] text-gray-400 text-xs">Jan</div>
        <div class="absolute bottom-[-20px] left-[37.5%] text-gray-400 text-xs">Feb</div>
        <div class="absolute bottom-[-20px] left-[62.5%] text-gray-400 text-xs">Mar</div>
        <div class="absolute bottom-[-20px] left-[87.5%] text-gray-400 text-xs">Apr</div>
        
        <!-- Line chart shape (CSS only approximation) -->
        <div class="absolute bottom-0 left-0 w-full h-full overflow-hidden">
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid lines -->
            <line x1="0" y1="15" x2="100" y2="15" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="30" x2="100" y2="30" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="45" x2="100" y2="45" stroke="#374151" stroke-width="0.2"/>
            <line x1="25" y1="0" x2="25" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="50" y1="0" x2="50" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="75" y1="0" x2="75" y2="60" stroke="#374151" stroke-width="0.2"/>
            
            <!-- Chart line 1 -->
            <polyline 
              points="0,40 25,30 50,20 75,15 100,10"
              fill="none"
              stroke="#6366F1"
              stroke-width="2"
            />
            
            <!-- Chart line 2 -->
            <polyline 
              points="0,50 25,40 50,45 75,35 100,30"
              fill="none"
              stroke="#9CA3AF"
              stroke-width="2"
            />
            
            <!-- Data points for line 1 -->
            <circle cx="0" cy="40" r="1.5" fill="#6366F1"/>
            <circle cx="25" cy="30" r="1.5" fill="#6366F1"/>
            <circle cx="50" cy="20" r="1.5" fill="#6366F1"/>
            <circle cx="75" cy="15" r="1.5" fill="#6366F1"/>
            <circle cx="100" cy="10" r="1.5" fill="#6366F1"/>
            
            <!-- Data points for line 2 -->
            <circle cx="0" cy="50" r="1.5" fill="#9CA3AF"/>
            <circle cx="25" cy="40" r="1.5" fill="#9CA3AF"/>
            <circle cx="50" cy="45" r="1.5" fill="#9CA3AF"/>
            <circle cx="75" cy="35" r="1.5" fill="#9CA3AF"/>
            <circle cx="100" cy="30" r="1.5" fill="#9CA3AF"/>
          </svg>
        </div>
      </div>
    </div>
    
    <!-- Bar Chart -->
    <div class="bg-gray-800 p-4 rounded-lg">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">Traffic Sources</h3>
        <button class="text-gray-400 hover:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
          </svg>
        </button>
      </div>
      
      <!-- Simplified Bar Chart (CSS only) -->
      <div class="relative h-64 mt-4 flex items-end justify-around">
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 65%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Direct</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 85%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Social</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 40%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Email</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 95%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Search</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 50%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Ads</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Popular Content Section -->
  <div class="bg-gray-800 p-4 rounded-lg mb-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-100">Popular Content</h3>
      <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 rounded-md text-sm transition-colors duration-200">View All</button>
    </div>
    
    <!-- Content Items -->
    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/1/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">10 Ways to Improve Your Data Analysis Skills</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>2.1K reads</span>
            <span class="mx-2">•</span>
            <span>8 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 80%"></div>
              </div>
              <span class="ml-1 text-xs">80%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/26/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Understanding User Behavior Through Analytics</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>1.8K reads</span>
            <span class="mx-2">•</span>
            <span>6 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 65%"></div>
              </div>
              <span class="ml-1 text-xs">65%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/60/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Data Visualization Principles for Beginners</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>3.4K reads</span>
            <span class="mx-2">•</span>
            <span>12 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 92%"></div>
              </div>
              <span class="ml-1 text-xs">92%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Footer with user info -->
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-100">Report generated by James Wilson</p>
        <p class="text-xs text-gray-400">Last updated: April 15, 2023 at 14:30</p>
      </div>
    </div>
    <div class="mt-4 md:mt-0 flex space-x-2">
      <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        Download PDF
      </button>
      <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
        Share Report
      </button>
    </div>
  </div>
</div>