Charts & Data Visualization Components

<!-- Add charts.css for styles -->
<div class="stat-card-container">
  <div class="stat-item">
    <div class="chart-subtitle">Total Revenue</div>
    <div class="stat-value">$45,231</div>
    <div class="stat-change positive">
      <i class="fa-solid fa-arrow-trend-up"></i> +12.5%
    </div>
  </div>
</div>

<!-- CSS Bar Chart Container -->
<div class="chart-card">
  <h3 class="chart-title">Weekly Traffic</h3>
  <div class="bar-chart" id="bar-chart-bars"></div>
</div>
<!-- See charts.js for injection logic -->

<div class="donut-container">
  <div class="donut-chart" style="background: conic-gradient(#8b5cf6 0% 45%, #06b6d4 45% 75%, #ec4899 75% 100%);">
    <div class="donut-hole">
      <div class="donut-total">100%</div>
    </div>
  </div>
</div>

<div class="progress-item">
  <div class="progress-info">
    <span>New Signups</span><span>80%</span>
  </div>
  <div class="progress-track">
    <div class="progress-fill" style="width: 80%; background: #06b6d4;"></div>
  </div>
</div>

<svg class="svg-line-chart" viewBox="0 0 400 120">
  <path class="svg-line" d="M0,80 Q50,40 100,60 T200,30 T300,70 T400,20"></path>
  <circle class="svg-point" cx="100" cy="60" r="4"></circle>
</svg>

<div class="chart-card interactive-area-chart">
  <div class="area-tooltip">
    <span class="tooltip-time">12:00 PM</span>
    <span class="tooltip-val">580 Users</span>
  </div>
  <div class="marker-line"></div>
  <svg class="area-svg" viewBox="0 0 500 160">
    <path d="M0,160 L0,110 Q100,50 200,90 T400,30 L500,60 L500,160 Z" fill="url(#areaGrad)"></path>
    <path d="M0,110 Q100,50 200,90 T400,30 L500,60" fill="none" stroke="#06b6d4" stroke-width="3"></path>
  </svg>
</div>

<div class="chart-card glass-pie-card">
  <div class="pie-container">
    <div class="glass-pie" style="background: conic-gradient(#8b5cf6 0% 45%, #06b6d4 45% 75%, #ec4899 75% 90%, #f59e0b 90% 100%);"></div>
    <div class="glass-pie-center">
      <span>45%</span>
      <span>Chrome</span>
    </div>
  </div>
</div>

<svg class="radar-svg" viewBox="0 0 200 200">
  <polygon points="100,10 185,72 153,171 47,171 15,72" class="radar-grid"></polygon>
  <polygon points="100,30 176,82 121,128 73,128 40,78" class="radar-active-poly"></polygon>
</svg>

<div class="chart-card real-time-card">
  <span class="live-dot-tag"><span class="live-pulse"></span>LIVE</span>
  <svg viewBox="0 0 400 120">
    <path id="realtime-line-path" fill="none" stroke="#8b5cf6" stroke-width="3"></path>
  </svg>
</div>

<div class="chart-card annual-heatmap-card">
  <div class="annual-grid" id="annual-grid"></div>
  <div class="heatmap-detail-card">Hover over cells to see activity</div>
</div>

<div class="chart-card split-card">
  <div class="split-row">
    <span class="split-label">Direct</span>
    <div class="split-track"><div class="split-fill split-cyan" style="width: 42%"></div></div>
    <span class="split-value">42%</span>
  </div>
</div>

<div class="chart-card gauge-card">
  <div class="gauge-ring" style="background: conic-gradient(#10b981 0% 78%, rgba(255,255,255,0.08) 78% 100%);">
    <div class="gauge-center">
      <span class="gauge-value">78%</span>
      <span class="gauge-label">On Track</span>
    </div>
  </div>
</div>

<svg class="comparison-svg" viewBox="0 0 420 150">
  <path d="M0,110 Q60,70 105,82 T210,52 T315,64 T420,28" stroke="#06b6d4" stroke-width="4" fill="none"></path>
  <path d="M0,125 Q60,110 105,118 T210,96 T315,104 T420,80" stroke="#8b5cf6" stroke-width="4" fill="none" stroke-dasharray="8 8"></path>
</svg>

<div class="funnel-stack">
  <div class="funnel-step step-1"><span>Visits</span><strong>12.4K</strong></div>
  <div class="funnel-step step-2"><span>Signups</span><strong>6.8K</strong></div>
</div>

<div class="bubble-grid">
  <div class="bubble-node size-lg cyan">A</div>
  <div class="bubble-node size-md purple">B</div>
  <div class="bubble-node size-sm green">C</div>
</div>