Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-3800: fix donut charts

Browse Source
This commit is contained in:
Dan Percic 2022-05-11 12:55:53 +03:00
parent 6260d6cd1a
commit 67b11c560e
20 changed files with 112 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
View File

@ -19,13 +19,13 @@
</div>
<div class="mt-44">
<redaction-simple-doughnut-chart
[config]="chartData"
<redaction-donut-chart
[config]="chartConfig"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'user-stats.chart.users' | translate"
direction="row"
filterKey="roleFilters"
totalType="sum"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>

4
apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts
View File

@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DoughnutChartConfig } from '@red/domain';
import { DonutChartConfig } from '@red/domain';
@Component({
selector: 'redaction-users-stats',
@ -8,5 +8,5 @@ import { DoughnutChartConfig } from '@red/domain';
})
export class UsersStatsComponent {
@Output() toggleCollapse = new EventEmitter();
@Input() chartData: DoughnutChartConfig[];
@Input() chartConfig: DonutChartConfig[];
}

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

@ -32,14 +32,14 @@
</div>
<div class="right-container">
<redaction-simple-doughnut-chart
*ngIf="chartData$ | async as chartData"
[config]="chartData"
<redaction-donut-chart
*ngIf="chartConfig$ | async as chartConfig"
[config]="chartConfig"
[radius]="80"
[strokeWidth]="15"
[subtitle]="'dossier-states-listing.chart.dossier-states' | translate: { count: chartData.length }"
[subtitle]="'dossier-states-listing.chart.dossier-states' | translate: { count: chartConfig.length }"
[totalType]="'simpleLabel'"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>
</div>
</section>

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

