commit 0a34dfa32165036b380ec6ac493469b34007df0a
author SANDHYA.JS <sandhya.j@tataelxsi.co.in> Tue Apr 25 23:59:41 2023 +0530
committer SANDHYA.JS <sandhya.j@tataelxsi.co.in> Mon May 22 16:28:53 2023 +0530
tree 9d50d804fb643855ced378fea517115a52d4e447
parent 40cc37ef2bbc4aac5debc9dea0baeb6dbd87a2d7

Fix Bug 2121: NG-UI uses unmaintained Chokidar version

	- Upgraded Angular from 11 to 14 version to remove chokidar
	  unmaintained version.
	- Changed linting tool tslint to eslint for angular 14 as tslint
	  is depreacted after angular 12
	- Resolved linting issues from code

Change-Id: I00e908ab651db0f080e0d18a9d1c9711f4e36b91
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>

src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.ts

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 @@
     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 @@
         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 @@
             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 @@
      * @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}]
         };
     }
     /**