X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;ds=inline;f=src%2Fapp%2Fdashboard%2FDashboardComponent.ts;h=8df0e7c5a1607c2798e8f59f6ac550dd8d277d36;hb=refs%2Ftags%2Frelease-v9.0-start;hp=4ab802ff6675a312c4b38ce4b2fbac172508cb48;hpb=3b4814aa2d3dec621dadb52f058ba95a3dc3a86a;p=osm%2FNG-UI.git

diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 4ab802f..8df0e7c 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -106,9 +106,12 @@ export class DashboardComponent implements OnInit {
     /** Give the message for the loading @public */
     public message: string = 'PLEASEWAIT';
 
-    /** List of NS Success Instances @private */
+    /** List of NS Success Instances @public */
     public nsRunningInstance: string[] = [];
 
+    /** List of color for Instances @private */
+    private backgroundColor: string[] = [];
+
     /** Utilizes rest service for any CRUD operations @private */
     private restService: RestService;
 
@@ -157,21 +160,6 @@ export class DashboardComponent implements OnInit {
     /** Contians hour converter @private */
     private hourConverter: number = 3600;
 
-    /** Contians color code for chart @private */
-    private chartColorPink: string = '#e4397c';
-
-    /** Contians color code for chart @private */
-    private chartColorPurple: string = '#605ca8';
-
-    /** Contians color code for chart @private */
-    private chartColorCyan: string = '#00c0ef';
-
-    /** Contians color code for chart @private */
-    private chartColorBlue: string = '#054C8C';
-
-    /** Contians color code for chart @private */
-    private chartColorYellow: string = '#ffce56';
-
     constructor(injector: Injector) {
         this.injector = injector;
         this.restService = this.injector.get(RestService);
@@ -254,20 +242,20 @@ export class DashboardComponent implements OnInit {
     public getVnfdPackageCount(): void {
         this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
             .subscribe((vnfdPackageData: VNFDDetails[]) => {
-            this.vnfdPackageCount = vnfdPackageData.length;
-        }, (error: ERRORDATA) => {
-            this.restService.handleError(error, 'get');
-        });
+                this.vnfdPackageCount = vnfdPackageData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
     }
 
     /** Get NSD Package details @public */
     public getNsdPackageCount(): void {
         this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
             .subscribe((nsdPackageData: NSDDetails[]) => {
-            this.nsdPackageCount = nsdPackageData.length;
-        }, (error: ERRORDATA) => {
-            this.restService.handleError(error, 'get');
-        });
+                this.nsdPackageCount = nsdPackageData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
     }
 
     /** Get NS Instance details @public */
@@ -294,6 +282,7 @@ export class DashboardComponent implements OnInit {
                 this.nsFailedInstances.push(nsdInstanceData);
             } else if (operationalStatus === 'running' && configStatus === 'configured') {
                 this.nsRunningInstance.push(nsdInstanceData.name);
+                this.backgroundColor.push(this.sharedService.generateColor());
                 this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit));
             }
         });
@@ -314,30 +303,22 @@ export class DashboardComponent implements OnInit {
                 datasets: [{
                     data: this.noOfHours,
                     label: this.translateService.instant('NOOFHOURS'),
-                    borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
-                    this.chartColorBlue, this.chartColorYellow],
+                    borderColor: this.backgroundColor,
                     fill: false,
-                    backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
-                    this.chartColorBlue, this.chartColorYellow]
+                    backgroundColor: this.backgroundColor
                 }]
             },
             options: {
+                hover: {
+                    onHover(evt: Event, item: {}): void {
+                        const el: HTMLElement = document.getElementById('canvas');
+                        el.style.cursor = item[0] ? 'pointer' : 'default';
+                    }
+                },
                 legend: { display: false },
                 scales: {
                     xAxes: [{
                         display: true,
-                        ticks: {
-                            // tslint:disable-next-line: no-any
-                            callback: (label: any, index: number, labels: string): string => {
-                                const length: number = 20;
-                                const ending: string = '...';
-                                if (label.length > length) {
-                                    return label.substring(0, length - ending.length) + ending;
-                                } else {
-                                    return label;
-                                }
-                            }
-                        },
                         scaleLabel: {
                             display: true,
                             labelString: this.translateService.instant('INSTANCES')