diff options
Diffstat (limited to 'client/src/app/+my-account')
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' | |||
8 | import { User } from '@app/shared' | 8 | import { User } from '@app/shared' |
9 | import { flatMap } from 'rxjs/operators' | 9 | import { flatMap } from 'rxjs/operators' |
10 | import { I18n } from '@ngx-translate/i18n-polyfill' | 10 | import { I18n } from '@ngx-translate/i18n-polyfill' |
11 | import { minBy, maxBy } from 'lodash-es' | 11 | import { min, minBy, max, maxBy } from 'lodash-es' |
12 | import { 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 | }) |
18 | export class MyAccountVideoChannelsComponent implements OnInit { | 19 | export 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 | } |