Fix regression my-account menu overflow-x on screen width < 800px (#2707)

[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 eeab3a8dd60c9b84ebfac61674c1d0c784b83039..75d6d8acd0c4f21868e45fd0100d92b3171d6035 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
@@ -8,7 +8,8 @@ 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'
+import { min, minBy, max, maxBy } from 'lodash-es'
+import { ChartData } from 'chart.js'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -17,7 +18,7 @@ import { minBy, maxBy } from 'lodash-es'
 })
 export class MyAccountVideoChannelsComponent implements OnInit {
   videoChannels: VideoChannel[] = []
-  videoChannelsData: any[]
+  videoChannelsChartData: ChartData[]
   videoChannelsMinimumDailyViews = 0
   videoChannelsMaximumDailyViews: number
 
@@ -55,9 +56,9 @@ export class MyAccountVideoChannelsComponent implements OnInit {
           display: false,
           ticks: {
             min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
-            max: this.videoChannelsMaximumDailyViews
+            max: Math.max(1, this.videoChannelsMaximumDailyViews)
           }
-        }],
+        }]
       },
       layout: {
         padding: {
@@ -68,7 +69,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
         }
       },
       elements: {
-        point:{
+        point: {
           radius: 0
         }
       },
@@ -76,14 +77,12 @@ export class MyAccountVideoChannelsComponent implements OnInit {
         mode: 'index',
         intersect: false,
         custom: function (tooltip: any) {
-          if (!tooltip) return;
-          // disable displaying the color box;
-          tooltip.displayColors = false;
+          if (!tooltip) return
+          // disable displaying the color box
+          tooltip.displayColors = false
         },
         callbacks: {
-          label: function (tooltip: any, data: any) {
-            return `${tooltip.value} views`;
-          }
+          label: (tooltip: any, data: any) => `${tooltip.value} views`
         }
       },
       hover: {
@@ -124,10 +123,12 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account)))
+        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
         .subscribe(res => {
           this.videoChannels = res.data
-          this.videoChannelsData = this.videoChannels.map(v => ({
+
+          // chart data
+          this.videoChannelsChartData = this.videoChannels.map(v => ({
             labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
             datasets: [
               {
@@ -137,9 +138,22 @@ export class MyAccountVideoChannelsComponent implements OnInit {
                   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
+          } as ChartData))
+
+          // chart options that depend on chart data:
+          // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
+          this.videoChannelsMinimumDailyViews = min(
+            this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
+          this.videoChannelsMaximumDailyViews = max(
+            this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
         })
   }
 }