aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html2
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.ts28
2 files changed, 23 insertions, 7 deletions
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 @@
20 <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> 20 <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
21 21
22 <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end"> 22 <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
23 <p-chart *ngIf="videoChannelsData && videoChannelsData[i]" type="line" [data]="videoChannelsData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart> 23 <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
24 </div> 24 </div>
25 </div> 25 </div>
26 26
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'
8import { User } from '@app/shared' 8import { User } from '@app/shared'
9import { flatMap } from 'rxjs/operators' 9import { flatMap } from 'rxjs/operators'
10import { I18n } from '@ngx-translate/i18n-polyfill' 10import { I18n } from '@ngx-translate/i18n-polyfill'
11import { minBy, maxBy } from 'lodash-es' 11import { min, minBy, max, maxBy } from 'lodash-es'
12import { ChartData } from 'chart.js'
12 13
13@Component({ 14@Component({
14 selector: 'my-account-video-channels', 15 selector: 'my-account-video-channels',
@@ -17,7 +18,7 @@ import { minBy, maxBy } from 'lodash-es'
17}) 18})
18export class MyAccountVideoChannelsComponent implements OnInit { 19export class MyAccountVideoChannelsComponent implements OnInit {
19 videoChannels: VideoChannel[] = [] 20 videoChannels: VideoChannel[] = []
20 videoChannelsData: any[] 21 videoChannelsChartData: ChartData[]
21 videoChannelsMinimumDailyViews = 0 22 videoChannelsMinimumDailyViews = 0
22 videoChannelsMaximumDailyViews: number 23 videoChannelsMaximumDailyViews: number
23 24
@@ -125,7 +126,9 @@ export class MyAccountVideoChannelsComponent implements OnInit {
125 .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true))) 126 .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true)))
126 .subscribe(res => { 127 .subscribe(res => {
127 this.videoChannels = res.data 128 this.videoChannels = res.data
128 this.videoChannelsData = this.videoChannels.map(v => ({ 129
130 // chart data
131 this.videoChannelsChartData = this.videoChannels.map(v => ({
129 labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()), 132 labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
130 datasets: [ 133 datasets: [
131 { 134 {
@@ -135,9 +138,22 @@ export class MyAccountVideoChannelsComponent implements OnInit {
135 borderColor: "#c6c6c6" 138 borderColor: "#c6c6c6"
136 } 139 }
137 ] 140 ]
138 })) 141 } as ChartData))
139 this.videoChannelsMinimumDailyViews = minBy(this.videoChannels.map(v => minBy(v.viewsPerDay, day => day.views)), day => day.views).views 142
140 this.videoChannelsMaximumDailyViews = maxBy(this.videoChannels.map(v => maxBy(v.viewsPerDay, day => day.views)), day => day.views).views 143 // chart options that depend on chart data:
144 // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
145 this.videoChannelsMinimumDailyViews = min(
146 this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
147 v.viewsPerDay,
148 day => day.views
149 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
150 )
151 this.videoChannelsMaximumDailyViews = max(
152 this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
153 v.viewsPerDay,
154 day => day.views
155 ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
156 )
141 }) 157 })
142 } 158 }
143} 159}