client/src/app/+stats/video/video-stats.component.html

   1 <div class="margin-content">
   2   <h1 class="title-page title-page-single" i18n>{{ video.name }}</h1>
   3
   4   <div class="stats-embed">
   5     <div class="global-stats">
   6       <div *ngFor="let card of globalStatsCards" class="card stats-card">
   7         <div class="label">{{ card.label }}</div>
   8         <div class="value">{{ card.value }}</div>
   9         <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div>
  10       </div>
  11     </div>
  12
  13     <my-embed [video]="video"></my-embed>
  14   </div>
  15
  16   <div class="stats-with-date">
  17     <div class="overall-stats">
  18       <div class="date-filter-wrapper">
  19         <h2>{{ getViewersStatsTitle() }}</h2>
  20
  21         <my-select-options [(ngModel)]="currentDateFilter" (ngModelChange)="onDateFilterChange()" [items]="dateFilters"></my-select-options>
  22       </div>
  23
  24       <div class="cards">
  25         <div *ngFor="let card of overallStatCards" class="card stats-card">
  26           <div class="label">{{ card.label }}</div>
  27           <div class="value">{{ card.value }}</div>
  28           <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div class="timeserie">
  34       <div ngbNav #nav="ngbNav" [activeId]="activeGraphId" (activeIdChange)="onChartChange($event)" class="nav-tabs">
  35
  36         <ng-container *ngFor="let availableChart of availableCharts" [ngbNavItem]="availableChart.id">
  37           <a ngbNavLink i18n>
  38             <span>{{ availableChart.label }}</span>
  39           </a>
  40
  41           <ng-template ngbNavContent>
  42             <div class="chart-container" [ngStyle]="{ 'min-height': chartHeight }">
  43               <p-chart
  44                 *ngIf="chartOptions[availableChart.id]"
  45                 [height]="chartHeight" [width]="chartWidth"
  46                 [type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data"
  47                 [plugins]="chartPlugins"
  48               ></p-chart>
  49             </div>
  50
  51             <div class="zoom-container">
  52               <span *ngIf="!hasZoom() && availableChart.zoomEnabled" i18n class="description">You can select a part of the graph to zoom in</span>
  53
  54               <my-button i18n *ngIf="hasZoom()" (click)="resetZoom()">Reset zoom</my-button>
  55             </div>
  56           </ng-template>
  57         </ng-container>
  58       </div>
  59
  60       <div [ngbNavOutlet]="nav"></div>
  61     </div>
  62   </div>
  63 </div>