aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts34
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts49
2 files changed, 43 insertions, 40 deletions
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 7ffed83e8..2f87c6743 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -1,3 +1,4 @@
1import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
1import { SortMeta } from 'primeng/api' 2import { SortMeta } from 'primeng/api'
2import { Component, OnInit } from '@angular/core' 3import { Component, OnInit } from '@angular/core'
3import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core' 4import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
@@ -21,7 +22,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
21 pagination: RestPagination = { count: this.rowsPerPage, start: 0 } 22 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
22 displayType: VideoRedundanciesTarget = 'my-videos' 23 displayType: VideoRedundanciesTarget = 'my-videos'
23 24
24 redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: any, options: any }[] = [] 25 redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = []
25 26
26 noRedundancies = false 27 noRedundancies = false
27 28
@@ -114,21 +115,22 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
114 ] 115 ]
115 }, 116 },
116 options: { 117 options: {
117 title: { 118 plugins: {
118 display: true, 119 title: {
119 text: stats.strategy 120 display: true,
120 }, 121 text: stats.strategy
121 122 },
122 tooltips: { 123
123 callbacks: { 124 tooltip: {
124 label: (tooltipItem: any, data: any) => { 125 callbacks: {
125 const dataset = data.datasets[tooltipItem.datasetIndex] 126 label: (tooltip: TooltipItem<any>) => {
126 let label = data.labels[tooltipItem.index] 127 let label = tooltip.label || ''
127 if (label) label += ': ' 128 if (label) label += ': '
128 else label = '' 129
129 130 label += this.bytesPipe.transform(tooltip.raw as number, 1)
130 label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1) 131
131 return label 132 return label
133 }
132 } 134 }
133 } 135 }
134 } 136 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index 303f783fd..205ad7a89 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -1,4 +1,4 @@
1import { ChartData } from 'chart.js' 1import { ChartData, ChartOptions, TooltipItem, TooltipModel } from 'chart.js'
2import { max, maxBy, min, minBy } from 'lodash-es' 2import { max, maxBy, min, minBy } from 'lodash-es'
3import { mergeMap } from 'rxjs/operators' 3import { mergeMap } from 'rxjs/operators'
4import { Component } from '@angular/core' 4import { Component } from '@angular/core'
@@ -18,7 +18,7 @@ export class MyVideoChannelsComponent {
18 videoChannelsMinimumDailyViews = 0 18 videoChannelsMinimumDailyViews = 0
19 videoChannelsMaximumDailyViews: number 19 videoChannelsMaximumDailyViews: number
20 20
21 chartOptions: any 21 chartOptions: ChartOptions
22 22
23 search: string 23 search: string
24 24
@@ -117,20 +117,33 @@ channel with the same name (${videoChannel.name})!`,
117 117
118 private buildChartOptions () { 118 private buildChartOptions () {
119 this.chartOptions = { 119 this.chartOptions = {
120 legend: { 120 plugins: {
121 display: false 121 legend: {
122 display: false
123 },
124 tooltip: {
125 mode: 'index',
126 intersect: false,
127 external: function ({ tooltip }: { tooltip: TooltipModel<any> }) {
128 if (!tooltip) return
129
130 // disable displaying the color box
131 tooltip.options.displayColors = false
132 },
133 callbacks: {
134 label: (tooltip: TooltipItem<any>) => `${tooltip.formattedValue} views`
135 }
136 }
122 }, 137 },
123 scales: { 138 scales: {
124 xAxes: [ { 139 x: {
125 display: false 140 display: false
126 } ], 141 },
127 yAxes: [ { 142 y: {
128 display: false, 143 display: false,
129 ticks: { 144 min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
130 min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)), 145 max: Math.max(1, this.videoChannelsMaximumDailyViews)
131 max: Math.max(1, this.videoChannelsMaximumDailyViews) 146 }
132 }
133 } ]
134 }, 147 },
135 layout: { 148 layout: {
136 padding: { 149 padding: {
@@ -145,18 +158,6 @@ channel with the same name (${videoChannel.name})!`,
145 radius: 0 158 radius: 0
146 } 159 }
147 }, 160 },
148 tooltips: {
149 mode: 'index',
150 intersect: false,
151 custom: function (tooltip: any) {
152 if (!tooltip) return
153 // disable displaying the color box
154 tooltip.displayColors = false
155 },
156 callbacks: {
157 label: (tooltip: any, data: any) => `${tooltip.value} views`
158 }
159 },
160 hover: { 161 hover: {
161 mode: 'index', 162 mode: 'index',
162 intersect: false 163 intersect: false