]>
Commit | Line | Data |
---|---|---|
1 | <div class="margin-content"> | |
2 | <h1 class="title-page" 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> |