aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+stats/video/video-stats.component.scss1
-rw-r--r--client/src/app/+stats/video/video-stats.component.ts26
2 files changed, 21 insertions, 6 deletions
diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index 5733b3286..007d5fa0e 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -28,6 +28,7 @@
28 28
29 .date-filter-wrapper { 29 .date-filter-wrapper {
30 margin-bottom: 10px; 30 margin-bottom: 10px;
31 min-width: 300px;
31 } 32 }
32} 33}
33 34
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index 4ce14902d..6e03da727 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -2,7 +2,7 @@ import { ChartConfiguration, ChartData, PluginOptionsByType, Scale, TooltipItem
2import zoomPlugin from 'chartjs-plugin-zoom' 2import zoomPlugin from 'chartjs-plugin-zoom'
3import { Observable, of } from 'rxjs' 3import { Observable, of } from 'rxjs'
4import { SelectOptionsItem } from 'src/types' 4import { SelectOptionsItem } from 'src/types'
5import { Component, OnInit } from '@angular/core' 5import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core'
6import { ActivatedRoute } from '@angular/router' 6import { ActivatedRoute } from '@angular/router'
7import { Notifier, PeerTubeRouterService } from '@app/core' 7import { Notifier, PeerTubeRouterService } from '@app/core'
8import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main' 8import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main'
@@ -70,6 +70,7 @@ export class VideoStatsComponent implements OnInit {
70 private chartIngestData: { [ id in ActiveGraphId ]?: ChartIngestData } = {} 70 private chartIngestData: { [ id in ActiveGraphId ]?: ChartIngestData } = {}
71 71
72 constructor ( 72 constructor (
73 @Inject(LOCALE_ID) private localeId: string,
73 private route: ActivatedRoute, 74 private route: ActivatedRoute,
74 private notifier: Notifier, 75 private notifier: Notifier,
75 private statsService: VideoStatsService, 76 private statsService: VideoStatsService,
@@ -149,7 +150,7 @@ export class VideoStatsComponent implements OnInit {
149 150
150 getViewersStatsTitle () { 151 getViewersStatsTitle () {
151 if (this.statsStartDate && this.statsEndDate) { 152 if (this.statsStartDate && this.statsEndDate) {
152 return $localize`Viewers stats between ${this.statsStartDate.toLocaleString()} and ${this.statsEndDate.toLocaleString()}` 153 return $localize`Viewers stats between ${this.toMediumDate(this.statsStartDate)} and ${this.toMediumDate(this.statsEndDate)}`
153 } 154 }
154 155
155 return $localize`Viewers stats` 156 return $localize`Viewers stats`
@@ -223,7 +224,7 @@ export class VideoStatsComponent implements OnInit {
223 private buildLiveFilter (session: LiveVideoSession) { 224 private buildLiveFilter (session: LiveVideoSession) {
224 return { 225 return {
225 id: session.startDate + '|' + session.endDate, 226 id: session.startDate + '|' + session.endDate,
226 label: $localize`Live as of ${new Date(session.startDate).toLocaleString()}` 227 label: $localize`Live as of ${this.toMediumDate(new Date(session.startDate))}`
227 } 228 }
228 } 229 }
229 230
@@ -274,7 +275,7 @@ export class VideoStatsComponent implements OnInit {
274 label: $localize`Peak viewers`, 275 label: $localize`Peak viewers`,
275 value: this.numberFormatter.transform(overallStats.viewersPeak), 276 value: this.numberFormatter.transform(overallStats.viewersPeak),
276 moreInfo: overallStats.viewersPeak !== 0 277 moreInfo: overallStats.viewersPeak !== 0
277 ? $localize`at ${new Date(overallStats.viewersPeakDate).toLocaleString()}` 278 ? $localize`at ${this.toMediumDate(new Date(overallStats.viewersPeakDate))}`
278 : undefined 279 : undefined
279 }, 280 },
280 { 281 {
@@ -550,7 +551,7 @@ export class VideoStatsComponent implements OnInit {
550 if (graphId === 'retention') return value + ' %' 551 if (graphId === 'retention') return value + ' %'
551 if (graphId === 'aggregateWatchTime') return secondsToTime(+value) 552 if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
552 553
553 return value.toLocaleString() 554 return value.toLocaleString(this.localeId)
554 } 555 }
555 556
556 private formatTooltipTitle (options: { 557 private formatTooltipTitle (options: {
@@ -560,7 +561,9 @@ export class VideoStatsComponent implements OnInit {
560 const { graphId, items } = options 561 const { graphId, items } = options
561 const item = items[0] 562 const item = items[0]
562 563
563 if (this.isTimeserieGraph(graphId)) return new Date(item.label).toLocaleString() 564 if (this.isTimeserieGraph(graphId)) {
565 return this.toMediumDate(new Date(item.label))
566 }
564 567
565 return item.label 568 return item.label
566 } 569 }
@@ -592,6 +595,17 @@ export class VideoStatsComponent implements OnInit {
592 } 595 }
593 } 596 }
594 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
595 private buildZoomEndDate (groupInterval: string, last: string) { 609 private buildZoomEndDate (groupInterval: string, last: string) {
596 const date = new Date(last) 610 const date = new Date(last)
597 611