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">
10 <my-help *
ngIf=
"card.help">
11 <ng-template ptTemplate=
"customHtml">{{ card.help }}
</ng-template>
14 <div class=
"value">{{ card.value }}
</div>
15 <div *
ngIf=
"card.moreInfo" class=
"more-info">{{ card.moreInfo }}
</div>
19 <my-embed [video]=
"video"></my-embed>
22 <div class=
"stats-with-date">
23 <div class=
"overall-stats">
24 <div class=
"date-filter-wrapper">
25 <h2>{{ getViewersStatsTitle() }}
</h2>
27 <my-select-options [(ngModel)]=
"currentDateFilter" (ngModelChange)=
"onDateFilterChange()" [items]=
"dateFilters"></my-select-options>
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>
39 <div class=
"timeserie">
40 <div ngbNav #
nav=
"ngbNav" [activeId]=
"activeGraphId" (activeIdChange)=
"onChartChange($event)" class=
"nav-tabs">
42 <ng-container *
ngFor=
"let availableChart of availableCharts" [ngbNavItem]=
"availableChart.id">
44 <span>{{ availableChart.label }}
</span>
47 <ng-template ngbNavContent
>
48 <div class=
"chart-container" [ngStyle]=
"{ 'min-height': chartHeight }">
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"
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>
60 <my-button i18n *
ngIf=
"hasZoom()" (click)=
"resetZoom()">Reset zoom
</my-button>
66 <div [ngbNavOutlet]=
"nav"></div>