aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-library
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-library')
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts49
1 files changed, 25 insertions, 24 deletions
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