X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fvim-accounts%2FResources-Overview%2FResourcesOverviewComponent.ts;h=11d48d70bfd83e126b15dbcbb9e7fd0bed34936c;hb=0a34dfa32165036b380ec6ac493469b34007df0a;hp=2d21ade1235be215c5fc8b84bf0551afca0ab4c8;hpb=40cc37ef2bbc4aac5debc9dea0baeb6dbd87a2d7;p=osm%2FNG-UI.git

diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
index 2d21ade..11d48d7 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts
@@ -20,13 +20,13 @@
  */
 import { Component, Injector, Input, OnChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ChartOptions, ChartType } from 'chart.js';
-import 'chartjs-plugin-labels';
+import { ChartOptions, ChartType, Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+Chart.register(ChartDataLabels);
 import { CONSTANTNUMBER } from 'CommonModel';
 import {
     CHARTRANGE,
     CHARTVALUES,
-    Color,
     CONFIGRESOURCESTITLE,
     RANGECOLOR,
     RESOURCESCHARTDATA,
@@ -50,13 +50,7 @@ export class ResourcesOverviewComponent implements OnChanges {
     public translateService: TranslateService;
     /** Chart Options @public */
     public chartOptions: ChartOptions = {
-        responsive: true,
-        plugins: {
-            labels: {
-                // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
-                render: 'value'
-            }
-        }
+        responsive: true
     };
     /** Chart Lables @public */
     public chartLabels: String[] = [];
@@ -119,6 +113,7 @@ export class ResourcesOverviewComponent implements OnChanges {
         const range: CHARTRANGE = { percentage: 100, nearlyFull: 75, full: 100 };
         getCompute.forEach((key: string): void => {
             let usedColor: string = RANGECOLOR.used;
+            // eslint-disable-next-line security/detect-object-injection
             const getValuesUsedFree: number[] = Object.values(compute[key]);
             const total: number = key === keyValidate ? getValuesUsedFree[0] / CONSTANTNUMBER.oneGB : getValuesUsedFree[0];
             const used: number = key === keyValidate ? getValuesUsedFree[1] / CONSTANTNUMBER.oneGB : getValuesUsedFree[1];
@@ -130,7 +125,7 @@ export class ResourcesOverviewComponent implements OnChanges {
             if (usedPercentage === range.full) {
                 usedColor = RANGECOLOR.full;
             }
-            getData.push(this.generateChartData(key, { total, used, remaining }, [{ backgroundColor: [usedColor, '#b9bcc3'] }]));
+            getData.push(this.generateChartData(key, { total, used, remaining }, [usedColor, '#b9bcc3'] ));
         });
         return getData;
     }
@@ -140,12 +135,13 @@ export class ResourcesOverviewComponent implements OnChanges {
      * @param setValues CHARTVALUES
      * @returns RESOURCESCHARTDATA
      */
-    public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: Color[]): RESOURCESCHARTDATA {
+    public generateChartData(setTitle: string, setValues: CHARTVALUES, setColor: string[]): RESOURCESCHARTDATA {
         return {
+            // eslint-disable-next-line security/detect-object-injection
             title: CONFIGRESOURCESTITLE[setTitle],
             values: this.generateChartDataValues(setValues.total, setValues.used, setValues.remaining),
-            data: [setValues.used, setValues.remaining],
-            colorValues: setColor
+            data: [{data: [setValues.used, setValues.remaining], backgroundColor: setColor,
+                 hoverBackgroundColor: setColor, hoverBorderColor: setColor}]
         };
     }
     /**