From ba58977844192ee07683a84d07dad0b4075df50b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 16 Oct 2020 19:42:41 +0300 Subject: [PATCH] Project overview chart --- .../simple-doughnut-chart.component.html | 10 ++-- .../simple-doughnut-chart.component.scss | 7 ++- .../simple-doughnut-chart.component.ts | 1 + .../project-listing-screen.component.html | 4 +- .../project-listing-screen.component.ts | 4 +- .../project-overview-screen.component.html | 12 +++- .../project-overview-screen.component.ts | 58 +++++++++++++------ apps/red-ui/src/assets/i18n/en.json | 16 ++++- 8 files changed, 81 insertions(+), 31 deletions(-) diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html index 887c2bdb2..e38588243 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -1,4 +1,4 @@ -
+
-
+
{{ dataTotal }}
-
{{ subtitle }}
+
{{ subtitle | translate }}
-
+
+ [config]="[{ length: val.value, color: val.color, label: val.value + ' ' + (val.label | translate | lowercase) }]">
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index a1bcc530b..90889090e 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -3,8 +3,12 @@ .container { position: relative; display: flex; - flex-direction: column; align-items: center; + gap: 20px; + + &.column { + flex-direction: column; + } } .text-container { @@ -14,6 +18,7 @@ flex-direction: column; justify-content: center; align-items: center; + box-sizing: border-box; } .breakdown-container { diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index 848557486..d3797ecda 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -19,6 +19,7 @@ export class SimpleDoughnutChartComponent implements OnInit { @Input() angleOffset = -90; @Input() radius = 85; @Input() strokeWidth = 20; + @Input() direction: 'row' | 'column' = 'column'; public chartData: any[] = []; public perimeter: number; diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 62c49abe6..4cd931581 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -105,7 +105,7 @@
@@ -129,7 +129,7 @@
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index c44752475..f1b7bd75d 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -41,8 +41,8 @@ export class ProjectListingScreenComponent implements OnInit { ngOnInit(): void { this.appStateService.reset(); this.projectsChartData = [ - { value: this.activeProjects, color: 'active', label: 'active-projects' }, - { value: this.inactiveProjects, color: 'archived', label: 'Archived' } + { value: this.activeProjects, color: 'active', label: 'active' }, + { value: this.inactiveProjects, color: 'archived', label: 'archived' } ]; this.documentsChartData = [ { value: this.appStateService.totalDocuments, color: 'unassigned', label: 'unassigned' }, diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 3797dd911..8af169d8b 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -53,7 +53,8 @@
-
+
+ +
+ +
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 191695d9a..cd1d40493 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -1,5 +1,5 @@ -import {ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { FileStatus, FileUploadControllerService, @@ -7,19 +7,20 @@ import { ReanalysisControllerService, StatusControllerService } from '@redaction/red-ui-http'; -import {NotificationService, NotificationType} from '../../notification/notification.service'; -import {TranslateService} from '@ngx-translate/core'; -import {ConfirmationDialogComponent} from '../../common/confirmation-dialog/confirmation-dialog.component'; -import {MatDialog} from '@angular/material/dialog'; -import {AppStateService} from '../../state/app-state.service'; -import {ProjectDetailsDialogComponent} from './project-details-dialog/project-details-dialog.component'; -import {FileDropOverlayService} from '../../upload/file-drop/service/file-drop-overlay.service'; -import {FileUploadModel} from "../../upload/model/file-upload.model"; -import {FileUploadService} from "../../upload/file-upload.service"; -import {UploadStatusOverlayService} from "../../upload/upload-status-dialog/service/upload-status-overlay.service"; -import {AddEditProjectDialogComponent} from "../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component"; -import {UserService} from "../../user/user.service"; +import { NotificationService, NotificationType } from '../../notification/notification.service'; +import { TranslateService } from '@ngx-translate/core'; +import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component'; +import { MatDialog } from '@angular/material/dialog'; +import { AppStateService } from '../../state/app-state.service'; +import { ProjectDetailsDialogComponent } from './project-details-dialog/project-details-dialog.component'; +import { FileDropOverlayService } from '../../upload/file-drop/service/file-drop-overlay.service'; +import { FileUploadModel } from '../../upload/model/file-upload.model'; +import { FileUploadService } from '../../upload/file-upload.service'; +import { UploadStatusOverlayService } from '../../upload/upload-status-dialog/service/upload-status-overlay.service'; +import { AddEditProjectDialogComponent } from '../project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; +import { UserService } from '../../user/user.service'; import { SortingOption } from '../../utils/types'; +import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; @Component({ @@ -28,7 +29,7 @@ import { SortingOption } from '../../utils/types'; styleUrls: ['./project-overview-screen.component.scss'] }) export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { - @ViewChild('dropzoneComponent', {static: true}) + @ViewChild('dropzoneComponent', { static: true }) dropZoneComponent; dragActive = false; @@ -37,10 +38,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { { label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated' }, { label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename' }, { label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages' }, - { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' }, + { label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses' } ]; public sortingOption: SortingOption = this.sortingOptions[0]; + public documentsChartData: DoughnutChartConfig[] = []; + projectId: string; private _fileStatusInterval; @@ -71,6 +74,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { ngOnInit(): void { this._fileDropOverlayService.initFileDropHandling(); + this._calculateChartConfig(); this._fileStatusInterval = setInterval(() => { this._getFileStatus(); }, 5000); @@ -120,7 +124,23 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { } private _getFileStatus() { - this.appStateService.reloadActiveProjectFiles(); + this.appStateService.reloadActiveProjectFiles().then(() => { + this._calculateChartConfig(); + }); + } + + private _calculateChartConfig() { + const obj = this.appStateService.activeProject.files.reduce((acc, file) => { + console.log(file.status); + acc[file.status === 'PROCESSED' ? 'finished' : file.status === 'ERROR' ? 'under-approval' : 'under-review']++; + return acc; + }, { 'finished': 0, 'under-approval': 0, 'under-review': 0 }); + + this.documentsChartData = Object.keys(obj).map((key) => ({ + value: obj[key], + color: key, + label: key + })) as DoughnutChartConfig[]; } fileId(index, item) { @@ -137,7 +157,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { progress: 0, completed: false, error: null - }) + }); } this._fileUploadService.uploadFiles(uploadFiles); @@ -157,7 +177,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { $event.stopPropagation(); const dialogRef = this._dialog.open(ConfirmationDialogComponent, { width: '400px', - maxWidth: '90vw', + maxWidth: '90vw' }); dialogRef.afterClosed().subscribe(result => { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 1e4509e72..6f6c8388e 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -329,6 +329,11 @@ "project-details": { "project-team": { "label": "Project team" + }, + "charts": { + "total-documents": { + "label": "Total Documents" + } } }, "header": { @@ -414,5 +419,14 @@ "unassigned": { "label": "Unassigned" } - } + }, + "unassigned": "Unassigned", + "under-review": "Under review", + "under-approval": "Under approval", + "efsa": "EFSA approval", + "finished": "Finished", + "approved": "Approved", + "submitted": "Submitted", + "active": "Active", + "archived": "Archived" }