diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/app/+stats/video/video-stats.component.scss | 1 | ||||
-rw-r--r-- | client/src/app/+stats/video/video-stats.component.ts | 26 |
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 | |||
2 | import zoomPlugin from 'chartjs-plugin-zoom' | 2 | import zoomPlugin from 'chartjs-plugin-zoom' |
3 | import { Observable, of } from 'rxjs' | 3 | import { Observable, of } from 'rxjs' |
4 | import { SelectOptionsItem } from 'src/types' | 4 | import { SelectOptionsItem } from 'src/types' |
5 | import { Component, OnInit } from '@angular/core' | 5 | import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core' |
6 | import { ActivatedRoute } from '@angular/router' | 6 | import { ActivatedRoute } from '@angular/router' |
7 | import { Notifier, PeerTubeRouterService } from '@app/core' | 7 | import { Notifier, PeerTubeRouterService } from '@app/core' |
8 | import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main' | 8 | import { 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 | ||