Use inner join and document code for viewr stats for channels

5 files changed, 33 insertions, 9 deletions

diff --git a/client/package.json b/client/package.json
index c6a5fa1bb..52647ce1d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -56,6 +56,7 @@
     "@ngx-loading-bar/router": "^4.2.0",
     "@ngx-meta/core": "^8.0.2",
     "@ngx-translate/i18n-polyfill": "^1.0.0",
+    "@types/chart.js": "^2.9.16",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
     "@types/hls.js": "^0.12.4",
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 94e74938b..03d45227e 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
@@ -20,7 +20,7 @@
       <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
 
       <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
-        <p-chart *ngIf="videoChannelsData && videoChannelsData[i]" type="line" [data]="videoChannelsData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
+        <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
       </div>
     </div>
 
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 27a157621..153fc0127 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
@@ -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
 
@@ -125,7 +126,9 @@ export class MyAccountVideoChannelsComponent implements OnInit {
         .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: [
               {
@@ -135,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
+          )
         })
   }
 }
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 c93af0ca5..617d6d44d 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, viewsPerTime } from '../../../../../shared/models/videos'
+import { VideoChannel as ServerVideoChannel, ViewsPerDate } from '../../../../../shared/models/videos'
 import { Actor } from '../actor/actor.model'
 import { Account } from '../../../../../shared/models/actors'
 
@@ -12,7 +12,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   ownerAccount?: Account
   ownerBy?: string
   ownerAvatarUrl?: string
-  viewsPerDay?: viewsPerTime[]
+  viewsPerDay?: ViewsPerDate[]
 
   constructor (hash: ServerVideoChannel) {
     super(hash)
diff --git a/client/yarn.lock b/client/yarn.lock
index b3f38a664..e34da3d6e 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1149,6 +1149,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/chart.js@^2.9.16":
+  version "2.9.16"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.16.tgz#ac9d268fa192c0ec0efd740f802683e3ed97642c"
+  integrity sha512-Mofg7xFIeAWME46YMVKHPCyUz2Z0KsVMNE1f4oF3T74mK3RiPQxOm9qzoeNTyMs6lpl4x0tiHL+Wsz2DHCxQlQ==
+  dependencies:
+    moment "^2.10.2"
+
 "@types/core-js@^2.5.2":
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.2.tgz#d4c25420044d4a5b65e00a82fc04b7824b62691f"