added states chart

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html

@@ -31,6 +31,16 @@
                 noDataIcon="red:attribute"
             ></iqser-table>
         </div>
+
+        <div class="right-container">
+            <redaction-simple-doughnut-chart
+                [config]="chartData"
+                [radius]="80"
+                [strokeWidth]="15"
+                [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
+                [totalType]="'count'"
+            ></redaction-simple-doughnut-chart>
+        </div>
     </div>
 </section>
 
@@ -55,7 +65,7 @@
     <div *ngIf="cast(entity) as state">
         <div class="cell">
             <div class="flex-align-items-center">
-                <div class="dossier-state-square" [style.background-color]="state.description"></div>
+                <div [style.background-color]="state.description" class="dossier-state-square"></div>
                 <div class="state-name">{{ state.name }}</div>
             </div>
         </div>

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss

@@ -12,3 +12,7 @@
     line-height: 20px;
     color: variables.$grey-1;
 }
+
+.right-container {
+    padding: 50px 26px 0;
+}

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts

@@ -18,6 +18,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
 import { UserService } from '../../../../services/user.service';
 import { AppStateService } from '../../../../state/app-state.service';
 import { HttpStatusCode } from '@angular/common/http';
+import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
 
 @Component({
     templateUrl: './dossier-states-listing-screen.component.html',
@@ -37,6 +38,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         { label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'searchKey' },
         { label: _('dossier-states-listing.table-col-names.dossiers-count'), sortByKey: 'dossierCount' },
     ];
+    chartData: DoughnutChartConfig[];
 
     constructor(
         protected readonly _injector: Injector,
@@ -107,8 +109,18 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             this._dossierStateService.all.forEach(
                 state => (state.dossierCount = dossiers.filter(dossier => dossier.dossierStatusId === state.dossierStatusId).length),
             );
+            this.chartData = this._loadChartData();
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
+
+    private _loadChartData(): DoughnutChartConfig[] {
+        const config: DoughnutChartConfig[] = [];
+        this._dossierStateService.all.forEach(state => {
+            config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.description });
+        });
+
+        return config;
+    }
 }

apps/red-ui/src/app/services/entity-services/dossier-state.service.ts

@@ -38,9 +38,4 @@ export class DossierStateService extends EntitiesService<DossierState, IDossierS
         const url = `${this._defaultModelPath}/${dossierStatusId}?replaceDossierStatusId=${replaceDossierStatusId}`;
         return this.delete({}, url);
     }
-
-    @Validate()
-    getById(@RequiredParam() id: string): Observable<DossierState> {
-        return this._getOne([id]);
-    }
 }

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

@@ -639,6 +639,9 @@
       "delete": "Delete Status",
       "edit": "Edit Status"
     },
+    "chart": {
+      "dossier-states": "Dossier States"
+    },
     "error": {
       "conflict": "Dossier State with this name already exists!",
       "generic": "Failed to add Dossier State"