Update charts, toggle dependencies in the package.json

dataquest-dev · Jan 19, 2024 · 24b894c · 24b894c
1 parent 210e60d
commit 24b894c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "@ngrx/store": "^15.4.0",
     "@nguniversal/express-engine": "^15.2.1",
     "@ngx-translate/core": "^14.0.0",
-    "@nth-cloud/ng-toggle": "7.0.0",
+    "@nth-cloud/ng-toggle": "11.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "@types/grecaptcha": "^3.0.4",
     "angular-idle-preload": "3.0.0",
@@ -88,8 +88,8 @@
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
-    "ng2-charts": "2.4.3",
-    "chart.js": "2.9.4",
+    "ng2-charts": "4.1.1",
+    "chart.js": "4.3.3",
     "compression": "^1.7.4",
     "cookie-parser": "1.4.6",
     "core-js": "^3.30.1",

diff --git a/src/app/item-page/clarin-matomo-statistics/clarin-matomo-statistics.component.ts b/src/app/item-page/clarin-matomo-statistics/clarin-matomo-statistics.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ChartDataSets, ChartOptions } from 'chart.js';
-import { BaseChartDirective, Label } from 'ng2-charts';
+import {ChartConfiguration, ChartDataset, ChartOptions} from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
 import { HttpClient } from '@angular/common/http';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { isNull, isUndefined } from '../../shared/empty.util';
@@ -54,51 +54,72 @@ export class ClarinMatomoStatisticsComponent implements OnInit {
   public actualMonth = '';
 
   public chartMessage = '';
+  public chartLabels: ChartConfiguration<'line'>['data'] = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+      {
+        data: [],
+        label: 'Views',
+        backgroundColor: '#9ee37d',
+        borderColor: '#358600',
+        pointBackgroundColor: '#1f6200',
+        hidden: false,
+      },
+      {
+        data: [],
+        label: 'Downloads',
+        backgroundColor: '#51b9f2',
+        borderColor: '#336ab5',
+        pointBackgroundColor: '#124a94',
+        hidden: false,
+      }
+    ],
+
 
-  public chartLabels: Label[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  }
+  // public chartLabels: Label[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
   // `lineTension: 0` = straight lines
-  public chartData: ChartDataSets[] = [
-    {
-      data: [],
-      label: 'Views',
-      backgroundColor: '#9ee37d',
-      borderColor: '#358600',
-      pointBackgroundColor: '#1f6200',
-      hidden: false,
-      lineTension: 0
-    },
-    {
-      data: [],
-      label: 'Downloads',
-      backgroundColor: '#51b9f2',
-      borderColor: '#336ab5',
-      pointBackgroundColor: '#124a94',
-      hidden: false,
-      lineTension: 0
-    }
-  ];
+  // public chartData: ChartDataSets[] = [
+  //   {
+  //     data: [],
+  //     label: 'Views',
+  //     backgroundColor: '#9ee37d',
+  //     borderColor: '#358600',
+  //     pointBackgroundColor: '#1f6200',
+  //     hidden: false,
+  //     lineTension: 0
+  //   },
+  //   {
+  //     data: [],
+  //     label: 'Downloads',
+  //     backgroundColor: '#51b9f2',
+  //     borderColor: '#336ab5',
+  //     pointBackgroundColor: '#124a94',
+  //     hidden: false,
+  //     lineTension: 0
+  //   }
+  // ];
 
   public color = '#27496d';
-  public chartOptions: ChartOptions = {
+  public chartOptions: ChartConfiguration['options'] = {
     scales: {
-      xAxes: [{
-        gridLines: {
+      x: {
+        grid: {
           color: this.color
         },
         ticks: {
-          fontColor: '#00a8cc'
+          color: '#00a8cc'
         },
-      }],
-      yAxes: [{
-        gridLines: {
+      },
+      y:{
+        grid: {
           color: this.color
         },
         ticks: {
-          beginAtZero: true,
-          fontColor: this.color
+          color: this.color
         }
-      }]
+      }
     }
   };
 
@@ -501,26 +522,26 @@ export class ClarinMatomoStatisticsComponent implements OnInit {
     // Update chart message e.g., `Statistics for years 2022 to 2023`, `Statistics for the year 2022`,..
     this.updateChartMessage(labels);
 
-    if (this.chartData) {
-      if (this.chartData[0]) {
+    if (this.chartLabels.datasets) {
+      if (this.chartLabels.datasets[0]) {
         // Update view data
-        this.chartData[0].data = totalDataViews;
+        this.chartLabels.datasets[0].data = totalDataViews;
       }
-      if (this.chartData[1]) {
+      if (this.chartLabels.datasets[1]) {
         // Update downloads data
-        this.chartData[1].data = totalDataDownloads;
+        this.chartLabels.datasets[1].data = totalDataDownloads;
       }
     }
     this.chart.update();
   }
 
   setLabels(labels) {
     labels.forEach(label => {
-      this.chartLabels.push(label);
+      this.chartLabels.labels.push(label);
     });
   }
 
   removeLabels() {
-    this.chartLabels = [];
+    this.chartLabels.labels = [];
   }
 }
diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts
@@ -73,7 +73,7 @@ import { ClarinRefFeaturedServicesComponent } from './clarin-ref-featured-servic
 import { ClarinRefCitationModalComponent } from './clarin-ref-citation-modal/clarin-ref-citation-modal.component';
 import { ClarinMatomoStatisticsComponent } from './clarin-matomo-statistics/clarin-matomo-statistics.component';
 import { ClarinStatisticsButtonComponent } from './clarin-statistics-button/clarin-statistics-button.component';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { ClarinGenericItemFieldComponent } from './simple/field-components/clarin-generic-item-field/clarin-generic-item-field.component';
 import { ClarinCollectionsItemFieldComponent } from './simple/field-components/clarin-collections-item-field/clarin-collections-item-field.component';
 import { ClarinFilesItemFieldComponent } from './simple/field-components/clarin-files-item-field/clarin-files-item-field.component';
@@ -163,7 +163,7 @@ const DECLARATIONS = [
     ResultsBackButtonModule,
     UploadModule,
     DsoPageModule,
-    ChartsModule,
+    NgChartsModule,
     NgbModule
   ],
   declarations: [