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