X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=23e928fcd51f7c141d068f5065130db5b6877c6a;hb=0a34dfa32165036b380ec6ac493469b34007df0a;hp=b7902a00a3eb3724b7535e3be3cd4fa4ee932bc2;hpb=9bae4601cd9e100e9e512f76f2a768dd7a886cdc;p=osm%2FNG-UI.git

diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index b7902a0..23e928f 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -18,12 +18,14 @@
 /**
  * @file Dashboard Component
  */
+import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
 import { AuthenticationService } from 'AuthenticationService';
-import { Chart } from 'chart.js';
-import 'chartjs-plugin-labels';
+import { Chart, ChartType, LineController, LineElement, PointElement, LinearScale, Title, ChartEvent, ActiveElement } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+Chart.register(LineController, LineElement, PointElement, LinearScale, Title, ChartDataLabels);
 import { ERRORDATA, TYPESECTION, VIM_TYPES } from 'CommonModel';
 import { environment } from 'environment';
 import { NSDDetails } from 'NSDModel';
@@ -35,7 +37,6 @@ import { Observable, Subscription } from 'rxjs';
 import { SDNControllerModel } from 'SDNControllerModel';
 import { SharedService } from 'SharedService';
 import { ProjectRoleMappings, UserDetail } from 'UserModel';
-import { isNullOrUndefined } from 'util';
 import { VimAccountDetails } from 'VimAccountModel';
 import { VNFInstanceDetails } from 'VNFInstanceModel';
 
@@ -57,7 +58,7 @@ export class DashboardComponent implements OnInit {
     /** Invoke service injectors @public */
     public injector: Injector;
 
-    /** handle translate @public */
+    /** Handle translate @public */
     public translateService: TranslateService;
 
     /** Observable holds logined value  @public */
@@ -172,11 +173,17 @@ export class DashboardComponent implements OnInit {
     private createdTimes: string[] = [];
 
     /** Contains slice limit const @private */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     private sliceLimit: number = 10;
 
     /** Contians hour converter @private */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     private hourConverter: number = 3600;
 
+    /** Converter used to round off time to one decimal point @private */
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    private converter: number = 10;
+
     /** Notifier service to popup notification @private */
     private notifierService: NotifierService;
 
@@ -310,7 +317,7 @@ export class DashboardComponent implements OnInit {
         const now: Date = new Date();
         const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
         this.createdTimes.forEach((createdTime: string): void => {
-            this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
+            this.noOfHours.push(Math.floor(((currentTime - Number(createdTime)) / this.hourConverter) * (this.converter)) / this.converter);
         });
         this.drawNsChart();
     }
@@ -318,7 +325,7 @@ export class DashboardComponent implements OnInit {
     /** Prepare and sketch NS instance chart */
     public drawNsChart(): void {
         this.charts = new Chart('canvas', {
-            type: 'bar',
+            type: 'bar' as ChartType,
             data: {
                 labels: this.nsRunningInstance,
                 datasets: [{
@@ -326,46 +333,48 @@ export class DashboardComponent implements OnInit {
                     label: this.translateService.instant('NOOFHOURS'),
                     borderColor: this.backgroundColor,
                     fill: false,
-                    backgroundColor: this.backgroundColor
+                    backgroundColor: this.backgroundColor,
+                    hoverBackgroundColor: this.backgroundColor
                 }]
             },
             options: {
                 layout: {
                     padding: {
-                        top: 20
+                        top: 25
                     }
                 },
-                hover: {
-                    onHover(evt: Event, item: {}): void {
-                        const el: HTMLElement = document.getElementById('canvas');
-                        el.style.cursor = item[0] ? 'pointer' : 'default';
-                    }
+                animation: false,
+                // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+                onHover(event: ChartEvent, item: ActiveElement[], chart: Chart): void {
+                    const el: HTMLElement = document.getElementById('canvas');
+                    el.style.cursor = item[0] ? 'pointer' : 'default';
                 },
                 plugins: {
-                    labels: {
-                        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
-                        render: 'value'
+                    legend: { display: false },
+                    datalabels: {
+                        anchor: 'end',
+                        align: 'top',
+                        font: {
+                            weight: 'bold'
+                        }
                     }
                 },
-                legend: { display: false },
                 scales: {
-                    xAxes: [{
+                    x: {
                         display: true,
-                        scaleLabel: {
+                        title: {
                             display: true,
-                            labelString: this.translateService.instant('INSTANCES')
+                            text: this.translateService.instant('NSINSTANCES')
                         }
-                    }],
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true
-                        },
+                    },
+                    y: {
+                        beginAtZero: true,
                         display: true,
-                        scaleLabel: {
+                        title: {
                             display: true,
-                            labelString: this.translateService.instant('NOOFHOURS')
+                            text: this.translateService.instant('NOOFHOURS')
                         }
-                    }]
+                    }
                 }
             }
         });
@@ -373,7 +382,7 @@ export class DashboardComponent implements OnInit {
 
     /** Get VNFD instance details @public */
     public getVnfInstanceCount(): void {
-        this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+        this.vnfInstanceCountSub = this.restService.getResource(environment.VNFINSTANCES_URL)
             .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => {
                 this.vnfInstanceCount = vnfInstanceData.length;
             }, (error: ERRORDATA): void => {
@@ -409,7 +418,6 @@ export class DashboardComponent implements OnInit {
         if (this.vimList.length === 0) {
             this.vimListData = null;
         }
-
     }
 
     /** Get Selected VIM details @public */