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>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
index 483fc0b..8c75d25 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -35,14 +35,14 @@
<div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
*ngFor="let list of showData.data;let i = index;">
<div class="chartData-card card text-center text-primary">
- <canvas class="my-2"
+ <canvas class="my-2" *ngIf="list.values.total !== 0"
baseChart
- [data]="list.data"
+ [datasets]="list.data"
[labels]="chartLabels"
- [chartType]="chartType"
+ [type]="chartType"
[options]="chartOptions"
[legend]="chartLegend"
- [colors]="list.colorValues">
+ [colors]="list.backgroundColor">
</canvas>
<div class="no-data" *ngIf="list.values.total === 0 || list.values.total === null">
<h4><strong>{{'PAGE.VIMDETAILS.NODATA' | translate}}</strong></h4>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
index 721e8ad..1ffd10c 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -15,8 +15,8 @@
Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
*/
-@import "../../../assets/scss/mixins/mixin";
-@import "../../../assets/scss/variable";
+@import "../../../assets/scss/mixins/mixin.scss";
+@import "../../../assets/scss/variable.scss";
.chartData-card {
word-wrap: break-word;
@include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
@@ -29,7 +29,7 @@
}
.no-data {
margin-bottom: 2.5rem;
- margin-top: -1.5rem;
+ margin-top: 5rem;
}
}
.switch {
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}]
};
}
/**
diff --git a/src/app/vim-accounts/Resources-Overview/SharedModule.ts b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
index 1b365f3..5f4d726 100644
--- a/src/app/vim-accounts/Resources-Overview/SharedModule.ts
+++ b/src/app/vim-accounts/Resources-Overview/SharedModule.ts
@@ -21,16 +21,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
import { ResourcesOverviewComponent } from 'ResourcesOverviewComponent';
/**
* Creating @NgModule component for Modules
*/
@NgModule({
- imports: [CommonModule, TranslateModule, ChartsModule],
+ imports: [CommonModule, TranslateModule, NgChartsModule],
declarations: [ResourcesOverviewComponent],
- exports: [ResourcesOverviewComponent],
- entryComponents: [ResourcesOverviewComponent]
+ exports: [ResourcesOverviewComponent]
})
/** Exporting a class @exports SharedModule */
export class SharedModule {