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