From: Barath Kumar R <barath.r@tataelxsi.co.in>
Date: Tue, 8 Jun 2021 05:36:38 +0000 (+0530)
Subject: Fix Bug to the Chart Js for displaying multiple
X-Git-Tag: v10.0.0~1
X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FNG-UI.git;a=commitdiff_plain;h=12997a184886efffdd0262e0d21def94a74d9dde

Fix Bug to the Chart Js for displaying multiple

 * The chart shows multiple instances bar graph in dashboard.

Change-Id: I8a420a77134b52710a87997333f127c80ab3ebe2
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
---

diff --git a/package.json b/package.json
index ca23253..6f33eb4 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@types/ol": "^5.3.5",
     "angular-notifier": "^6.0.1",
     "bootstrap": "^4.4.1",
-    "chart.js": "^3.2.1",
+    "chart.js": "^2.8.0",
     "codemirror": "^5.51.0",
     "core-js": "^2.5.4",
     "d3": "^5.9.2",
@@ -48,7 +48,7 @@
     "js-yaml": "^3.13.1",
     "jsonpath": "^1.0.2",
     "ng-sidebar": "~9.2.0",
-    "ng2-charts": "^3.0.0-beta.5",
+    "ng2-charts": "^2.4.2",
     "ng2-file-upload": "^1.3.0",
     "ng2-smart-table": "~1.6.0",
     "ol": "^5.3.3",
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index 4660732..56b79a4 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -21,7 +21,7 @@
 import { Component, Injector, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from 'AuthenticationService';
-import { ActiveElement, Chart, ChartEvent } from 'chart.js';
+import { Chart } from 'chart.js';
 import { ERRORDATA } from 'CommonModel';
 import { environment } from 'environment';
 import { NSDDetails } from 'NSDModel';
@@ -303,29 +303,36 @@ export class DashboardComponent implements OnInit {
                     data: this.noOfHours,
                     label: this.translateService.instant('NOOFHOURS'),
                     borderColor: this.backgroundColor,
+                    fill: false,
                     backgroundColor: this.backgroundColor
                 }]
             },
             options: {
-                onHover: (evt: ChartEvent, elements):void => {
-                    const el: HTMLElement = document.getElementById('canvas');
-                    el.style.cursor = elements[0] ? 'pointer' : 'default';
-                },
-                plugins: {
-                    legend: { display: false },
+                hover: {
+                    onHover(evt: Event, item: {}): void {
+                        const el: HTMLElement = document.getElementById('canvas');
+                        el.style.cursor = item[0] ? 'pointer' : 'default';
+                    }
                 },
+                legend: { display: false },
                 scales: {
-                    x: {
+                    xAxes: [{
                         display: true,
-                        labels: [this.translateService.instant('INSTANCES')],
-                    },
-                    y: {
+                        scaleLabel: {
+                            display: true,
+                            labelString: this.translateService.instant('INSTANCES')
+                        }
+                    }],
+                    yAxes: [{
                         ticks: {
-                            labelOffset: 0,
+                            beginAtZero: true
                         },
                         display: true,
-                        labels: [this.translateService.instant('NOOFHOURS')]
-                    },
+                        scaleLabel: {
+                            display: true,
+                            labelString: this.translateService.instant('NOOFHOURS')
+                        }
+                    }]
                 }
             }
         });