Put channel stats behind withStats flag

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-video-channels / my-account-video-channels.component.ts

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 20c8798d15c340f5f6aa11fa1468aaca6facc277..27a1576213cb853be9797a877ad6783f19a8355e 100644 (file)
--- 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
@@ -1,11 +1,14 @@
 import { Component, OnInit } from '@angular/core'
-import { NotificationsService } from 'angular2-notifications'
+import { Notifier } from '@app/core'
 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',
@@ -14,14 +17,19 @@ import { flatMap } from 'rxjs/operators'
 })
 export class MyAccountVideoChannelsComponent implements OnInit {
   videoChannels: VideoChannel[] = []
+  videoChannelsData: any[]
+  videoChannelsMinimumDailyViews = 0
+  videoChannelsMaximumDailyViews: number
 
   private user: User
 
   constructor (
     private authService: AuthService,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private confirmService: ConfirmService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private screenService: ScreenService,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
@@ -30,29 +38,106 @@ 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: (tooltip: any, data: any) => `${tooltip.value} views`
+        }
+      },
+      hover: {
+        mode: 'index',
+        intersect: false
+      }
+    }
+  }
+
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
-      `Do you really want to delete ${videoChannel.displayName}? It will delete all videos uploaded in this channel too.`,
-      'Please type the name of the video channel to confirm',
+      this.i18n(
+        // tslint:disable
+        'Do you really want to delete {{channelDisplayName}}? It will delete all videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
+        { channelDisplayName: videoChannel.displayName, channelName: videoChannel.name }
+      ),
+      this.i18n(
+        'Please type the display name of the video channel ({{displayName}}) to confirm',
+        { displayName: videoChannel.displayName }
+      ),
       videoChannel.displayName,
-      'Delete'
+      this.i18n('Delete')
     )
     if (res === false) return
 
     this.videoChannelService.removeVideoChannel(videoChannel)
       .subscribe(
-        status => {
+        () => {
           this.loadVideoChannels()
-          this.notificationsService.success('Success', `Video channel ${videoChannel.name} deleted.`)
+          this.notifier.success(
+            this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
+          )
         },
 
-        error => this.notificationsService.error('Error', error.message)
+        error => this.notifier.error(error.message)
       )
   }
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account)))
-        .subscribe(res => this.videoChannels = res.data)
+        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
+        .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
+        })
   }
 }