1 <div class=
"margin-content">
2 <h1 class=
"title-page title-page-single" i18n
>{{ video.name }}
</h1>
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>
13 <my-embed [video]=
"video"></my-embed>
16 <div class=
"stats-with-date">
17 <div class=
"overall-stats">
18 <div class=
"date-filter-wrapper">
19 <h2>{{ getViewersStatsTitle() }}
</h2>
21 <my-select-options [(ngModel)]=
"currentDateFilter" (ngModelChange)=
"onDateFilterChange()" [items]=
"dateFilters"></my-select-options>
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>
33 <div class=
"timeserie">
34 <div ngbNav #
nav=
"ngbNav" [activeId]=
"activeGraphId" (activeIdChange)=
"onChartChange($event)" class=
"nav-tabs">
36 <ng-container *
ngFor=
"let availableChart of availableCharts" [ngbNavItem]=
"availableChart.id">
38 <span>{{ availableChart.label }}
</span>
41 <ng-template ngbNavContent
>
42 <div class=
"chart-container" [ngStyle]=
"{ 'min-height': chartHeight }">
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"
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>
54 <my-button i18n *
ngIf=
"hasZoom()" (click)=
"resetZoom()">Reset zoom
</my-button>
60 <div [ngbNavOutlet]=
"nav"></div>