Closes kadai-io#184 - Update ng2-charts to v6

web/jest.config.js

@@ -1,13 +1,24 @@
 const { pathsToModuleNameMapper } = require('ts-jest');
 const { compilerOptions } = require('./tsconfig');
 
+const esModules = ['lodash-es'].join('|');
+
 module.exports = {
   preset: 'jest-preset-angular',
   roots: ['<rootDir>/src'],
   modulePaths: ['<rootDir>'],
   moduleDirectories: ['node_modules', 'src'],
   testMatch: ['**/+(*.)+(spec).+(ts)'],
   setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
+  transform: {
+    '^.+\\.mjs$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json'
+      }
+    ]
+  },
+  transformIgnorePatterns: [`node_modules/(?!.*\\.mjs$|${esModules})`],
   collectCoverage: true,
   coverageReporters: ['text'],
   coverageDirectory: 'coverage/kadai-web',

web/package.json

@@ -43,7 +43,7 @@
     "file-saver": "2.0.5",
     "globals": "^15.12.0",
     "lodash": "4.17.21",
-    "ng2-charts": "5.0.4",
+    "ng2-charts": "6.0.1",
     "ngx-bootstrap": "18.1.3",
     "ngx-infinite-scroll": "18.0.0",
     "rxjs": "7.8.1",

web/src/app/app.module.ts

