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 }
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`Of live 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)
258 label: $localize`Likes`,
259 value: this.numberFormatter.transform(this.video.likes)
263 this.overallStatCards = [
265 label: $localize`Average watch time`,
266 value: secondsToTime(overallStats.averageWatchTime)
269 label: $localize`Total watch time`,
270 value: secondsToTime(overallStats.totalWatchTime)
273 label: $localize`Peak viewers`,
274 value: this.numberFormatter.transform(overallStats.viewersPeak),
275 moreInfo: overallStats.viewersPeak !== 0
276 ? $localize`at ${new Date(overallStats.viewersPeakDate).toLocaleString()}`
281 if (overallStats.countries.length !== 0) {
282 this.overallStatCards.push({
283 label: $localize`Countries`,
284 value: this.numberFormatter.transform(overallStats.countries.length)
289 private loadChart () {
290 const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = {
291 retention: this.statsService.getRetentionStats(this.video.uuid),
293 aggregateWatchTime: this.statsService.getTimeserieStats({
294 videoId: this.video.uuid,
295 startDate: this.statsStartDate,
296 endDate: this.statsEndDate,
297 metric: 'aggregateWatchTime'
299 viewers: this.statsService.getTimeserieStats({
300 videoId: this.video.uuid,
301 startDate: this.statsStartDate,
302 endDate: this.statsEndDate,
306 countries: of(this.countries)
309 obsBuilders[this.activeGraphId].subscribe({
311 this.chartIngestData[this.activeGraphId] = res
313 this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId)
316 error: err => this.notifier.error(err.message)
320 private buildChartOptions (graphId: ActiveGraphId): ChartConfiguration<'line' | 'bar'> {
321 const dataBuilders: {
322 [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult
324 retention: (rawData: VideoStatsRetention) => this.buildRetentionChartOptions(rawData),
325 aggregateWatchTime: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
326 viewers: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
327 countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData)
330 const { type, data, displayLegend, plugins } = dataBuilders[graphId](this.chartIngestData[graphId])
344 callback: function (value) {
345 return self.formatXTick({
348 data: self.chartIngestData[graphId] as VideoStatsTimeserie,
358 max: this.activeGraphId === 'retention'
363 callback: value => this.formatYTick({ graphId, value })
370 display: displayLegend
374 title: items => this.formatTooltipTitle({ graphId, items }),
375 label: value => this.formatYTick({ graphId, value: value.raw as number | string })
385 private buildRetentionChartOptions (rawData: VideoStatsRetention): ChartBuilderResult {
386 const labels: string[] = []
387 const data: number[] = []
389 for (const d of rawData.data) {
390 labels.push(secondsToTime(d.second))
391 data.push(d.retentionPercent)
395 type: 'line' as 'line',
397 displayLegend: false,
400 ...this.buildDisabledZoomPlugin()
408 borderColor: this.buildChartColor()
415 private buildTimeserieChartOptions (rawData: VideoStatsTimeserie): ChartBuilderResult {
416 const labels: string[] = []
417 const data: number[] = []
419 for (const d of rawData.data) {
425 type: 'line' as 'line',
427 displayLegend: false,
442 onZoomComplete: ({ chart }) => {
443 const { min, max } = chart.scales.x
445 const startDate = rawData.data[min].date
446 const endDate = this.buildZoomEndDate(rawData.groupInterval, rawData.data[max].date)
448 this.peertubeRouter.silentNavigate([], { startDate, endDate })
449 this.addAndSelectCustomDateFilter()
460 borderColor: this.buildChartColor()
467 private buildCountryChartOptions (rawData: CountryData): ChartBuilderResult {
468 const labels: string[] = []
469 const data: number[] = []
471 for (const d of rawData) {
477 type: 'bar' as 'bar',
482 ...this.buildDisabledZoomPlugin()
489 label: $localize`Viewers`,
490 backgroundColor: this.buildChartColor(),
499 private buildChartColor () {
500 return getComputedStyle(document.body).getPropertyValue('--mainColorLighter')
503 private formatXTick (options: {
504 graphId: ActiveGraphId
505 value: number | string
506 data: VideoStatsTimeserie
509 const { graphId, value, data, scale } = options
511 const label = scale.getLabelForValue(value as number)
513 if (!this.isTimeserieGraph(graphId)) {
517 const date = new Date(label)
519 if (data.groupInterval.match(/ month?$/)) {
520 return date.toLocaleDateString([], { month: 'numeric' })
523 if (data.groupInterval.match(/ days?$/)) {
524 return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' })
527 if (data.groupInterval.match(/ hours?$/)) {
528 return date.toLocaleTimeString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })
531 return date.toLocaleTimeString([], { hour: 'numeric', minute: 'numeric' })
534 private formatYTick (options: {
535 graphId: ActiveGraphId
536 value: number | string
538 const { graphId, value } = options
540 if (graphId === 'retention') return value + ' %'
541 if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
543 return value.toLocaleString()
546 private formatTooltipTitle (options: {
547 graphId: ActiveGraphId
548 items: TooltipItem<any>[]
550 const { graphId, items } = options
551 const item = items[0]
553 if (this.isTimeserieGraph(graphId)) return new Date(item.label).toLocaleString()
558 private countryCodeToName (code: string) {
559 const intl: any = Intl
560 if (!intl.DisplayNames) return code
562 const regionNames = new intl.DisplayNames([], { type: 'region' })
564 return regionNames.of(code)
567 private buildDisabledZoomPlugin () {
585 private buildZoomEndDate (groupInterval: string, last: string) {
586 const date = new Date(last)
588 // Remove parts of the date we don't need
589 if (groupInterval.endsWith(' day') || groupInterval.endsWith(' days')) {
590 date.setHours(23, 59, 59)
591 } else if (groupInterval.endsWith(' hour') || groupInterval.endsWith(' hours')) {
592 date.setMinutes(59, 59)
597 return date.toISOString()