oedb-backend/frontend/src/app/pages/stats/stats.html

<div class="stats-page">
  <div class="stats-header">
    <h1>Statistiques OEDB</h1>
    <p class="stats-subtitle">Analyse de {{events.length}} événements</p>
  </div>

  @if (isLoading) {
    <div class="loading">
      <div class="loading-spinner"></div>
      <p>Chargement des statistiques...</p>
    </div>
  } @else {
    <div class="stats-content">
      
      <!-- Top genres d'événements -->
      <section class="stats-section">
        <h2>📊 Genres d'événements les plus fréquents</h2>
        <div class="what-counts-list">
          @for (item of whatCounts; track item.what) {
            <div class="what-count-item" (click)="navigateToWhat(item.what)">
              <span class="what-emoji">{{item.emoji}}</span>
              <span class="what-name">{{item.label}}</span>
              <span class="what-count-badge">{{item.count}}</span>
            </div>
          }
        </div>
      </section>

      <!-- Histogramme de création par mois -->
      <section class="stats-section">
        <h2>📅 Histogramme de création des événements (par mois)</h2>
        <div class="histogram">
          @for (item of creationHistogram; track item.month) {
            <div class="histogram-bar-container">
              <div class="histogram-bar" [style.height.%]="(item.count / getMaxCount()) * 100" [title]="item.count + ' événements'">
                <span class="histogram-value">{{item.count}}</span>
              </div>
              <div class="histogram-label">{{formatMonth(item.month)}}</div>
            </div>
          }
        </div>
      </section>

      <!-- Histogramme de création par semaine -->
      <section class="stats-section">
        <h2>📅 Histogramme de création des événements (par semaine)</h2>
        <div class="histogram">
          @for (item of creationHistogramByWeek; track item.week) {
            <div class="histogram-bar-container">
              <div class="histogram-bar" [style.height.%]="(item.count / getMaxWeekCount()) * 100" [title]="item.count + ' événements'">
                <span class="histogram-value">{{item.count}}</span>
              </div>
              <div class="histogram-label">{{formatWeek(item.week)}}</div>
            </div>
          }
        </div>
      </section>

      <!-- Distribution des durées -->
      <section class="stats-section">
        <h2>⏱️ Répartition des durées (en jours)</h2>
        <div class="duration-chart">
          @for (item of durationDistribution; track item.days) {
            <div class="duration-bar-container">
              <div class="duration-bar" [style.width.%]="(item.count / getMaxDurationCount()) * 100" [title]="item.count + ' événements'">
                <span class="duration-label">{{item.days === '0' ? '0 jour' : item.days === '1' ? '1 jour' : item.days + ' jours'}}</span>
                <span class="duration-value">{{item.count}}</span>
              </div>
            </div>
          }
        </div>
      </section>

      <!-- Types de réunions -->
      <section class="stats-section">
        <h2>👥 Réunions et événements de personnes</h2>
        <div class="type-list">
          @for (item of meetingTypes; track item.what) {
            <div class="type-item" (click)="navigateToWhat(item.what)">
              <span class="type-emoji">{{item.emoji}}</span>
              <span class="type-label">{{item.label}}</span>
              <span class="type-count">{{item.count}}</span>
            </div>
          } @empty {
            <p class="empty-message">Aucun type de réunion trouvé</p>
          }
        </div>
      </section>

      <!-- Types de signalements -->
      <section class="stats-section">
        <h2>⚠️ Signalements et incidents</h2>
        <div class="type-list">
          @for (item of reportingTypes; track item.what) {
            <div class="type-item" (click)="navigateToWhat(item.what)">
              <span class="type-emoji">{{item.emoji}}</span>
              <span class="type-label">{{item.label}}</span>
              <span class="type-count">{{item.count}}</span>
            </div>
          } @empty {
            <p class="empty-message">Aucun type de signalement trouvé</p>
          }
        </div>
      </section>

      <!-- 10 événements les plus récents -->
      <section class="stats-section">
        <h2>🆕 10 événements les plus récemment créés</h2>
        <div class="recent-events">
          @for (event of recentEvents; track event.id || event.properties?.what) {
            <div class="recent-event-item">
              <div class="recent-event-header">
                <span class="recent-event-title">{{event.properties?.label || event.properties?.name || 'Événement sans nom'}}</span>
                <span class="recent-event-date">{{formatDate(event.properties?.createdate || '')}}</span>
              </div>
              <div class="recent-event-meta">
                <span class="recent-event-what">{{event.properties && event.properties.what ? event.properties.what : 'non-défini'}}</span>
                @if (event.properties && event.properties.where) {
                  <span class="recent-event-where">📍 {{event.properties.where}}</span>
                }
              </div>
            </div>
          } @empty {
            <p class="empty-message">Aucun événement récent</p>
          }
        </div>
      </section>

    </div>
  }
</div>