@@ -73,6 +73,9 @@ import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 import { TreeModule } from '@ali-hm/angular-tree-component';
 import { provideHttpClient, withXsrfConfiguration } from '@angular/common/http';
 
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+
 const DECLARATIONS = [AppComponent, NavBarComponent, UserInformationComponent, NoAccessComponent, SidenavListComponent];
 
 const MODULES = [
@@ -123,6 +126,8 @@ const PROVIDERS = [
   provideHttpClient(withXsrfConfiguration({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' }))
 ];
 
+registerLocaleData(localeDe);
+
 @NgModule({
   declarations: DECLARATIONS,
   imports: MODULES,

web/src/app/history/history.module.ts

@@ -16,15 +16,16 @@
  *
  */
 
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgModule, LOCALE_ID } from '@angular/core';
+import { CommonModule, registerLocaleData } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { SharedModule } from 'app/shared/shared.module';
 import { HistoryRoutingModule } from './history-routing.module';
 import { TaskHistoryQueryComponent } from './task-history-query/task-history-query.component';
 import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
+import localeDe from '@angular/common/locales/de';
 
 @NgModule({
   imports: [
@@ -36,6 +37,11 @@ import { MatSortModule } from '@angular/material/sort';
     MatTableModule,
     MatSortModule
   ],
-  declarations: [TaskHistoryQueryComponent]
+  declarations: [TaskHistoryQueryComponent],
+  providers: [{ provide: LOCALE_ID, useValue: 'de' }]
 })
-export class HistoryModule {}
+export class HistoryModule {
+  constructor() {
+    registerLocaleData(localeDe);
+  }
+}

web/src/app/history/task-history-query/task-history-query.component.html

@@ -42,7 +42,7 @@
 
     <ng-container matColumnDef="created">
       <th *matHeaderCellDef disableClear mat-header-cell mat-sort-header>Created</th>
-      <td *matCellDef="let element" mat-cell>{{convertToTaskHistoryEventData(element).created | germanTimeFormat}}</td>
+      <td *matCellDef="let element" mat-cell>{{convertToTaskHistoryEventData(element).created | date: 'medium'}}</td>
     </ng-container>
 
     <ng-container matColumnDef="userId">

web/src/app/monitor/components/canvas/canvas.component.html

@@ -16,4 +16,4 @@
   ~
   -->
 
-<canvas id="{{id}}"></canvas>
+  <canvas [id]="id"></canvas>

web/src/app/monitor/components/canvas/canvas.component.spec.ts

@@ -35,8 +35,7 @@ describe('CanvasComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [NgxsModule.forRoot([SettingsState]), MatDialogModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
-      declarations: [CanvasComponent]
+      providers: [CanvasComponent, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
     }).compileComponents();
 
     fixture = TestBed.createComponent(CanvasComponent);

web/src/app/monitor/components/canvas/canvas.component.ts

@@ -17,19 +17,22 @@
  */
 
 import { AfterViewInit, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Chart } from 'chart.js';
+import { Chart, DoughnutController, ArcElement, Tooltip, Legend, Title } from 'chart.js';
 import { ReportRow } from '../../models/report-row';
 import { Select } from '@ngxs/store';
 import { SettingsSelectors } from '../../../shared/store/settings-store/settings.selectors';
 import { Observable, Subject } from 'rxjs';
 import { Settings } from '../../../settings/models/settings';
 import { takeUntil } from 'rxjs/operators';
 import { SettingMembers } from '../../../settings/components/Settings/expected-members';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 @Component({
   selector: 'kadai-monitor-canvas',
   templateUrl: './canvas.component.html',
-  styleUrls: ['./canvas.component.scss']
+  styleUrls: ['./canvas.component.scss'],
+  providers: [provideCharts(withDefaultRegisterables())],
+  standalone: true
 })
 export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() row: ReportRow;
@@ -104,4 +107,8 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy {
     this.destroy$.next();
     this.destroy$.complete();
   }
+
+  constructor() {
+    Chart.register(DoughnutController, ArcElement, Tooltip, Legend, Title);
+  }
 }

web/src/app/monitor/components/classification-report/classification-report.component.html

@@ -18,15 +18,21 @@
 
 <div *ngIf="reportData" class="panel panel-default">
   <div class="panel-heading">
-    <h4>{{reportData.meta.name}} ({{reportData.meta.date | germanTimeFormat}})</h4>
+    <h4>{{reportData.meta.name}} ({{reportData.meta.date | date: 'medium' }})</h4>
   </div>
   <div class="panel-body">
     <div class="row">
       <div class="col-xs-12 col-md-7 col-md-offset-2">
         <div style="position: relative; width:100vw">
-          <canvas [type]="lineChartType" [datasets]="lineChartData"
-                  [labels]="lineChartLabels"
-                  [legend]="lineChartLegend" [options]="lineChartOptions" baseChart></canvas>
+          <canvas 
+            baseChart
+            [type]="lineChartType" 
+            [datasets]="lineChartData"
+            [labels]="lineChartLabels"
+            [legend]="lineChartLegend" 
+            [options]="lineChartOptions" 
+            >
+          </canvas>
         </div>
       </div>
     </div>

web/src/app/monitor/components/classification-report/classification-report.component.ts

@@ -22,11 +22,17 @@ import { ChartData } from 'app/monitor/models/chart-data';
 import { ReportData } from '../../models/report-data';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 import { ChartConfiguration } from 'chart.js';
+import { CommonModule } from '@angular/common';
+import { ReportTableComponent } from '../report-table/report-table.component';
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 @Component({
   selector: 'kadai-monitor-classification-report',
   templateUrl: './classification-report.component.html',
-  styleUrls: ['./classification-report.component.scss']
+  styleUrls: ['./classification-report.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReportTableComponent, BaseChartDirective],
+  providers: [provideCharts(withDefaultRegisterables())]
 })
 export class ClassificationReportComponent implements OnInit {
   reportData: ReportData;

web/src/app/monitor/components/monitor/monitor.component.spec.ts

@@ -33,8 +33,7 @@ describe('MonitorComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [MonitorComponent],
-      imports: [MatTabsModule, RouterModule, RouterTestingModule, NoopAnimationsModule],
+      imports: [MatTabsModule, RouterModule, RouterTestingModule, NoopAnimationsModule, MonitorComponent],
       providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
     }).compileComponents();
   }));

web/src/app/monitor/components/monitor/monitor.component.ts

@@ -17,12 +17,15 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
 
 @Component({
   selector: 'kadai-monitor',
   templateUrl: './monitor.component.html',
-  styleUrls: ['./monitor.component.scss']
+  styleUrls: ['./monitor.component.scss'],
+  standalone: true,
+  imports: [MatTabNav, MatTabLink, RouterLink, MatTabNavPanel, RouterOutlet]
 })
 export class MonitorComponent implements OnInit {
   selectedTab = '';

web/src/app/monitor/components/report-table/report-table.component.ts

@@ -19,11 +19,15 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { ReportData } from 'app/monitor/models/report-data';
 import { ReportRow } from '../../models/report-row';
+import { NgIf, NgFor, NgClass } from '@angular/common';
+import { MatButton } from '@angular/material/button';
 
 @Component({
   selector: 'kadai-monitor-report-table',
   templateUrl: './report-table.component.html',
-  styleUrls: ['./report-table.component.scss']
+  styleUrls: ['./report-table.component.scss'],
+  standalone: true,
+  imports: [NgIf, NgFor, NgClass, MatButton]
 })
 export class ReportTableComponent implements OnChanges {
   @Input()

web/src/app/monitor/components/task-priority-report-filter/task-priority-report-filter.component.spec.ts

@@ -41,9 +41,9 @@ describe('TaskPriorityReportFilterComponent', () => {
         MatCheckboxModule,
         MatExpansionModule,
         NoopAnimationsModule,
-        MatDialogModule
+        MatDialogModule,
+        TaskPriorityReportFilterComponent
       ],
-      declarations: [TaskPriorityReportFilterComponent],
       providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
     }).compileComponents();
 

web/src/app/monitor/components/task-priority-report-filter/task-priority-report-filter.component.ts

@@ -22,11 +22,21 @@ import { Observable, Subject } from 'rxjs';
 import { SettingsSelectors } from '../../../shared/store/settings-store/settings.selectors';
 import { Settings } from '../../../settings/models/settings';
 import { takeUntil } from 'rxjs/operators';
+import {
+  MatAccordion,
+  MatExpansionPanel,
+  MatExpansionPanelHeader,
+  MatExpansionPanelTitle
+} from '@angular/material/expansion';
+import { NgFor, NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
   selector: 'kadai-monitor-task-priority-report-filter',
   templateUrl: './task-priority-report-filter.component.html',
-  styleUrls: ['./task-priority-report-filter.component.scss']
+  styleUrls: ['./task-priority-report-filter.component.scss'],
+  standalone: true,
+  imports: [MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, NgFor, MatCheckbox, NgIf]
 })
 export class TaskPriorityReportFilterComponent implements OnInit, OnDestroy {
   isPanelOpen = false;

web/src/app/monitor/components/task-priority-report/task-priority-report.component.html

@@ -20,7 +20,7 @@
 
   <!-- HEADER -->
   <div class="task-priority-report__header">
-    <h4 class="task-priority-report__headline"> {{reportData?.meta.name}} ({{reportData?.meta.date | germanTimeFormat
+    <h4 class="task-priority-report__headline"> {{reportData?.meta.name}} ({{reportData?.meta.date | date: 'medium'
       }}) </h4>
     <kadai-monitor-task-priority-report-filter
       (applyFilter)="applyFilter($event)"></kadai-monitor-task-priority-report-filter>

web/src/app/monitor/components/task-priority-report/task-priority-report.component.spec.ts

@@ -31,13 +31,9 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MatDividerModule } from '@angular/material/divider';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
-@Pipe({ name: 'germanTimeFormat' })
-class GermanTimeFormatPipe implements PipeTransform {
-  transform(value: number): number {
-    return value;
-  }
-}
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
 
 @Component({ selector: 'kadai-monitor-canvas', template: '' })
 class CanvasStub {
@@ -63,15 +59,18 @@ describe('TaskPriorityReportComponent', () => {
   let component: TaskPriorityReportComponent;
 
   beforeEach(waitForAsync(() => {
+    registerLocaleData(localeDe);
+
     TestBed.configureTestingModule({
-      imports: [NgxsModule.forRoot([SettingsState]), MatTableModule, MatDividerModule],
-      declarations: [TaskPriorityReportComponent, GermanTimeFormatPipe, CanvasStub, TaskPriorityReportFilterStub],
+      imports: [NgxsModule.forRoot([SettingsState]), MatTableModule, MatDividerModule, NoopAnimationsModule],
+      declarations: [CanvasStub, TaskPriorityReportFilterStub],
       providers: [
         RequestInProgressService,
         { provide: MonitorService, useValue: monitorServiceSpy },
         { provide: NotificationService, useValue: notificationServiceSpy },
         provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting()
+        provideHttpClientTesting(),
+        TaskPriorityReportComponent
       ]
     }).compileComponents();
 

web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts

@@ -27,11 +27,44 @@ import { Settings } from '../../../settings/models/settings';
 import { mergeMap, take, takeUntil } from 'rxjs/operators';
 import { SettingMembers } from '../../../settings/components/Settings/expected-members';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
+import { CommonModule } from '@angular/common';
+import { TaskPriorityReportFilterComponent } from '../task-priority-report-filter/task-priority-report-filter.component';
+import { MatDivider } from '@angular/material/divider';
+import { CanvasComponent } from '../canvas/canvas.component';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 
 @Component({
   selector: 'kadai-monitor-task-priority-report',
   templateUrl: './task-priority-report.component.html',
-  styleUrls: ['./task-priority-report.component.scss']
+  styleUrls: ['./task-priority-report.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    TaskPriorityReportFilterComponent,
+    MatDivider,
+    CanvasComponent,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow
+  ]
 })
 export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, OnDestroy {
   columns: string[] = ['priority', 'number'];

web/src/app/monitor/components/task-report/task-report.component.html

@@ -18,11 +18,17 @@
 
 <div *ngIf="reportData" class="panel panel-default">
   <div class="panel-heading">
-    <h4>{{reportData.meta.name}} ({{reportData.meta.date | germanTimeFormat}})</h4>
+    <h4>{{reportData.meta.name}} ({{reportData.meta.date | date: 'medium' }})</h4>
   </div>
   <div class="panel-body">
     <div style="position: relative; width:50vw; margin: 0 auto;">
-      <canvas [type]="pieChartType" [data]="pieChartData" [options]="pieChartOptions" baseChart></canvas>
+      <canvas
+        baseChart
+        [data]="pieChartData"
+        [type]="pieChartType"
+        [options]="pieChartOptions"
+        >
+      </canvas>
     </div>
     <kadai-monitor-report-table [reportData]="reportData"></kadai-monitor-report-table>
   </div>