diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts')
-rw-r--r-- | client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts | 78 |
1 files changed, 77 insertions, 1 deletions
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts index 3b01b6c9f..eeab3a8dd 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts | |||
@@ -4,9 +4,11 @@ import { AuthService } from '../../core/auth' | |||
4 | import { ConfirmService } from '../../core/confirm' | 4 | import { ConfirmService } from '../../core/confirm' |
5 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | 5 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' |
6 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | 6 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' |
7 | import { ScreenService } from '@app/shared/misc/screen.service' | ||
7 | import { User } from '@app/shared' | 8 | import { User } from '@app/shared' |
8 | import { flatMap } from 'rxjs/operators' | 9 | import { flatMap } from 'rxjs/operators' |
9 | import { I18n } from '@ngx-translate/i18n-polyfill' | 10 | import { I18n } from '@ngx-translate/i18n-polyfill' |
11 | import { minBy, maxBy } from 'lodash-es' | ||
10 | 12 | ||
11 | @Component({ | 13 | @Component({ |
12 | selector: 'my-account-video-channels', | 14 | selector: 'my-account-video-channels', |
@@ -15,6 +17,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
15 | }) | 17 | }) |
16 | export class MyAccountVideoChannelsComponent implements OnInit { | 18 | export class MyAccountVideoChannelsComponent implements OnInit { |
17 | videoChannels: VideoChannel[] = [] | 19 | videoChannels: VideoChannel[] = [] |
20 | videoChannelsData: any[] | ||
21 | videoChannelsMinimumDailyViews = 0 | ||
22 | videoChannelsMaximumDailyViews: number | ||
18 | 23 | ||
19 | private user: User | 24 | private user: User |
20 | 25 | ||
@@ -23,6 +28,7 @@ export class MyAccountVideoChannelsComponent implements OnInit { | |||
23 | private notifier: Notifier, | 28 | private notifier: Notifier, |
24 | private confirmService: ConfirmService, | 29 | private confirmService: ConfirmService, |
25 | private videoChannelService: VideoChannelService, | 30 | private videoChannelService: VideoChannelService, |
31 | private screenService: ScreenService, | ||
26 | private i18n: I18n | 32 | private i18n: I18n |
27 | ) {} | 33 | ) {} |
28 | 34 | ||
@@ -32,6 +38,61 @@ export class MyAccountVideoChannelsComponent implements OnInit { | |||
32 | this.loadVideoChannels() | 38 | this.loadVideoChannels() |
33 | } | 39 | } |
34 | 40 | ||
41 | get isInSmallView () { | ||
42 | return this.screenService.isInSmallView() | ||
43 | } | ||
44 | |||
45 | get chartOptions () { | ||
46 | return { | ||
47 | legend: { | ||
48 | display: false | ||
49 | }, | ||
50 | scales: { | ||
51 | xAxes: [{ | ||
52 | display: false | ||
53 | }], | ||
54 | yAxes: [{ | ||
55 | display: false, | ||
56 | ticks: { | ||
57 | min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), | ||
58 | max: this.videoChannelsMaximumDailyViews | ||
59 | } | ||
60 | }], | ||
61 | }, | ||
62 | layout: { | ||
63 | padding: { | ||
64 | left: 15, | ||
65 | right: 15, | ||
66 | top: 10, | ||
67 | bottom: 0 | ||
68 | } | ||
69 | }, | ||
70 | elements: { | ||
71 | point:{ | ||
72 | radius: 0 | ||
73 | } | ||
74 | }, | ||
75 | tooltips: { | ||
76 | mode: 'index', | ||
77 | intersect: false, | ||
78 | custom: function (tooltip: any) { | ||
79 | if (!tooltip) return; | ||
80 | // disable displaying the color box; | ||
81 | tooltip.displayColors = false; | ||
82 | }, | ||
83 | callbacks: { | ||
84 | label: function (tooltip: any, data: any) { | ||
85 | return `${tooltip.value} views`; | ||
86 | } | ||
87 | } | ||
88 | }, | ||
89 | hover: { | ||
90 | mode: 'index', | ||
91 | intersect: false | ||
92 | } | ||
93 | } | ||
94 | } | ||
95 | |||
35 | async deleteVideoChannel (videoChannel: VideoChannel) { | 96 | async deleteVideoChannel (videoChannel: VideoChannel) { |
36 | const res = await this.confirmService.confirmWithInput( | 97 | const res = await this.confirmService.confirmWithInput( |
37 | this.i18n( | 98 | this.i18n( |
@@ -64,6 +125,21 @@ export class MyAccountVideoChannelsComponent implements OnInit { | |||
64 | private loadVideoChannels () { | 125 | private loadVideoChannels () { |
65 | this.authService.userInformationLoaded | 126 | this.authService.userInformationLoaded |
66 | .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account))) | 127 | .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account))) |
67 | .subscribe(res => this.videoChannels = res.data) | 128 | .subscribe(res => { |
129 | this.videoChannels = res.data | ||
130 | this.videoChannelsData = this.videoChannels.map(v => ({ | ||
131 | labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()), | ||
132 | datasets: [ | ||
133 | { | ||
134 | label: this.i18n('Views for the day'), | ||
135 | data: v.viewsPerDay.map(day => day.views), | ||
136 | fill: false, | ||
137 | borderColor: "#c6c6c6" | ||
138 | } | ||
139 | ] | ||
140 | })) | ||
141 | this.videoChannelsMinimumDailyViews = minBy(this.videoChannels.map(v => minBy(v.viewsPerDay, day => day.views)), day => day.views).views | ||
142 | this.videoChannelsMaximumDailyViews = maxBy(this.videoChannels.map(v => maxBy(v.viewsPerDay, day => day.views)), day => day.views).views | ||
143 | }) | ||
68 | } | 144 | } |
69 | } | 145 | } |