Project overview chart

2020-10-16 19:42:41 +03:00 · 2020-10-16 19:42:41 +03:00 · ba58977844
commit ba58977844
parent a03f15574e
8 changed files with 81 additions and 31 deletions
--- 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 @@
-<div class="container">
+<div [class]="'container flex ' + direction">
  <svg attr.height="{{size}}" attr.width="{{size}}" attr.viewBox="0 0 {{size}} {{size}}" class="donut-chart">
    <g *ngFor="let value of parsedConfig; let i = index">
      <circle attr.cx="{{cx}}"
@ -13,16 +13,16 @@
    </g>
  </svg>

-  <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px;'">
+  <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
    <div class="heading-xl">{{ dataTotal }}</div>
-    <div class="projects-text mt-5">{{ subtitle }}</div>
+    <div class="projects-text mt-5">{{ subtitle | translate }}</div>
  </div>

-  <div class="mt-20 breakdown-container">
+  <div class="breakdown-container">
    <div>
      <div *ngFor="let val of parsedConfig">
        <redaction-status-bar [small]="true"
-                              [config]="[{ length: val.value, color: val.color, label: val.value + ' ' + val.label}]">
+                              [config]="[{ length: val.value, color: val.color, label: val.value + ' ' + (val.label | translate | lowercase) }]">
        </redaction-status-bar>
      </div>
    </div>
--- 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 {
--- 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;
--- 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 @@
    <div>
      <redaction-simple-doughnut-chart [config]="projectsChartData"
                                       [strokeWidth]="15"
-                                       [subtitle]="'project-listing.stats.charts.projects.label' | translate"
+                                       [subtitle]="'project-listing.stats.charts.projects.label'"
      ></redaction-simple-doughnut-chart>

      <div class="project-stats-container">
@ -129,7 +129,7 @@
    <div>
      <redaction-simple-doughnut-chart [config]="documentsChartData"
                                       [strokeWidth]="15"
-                                       [subtitle]="'project-listing.stats.charts.total-documents.label' | translate"
+                                       [subtitle]="'project-listing.stats.charts.total-documents.label'"
      ></redaction-simple-doughnut-chart>
    </div>
  </div>
--- 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' },
--- 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 @@
      <div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></div>
      <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
      <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
-      <div class="flex-1 small-label status-container min-width" translate="project-overview.table-col-names.status.label"></div>
+      <div class="flex-1 small-label status-container min-width"
+           translate="project-overview.table-col-names.status.label"></div>
    </div>

    <div class="table-item"
@ -168,5 +169,14 @@
        </div>
      </div>
    </div>
+
+    <div class="mt-20">
+      <redaction-simple-doughnut-chart [config]="documentsChartData"
+                                       [strokeWidth]="15"
+                                       [radius]="70"
+                                       [subtitle]="'project-overview.project-details.charts.total-documents.label'"
+                                       direction="row"
+      ></redaction-simple-doughnut-chart>
+    </div>
  </div>
 </div>
--- 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 => {
--- 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"
 }