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',
})
export class MyAccountVideoChannelsComponent implements OnInit {
videoChannels: VideoChannel[] = []
- videoChannelsData: any[]
+ videoChannelsChartData: ChartData[]
videoChannelsMinimumDailyViews = 0
videoChannelsMaximumDailyViews: number
display: false,
ticks: {
min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
- max: this.videoChannelsMaximumDailyViews
+ max: Math.max(1, this.videoChannelsMaximumDailyViews)
}
}]
},
const res = await this.confirmService.confirmWithInput(
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 }
+ 'Do you really want to delete {{channelDisplayName}}? It will delete {{videosCount}} videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
+ { channelDisplayName: videoChannel.displayName, videosCount: videoChannel.videosCount, channelName: videoChannel.name }
),
this.i18n(
'Please type the display name of the video channel ({{displayName}}) to confirm',
.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: [
{
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
+ )
})
}
}