Better display redundancy pies

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / follows / video-redundancies-list / video-redundancies-list.component.ts

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 7ffed83e8a53147311dd02b39a805c0a1cd19ae0..a89603048cb8dde6731358268d48e03f88df785c 100644 (file)
--- 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 @@
+import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
@@ -9,7 +10,7 @@ import { VideosRedundancyStats } from '@shared/models/server'
 @Component({
   selector: 'my-video-redundancies-list',
   templateUrl: './video-redundancies-list.component.html',
-  styleUrls: [ '../follows.component.scss', './video-redundancies-list.component.scss' ]
+  styleUrls: [ './video-redundancies-list.component.scss' ]
 })
 export class VideoRedundanciesListComponent extends RestTable implements OnInit {
   private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
@@ -21,7 +22,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   displayType: VideoRedundanciesTarget = 'my-videos'
 
-  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: any, options: any }[] = []
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = []
 
   noRedundancies = false
 
@@ -89,19 +90,31 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   buildPieData (stats: VideosRedundancyStats) {
-    const totalSize = stats.totalSize
+    if (stats.totalSize === 0) return
+
+    const totalAvailable = stats.totalSize
       ? stats.totalSize - stats.totalUsed
-      : stats.totalUsed
+      : null
+
+    const labels = [ $localize`Used (${this.bytesToHuman(stats.totalUsed)})` ]
+    const data = [ stats.totalUsed ]
 
-    if (totalSize === 0) return
+    // Not in manual strategy
+    if (totalAvailable) {
+      labels.push(
+        $localize`Available (${this.bytesToHuman(totalAvailable)})`
+      )
+
+      data.push(totalAvailable)
+    }
 
     this.redundanciesGraphsData.push({
       stats,
       graphData: {
-        labels: [ $localize`Used`, $localize`Available` ],
+        labels,
         datasets: [
           {
-            data: [ stats.totalUsed, totalSize ],
+            data,
             backgroundColor: [
               '#FF6384',
               '#36A2EB'
@@ -114,21 +127,17 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         ]
       },
       options: {
-        title: {
-          display: true,
-          text: stats.strategy
-        },
-
-        tooltips: {
-          callbacks: {
-            label: (tooltipItem: any, data: any) => {
-              const dataset = data.datasets[tooltipItem.datasetIndex]
-              let label = data.labels[tooltipItem.index]
-              if (label) label += ': '
-              else label = ''
-
-              label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1)
-              return label
+        plugins: {
+          title: {
+            display: true,
+            text: stats.strategy
+          },
+
+          tooltip: {
+            callbacks: {
+              label: (tooltip: TooltipItem<any>) => {
+                return tooltip.label
+              }
             }
           }
         }
@@ -179,4 +188,8 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   private saveSelectLocalStorage () {
     peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
   }
+
+  private bytesToHuman (bytes: number) {
+    return this.bytesPipe.transform(bytes, 1)
+  }
 }