]>
Commit | Line | Data |
---|---|---|
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, Inject, LOCALE_ID, 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' | |
12 | import { | |
13 | LiveVideoSession, | |
14 | VideoStatsOverall, | |
15 | VideoStatsRetention, | |
16 | VideoStatsTimeserie, | |
17 | VideoStatsTimeserieMetric | |
18 | } from '@shared/models/videos' | |
19 | import { VideoStatsService } from './video-stats.service' | |
20 | ||
21 | type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | |
22 | ||
23 | type CountryData = { name: string, viewers: number }[] | |
24 | ||
25 | type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData | |
26 | type ChartBuilderResult = { | |
27 | type: 'line' | 'bar' | |
28 | plugins: Partial<PluginOptionsByType<'line' | 'bar'>> | |
29 | data: ChartData<'line' | 'bar'> | |
30 | displayLegend: boolean | |
31 | } | |
32 | ||
33 | type Card = { label: string, value: string | number, moreInfo?: string, help?: string } | |
34 | ||
35 | @Component({ | |
36 | templateUrl: './video-stats.component.html', | |
37 | styleUrls: [ './video-stats.component.scss' ], | |
38 | providers: [ NumberFormatterPipe ] | |
39 | }) | |
40 | export class VideoStatsComponent implements OnInit { | |
41 | // Cannot handle date filters | |
42 | globalStatsCards: Card[] = [] | |
43 | // Can handle date filters | |
44 | overallStatCards: Card[] = [] | |
45 | ||
46 | chartOptions: { [ id in ActiveGraphId ]?: ChartConfiguration<'line' | 'bar'> } = {} | |
47 | chartHeight = '300px' | |
48 | chartWidth: string = null | |
49 | ||
50 | availableCharts: { id: string, label: string, zoomEnabled: boolean }[] = [] | |
51 | activeGraphId: ActiveGraphId = 'viewers' | |
52 | ||
53 | video: VideoDetails | |
54 | ||
55 | countries: CountryData = [] | |
56 | ||
57 | chartPlugins = [ zoomPlugin ] | |
58 | ||
59 | currentDateFilter = 'all' | |
60 | dateFilters: SelectOptionsItem[] = [ | |
61 | { | |
62 | id: 'all', | |
63 | label: $localize`Since the video publication` | |
64 | } | |
65 | ] | |
66 | ||
67 | private statsStartDate: Date | |
68 | private statsEndDate: Date | |
69 | ||
70 | private chartIngestData: { [ id in ActiveGraphId ]?: ChartIngestData } = {} | |
71 | ||
72 | constructor ( | |
73 | @Inject(LOCALE_ID) private localeId: string, | |
74 | private route: ActivatedRoute, | |
75 | private notifier: Notifier, | |
76 | private statsService: VideoStatsService, | |
77 | private peertubeRouter: PeerTubeRouterService, | |
78 | private numberFormatter: NumberFormatterPipe, | |
79 | private liveService: LiveVideoService | |
80 | ) {} | |
81 | ||
82 | ngOnInit () { | |
83 | this.video = this.route.snapshot.data.video | |
84 | ||
85 | this.availableCharts = [ | |
86 | { | |
87 | id: 'viewers', | |
88 | label: $localize`Viewers`, | |
89 | zoomEnabled: true | |
90 | }, | |
91 | { | |
92 | id: 'aggregateWatchTime', | |
93 | label: $localize`Watch time`, | |
94 | zoomEnabled: true | |
95 | }, | |
96 | { | |
97 | id: 'countries', | |
98 | label: $localize`Countries`, | |
99 | zoomEnabled: false | |
100 | } | |
101 | ] | |
102 | ||
103 | if (!this.video.isLive) { | |
104 | this.availableCharts.push({ | |
105 | id: 'retention', | |
106 | label: $localize`Retention`, | |
107 | zoomEnabled: false | |
108 | }) | |
109 | } | |
110 | ||
111 | const snapshotQuery = this.route.snapshot.queryParams | |
112 | if (snapshotQuery.startDate || snapshotQuery.endDate) { | |
113 | this.addAndSelectCustomDateFilter() | |
114 | } | |
115 | ||
116 | this.route.queryParams.subscribe(params => { | |
117 | this.statsStartDate = params.startDate | |
118 | ? new Date(params.startDate) | |
119 | : undefined | |
120 | ||
121 | this.statsEndDate = params.endDate | |
122 | ? new Date(params.endDate) | |
123 | : undefined | |
124 | ||
125 | this.loadChart() | |
126 | this.loadOverallStats() | |
127 | }) | |
128 | ||
129 | this.loadDateFilters() | |
130 | } | |
131 | ||
132 | hasCountries () { | |
133 | return this.countries.length !== 0 | |
134 | } | |
135 | ||
136 | onChartChange (newActive: ActiveGraphId) { | |
137 | this.activeGraphId = newActive | |
138 | ||
139 | this.loadChart() | |
140 | } | |
141 | ||
142 | resetZoom () { | |
143 | this.peertubeRouter.silentNavigate([], {}) | |
144 | this.removeAndResetCustomDateFilter() | |
145 | } | |
146 | ||
147 | hasZoom () { | |
148 | return !!this.statsStartDate && this.isTimeserieGraph(this.activeGraphId) | |
149 | } | |
150 | ||
151 | getViewersStatsTitle () { | |
152 | if (this.statsStartDate && this.statsEndDate) { | |
153 | return $localize`Viewers stats between ${this.toMediumDate(this.statsStartDate)} and ${this.toMediumDate(this.statsEndDate)}` | |
154 | } | |
155 | ||
156 | return $localize`Viewers stats` | |
157 | } | |
158 | ||
159 | onDateFilterChange () { | |
160 | if (this.currentDateFilter === 'all') { | |
161 | return this.resetZoom() | |
162 | } | |
163 | ||
164 | const idParts = this.currentDateFilter.split('|') | |
165 | if (idParts.length === 2) { | |
166 | return this.peertubeRouter.silentNavigate([], { startDate: idParts[0], endDate: idParts[1] }) | |
167 | } | |
168 | } | |
169 | ||
170 | private isTimeserieGraph (graphId: ActiveGraphId) { | |
171 | return graphId === 'aggregateWatchTime' || graphId === 'viewers' | |
172 | } | |
173 | ||
174 | private loadOverallStats () { | |
175 | this.statsService.getOverallStats({ videoId: this.video.uuid, startDate: this.statsStartDate, endDate: this.statsEndDate }) | |
176 | .subscribe({ | |
177 | next: res => { | |
178 | this.countries = res.countries.slice(0, 10).map(c => ({ | |
179 | name: this.countryCodeToName(c.isoCode), | |
180 | viewers: c.viewers | |
181 | })) | |
182 | ||
183 | this.buildOverallStatCard(res) | |
184 | }, | |
185 | ||
186 | error: err => this.notifier.error(err.message) | |
187 | }) | |
188 | } | |
189 | ||
190 | private loadDateFilters () { | |
191 | if (this.video.isLive) return this.loadLiveDateFilters() | |
192 | ||
193 | return this.loadVODDateFilters() | |
194 | } | |
195 | ||
196 | private loadLiveDateFilters () { | |
197 | this.liveService.listSessions(this.video.id) | |
198 | .subscribe({ | |
199 | next: ({ data }) => { | |
200 | const newFilters = data.map(session => this.buildLiveFilter(session)) | |
201 | ||
202 | this.dateFilters = this.dateFilters.concat(newFilters) | |
203 | }, | |
204 | ||
205 | error: err => this.notifier.error(err.message) | |
206 | }) | |
207 | } | |
208 | ||
209 | private loadVODDateFilters () { | |
210 | this.liveService.findLiveSessionFromVOD(this.video.id) | |
211 | .subscribe({ | |
212 | next: session => { | |
213 | this.dateFilters = this.dateFilters.concat([ this.buildLiveFilter(session) ]) | |
214 | }, | |
215 | ||
216 | error: err => { | |
217 | if (err.status === HttpStatusCode.NOT_FOUND_404) return | |
218 | ||
219 | this.notifier.error(err.message) | |
220 | } | |
221 | }) | |
222 | } | |
223 | ||
224 | private buildLiveFilter (session: LiveVideoSession) { | |
225 | return { | |
226 | id: session.startDate + '|' + session.endDate, | |
227 | label: $localize`Live as of ${this.toMediumDate(new Date(session.startDate))}` | |
228 | } | |
229 | } | |
230 | ||
231 | private addAndSelectCustomDateFilter () { | |
232 | const exists = this.dateFilters.some(d => d.id === 'custom') | |
233 | ||
234 | if (!exists) { | |
235 | this.dateFilters = this.dateFilters.concat([ | |
236 | { | |
237 | id: 'custom', | |
238 | label: $localize`Custom dates` | |
239 | } | |
240 | ]) | |
241 | } | |
242 | ||
243 | this.currentDateFilter = 'custom' | |
244 | } | |
245 | ||
246 | private removeAndResetCustomDateFilter () { | |
247 | this.dateFilters = this.dateFilters.filter(d => d.id !== 'custom') | |
248 | ||
249 | this.currentDateFilter = 'all' | |
250 | } | |
251 | ||
252 | private buildOverallStatCard (overallStats: VideoStatsOverall) { | |
253 | this.globalStatsCards = [ | |
254 | { | |
255 | label: $localize`Views`, | |
256 | value: this.numberFormatter.transform(this.video.views), | |
257 | help: $localize`A view means that someone watched the video for at least 30 seconds` | |
258 | }, | |
259 | { | |
260 | label: $localize`Likes`, | |
261 | value: this.numberFormatter.transform(this.video.likes) | |
262 | } | |
263 | ] | |
264 | ||
265 | this.overallStatCards = [ | |
266 | { | |
267 | label: $localize`Average watch time`, | |
268 | value: secondsToTime(overallStats.averageWatchTime) | |
269 | }, | |
270 | { | |
271 | label: $localize`Total watch time`, | |
272 | value: secondsToTime(overallStats.totalWatchTime) | |
273 | }, | |
274 | { | |
275 | label: $localize`Peak viewers`, | |
276 | value: this.numberFormatter.transform(overallStats.viewersPeak), | |
277 | moreInfo: overallStats.viewersPeak !== 0 | |
278 | ? $localize`at ${this.toMediumDate(new Date(overallStats.viewersPeakDate))}` | |
279 | : undefined | |
280 | }, | |
281 | { | |
282 | label: $localize`Unique viewers`, | |
283 | value: this.numberFormatter.transform(overallStats.totalViewers) | |
284 | } | |
285 | ] | |
286 | ||
287 | if (overallStats.countries.length !== 0) { | |
288 | this.overallStatCards.push({ | |
289 | label: $localize`Countries`, | |
290 | value: this.numberFormatter.transform(overallStats.countries.length) | |
291 | }) | |
292 | } | |
293 | } | |
294 | ||
295 | private loadChart () { | |
296 | const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = { | |
297 | retention: this.statsService.getRetentionStats(this.video.uuid), | |
298 | ||
299 | aggregateWatchTime: this.statsService.getTimeserieStats({ | |
300 | videoId: this.video.uuid, | |
301 | startDate: this.statsStartDate, | |
302 | endDate: this.statsEndDate, | |
303 | metric: 'aggregateWatchTime' | |
304 | }), | |
305 | viewers: this.statsService.getTimeserieStats({ | |
306 | videoId: this.video.uuid, | |
307 | startDate: this.statsStartDate, | |
308 | endDate: this.statsEndDate, | |
309 | metric: 'viewers' | |
310 | }), | |
311 | ||
312 | countries: of(this.countries) | |
313 | } | |
314 | ||
315 | obsBuilders[this.activeGraphId].subscribe({ | |
316 | next: res => { | |
317 | this.chartIngestData[this.activeGraphId] = res | |
318 | ||
319 | this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId) | |
320 | }, | |
321 | ||
322 | error: err => this.notifier.error(err.message) | |
323 | }) | |
324 | } | |
325 | ||
326 | private buildChartOptions (graphId: ActiveGraphId): ChartConfiguration<'line' | 'bar'> { | |
327 | const dataBuilders: { | |
328 | [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult | |
329 | } = { | |
330 | retention: (rawData: VideoStatsRetention) => this.buildRetentionChartOptions(rawData), | |
331 | aggregateWatchTime: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData), | |
332 | viewers: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData), | |
333 | countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData) | |
334 | } | |
335 | ||
336 | const { type, data, displayLegend, plugins } = dataBuilders[graphId](this.chartIngestData[graphId]) | |
337 | ||
338 | const self = this | |
339 | ||
340 | return { | |
341 | type, | |
342 | data, | |
343 | ||
344 | options: { | |
345 | responsive: true, | |
346 | ||
347 | scales: { | |
348 | x: { | |
349 | ticks: { | |
350 | callback: function (value) { | |
351 | return self.formatXTick({ | |
352 | graphId, | |
353 | value, | |
354 | data: self.chartIngestData[graphId] as VideoStatsTimeserie, | |
355 | scale: this | |
356 | }) | |
357 | } | |
358 | } | |
359 | }, | |
360 | ||
361 | y: { | |
362 | beginAtZero: true, | |
363 | ||
364 | max: this.activeGraphId === 'retention' | |
365 | ? 100 | |
366 | : undefined, | |
367 | ||
368 | ticks: { | |
369 | callback: value => this.formatYTick({ graphId, value }) | |
370 | } | |
371 | } | |
372 | }, | |
373 | ||
374 | plugins: { | |
375 | legend: { | |
376 | display: displayLegend | |
377 | }, | |
378 | tooltip: { | |
379 | callbacks: { | |
380 | title: items => this.formatTooltipTitle({ graphId, items }), | |
381 | label: value => this.formatYTick({ graphId, value: value.raw as number | string }) | |
382 | } | |
383 | }, | |
384 | ||
385 | ...plugins | |
386 | } | |
387 | } | |
388 | } | |
389 | } | |
390 | ||
391 | private buildRetentionChartOptions (rawData: VideoStatsRetention): ChartBuilderResult { | |
392 | const labels: string[] = [] | |
393 | const data: number[] = [] | |
394 | ||
395 | for (const d of rawData.data) { | |
396 | labels.push(secondsToTime(d.second)) | |
397 | data.push(d.retentionPercent) | |
398 | } | |
399 | ||
400 | return { | |
401 | type: 'line' as 'line', | |
402 | ||
403 | displayLegend: false, | |
404 | ||
405 | plugins: { | |
406 | ...this.buildDisabledZoomPlugin() | |
407 | }, | |
408 | ||
409 | data: { | |
410 | labels, | |
411 | datasets: [ | |
412 | { | |
413 | data, | |
414 | borderColor: this.buildChartColor() | |
415 | } | |
416 | ] | |
417 | } | |
418 | } | |
419 | } | |
420 | ||
421 | private buildTimeserieChartOptions (rawData: VideoStatsTimeserie): ChartBuilderResult { | |
422 | const labels: string[] = [] | |
423 | const data: number[] = [] | |
424 | ||
425 | for (const d of rawData.data) { | |
426 | labels.push(d.date) | |
427 | data.push(d.value) | |
428 | } | |
429 | ||
430 | return { | |
431 | type: 'line' as 'line', | |
432 | ||
433 | displayLegend: false, | |
434 | ||
435 | plugins: { | |
436 | zoom: { | |
437 | zoom: { | |
438 | wheel: { | |
439 | enabled: false | |
440 | }, | |
441 | drag: { | |
442 | enabled: true | |
443 | }, | |
444 | pinch: { | |
445 | enabled: true | |
446 | }, | |
447 | mode: 'x', | |
448 | onZoomComplete: ({ chart }) => { | |
449 | const { min, max } = chart.scales.x | |
450 | ||
451 | const startDate = rawData.data[min].date | |
452 | const endDate = this.buildZoomEndDate(rawData.groupInterval, rawData.data[max].date) | |
453 | ||
454 | this.peertubeRouter.silentNavigate([], { startDate, endDate }) | |
455 | this.addAndSelectCustomDateFilter() | |
456 | } | |
457 | }, | |
458 | limits: { | |
459 | x: { | |
460 | minRange: 2 | |
461 | } | |
462 | } | |
463 | } | |
464 | }, | |
465 | ||
466 | data: { | |
467 | labels, | |
468 | datasets: [ | |
469 | { | |
470 | data, | |
471 | borderColor: this.buildChartColor() | |
472 | } | |
473 | ] | |
474 | } | |
475 | } | |
476 | } | |
477 | ||
478 | private buildCountryChartOptions (rawData: CountryData): ChartBuilderResult { | |
479 | const labels: string[] = [] | |
480 | const data: number[] = [] | |
481 | ||
482 | for (const d of rawData) { | |
483 | labels.push(d.name) | |
484 | data.push(d.viewers) | |
485 | } | |
486 | ||
487 | return { | |
488 | type: 'bar' as 'bar', | |
489 | ||
490 | displayLegend: true, | |
491 | ||
492 | plugins: { | |
493 | ...this.buildDisabledZoomPlugin() | |
494 | }, | |
495 | ||
496 | data: { | |
497 | labels, | |
498 | datasets: [ | |
499 | { | |
500 | label: $localize`Viewers`, | |
501 | backgroundColor: this.buildChartColor(), | |
502 | maxBarThickness: 20, | |
503 | data | |
504 | } | |
505 | ] | |
506 | } | |
507 | } | |
508 | } | |
509 | ||
510 | private buildChartColor () { | |
511 | return getComputedStyle(document.body).getPropertyValue('--mainColorLighter') | |
512 | } | |
513 | ||
514 | private formatXTick (options: { | |
515 | graphId: ActiveGraphId | |
516 | value: number | string | |
517 | data: VideoStatsTimeserie | |
518 | scale: Scale | |
519 | }) { | |
520 | const { graphId, value, data, scale } = options | |
521 | ||
522 | const label = scale.getLabelForValue(value as number) | |
523 | ||
524 | if (!this.isTimeserieGraph(graphId)) { | |
525 | return label | |
526 | } | |
527 | ||
528 | const date = new Date(label) | |
529 | ||
530 | if (data.groupInterval.match(/ month?$/)) { | |
531 | return date.toLocaleDateString([], { year: '2-digit', month: 'numeric' }) | |
532 | } | |
533 | ||
534 | if (data.groupInterval.match(/ days?$/)) { | |
535 | return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' }) | |
536 | } | |
537 | ||
538 | if (data.groupInterval.match(/ hours?$/)) { | |
539 | return date.toLocaleTimeString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }) | |
540 | } | |
541 | ||
542 | return date.toLocaleTimeString([], { hour: 'numeric', minute: 'numeric' }) | |
543 | } | |
544 | ||
545 | private formatYTick (options: { | |
546 | graphId: ActiveGraphId | |
547 | value: number | string | |
548 | }) { | |
549 | const { graphId, value } = options | |
550 | ||
551 | if (graphId === 'retention') return value + ' %' | |
552 | if (graphId === 'aggregateWatchTime') return secondsToTime(+value) | |
553 | ||
554 | return value.toLocaleString(this.localeId) | |
555 | } | |
556 | ||
557 | private formatTooltipTitle (options: { | |
558 | graphId: ActiveGraphId | |
559 | items: TooltipItem<any>[] | |
560 | }) { | |
561 | const { graphId, items } = options | |
562 | const item = items[0] | |
563 | ||
564 | if (this.isTimeserieGraph(graphId)) { | |
565 | return this.toMediumDate(new Date(item.label)) | |
566 | } | |
567 | ||
568 | return item.label | |
569 | } | |
570 | ||
571 | private countryCodeToName (code: string) { | |
572 | const intl: any = Intl | |
573 | if (!intl.DisplayNames) return code | |
574 | ||
575 | const regionNames = new intl.DisplayNames([], { type: 'region' }) | |
576 | ||
577 | return regionNames.of(code) | |
578 | } | |
579 | ||
580 | private buildDisabledZoomPlugin () { | |
581 | return { | |
582 | zoom: { | |
583 | zoom: { | |
584 | wheel: { | |
585 | enabled: false | |
586 | }, | |
587 | drag: { | |
588 | enabled: false | |
589 | }, | |
590 | pinch: { | |
591 | enabled: false | |
592 | } | |
593 | } | |
594 | } | |
595 | } | |
596 | } | |
597 | ||
598 | private toMediumDate (d: Date) { | |
599 | return new Date(d).toLocaleString(this.localeId, { | |
600 | day: 'numeric', | |
601 | month: 'short', | |
602 | year: 'numeric', | |
603 | hour: 'numeric', | |
604 | minute: 'numeric', | |
605 | second: 'numeric' | |
606 | }) | |
607 | } | |
608 | ||
609 | private buildZoomEndDate (groupInterval: string, last: string) { | |
610 | const date = new Date(last) | |
611 | ||
612 | // Remove parts of the date we don't need | |
613 | if (groupInterval.endsWith(' day') || groupInterval.endsWith(' days')) { | |
614 | date.setHours(23, 59, 59) | |
615 | } else if (groupInterval.endsWith(' hour') || groupInterval.endsWith(' hours')) { | |
616 | date.setMinutes(59, 59) | |
617 | } else { | |
618 | date.setSeconds(59) | |
619 | } | |
620 | ||
621 | return date.toISOString() | |
622 | } | |
623 | } |