diff options
author | Chocobozzz <me@florianbigard.com> | 2022-05-06 14:23:02 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-05-06 14:23:02 +0200 |
commit | f40712abbbb74e51f06037ef02757c42736bccf8 (patch) | |
tree | 4b130c6387f9687d52d570907eb1bbac6bc04b61 /client/src/app/+stats/video/video-stats.component.html | |
parent | 49f0468d44468528c2fb2c8b0efd19cdaeeec43d (diff) | |
download | PeerTube-f40712abbbb74e51f06037ef02757c42736bccf8.tar.gz PeerTube-f40712abbbb74e51f06037ef02757c42736bccf8.tar.zst PeerTube-f40712abbbb74e51f06037ef02757c42736bccf8.zip |
Add ability to filter overall video stats by date
Diffstat (limited to 'client/src/app/+stats/video/video-stats.component.html')
-rw-r--r-- | client/src/app/+stats/video/video-stats.component.html | 78 |
1 files changed, 48 insertions, 30 deletions
diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html index 400c049eb..e5412f1b8 100644 --- a/client/src/app/+stats/video/video-stats.component.html +++ b/client/src/app/+stats/video/video-stats.component.html | |||
@@ -1,9 +1,9 @@ | |||
1 | <div class="margin-content"> | 1 | <div class="margin-content"> |
2 | <h1 class="title-page title-page-single" i18n>Stats for {{ video.name }}</h1> | 2 | <h1 class="title-page title-page-single" i18n>{{ video.name }}</h1> |
3 | 3 | ||
4 | <div class="overall-stats-embed"> | 4 | <div class="stats-embed"> |
5 | <div class="overall-stats"> | 5 | <div class="global-stats"> |
6 | <div *ngFor="let card of overallStatCards" class="card overall-stats-card"> | 6 | <div *ngFor="let card of globalStatsCards" class="card stats-card"> |
7 | <div class="label">{{ card.label }}</div> | 7 | <div class="label">{{ card.label }}</div> |
8 | <div class="value">{{ card.value }}</div> | 8 | <div class="value">{{ card.value }}</div> |
9 | <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div> | 9 | <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div> |
@@ -13,33 +13,51 @@ | |||
13 | <my-embed [video]="video"></my-embed> | 13 | <my-embed [video]="video"></my-embed> |
14 | </div> | 14 | </div> |
15 | 15 | ||
16 | <div class="timeserie"> | 16 | <div class="stats-with-date"> |
17 | <div ngbNav #nav="ngbNav" [activeId]="activeGraphId" (activeIdChange)="onChartChange($event)" class="nav-tabs"> | 17 | <div class="overall-stats"> |
18 | 18 | <div class="date-filter-wrapper"> | |
19 | <ng-container *ngFor="let availableChart of availableCharts" [ngbNavItem]="availableChart.id"> | 19 | <h2>{{ getViewersStatsTitle() }}</h2> |
20 | <a ngbNavLink i18n> | 20 | |
21 | <span>{{ availableChart.label }}</span> | 21 | <my-select-options [(ngModel)]="currentDateFilter" (ngModelChange)="onDateFilterChange()" [items]="dateFilters"></my-select-options> |
22 | </a> | 22 | </div> |
23 | 23 | ||
24 | <ng-template ngbNavContent> | 24 | <div class="cards"> |
25 | <div class="chart-container" [ngStyle]="{ 'min-height': chartHeight }"> | 25 | <div *ngFor="let card of overallStatCards" class="card stats-card"> |
26 | <p-chart | 26 | <div class="label">{{ card.label }}</div> |
27 | *ngIf="chartOptions[availableChart.id]" | 27 | <div class="value">{{ card.value }}</div> |
28 | [height]="chartHeight" [width]="chartWidth" | 28 | <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div> |
29 | [type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data" | 29 | </div> |
30 | [plugins]="chartPlugins" | 30 | </div> |
31 | ></p-chart> | ||
32 | </div> | ||
33 | |||
34 | <div class="zoom-container"> | ||
35 | <span *ngIf="!hasZoom() && availableChart.zoomEnabled" i18n class="description">You can select a part of the graph to zoom in</span> | ||
36 | |||
37 | <my-button i18n *ngIf="hasZoom()" (click)="resetZoom()">Reset zoom</my-button> | ||
38 | </div> | ||
39 | </ng-template> | ||
40 | </ng-container> | ||
41 | </div> | 31 | </div> |
42 | 32 | ||
43 | <div [ngbNavOutlet]="nav"></div> | 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> | ||
44 | </div> | 62 | </div> |
45 | </div> | 63 | </div> |