Kavita/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html

<ng-container *transloco="let t; read:'server-stats'">
  <div class="container-fluid">
    <div class="row g-0 mt-4 mb-3 d-flex justify-content-around" *ngIf="stats$ | async as stats">
      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-series-label')" [clickable]="false" fontClasses="fa-solid fa-book-open" [title]="t('total-series-tooltip', {count: stats.seriesCount | number})">
            {{t('count-series', {num: stats.seriesCount | number})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container >
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-volumes-label')" [clickable]="false" fontClasses="fas fa-book" [title]="t('total-volumes-tooltip', {count: stats.volumeCount | number})">
            {{t('count-volume', {num: stats.volumeCount | number})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-files-label')" [clickable]="false" fontClasses="fa-regular fa-file" [title]="t('total-files-tooltip', {count: stats.totalFiles | number})">
            {{t('file-volume', {num: stats.totalFiles | number})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-size-label')" [clickable]="false" fontClasses="fa-solid fa-scale-unbalanced" [title]="t('total-size-label')">
            {{stats.totalSize | bytes}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title label="Total Genres" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-genres-tooltip', {count: stats.totalGenres | number})" (click)="openGenreList();$event.stopPropagation();">
            {{t('genre-count', {num: stats.totalGenres | compactNumber})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-tags-label')" [clickable]="true" fontClasses="fa-solid fa-tags" [title]="t('total-tags-tooltip', {count: stats.totalTags | number})" (click)="openTagList();$event.stopPropagation();">
            {{t('tag-count', {num: stats.totalTags | compactNumber})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-people-label')" [clickable]="true" fontClasses="fa-solid fa-user-tag" [title]="t('total-people-tooltip', {count: stats.totalPeople | number})" (click)="openPeopleList();$event.stopPropagation();">
            {{t('people-count', {num: stats.totalPeople | compactNumber})}}
          </app-icon-and-title>
        </div>
        <div class="vr d-none d-lg-block m-2"></div>
      </ng-container>

      <ng-container>
        <div class="col-auto mb-2">
          <app-icon-and-title [label]="t('total-read-time-label')" [clickable]="false" fontClasses="fas fa-eye" [title]="t('total-read-time-tooltip', {count: stats.totalReadingTime | number})">
            {{stats.totalReadingTime | timeDuration}}
          </app-icon-and-title>
        </div>
      </ng-container>
    </div>

    <div class="grid row g-0 pt-2 pb-2 d-flex justify-content-around">
      <div class="col-auto">
        <app-stat-list [data$]="releaseYears$" [title]="t('release-years-title')" [label]="t('series')"></app-stat-list>
      </div>
      <div class="col-auto">
        <app-stat-list [data$]="mostActiveUsers$" [title]="t('most-active-users-title')" [label]="t('reads')"></app-stat-list>
      </div>
      <div class="col-auto">
        <app-stat-list [data$]="mostActiveLibrary$" [title]="t('popular-libraries-title')" [label]="t('reads')"></app-stat-list>
      </div>
      <div class="col-auto">
        <app-stat-list [data$]="mostActiveSeries$" [title]="t('popular-series-title')" [image]="seriesImage" [handleClick]="openSeries">
        </app-stat-list>
      </div>
      <div class="col-auto">
        <app-stat-list [data$]="recentlyRead$" [title]="t('recently-read-title')" [image]="seriesImage" [handleClick]="openSeries"></app-stat-list>
      </div>
    </div>

    <ng-container *ngIf="breakpoint$ | async as bp">
      <div class="row g-0 pt-2 pb-2">
        <app-top-readers></app-top-readers>
      </div>

      <div class="row g-0 pt-4 pb-2">
        <div class="col-lg-6 col-md-12 mb-md-5">
          <app-file-breakdown-stats></app-file-breakdown-stats>
        </div>
        <div class="col-lg-6 col-md-12">
          <app-publication-status-stats></app-publication-status-stats>
        </div>
      </div>

      <div class="row g-0 pt-4 pb-2">
        <div class="col-md-12 col-sm-12 mt-4 pt-2">
          <app-reading-activity [isAdmin]="true"></app-reading-activity>
        </div>
      </div>

      <div class="row g-0 pt-4 pb-2">
        <div class="col-md-12 col-sm-12 mt-4 pt-2">
          <app-day-breakdown></app-day-breakdown>
        </div>
      </div>
    </ng-container>

  </div>

</ng-container>