<div class="panel">
  <h2><i class="fas fa-chart-line"></i> 颜色流行趋势</h2>
  <p class="section-desc">查看最受欢迎的颜色搭配和当前流行趋势</p>
  
  <div *ngIf="isLoading" class="loading-container">
    <div class="spinner"></div>
    <p>正在加载数据...</p>
  </div>

  <div *ngIf="!isLoading">
    <h3>本周最受欢迎颜色</h3>
    <div class="chart-container">
      <canvas #colorChart></canvas>
    </div>
    
    <h3>热门搭配方案</h3>
    <div class="color-stats">
      <div *ngFor="let combo of popularCombinations" class="color-stat">
        <div class="color-box" [style]="getGradientStyle(combo.colors)">
          <i [class]="combo.icon"></i>
        </div>
        <div class="stat-name">{{ combo.name }}</div>
        <div class="stat-count">{{ combo.count }}</div>
      </div>
    </div>
  </div>
</div>