Translate status outside of doughnut component

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html

@@ -29,7 +29,7 @@
                         {
                             length: val.value,
                             color: val.color,
-                            label: val.value + ' ' + (val.label.toLowerCase().replace('_', '-') | translate)
+                            label: val.value + ' ' + val.label
                         }
                     ]"
                 >

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -163,7 +163,7 @@
         <div class="right-fixed-container">
             <redaction-project-listing-details
                 [projectsChartData]="projectsChartData"
-                [documentsChartData]="documentsChartData"
+                [documentsChartData]="translateChartService.translateStatus(documentsChartData)"
                 [filters]="detailsContainerFilters"
                 (filtersChanged)="filtersChanged($event)"
             ></redaction-project-listing-details>

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -22,6 +22,7 @@ import { PermissionsService } from '../../common/service/permissions.service';
 import { ProjectWrapper } from '../../state/model/project.wrapper';
 import { Subscription, timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { TranslateChartService } from '../../utils/translate-chart.service';
 
 @Component({
     selector: 'redaction-project-listing-screen',
@@ -53,7 +54,8 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _dialogService: DialogService,
         private readonly _translateService: TranslateService,
-        public readonly sortingService: SortingService
+        public readonly sortingService: SortingService,
+        public readonly translateChartService: TranslateChartService
     ) {}
 
     public ngOnInit(): void {
@@ -85,7 +87,11 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         const groups = groupBy(this.appStateService.aggregatedFiles, 'status');
         this.documentsChartData = [];
         for (const key of Object.keys(groups)) {
-            this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
+            this.documentsChartData.push({
+                value: groups[key].length,
+                color: key,
+                label: key
+            });
         }
     }
 

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html

@@ -45,7 +45,7 @@
 <div *ngIf="hasFiles" class="mt-24">
     <redaction-simple-doughnut-chart
         (toggleFilter)="toggleFilter('statusFilters', $event)"
-        [config]="documentsChartData"
+        [config]="translateChartService.translateStatus(documentsChartData)"
         [filter]="filters.statusFilters"
         [radius]="70"
         [strokeWidth]="15"

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts

@@ -6,6 +6,7 @@ import { DialogService } from '../../../dialogs/dialog.service';
 import { Router } from '@angular/router';
 import { FilterModel } from '../../../common/filter/model/filter.model';
 import { PermissionsService } from '../../../common/service/permissions.service';
+import { TranslateChartService } from '../../../utils/translate-chart.service';
 
 @Component({
     selector: 'redaction-project-details',
@@ -20,6 +21,7 @@ export class ProjectDetailsComponent implements OnInit {
 
     constructor(
         public readonly appStateService: AppStateService,
+        public readonly translateChartService: TranslateChartService,
         public readonly permissionsService: PermissionsService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _dialogService: DialogService,

apps/red-ui/src/app/utils/translate-chart.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { DoughnutChartConfig } from '../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TranslateChartService {
+    constructor(private readonly _translateService: TranslateService) {}
+
+    public translateStatus(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
+        return config.map((val) => ({ ...val, label: this._translateService.instant(val.label.toLowerCase().replace('_', '-')) }));
+    }
+}

apps/red-ui/src/assets/i18n/en.json

@@ -351,9 +351,9 @@
         "cancel": "Cancel"
     },
     "unassigned": "Unassigned",
-    "under-review": "Under review",
+    "under-review": "Under Review",
-    "under-approval": "Under approval",
+    "under-approval": "Under Approval",
-    "efsa": "EFSA approval",
+    "efsa": "EFSA Approval",
     "finished": "Finished",
     "approved": "Approved",
     "submitted": "Submitted",