1
0
Fork 0

Support interactive video stats graph

This commit is contained in:
Chocobozzz 2022-04-08 10:22:56 +02:00 committed by Chocobozzz
parent 901bcf5c18
commit 3eda9b775a
12 changed files with 268 additions and 64 deletions

View file

@ -83,6 +83,7 @@
"buffer": "^6.0.3", "buffer": "^6.0.3",
"cache-chunk-store": "^3.0.0", "cache-chunk-store": "^3.0.0",
"chart.js": "^3.5.1", "chart.js": "^3.5.1",
"chartjs-plugin-zoom": "^1.2.1",
"chromedriver": "^99.0.0", "chromedriver": "^99.0.0",
"core-js": "^3.1.4", "core-js": "^3.1.4",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",

View file

@ -22,13 +22,20 @@
</a> </a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div [ngStyle]="{ 'min-height': chartHeight }"> <div class="chart-container" [ngStyle]="{ 'min-height': chartHeight }">
<p-chart <p-chart
*ngIf="chartOptions[availableChart.id]" *ngIf="chartOptions[availableChart.id]"
[height]="chartHeight" [width]="chartWidth" [height]="chartHeight" [width]="chartWidth"
[type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data" [type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data"
[plugins]="chartPlugins"
></p-chart> ></p-chart>
</div> </div>
<div class="zoom-container">
<span *ngIf="!hasZoom() && availableChart.zoomEnabled" i18n class="description">You can select a part of the graph to zoom in</span>
<my-button i18n *ngIf="hasZoom()" (click)="resetZoom()">Reset zoom</my-button>
</div>
</ng-template> </ng-template>
</ng-container> </ng-container>
</div> </div>

View file

@ -21,6 +21,7 @@
min-width: 200px; min-width: 200px;
margin-right: 15px; margin-right: 15px;
background-color: pvar(--submenuBackgroundColor); background-color: pvar(--submenuBackgroundColor);
margin-bottom: 15px;
.label, .label,
.more-info { .more-info {
@ -37,6 +38,12 @@
font-size: 24px; font-size: 24px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
@media screen and (max-width: $mobile-view) {
min-height: fit-content;
min-width: fit-content;
padding: 15px;
}
} }
my-embed { my-embed {
@ -45,6 +52,12 @@ my-embed {
width: 100%; width: 100%;
} }
@include on-small-main-col {
my-embed {
display: none;
}
}
.tab-content { .tab-content {
margin-top: 15px; margin-top: 15px;
} }
@ -52,3 +65,16 @@ my-embed {
.nav-tabs { .nav-tabs {
@include peertube-nav-tabs($border-width: 2px); @include peertube-nav-tabs($border-width: 2px);
} }
.chart-container {
margin-bottom: 10px;
}
.zoom-container {
display: flex;
justify-content: center;
.description {
font-style: italic;
}
}

View file

@ -1,8 +1,9 @@
import { ChartConfiguration, ChartData } from 'chart.js' import { ChartConfiguration, ChartData, PluginOptionsByType, Scale, TooltipItem } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom'
import { Observable, of } from 'rxjs' import { Observable, of } from 'rxjs'
import { Component, OnInit } from '@angular/core' import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router' import { ActivatedRoute } from '@angular/router'
import { Notifier } from '@app/core' import { Notifier, PeerTubeRouterService } from '@app/core'
import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main' import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main'
import { secondsToTime } from '@shared/core-utils' import { secondsToTime } from '@shared/core-utils'
import { VideoStatsOverall, VideoStatsRetention, VideoStatsTimeserie, VideoStatsTimeserieMetric } from '@shared/models/videos' import { VideoStatsOverall, VideoStatsRetention, VideoStatsTimeserie, VideoStatsTimeserieMetric } from '@shared/models/videos'
@ -15,6 +16,7 @@ type CountryData = { name: string, viewers: number }[]
type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData
type ChartBuilderResult = { type ChartBuilderResult = {
type: 'line' | 'bar' type: 'line' | 'bar'
plugins: Partial<PluginOptionsByType<'line' | 'bar'>>
data: ChartData<'line' | 'bar'> data: ChartData<'line' | 'bar'>
displayLegend: boolean displayLegend: boolean
} }
@ -34,19 +36,23 @@ export class VideoStatsComponent implements OnInit {
availableCharts = [ availableCharts = [
{ {
id: 'viewers', id: 'viewers',
label: $localize`Viewers` label: $localize`Viewers`,
zoomEnabled: true
}, },
{ {
id: 'aggregateWatchTime', id: 'aggregateWatchTime',
label: $localize`Watch time` label: $localize`Watch time`,
zoomEnabled: true
}, },
{ {
id: 'retention', id: 'retention',
label: $localize`Retention` label: $localize`Retention`,
zoomEnabled: false
}, },
{ {
id: 'countries', id: 'countries',
label: $localize`Countries` label: $localize`Countries`,
zoomEnabled: false
} }
] ]
@ -56,18 +62,37 @@ export class VideoStatsComponent implements OnInit {
countries: CountryData = [] countries: CountryData = []
chartPlugins = [ zoomPlugin ]
private timeseriesStartDate: Date
private timeseriesEndDate: Date
private chartIngestData: { [ id in ActiveGraphId ]?: ChartIngestData } = {}
constructor ( constructor (
private route: ActivatedRoute, private route: ActivatedRoute,
private notifier: Notifier, private notifier: Notifier,
private statsService: VideoStatsService, private statsService: VideoStatsService,
private peertubeRouter: PeerTubeRouterService,
private numberFormatter: NumberFormatterPipe private numberFormatter: NumberFormatterPipe
) {} ) {}
ngOnInit () { ngOnInit () {
this.video = this.route.snapshot.data.video this.video = this.route.snapshot.data.video
this.route.queryParams.subscribe(params => {
this.timeseriesStartDate = params.startDate
? new Date(params.startDate)
: undefined
this.timeseriesEndDate = params.endDate
? new Date(params.endDate)
: undefined
this.loadChart()
})
this.loadOverallStats() this.loadOverallStats()
this.loadChart()
} }
hasCountries () { hasCountries () {
@ -80,6 +105,18 @@ export class VideoStatsComponent implements OnInit {
this.loadChart() this.loadChart()
} }
resetZoom () {
this.peertubeRouter.silentNavigate([], {})
}
hasZoom () {
return !!this.timeseriesStartDate && this.isTimeserieGraph(this.activeGraphId)
}
private isTimeserieGraph (graphId: ActiveGraphId) {
return graphId === 'aggregateWatchTime' || graphId === 'viewers'
}
private loadOverallStats () { private loadOverallStats () {
this.statsService.getOverallStats(this.video.uuid) this.statsService.getOverallStats(this.video.uuid)
.subscribe({ .subscribe({
@ -125,24 +162,35 @@ export class VideoStatsComponent implements OnInit {
private loadChart () { private loadChart () {
const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = { const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = {
retention: this.statsService.getRetentionStats(this.video.uuid), retention: this.statsService.getRetentionStats(this.video.uuid),
aggregateWatchTime: this.statsService.getTimeserieStats(this.video.uuid, 'aggregateWatchTime'),
viewers: this.statsService.getTimeserieStats(this.video.uuid, 'viewers'), aggregateWatchTime: this.statsService.getTimeserieStats({
videoId: this.video.uuid,
startDate: this.timeseriesStartDate,
endDate: this.timeseriesEndDate,
metric: 'aggregateWatchTime'
}),
viewers: this.statsService.getTimeserieStats({
videoId: this.video.uuid,
startDate: this.timeseriesStartDate,
endDate: this.timeseriesEndDate,
metric: 'viewers'
}),
countries: of(this.countries) countries: of(this.countries)
} }
obsBuilders[this.activeGraphId].subscribe({ obsBuilders[this.activeGraphId].subscribe({
next: res => { next: res => {
this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId, res) this.chartIngestData[this.activeGraphId] = res
this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId)
}, },
error: err => this.notifier.error(err.message) error: err => this.notifier.error(err.message)
}) })
} }
private buildChartOptions ( private buildChartOptions (graphId: ActiveGraphId): ChartConfiguration<'line' | 'bar'> {
graphId: ActiveGraphId,
rawData: ChartIngestData
): ChartConfiguration<'line' | 'bar'> {
const dataBuilders: { const dataBuilders: {
[ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult
} = { } = {
@ -152,7 +200,9 @@ export class VideoStatsComponent implements OnInit {
countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData) countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData)
} }
const { type, data, displayLegend } = dataBuilders[graphId](rawData) const { type, data, displayLegend, plugins } = dataBuilders[graphId](this.chartIngestData[graphId])
const self = this
return { return {
type, type,
@ -162,6 +212,19 @@ export class VideoStatsComponent implements OnInit {
responsive: true, responsive: true,
scales: { scales: {
x: {
ticks: {
callback: function (value) {
return self.formatXTick({
graphId,
value,
data: self.chartIngestData[graphId] as VideoStatsTimeserie,
scale: this
})
}
}
},
y: { y: {
beginAtZero: true, beginAtZero: true,
@ -170,7 +233,7 @@ export class VideoStatsComponent implements OnInit {
: undefined, : undefined,
ticks: { ticks: {
callback: value => this.formatTick(graphId, value) callback: value => this.formatYTick({ graphId, value })
} }
} }
}, },
@ -181,15 +244,18 @@ export class VideoStatsComponent implements OnInit {
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
label: value => this.formatTick(graphId, value.raw as number | string) title: items => this.formatTooltipTitle({ graphId, items }),
label: value => this.formatYTick({ graphId, value: value.raw as number | string })
} }
} },
...plugins
} }
} }
} }
} }
private buildRetentionChartOptions (rawData: VideoStatsRetention) { private buildRetentionChartOptions (rawData: VideoStatsRetention): ChartBuilderResult {
const labels: string[] = [] const labels: string[] = []
const data: number[] = [] const data: number[] = []
@ -203,6 +269,10 @@ export class VideoStatsComponent implements OnInit {
displayLegend: false, displayLegend: false,
plugins: {
...this.buildDisabledZoomPlugin()
},
data: { data: {
labels, labels,
datasets: [ datasets: [
@ -215,12 +285,12 @@ export class VideoStatsComponent implements OnInit {
} }
} }
private buildTimeserieChartOptions (rawData: VideoStatsTimeserie) { private buildTimeserieChartOptions (rawData: VideoStatsTimeserie): ChartBuilderResult {
const labels: string[] = [] const labels: string[] = []
const data: number[] = [] const data: number[] = []
for (const d of rawData.data) { for (const d of rawData.data) {
labels.push(new Date(d.date).toLocaleDateString()) labels.push(d.date)
data.push(d.value) data.push(d.value)
} }
@ -229,6 +299,31 @@ export class VideoStatsComponent implements OnInit {
displayLegend: false, displayLegend: false,
plugins: {
zoom: {
zoom: {
wheel: {
enabled: false
},
drag: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'x',
onZoomComplete: ({ chart }) => {
const { min, max } = chart.scales.x
const startDate = rawData.data[min].date
const endDate = rawData.data[max].date
this.peertubeRouter.silentNavigate([], { startDate, endDate })
}
}
}
},
data: { data: {
labels, labels,
datasets: [ datasets: [
@ -241,7 +336,7 @@ export class VideoStatsComponent implements OnInit {
} }
} }
private buildCountryChartOptions (rawData: CountryData) { private buildCountryChartOptions (rawData: CountryData): ChartBuilderResult {
const labels: string[] = [] const labels: string[] = []
const data: number[] = [] const data: number[] = []
@ -255,8 +350,8 @@ export class VideoStatsComponent implements OnInit {
displayLegend: true, displayLegend: true,
options: { plugins: {
indexAxis: 'y' ...this.buildDisabledZoomPlugin()
}, },
data: { data: {
@ -277,13 +372,57 @@ export class VideoStatsComponent implements OnInit {
return getComputedStyle(document.body).getPropertyValue('--mainColorLighter') return getComputedStyle(document.body).getPropertyValue('--mainColorLighter')
} }
private formatTick (graphId: ActiveGraphId, value: number | string) { private formatXTick (options: {
graphId: ActiveGraphId
value: number | string
data: VideoStatsTimeserie
scale: Scale
}) {
const { graphId, value, data, scale } = options
const label = scale.getLabelForValue(value as number)
if (!this.isTimeserieGraph(graphId)) {
return label
}
const date = new Date(label)
if (data.groupInterval.match(/ days?$/)) {
return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' })
}
if (data.groupInterval.match(/ hours?$/)) {
return date.toLocaleTimeString([], { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' })
}
return date.toLocaleTimeString([], { hour: 'numeric', minute: 'numeric' })
}
private formatYTick (options: {
graphId: ActiveGraphId
value: number | string
}) {
const { graphId, value } = options
if (graphId === 'retention') return value + ' %' if (graphId === 'retention') return value + ' %'
if (graphId === 'aggregateWatchTime') return secondsToTime(+value) if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
return value.toLocaleString() return value.toLocaleString()
} }
private formatTooltipTitle (options: {
graphId: ActiveGraphId
items: TooltipItem<any>[]
}) {
const { graphId, items } = options
const item = items[0]
if (this.isTimeserieGraph(graphId)) return new Date(item.label).toLocaleString()
return item.label
}
private countryCodeToName (code: string) { private countryCodeToName (code: string) {
const intl: any = Intl const intl: any = Intl
if (!intl.DisplayNames) return code if (!intl.DisplayNames) return code
@ -292,4 +431,22 @@ export class VideoStatsComponent implements OnInit {
return regionNames.of(code) return regionNames.of(code)
} }
private buildDisabledZoomPlugin () {
return {
zoom: {
zoom: {
wheel: {
enabled: false
},
drag: {
enabled: false
},
pinch: {
enabled: false
}
}
}
}
}
} }

View file

@ -1,6 +1,6 @@
import { catchError } from 'rxjs' import { catchError } from 'rxjs'
import { environment } from 'src/environments/environment' import { environment } from 'src/environments/environment'
import { HttpClient } from '@angular/common/http' import { HttpClient, HttpParams } from '@angular/common/http'
import { Injectable } from '@angular/core' import { Injectable } from '@angular/core'
import { RestExtractor } from '@app/core' import { RestExtractor } from '@app/core'
import { VideoService } from '@app/shared/shared-main' import { VideoService } from '@app/shared/shared-main'
@ -22,8 +22,19 @@ export class VideoStatsService {
.pipe(catchError(err => this.restExtractor.handleError(err))) .pipe(catchError(err => this.restExtractor.handleError(err)))
} }
getTimeserieStats (videoId: string, metric: VideoStatsTimeserieMetric) { getTimeserieStats (options: {
return this.authHttp.get<VideoStatsTimeserie>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/timeseries/' + metric) videoId: string
metric: VideoStatsTimeserieMetric
startDate?: Date
endDate?: Date
}) {
const { videoId, metric, startDate, endDate } = options
let params = new HttpParams()
if (startDate) params = params.append('startDate', startDate.toISOString())
if (endDate) params = params.append('endDate', endDate.toISOString())
return this.authHttp.get<VideoStatsTimeserie>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/timeseries/' + metric, { params })
.pipe(catchError(err => this.restExtractor.handleError(err))) .pipe(catchError(err => this.restExtractor.handleError(err)))
} }

View file

@ -3792,6 +3792,13 @@ chart.js@^3.5.1:
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA== integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
chartjs-plugin-zoom@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.2.1.tgz#7e350ba20d907f397d0c055239dcc67d326df705"
integrity sha512-2zbWvw2pljrtMLMXkKw1uxYzAne5PtjJiOZftcut4Lo3Ee8qUt95RpMKDWrZ+pBZxZKQKOD/etdU4pN2jxZUmg==
dependencies:
hammerjs "^2.0.8"
chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.5.2: chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.5.2:
version "3.5.3" version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@ -5961,6 +5968,11 @@ gzip-size@^6.0.0:
dependencies: dependencies:
duplexer "^0.1.2" duplexer "^0.1.2"
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
handle-thing@^2.0.0: handle-thing@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"

View file

@ -1,24 +1,17 @@
import { logger } from '@server/helpers/logger' import { logger } from '@server/helpers/logger'
import { VideoStatsTimeserieGroupInterval } from '@shared/models'
function buildGroupByAndBoundaries (startDateString: string, endDateString: string) { function buildGroupByAndBoundaries (startDateString: string, endDateString: string) {
const startDate = new Date(startDateString) const startDate = new Date(startDateString)
const endDate = new Date(endDateString) const endDate = new Date(endDateString)
const groupByMatrix: { [ id in VideoStatsTimeserieGroupInterval ]: string } = {
one_day: '1 day',
one_hour: '1 hour',
ten_minutes: '10 minutes',
one_minute: '1 minute'
}
const groupInterval = buildGroupInterval(startDate, endDate) const groupInterval = buildGroupInterval(startDate, endDate)
logger.debug('Found "%s" group interval.', groupInterval, { startDate, endDate }) logger.debug('Found "%s" group interval.', groupInterval, { startDate, endDate })
// Remove parts of the date we don't need // Remove parts of the date we don't need
if (groupInterval === 'one_day') { if (groupInterval.endsWith(' day') || groupInterval.endsWith(' days')) {
startDate.setHours(0, 0, 0, 0) startDate.setHours(0, 0, 0, 0)
} else if (groupInterval === 'one_hour') { } else if (groupInterval.endsWith(' hour') || groupInterval.endsWith(' hours')) {
startDate.setMinutes(0, 0, 0) startDate.setMinutes(0, 0, 0)
} else { } else {
startDate.setSeconds(0, 0) startDate.setSeconds(0, 0)
@ -26,7 +19,6 @@ function buildGroupByAndBoundaries (startDateString: string, endDateString: stri
return { return {
groupInterval, groupInterval,
sqlInterval: groupByMatrix[groupInterval],
startDate, startDate,
endDate endDate
} }
@ -40,16 +32,18 @@ export {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function buildGroupInterval (startDate: Date, endDate: Date): VideoStatsTimeserieGroupInterval { function buildGroupInterval (startDate: Date, endDate: Date): string {
const aDay = 86400 const aDay = 86400
const anHour = 3600 const anHour = 3600
const aMinute = 60 const aMinute = 60
const diffSeconds = (endDate.getTime() - startDate.getTime()) / 1000 const diffSeconds = (endDate.getTime() - startDate.getTime()) / 1000
if (diffSeconds >= 6 * aDay) return 'one_day' if (diffSeconds >= 15 * aDay) return '1 day'
if (diffSeconds >= 6 * anHour) return 'one_hour' if (diffSeconds >= 8 * aDay) return '12 hours'
if (diffSeconds >= 60 * aMinute) return 'ten_minutes' if (diffSeconds >= 4 * aDay) return '6 hours'
if (diffSeconds >= 15 * anHour) return '1 hour'
if (diffSeconds >= 180 * aMinute) return '10 minutes'
return 'one_minute' return '1 minute'
} }

View file

@ -221,7 +221,7 @@ export class LocalVideoViewerModel extends Model<Partial<AttributesOnly<LocalVid
}): Promise<VideoStatsTimeserie> { }): Promise<VideoStatsTimeserie> {
const { video, metric } = options const { video, metric } = options
const { groupInterval, sqlInterval, startDate, endDate } = buildGroupByAndBoundaries(options.startDate, options.endDate) const { groupInterval, startDate, endDate } = buildGroupByAndBoundaries(options.startDate, options.endDate)
const selectMetrics: { [ id in VideoStatsTimeserieMetric ]: string } = { const selectMetrics: { [ id in VideoStatsTimeserieMetric ]: string } = {
viewers: 'COUNT("localVideoViewer"."id")', viewers: 'COUNT("localVideoViewer"."id")',
@ -230,9 +230,9 @@ export class LocalVideoViewerModel extends Model<Partial<AttributesOnly<LocalVid
const query = `WITH "intervals" AS ( const query = `WITH "intervals" AS (
SELECT SELECT
"time" AS "startDate", "time" + :sqlInterval::interval as "endDate" "time" AS "startDate", "time" + :groupInterval::interval as "endDate"
FROM FROM
generate_series(:startDate::timestamptz, :endDate::timestamptz, :sqlInterval::interval) serie("time") generate_series(:startDate::timestamptz, :endDate::timestamptz, :groupInterval::interval) serie("time")
) )
SELECT "intervals"."startDate" as "date", COALESCE(${selectMetrics[metric]}, 0) AS value SELECT "intervals"."startDate" as "date", COALESCE(${selectMetrics[metric]}, 0) AS value
FROM FROM
@ -249,7 +249,7 @@ export class LocalVideoViewerModel extends Model<Partial<AttributesOnly<LocalVid
replacements: { replacements: {
startDate, startDate,
endDate, endDate,
sqlInterval, groupInterval,
videoId: video.id videoId: video.id
} }
} }

View file

@ -110,21 +110,21 @@ describe('Test views timeserie stats', function () {
it('Should use a custom start/end date', async function () { it('Should use a custom start/end date', async function () {
const now = new Date() const now = new Date()
const tenDaysAgo = new Date() const twentyDaysAgo = new Date()
tenDaysAgo.setDate(tenDaysAgo.getDate() - 9) twentyDaysAgo.setDate(twentyDaysAgo.getDate() - 19)
const result = await servers[0].videoStats.getTimeserieStats({ const result = await servers[0].videoStats.getTimeserieStats({
videoId: vodVideoId, videoId: vodVideoId,
metric: 'aggregateWatchTime', metric: 'aggregateWatchTime',
startDate: tenDaysAgo, startDate: twentyDaysAgo,
endDate: now endDate: now
}) })
expect(result.groupInterval).to.equal('one_day') expect(result.groupInterval).to.equal('1 day')
expect(result.data).to.have.lengthOf(10) expect(result.data).to.have.lengthOf(20)
const first = result.data[0] const first = result.data[0]
expect(new Date(first.date).toLocaleDateString()).to.equal(tenDaysAgo.toLocaleDateString()) expect(new Date(first.date).toLocaleDateString()).to.equal(twentyDaysAgo.toLocaleDateString())
expectInterval(result, 24 * 3600 * 1000) expectInterval(result, 24 * 3600 * 1000)
expectTodayLastValue(result, 9) expectTodayLastValue(result, 9)
@ -142,7 +142,7 @@ describe('Test views timeserie stats', function () {
endDate: now endDate: now
}) })
expect(result.groupInterval).to.equal('one_hour') expect(result.groupInterval).to.equal('1 hour')
expect(result.data).to.have.length.above(24).and.below(50) expect(result.data).to.have.length.above(24).and.below(50)
expectInterval(result, 3600 * 1000) expectInterval(result, 3600 * 1000)
@ -152,7 +152,7 @@ describe('Test views timeserie stats', function () {
it('Should automatically group by ten minutes', async function () { it('Should automatically group by ten minutes', async function () {
const now = new Date() const now = new Date()
const twoHoursAgo = new Date() const twoHoursAgo = new Date()
twoHoursAgo.setHours(twoHoursAgo.getHours() - 1) twoHoursAgo.setHours(twoHoursAgo.getHours() - 4)
const result = await servers[0].videoStats.getTimeserieStats({ const result = await servers[0].videoStats.getTimeserieStats({
videoId: vodVideoId, videoId: vodVideoId,
@ -161,8 +161,8 @@ describe('Test views timeserie stats', function () {
endDate: now endDate: now
}) })
expect(result.groupInterval).to.equal('ten_minutes') expect(result.groupInterval).to.equal('10 minutes')
expect(result.data).to.have.length.above(6).and.below(18) expect(result.data).to.have.length.above(20).and.below(30)
expectInterval(result, 60 * 10 * 1000) expectInterval(result, 60 * 10 * 1000)
expectTodayLastValue(result, 9) expectTodayLastValue(result, 9)
@ -180,7 +180,7 @@ describe('Test views timeserie stats', function () {
endDate: now endDate: now
}) })
expect(result.groupInterval).to.equal('one_minute') expect(result.groupInterval).to.equal('1 minute')
expect(result.data).to.have.length.above(20).and.below(40) expect(result.data).to.have.length.above(20).and.below(40)
expectInterval(result, 60 * 1000) expectInterval(result, 60 * 1000)

View file

@ -1,6 +1,5 @@
export * from './video-stats-overall.model' export * from './video-stats-overall.model'
export * from './video-stats-retention.model' export * from './video-stats-retention.model'
export * from './video-stats-timeserie-group-interval.type'
export * from './video-stats-timeserie-query.model' export * from './video-stats-timeserie-query.model'
export * from './video-stats-timeserie-metric.type' export * from './video-stats-timeserie-metric.type'
export * from './video-stats-timeserie.model' export * from './video-stats-timeserie.model'

View file

@ -1 +0,0 @@
export type VideoStatsTimeserieGroupInterval = 'one_day' | 'one_hour' | 'ten_minutes' | 'one_minute'

View file

@ -1,7 +1,5 @@
import { VideoStatsTimeserieGroupInterval } from './video-stats-timeserie-group-interval.type'
export interface VideoStatsTimeserie { export interface VideoStatsTimeserie {
groupInterval: VideoStatsTimeserieGroupInterval groupInterval: string
data: { data: {
date: string date: string