From 8165d00ac6263cf3c0d61d450960ef36635084ff Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 23 Mar 2020 10:14:05 +0100 Subject: View stats for channels --- .../my-account-video-channels.component.html | 11 +-- .../my-account-video-channels.component.scss | 8 ++- .../my-account-video-channels.component.ts | 78 +++++++++++++++++++++- client/src/app/+my-account/my-account.module.ts | 6 +- .../shared/video-channel/video-channel.model.ts | 7 +- 5 files changed, 101 insertions(+), 9 deletions(-) (limited to 'client') diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html index 2461aa3f5..94e74938b 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html @@ -6,7 +6,7 @@
-
+
Avatar @@ -17,13 +17,16 @@
{{ videoChannel.nameWithHost }}
-
{{ videoChannel.followersCount }} subscribers
+
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+ +
+ +
- - +
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index db0c7f94f..c0dc41f12 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -6,13 +6,14 @@ } ::ng-deep .action-button { - &.action-button-delete { + &.action-button-edit { margin-right: 10px; } } .video-channel { @include row-blocks; + padding-bottom: 0; img { @include avatar(80px); @@ -58,6 +59,11 @@ margin: 20px 0 50px; } +::ng-deep .chartjs-render-monitor { + position: relative; + top: 1px; +} + @media screen and (max-width: $small-view) { .video-channels-header { text-align: center; 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' import { ConfirmService } from '../../core/confirm' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { ScreenService } from '@app/shared/misc/screen.service' import { User } from '@app/shared' import { flatMap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' +import { minBy, maxBy } from 'lodash-es' @Component({ selector: 'my-account-video-channels', @@ -15,6 +17,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill' }) export class MyAccountVideoChannelsComponent implements OnInit { videoChannels: VideoChannel[] = [] + videoChannelsData: any[] + videoChannelsMinimumDailyViews = 0 + videoChannelsMaximumDailyViews: number private user: User @@ -23,6 +28,7 @@ export class MyAccountVideoChannelsComponent implements OnInit { private notifier: Notifier, private confirmService: ConfirmService, private videoChannelService: VideoChannelService, + private screenService: ScreenService, private i18n: I18n ) {} @@ -32,6 +38,61 @@ export class MyAccountVideoChannelsComponent implements OnInit { this.loadVideoChannels() } + get isInSmallView () { + return this.screenService.isInSmallView() + } + + get chartOptions () { + return { + legend: { + display: false + }, + scales: { + xAxes: [{ + display: false + }], + yAxes: [{ + display: false, + ticks: { + min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), + max: this.videoChannelsMaximumDailyViews + } + }], + }, + layout: { + padding: { + left: 15, + right: 15, + top: 10, + bottom: 0 + } + }, + elements: { + point:{ + radius: 0 + } + }, + tooltips: { + mode: 'index', + intersect: false, + custom: function (tooltip: any) { + if (!tooltip) return; + // disable displaying the color box; + tooltip.displayColors = false; + }, + callbacks: { + label: function (tooltip: any, data: any) { + return `${tooltip.value} views`; + } + } + }, + hover: { + mode: 'index', + intersect: false + } + } + } + async deleteVideoChannel (videoChannel: VideoChannel) { const res = await this.confirmService.confirmWithInput( this.i18n( @@ -64,6 +125,21 @@ export class MyAccountVideoChannelsComponent implements OnInit { private loadVideoChannels () { this.authService.userInformationLoaded .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account))) - .subscribe(res => this.videoChannels = res.data) + .subscribe(res => { + this.videoChannels = res.data + this.videoChannelsData = this.videoChannels.map(v => ({ + labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()), + datasets: [ + { + label: this.i18n('Views for the day'), + data: v.viewsPerDay.map(day => day.views), + fill: false, + borderColor: "#c6c6c6" + } + ] + })) + this.videoChannelsMinimumDailyViews = minBy(this.videoChannels.map(v => minBy(v.viewsPerDay, day => day.views)), day => day.views).views + this.videoChannelsMaximumDailyViews = maxBy(this.videoChannels.map(v => maxBy(v.viewsPerDay, day => day.views)), day => day.views).views + }) } } diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index f8c04cb4d..42b61bba6 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -1,7 +1,8 @@ -import { TableModule } from 'primeng/table' import { NgModule } from '@angular/core' +import { TableModule } from 'primeng/table' import { AutoCompleteModule } from 'primeng/autocomplete' import { InputSwitchModule } from 'primeng/inputswitch' +import { ChartModule } from 'primeng/chart' import { SharedModule } from '../shared' import { MyAccountRoutingModule } from './my-account-routing.module' import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' @@ -44,7 +45,8 @@ import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-setti SharedModule, TableModule, InputSwitchModule, - DragDropModule + DragDropModule, + ChartModule ], declarations: [ diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts index fec050cde..ee3288d7a 100644 --- a/client/src/app/shared/video-channel/video-channel.model.ts +++ b/client/src/app/shared/video-channel/video-channel.model.ts @@ -1,4 +1,4 @@ -import { VideoChannel as ServerVideoChannel } from '../../../../../shared/models/videos' +import { VideoChannel as ServerVideoChannel, viewsPerTime } from '../../../../../shared/models/videos' import { Actor } from '../actor/actor.model' import { Account } from '../../../../../shared/models/actors' @@ -12,6 +12,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { ownerAccount?: Account ownerBy?: string ownerAvatarUrl?: string + viewsPerDay?: viewsPerTime[] constructor (hash: ServerVideoChannel) { super(hash) @@ -23,6 +24,10 @@ export class VideoChannel extends Actor implements ServerVideoChannel { this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host) this.nameWithHostForced = Actor.CREATE_BY_STRING(this.name, this.host, true) + if (hash.viewsPerDay) { + this.viewsPerDay = hash.viewsPerDay.map(v => ({ ...v, date: new Date(v.date)})) + } + if (hash.ownerAccount) { this.ownerAccount = hash.ownerAccount this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) -- cgit v1.2.3