1 import { ChartConfiguration, ChartData, PluginOptionsByType, Scale, TooltipItem } from 'chart.js'
2 import zoomPlugin from 'chartjs-plugin-zoom'
3 import { Observable, of } from 'rxjs'
4 import { SelectOptionsItem } from 'src/types'
5 import { Component, OnInit } from '@angular/core'
6 import { ActivatedRoute } from '@angular/router'
7 import { Notifier, PeerTubeRouterService } from '@app/core'
8 import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main'
9 import { LiveVideoService } from '@app/shared/shared-video-live'
10 import { secondsToTime } from '@shared/core-utils'
11 import { HttpStatusCode } from '@shared/models/http'
17 VideoStatsTimeserieMetric
18 } from '@shared/models/videos'
19 import { VideoStatsService } from './video-stats.service'
21 type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries'
23 type CountryData = { name: string, viewers: number }[]
25 type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData
26 type ChartBuilderResult = {
28 plugins: Partial<PluginOptionsByType<'line' | 'bar'>>
29 data: ChartData<'line' | 'bar'>
30 displayLegend: boolean
33 type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
36 templateUrl: './video-stats.component.html',
37 styleUrls: [ './video-stats.component.scss' ],
38 providers: [ NumberFormatterPipe ]
40 export class VideoStatsComponent implements OnInit {
41 // Cannot handle date filters
42 globalStatsCards: Card[] = []
43 // Can handle date filters
44 overallStatCards: Card[] = []
46 chartOptions: { [ id in ActiveGraphId ]?: ChartConfiguration<'line' | 'bar'> } = {}
48 chartWidth: string = null
50 availableCharts: { id: string, label: string, zoomEnabled: boolean }[] = []
51 activeGraphId: ActiveGraphId = 'viewers'
55 countries: CountryData = []
57 chartPlugins = [ zoomPlugin ]
59 currentDateFilter = 'all'
60 dateFilters: SelectOptionsItem[] = [
63 label: $localize`Since the video publication`
67 private statsStartDate: Date
68 private statsEndDate: Date
70 private chartIngestData: { [ id in ActiveGraphId ]?: ChartIngestData } = {}
73 private route: ActivatedRoute,
74 private notifier: Notifier,
75 private statsService: VideoStatsService,
76 private peertubeRouter: PeerTubeRouterService,
77 private numberFormatter: NumberFormatterPipe,
78 private liveService: LiveVideoService
82 this.video = this.route.snapshot.data.video
84 this.availableCharts = [
87 label: $localize`Viewers`,
91 id: 'aggregateWatchTime',
92 label: $localize`Watch time`,
97 label: $localize`Countries`,
102 if (!this.video.isLive) {
103 this.availableCharts.push({
105 label: $localize`Retention`,
110 const snapshotQuery = this.route.snapshot.queryParams
111 if (snapshotQuery.startDate || snapshotQuery.endDate) {
112 this.addAndSelectCustomDateFilter()
115 this.route.queryParams.subscribe(params => {
116 this.statsStartDate = params.startDate
117 ? new Date(params.startDate)
120 this.statsEndDate = params.endDate
121 ? new Date(params.endDate)
125 this.loadOverallStats()
128 this.loadDateFilters()
132 return this.countries.length !== 0
135 onChartChange (newActive: ActiveGraphId) {
136 this.activeGraphId = newActive
142 this.peertubeRouter.silentNavigate([], {})
143 this.removeAndResetCustomDateFilter()
147 return !!this.statsStartDate && this.isTimeserieGraph(this.activeGraphId)
150 getViewersStatsTitle () {
151 if (this.statsStartDate && this.statsEndDate) {
152 return $localize`Viewers stats between ${this.statsStartDate.toLocaleString()} and ${this.statsEndDate.toLocaleString()}`
155 return $localize`Viewers stats`
158 onDateFilterChange () {
159 if (this.currentDateFilter === 'all') {
160 return this.resetZoom()
163 const idParts = this.currentDateFilter.split('|')
164 if (idParts.length === 2) {
165 return this.peertubeRouter.silentNavigate([], { startDate: idParts[0], endDate: idParts[1] })
169 private isTimeserieGraph (graphId: ActiveGraphId) {
170 return graphId === 'aggregateWatchTime' || graphId === 'viewers'
173 private loadOverallStats () {
174 this.statsService.getOverallStats({ videoId: this.video.uuid, startDate: this.statsStartDate, endDate: this.statsEndDate })
177 this.countries = res.countries.slice(0, 10).map(c => ({
178 name: this.countryCodeToName(c.isoCode),
182 this.buildOverallStatCard(res)
185 error: err => this.notifier.error(err.message)
189 private loadDateFilters () {
190 if (this.video.isLive) return this.loadLiveDateFilters()
192 return this.loadVODDateFilters()
195 private loadLiveDateFilters () {
196 this.liveService.listSessions(this.video.id)
198 next: ({ data }) => {
199 const newFilters = data.map(session => this.buildLiveFilter(session))
201 this.dateFilters = this.dateFilters.concat(newFilters)
204 error: err => this.notifier.error(err.message)
208 private loadVODDateFilters () {
209 this.liveService.findLiveSessionFromVOD(this.video.id)
212 this.dateFilters = this.dateFilters.concat([ this.buildLiveFilter(session) ])
216 if (err.status === HttpStatusCode.NOT_FOUND_404) return
218 this.notifier.error(err.message)
223 private buildLiveFilter (session: LiveVideoSession) {
225 id: session.startDate + '|' + session.endDate,
226 label: $localize`Live as of ${new Date(session.startDate).toLocaleString()}`
230 private addAndSelectCustomDateFilter () {
231 const exists = this.dateFilters.some(d => d.id === 'custom')
234 this.dateFilters = this.dateFilters.concat([
237 label: $localize`Custom dates`
242 this.currentDateFilter = 'custom'
245 private removeAndResetCustomDateFilter () {
246 this.dateFilters = this.dateFilters.filter(d => d.id !== 'custom')
248 this.currentDateFilter = 'all'
251 private buildOverallStatCard (overallStats: VideoStatsOverall) {
252 this.globalStatsCards = [
254 label: $localize`Views`,
255 value: this.numberFormatter.transform(this.video.views),
256 help: $localize`A view means that someone watched the video for at least 30 seconds`
259 label: $localize`Likes`,
260 value: this.numberFormatter.transform(this.video.likes)
264 this.overallStatCards = [
266 label: $localize`Average watch time`,
267 value: secondsToTime(overallStats.averageWatchTime)
270 label: $localize`Total watch time`,
271 value: secondsToTime(overallStats.totalWatchTime)
274 label: $localize`Peak viewers`,
275 value: this.numberFormatter.transform(overallStats.viewersPeak),
276 moreInfo: overallStats.viewersPeak !== 0
277 ? $localize`at ${new Date(overallStats.viewersPeakDate).toLocaleString()}`
281 label: $localize`Unique viewers`,
282 value: this.numberFormatter.transform(overallStats.totalViewers)
286 if (overallStats.countries.length !== 0) {
287 this.overallStatCards.push({
288 label: $localize`Countries`,
289 value: this.numberFormatter.transform(overallStats.countries.length)
294 private loadChart () {
295 const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = {
296 retention: this.statsService.getRetentionStats(this.video.uuid),
298 aggregateWatchTime: this.statsService.getTimeserieStats({
299 videoId: this.video.uuid,
300 startDate: this.statsStartDate,
301 endDate: this.statsEndDate,
302 metric: 'aggregateWatchTime'
304 viewers: this.statsService.getTimeserieStats({
305 videoId: this.video.uuid,
306 startDate: this.statsStartDate,
307 endDate: this.statsEndDate,
311 countries: of(this.countries)
314 obsBuilders[this.activeGraphId].subscribe({
316 this.chartIngestData[this.activeGraphId] = res
318 this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId)
321 error: err => this.notifier.error(err.message)
325 private buildChartOptions (graphId: ActiveGraphId): ChartConfiguration<'line' | 'bar'> {
326 const dataBuilders: {
327 [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult
329 retention: (rawData: VideoStatsRetention) => this.buildRetentionChartOptions(rawData),
330 aggregateWatchTime: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
331 viewers: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
332 countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData)
335 const { type, data, displayLegend, plugins } = dataBuilders[graphId](this.chartIngestData[graphId])
349 callback: function (value) {
350 return self.formatXTick({
353 data: self.chartIngestData[graphId] as VideoStatsTimeserie,
363 max: this.activeGraphId === 'retention'
368 callback: value => this.formatYTick({ graphId, value })
375 display: displayLegend
379 title: items => this.formatTooltipTitle({ graphId, items }),
380 label: value => this.formatYTick({ graphId, value: value.raw as number | string })
390 private buildRetentionChartOptions (rawData: VideoStatsRetention): ChartBuilderResult {
391 const labels: string[] = []
392 const data: number[] = []
394 for (const d of rawData.data) {
395 labels.push(secondsToTime(d.second))
396 data.push(d.retentionPercent)
400 type: 'line' as 'line',
402 displayLegend: false,
405 ...this.buildDisabledZoomPlugin()
413 borderColor: this.buildChartColor()
420 private buildTimeserieChartOptions (rawData: VideoStatsTimeserie): ChartBuilderResult {
421 const labels: string[] = []
422 const data: number[] = []
424 for (const d of rawData.data) {
430 type: 'line' as 'line',
432 displayLegend: false,
447 onZoomComplete: ({ chart }) => {
448 const { min, max } = chart.scales.x
450 const startDate = rawData.data[min].date
451 const endDate = this.buildZoomEndDate(rawData.groupInterval, rawData.data[max].date)
453 this.peertubeRouter.silentNavigate([], { startDate, endDate })
454 this.addAndSelectCustomDateFilter()
470 borderColor: this.buildChartColor()
477 private buildCountryChartOptions (rawData: CountryData): ChartBuilderResult {
478 const labels: string[] = []
479 const data: number[] = []
481 for (const d of rawData) {
487 type: 'bar' as 'bar',
492 ...this.buildDisabledZoomPlugin()
499 label: $localize`Viewers`,
500 backgroundColor: this.buildChartColor(),
509 private buildChartColor () {
510 return getComputedStyle(document.body).getPropertyValue('--mainColorLighter')
513 private formatXTick (options: {
514 graphId: ActiveGraphId
515 value: number | string
516 data: VideoStatsTimeserie
519 const { graphId, value, data, scale } = options
521 const label = scale.getLabelForValue(value as number)
523 if (!this.isTimeserieGraph(graphId)) {
527 const date = new Date(label)
529 if (data.groupInterval.match(/ month?$/)) {
530 return date.toLocaleDateString([], { month: 'numeric' })
533 if (data.groupInterval.match(/ days?$/)) {
534 return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' })
537 if (data.groupInterval.match(/ hours?$/)) {
538 return date.toLocaleTimeString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })
541 return date.toLocaleTimeString([], { hour: 'numeric', minute: 'numeric' })
544 private formatYTick (options: {
545 graphId: ActiveGraphId
546 value: number | string
548 const { graphId, value } = options
550 if (graphId === 'retention') return value + ' %'
551 if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
553 return value.toLocaleString()
556 private formatTooltipTitle (options: {
557 graphId: ActiveGraphId
558 items: TooltipItem<any>[]
560 const { graphId, items } = options
561 const item = items[0]
563 if (this.isTimeserieGraph(graphId)) return new Date(item.label).toLocaleString()
568 private countryCodeToName (code: string) {
569 const intl: any = Intl
570 if (!intl.DisplayNames) return code
572 const regionNames = new intl.DisplayNames([], { type: 'region' })
574 return regionNames.of(code)
577 private buildDisabledZoomPlugin () {
595 private buildZoomEndDate (groupInterval: string, last: string) {
596 const date = new Date(last)
598 // Remove parts of the date we don't need
599 if (groupInterval.endsWith(' day') || groupInterval.endsWith(' days')) {
600 date.setHours(23, 59, 59)
601 } else if (groupInterval.endsWith(' hour') || groupInterval.endsWith(' hours')) {
602 date.setMinutes(59, 59)
607 return date.toISOString()