@ -7,7 +7,7 @@ import {
SortingOrders,
TableColumnConfig,
} from '@iqser/common-ui';
import { DossierState, DoughnutChartConfig, IDossierState } from '@red/domain';
import { DonutChartConfig, DossierState, IDossierState } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom, Observable } from 'rxjs';
import { AdminDialogService } from '../../services/admin-dialog.service';
@ -35,7 +35,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
{ label: _('dossier-states-listing.table-col-names.rank'), sortByKey: 'rank' },
{ label: _('dossier-states-listing.table-col-names.dossiers-count') },
];
chartData$: Observable<DoughnutChartConfig[]>;
chartConfig$: Observable<DonutChartConfig[]>;
readonly #dossierTemplateId: string;
constructor(
@ -48,9 +48,9 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
) {
super(_injector);
this.#dossierTemplateId = _route.snapshot.paramMap.get('dossierTemplateId');
this.chartData$ = this._dossierStatesMapService.get$(this.#dossierTemplateId).pipe(
this.chartConfig$ = this._dossierStatesMapService.get$(this.#dossierTemplateId).pipe(
tap(states => this.entitiesService.setEntities(states)),
map(states => this.#chartData(states)),
map(states => this.#chartConfig(states)),
);
}
@ -79,7 +79,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
this._dialogService.openDialog('deleteDossierState', $event, data);
}
#chartData(states: DossierState[]): DoughnutChartConfig[] {
#chartConfig(states: DossierState[]): DonutChartConfig[] {
return states.map(state => ({
value: state.dossierCount,
label: state.name,

5
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -12,6 +12,7 @@
[(value)]="searchService.searchValue"
[placeholder]="'user-listing.search' | translate"
></iqser-input-with-action>
<iqser-icon-button
(action)="openAddEditUserDialog($event)"
*ngIf="currentUser.isUserAdmin"
@ -19,6 +20,7 @@
[type]="iconButtonTypes.primary"
icon="iqser:plus"
></iqser-icon-button>
<iqser-circle-button
*ngIf="currentUser.isUser"
[tooltip]="'common.close' | translate"
@ -45,7 +47,7 @@
<div [class.collapsed]="collapsedDetails" class="right-container" iqserHasScrollbar>
<redaction-users-stats
(toggleCollapse)="collapsedDetails = !collapsedDetails"
[chartData]="chartData"
[chartConfig]="chartConfig"
></redaction-users-stats>
</div>
</div>
@ -93,6 +95,7 @@
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<iqser-circle-button
(action)="openDeleteUsersDialog([user.id], $event)"
[disabled]="user.id === userService.currentUser.id"

8
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
View File

@ -2,7 +2,7 @@ import { Component, forwardRef, Injector, OnInit } from '@angular/core';
import { UserService } from '@services/user.service';
import { AdminDialogService } from '../../services/admin-dialog.service';
import { TranslateService } from '@ngx-translate/core';
import { DoughnutChartConfig, User, UserTypes } from '@red/domain';
import { DonutChartConfig, User, UserTypes } from '@red/domain';
import { TranslateChartService } from '@services/translate-chart.service';
import {
CircleButtonTypes,
@ -46,7 +46,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
{ label: _('user-listing.table-col-names.roles') },
];
collapsedDetails = false;
chartData: DoughnutChartConfig[] = [];
chartConfig: DonutChartConfig[] = [];
constructor(
readonly userService: UserService,
@ -110,7 +110,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
}
private _computeStats() {
this.chartData = this._translateChartService.translateRoles(
this.chartConfig = this._translateChartService.translateRoles(
UserTypes.map(type => ({
value: this.allEntities.filter(userTypeFilters[type]).length,
color: type.replace('RED_', ''),
@ -123,7 +123,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
}
private _computeAllFilters() {
const roleFilters = this.chartData.map(
const roleFilters = this.chartConfig.map(
config =>
new NestedFilter({
id: config.key,

12
apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
View File

@ -37,24 +37,24 @@
</div>
</div>
<div class="flex-3">
<redaction-simple-doughnut-chart
[config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartData, dossierTemplate.id)"
<redaction-donut-chart
[config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }"
direction="row"
totalType="sum"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>
<div class="flex-3">
<redaction-simple-doughnut-chart
[config]="translateChartService.translateWorkflowStatus(dossierTemplate.documentsChartData)"
<redaction-donut-chart
[config]="translateChartService.translateWorkflowStatus(dossierTemplate.documentsChartConfig)"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'dossier-template-stats.total-documents' | translate"
direction="row"
totalType="sum"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>
</ng-container>

6
apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
View File

@ -32,19 +32,19 @@
<div class="mt-16">
<div class="all-caps-label" translate="dossier-details.members"></div>
<redaction-team-members [dossierId]="dossierId" [memberIds]="dossier.memberIds" [perLine]="9"></redaction-team-members>
<redaction-team-members [dossierId]="dossier.dossierId" [memberIds]="dossier.memberIds" [perLine]="9"></redaction-team-members>
</div>
<ng-container *ngIf="dossierStats$ | async as stats">
<div *ngIf="stats.hasFiles" class="mt-24">
<redaction-simple-doughnut-chart
<redaction-donut-chart
[config]="chartConfig$ | async"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'dossier-overview.dossier-details.charts.documents-in-dossier' | translate"
direction="row"
helpModeKey="dashboard_in_dossier"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>
<div *ngIf="statusConfig$ | async as statusConfig" class="mt-24">

45
apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
View File

@ -1,10 +1,10 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import {
DonutChartConfig,
Dossier,
DOSSIER_ID,
DossierAttributeWithValue,
DossierStats,
DoughnutChartConfig,
IDossierRequest,
StatusSorter,
User,
@ -17,7 +17,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { ActivatedRoute } from '@angular/router';
import { firstValueFrom, Observable } from 'rxjs';
import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
import { map, pluck, switchMap } from 'rxjs/operators';
import { map } from 'rxjs/operators';
import { DossiersService } from '@services/dossiers/dossiers.service';
@Component({
@ -27,35 +27,32 @@ import { DossiersService } from '@services/dossiers/dossiers.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossierDetailsComponent {
editingOwner = false;
@Input() dossierAttributes: DossierAttributeWithValue[];
@Output() readonly toggleCollapse = new EventEmitter();
collapseTooltip = _('dossier-details.collapse');
expandTooltip = _('dossier-details.expand');
editingOwner = false;
readonly collapseTooltip = _('dossier-details.collapse');
readonly expandTooltip = _('dossier-details.expand');
readonly needsWorkFilters$ = this.filterService.getFilterModels$('needsWorkFilters');
readonly currentUser = this._userService.currentUser;
readonly dossierId: string;
readonly dossier$: Observable<Dossier>;
readonly dossierStats$: Observable<DossierStats>;
chartConfig$: Observable<DoughnutChartConfig[]>;
statusConfig$: Observable<ProgressBarConfigModel[]>;
readonly chartConfig$: Observable<DonutChartConfig[]>;
readonly statusConfig$: Observable<ProgressBarConfigModel[]>;
constructor(
readonly translateChartService: TranslateChartService,
readonly filterService: FilterService,
private readonly _dossiersService: DossiersService,
private readonly _userService: UserService,
private readonly _dossierStatsService: DossierStatsService,
private readonly _toaster: Toaster,
activatedRoute: ActivatedRoute,
private readonly _toaster: Toaster,
readonly filterService: FilterService,
dossierStatsService: DossierStatsService,
private readonly _userService: UserService,
private readonly _dossiersService: DossiersService,
readonly translateChartService: TranslateChartService,
) {
this.dossierId = activatedRoute.snapshot.paramMap.get(DOSSIER_ID);
this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId).pipe(shareLast());
this.dossierStats$ = this.dossier$.pipe(
pluck('dossierId'),
switchMap(dossierId => _dossierStatsService.watch$(dossierId)),
);
const dossierId = activatedRoute.snapshot.paramMap.get(DOSSIER_ID);
this.dossier$ = _dossiersService.getEntityChanged$(dossierId).pipe(shareLast());
this.dossierStats$ = dossierStatsService.watch$(dossierId).pipe(shareLast());
this.chartConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateChartConfig(stats)));
this.statusConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateStatusConfig(stats)));
}
@ -74,15 +71,15 @@ export class DossierDetailsComponent {
this._toaster.info(_('assignment.owner'), { params: { ownerName, dossierName } });
}
#calculateChartConfig(stats: DossierStats): DoughnutChartConfig[] {
const documentsChartData: DoughnutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({
#calculateChartConfig(stats: DossierStats): DonutChartConfig[] {
const documentsChartConfig: DonutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({
value: stats.fileCountPerWorkflowStatus[status],
color: status,
label: workflowFileStatusTranslations[status],
key: status,
}));
documentsChartData.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
return this.translateChartService.translateLabels(documentsChartData);
documentsChartConfig.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
return this.translateChartService.translateLabels(documentsChartConfig);
}
#calculateStatusConfig(stats: DossierStats): ProgressBarConfigModel[] {

12
apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
View File

@ -1,10 +1,10 @@
<div *ngIf="stats$ | async as stats">
<redaction-simple-doughnut-chart
[config]="dossiersChartData$ | async"
<redaction-donut-chart
[config]="dossiersChartConfig$ | async"
[radius]="80"
[strokeWidth]="15"
[subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: stats.numberOfActiveDossiers }"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
<div class="dossier-stats-container">
<div class="dossier-stats-item">
@ -26,10 +26,10 @@
</div>
<div class="right-chart">
<redaction-simple-doughnut-chart
[config]="documentsChartData$ | async"
<redaction-donut-chart
[config]="documentsChartConfig$ | async"
[radius]="80"
[strokeWidth]="15"
[subtitle]="'dossier-template-stats.total-documents' | translate"
></redaction-simple-doughnut-chart>
></redaction-donut-chart>
</div>

20
apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
View File

@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DashboardStats, DoughnutChartConfig } from '@red/domain';
import { DashboardStats, DonutChartConfig } from '@red/domain';
import { Observable } from 'rxjs';
import { TranslateChartService } from '@services/translate-chart.service';
import { map, pluck } from 'rxjs/operators';
import { map } from 'rxjs/operators';
import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
import { ActivatedRoute } from '@angular/router';
import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
@ -15,8 +15,8 @@ import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
})
export class DossiersListingDetailsComponent {
readonly stats$: Observable<DashboardStats>;
readonly documentsChartData$: Observable<DoughnutChartConfig[]>;
readonly dossiersChartData$: Observable<DoughnutChartConfig[]>;
readonly documentsChartConfig$: Observable<DonutChartConfig[]>;
readonly dossiersChartConfig$: Observable<DonutChartConfig[]>;
constructor(
route: ActivatedRoute,
@ -26,13 +26,13 @@ export class DossiersListingDetailsComponent {
const dossierTemplateId: string = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.stats$ = dashboardStatsService.getEntityChanged$(dossierTemplateId);
this.dossiersChartData$ = this.stats$.pipe(
pluck('dossiersChartData'),
map(data => this._translateChartService.translateDossierStates(data, dossierTemplateId)),
this.dossiersChartConfig$ = this.stats$.pipe(
map(stats => stats.dossiersChartConfig),
map(data => _translateChartService.translateDossierStates(data, dossierTemplateId)),
);
this.documentsChartData$ = this.stats$.pipe(
pluck('documentsChartData'),
map(data => this._translateChartService.translateWorkflowStatus(data)),
this.documentsChartConfig$ = this.stats$.pipe(
map(stats => stats.documentsChartConfig),
map(data => _translateChartService.translateWorkflowStatus(data)),
);
}
}

2
apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html → apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html
View File

@ -27,7 +27,7 @@
(click)="val.key && selectValue(val.key)"
*ngFor="let val of config"
[class.active]="filterChecked$(val.key) | async"
[class.filter-disabled]="!val.key || !filtersEnabled"
[class.filter-disabled]="!val.key || !(filters$ | async).length"
>
<iqser-status-bar
[configs]="[

0
apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss → apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss
View File

41
apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts → apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts
View File

@ -1,17 +1,17 @@
import { Component, Input, OnChanges, OnInit, Optional } from '@angular/core';
import { DoughnutChartConfig } from '@red/domain';
import { FilterService, INestedFilter } from '@iqser/common-ui';
import { DonutChartConfig } from '@red/domain';
import { FilterService, get, INestedFilter, shareLast } from '@iqser/common-ui';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'redaction-simple-doughnut-chart',
templateUrl: './simple-doughnut-chart.component.html',
styleUrls: ['./simple-doughnut-chart.component.scss'],
selector: 'redaction-donut-chart',
templateUrl: './donut-chart.component.html',
styleUrls: ['./donut-chart.component.scss'],
})
export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
export class DonutChartComponent implements OnChanges, OnInit {
@Input() subtitle: string;
@Input() config: DoughnutChartConfig[] = [];
@Input() config: DonutChartConfig[] = [];
@Input() radius = 85;
@Input() strokeWidth = 20;
@Input() direction: 'row' | 'column' = 'column';
@ -19,23 +19,15 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
@Input() counterText: string;
@Input() filterKey = 'statusFilters';
@Input() helpModeKey: 'dashboard_in_dossier';
filtersEnabled: boolean;
chartData: any[] = [];
cx = 0;
cy = 0;
size = 0;
filters$: Observable<INestedFilter[]>;
constructor(@Optional() readonly filterService: FilterService) {
if (filterService) {
this.filterService.filterGroups$.subscribe(() => {
this.filtersEnabled = !!this.filterService.filterGroups.find(g => g.slug === this.filterKey);
});
} else {
this.filtersEnabled = false;
}
// TODO: move this component to a separate module, split into smaller components, improve filters
}
get circumference(): number {
@ -51,7 +43,11 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
ngOnInit() {
this.filters$ = (this.filtersEnabled && this.filterService.getFilterModels$(this.filterKey)) ?? of([]);
this.filters$ =
this.filterService?.getFilterModels$(this.filterKey).pipe(
map(filters => filters ?? []),
shareLast(),
) ?? of([]);
}
ngOnChanges(): void {
@ -62,7 +58,10 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
filterChecked$(key: string): Observable<boolean> {
return this.filtersEnabled ? this.filters$.pipe(map(all => all?.find(e => e.id === key)?.checked)) : of(false);
return this.filters$.pipe(
get(filter => filter.id === key),
map(filter => !!filter?.checked),
);
}
calculateChartData() {
@ -91,7 +90,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`;
}
getLabel({ label, value }: DoughnutChartConfig): string {
getLabel({ label, value }: DonutChartConfig): string {
return this.totalType === 'simpleLabel'
? `${label}`
: this.totalType === 'sum'
@ -100,8 +99,6 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
selectValue(key: string): void {
if (this.filtersEnabled) {
this.filterService.toggleFilter(this.filterKey, key);
}
this.filterService?.toggleFilter(this.filterKey, key);
}
}

4
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -9,7 +9,7 @@ import { MatConfigModule } from '../mat-config/mat-config.module';
import { IconsModule } from '../icons/icons.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
import { CommonUiModule } from '@iqser/common-ui';
import { SelectComponent } from './components/select/select.component';
@ -41,7 +41,7 @@ const components = [
InitialsAvatarComponent,
PaginationComponent,
AnnotationIconComponent,
SimpleDoughnutChartComponent,
DonutChartComponent,
DictionaryAnnotationIconComponent,
SelectComponent,
DictionaryManagerComponent,

8
apps/red-ui/src/app/services/entity-services/dossier-states-map.service.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { DossierState, DoughnutChartConfig, IDossierState } from '@red/domain';
import { DonutChartConfig, DossierState, IDossierState } from '@red/domain';
import { EntitiesMapService } from '@iqser/common-ui';
import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
import { flatMap } from 'lodash-es';
@ -10,15 +10,15 @@ export class DossierStatesMapService extends EntitiesMapService<DossierState, ID
super(DOSSIER_TEMPLATE_ID);
}
get stats(): DoughnutChartConfig[] {
get stats(): DonutChartConfig[] {
const allStates = flatMap(Array.from(this._map.values()).map(obs => obs.value));
return Array.from(
allStates
.reduce((acc, { color, name, dossierCount }) => {
const key = name + '-' + color;
const item: DoughnutChartConfig = acc.get(key) ?? Object.assign({}, { value: 0, label: name, color: color });
const item: DonutChartConfig = acc.get(key) ?? Object.assign({}, { value: 0, label: name, color: color });
return acc.set(key, { ...item, value: item.value + dossierCount });
}, new Map<string, DoughnutChartConfig>())
}, new Map<string, DonutChartConfig>())
.values(),
);
}

10
apps/red-ui/src/app/services/translate-chart.service.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { DoughnutChartConfig } from '@red/domain';
import { DonutChartConfig } from '@red/domain';
import { TranslateService } from '@ngx-translate/core';
import { rolesTranslations } from '../translations/roles-translations';
import { workflowFileStatusTranslations } from '../translations/file-status-translations';
@ -11,11 +11,11 @@ import { DossierStatesMapService } from './entity-services/dossier-states-map.se
export class TranslateChartService {
constructor(private readonly _translateService: TranslateService, private readonly _dossierStatesMapService: DossierStatesMapService) {}
translateLabels(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
translateLabels(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({ ...val, label: this._translateService.instant(val.label) }));
}
translateDossierStates(config: DoughnutChartConfig[], dossierTemplateId: string): DoughnutChartConfig[] {
translateDossierStates(config: DonutChartConfig[], dossierTemplateId: string): DonutChartConfig[] {
return config.map(val => {
if (!val.key) {
return { ...val, label: this._translateService.instant(val.label) };
@ -26,11 +26,11 @@ export class TranslateChartService {
});
}
translateWorkflowStatus(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
translateWorkflowStatus(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({ ...val, label: this._translateService.instant(workflowFileStatusTranslations[val.label] as string) }));
}
translateRoles(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
translateRoles(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({
...val,
label: this._translateService.instant(rolesTranslations[val.label]).toLowerCase(),

2
libs/common-ui

@ -1 +1 @@
Subproject commit 37ab9a6ed7fb9f0a70a2226f75a86611405f907d
Subproject commit e20ed84ca2c59f7235de4d7d5e22e114b99ac51a

20
libs/red-domain/src/lib/dossier-templates/dashboard-stats.model.ts
View File

@ -1,6 +1,6 @@
import { IListable, List } from '@iqser/common-ui';
import { CountByStatus, CountPerProcessingStatus, CountPerWorkflowStatus, IDashboardStats } from './dashboard-stats';
import { DoughnutChartConfig, StatusSorter } from '../shared';
import { DonutChartConfig, StatusSorter } from '../shared';
export class DashboardStats implements IListable, IDashboardStats {
readonly dossierCountByStatus: List<CountByStatus>;
@ -17,8 +17,8 @@ export class DashboardStats implements IListable, IDashboardStats {
readonly numberOfPages: number;
readonly numberOfPeople: number;
readonly numberOfSoftDeletedFiles: number;
readonly dossiersChartData: DoughnutChartConfig[];
readonly documentsChartData: DoughnutChartConfig[];
readonly dossiersChartConfig: DonutChartConfig[];
readonly documentsChartConfig: DonutChartConfig[];
constructor(stats: IDashboardStats) {
this.dossierCountByStatus = stats.dossierCountByStatus;
@ -36,8 +36,8 @@ export class DashboardStats implements IListable, IDashboardStats {
this.numberOfPeople = stats.numberOfPeople;
this.numberOfSoftDeletedFiles = stats.numberOfSoftDeletedFiles;
this.dossiersChartData = this._dossiersChartData;
this.documentsChartData = this._documentsChartData;
this.dossiersChartConfig = this.#dossiersChartConfig;
this.documentsChartConfig = this.#documentsChartConfig;
}
get isEmpty(): boolean {
@ -52,7 +52,7 @@ export class DashboardStats implements IListable, IDashboardStats {
return this.name;
}
private get _dossiersChartData(): DoughnutChartConfig[] {
get #dossiersChartConfig(): DonutChartConfig[] {
return this.dossierCountByStatus.map(d => ({
value: d.count,
color: '#e2e4e9',
@ -61,14 +61,14 @@ export class DashboardStats implements IListable, IDashboardStats {
}));
}
private get _documentsChartData(): DoughnutChartConfig[] {
const configArray: DoughnutChartConfig[] = this.fileCountPerWorkflowStatus.map(d => ({
get #documentsChartConfig(): DonutChartConfig[] {
const configArray: DonutChartConfig[] = this.fileCountPerWorkflowStatus.map(d => ({
value: d.count,
color: d.workflowStatus,
label: d.workflowStatus,
key: d.workflowStatus,
}));
configArray.sort((a: DoughnutChartConfig, b) => StatusSorter.byStatus(a.label, b.label));
return configArray;
return configArray.sort((a, b) => StatusSorter.byStatus(a.label, b.label));
}
}

2
libs/red-domain/src/lib/shared/charts.ts
View File

@ -1,6 +1,6 @@
import { Color } from './colors';
export interface DoughnutChartConfig {
export interface DonutChartConfig {
value: number;
color: Color;
label: string;