Charts

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html

@@ -1,4 +1,4 @@
 <div class="flex-row">
   <div [className]="color + ' oval ' + size">{{initials}}</div>
-  <div *ngIf="withName" class="name clamp-2">{{username || ('initials-avatar.unassigned.label' | translate)}}</div>
+  <div *ngIf="withName" class="clamp-2">{{username || ('initials-avatar.unassigned.label' | translate)}}</div>
 </div>

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss

@@ -1,10 +1,5 @@
 @import "../../../assets/styles/red-variables";
 
-.name {
-  font-size: 13px;
-  line-height: 16px;
-}
-
 .flex-row {
   flex-wrap: wrap;
   gap: 12px;

apps/red-ui/src/app/components/status-bar/status-bar.component.html

@@ -1,6 +1,6 @@
 <div class="rectangle-container" [ngClass]="{ small: small }">
   <div *ngFor="let rect of config" [className]="'section-wrapper flex-' + rect.length">
     <div [className]="'rectangle ' + rect.color "></div>
-    <div *ngIf="rect.title" class="subtitle">{{ rect.title }}</div>
+    <div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div>
   </div>
 </div>

apps/red-ui/src/app/components/status-bar/status-bar.component.scss

@@ -38,20 +38,40 @@
   .rectangle {
     height: 4px;
 
-    &.grey {
+    &.unassigned {
-      background-color: $grey-4;
+      background-color: $grey-5;
     }
 
-    &.yellow {
+    &.under-review {
       background-color: $yellow-1;
     }
 
-    &.blue {
+    &.under-approval {
-      background-color: $blue-1;
+      background-color: $red-1;
     }
 
-    &.green {
+    &.approved {
-      background-color: $green-1;
+      background-color: $blue-2;
+    }
+
+    &.submitted {
+      background-color: $blue-3;
+    }
+
+    &.efsa {
+      background-color: $blue-4;
+    }
+
+    &.finished {
+      background-color: $green-2;
+    }
+
+    &.active {
+      background-color: $primary;
+    }
+
+    &.archived {
+      background-color: rgba($red-1, 0.1);
     }
   }
 }

apps/red-ui/src/app/components/status-bar/status-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Color } from '../../utils/types';
 
 @Component({
   selector: 'redaction-status-bar',
@@ -10,13 +11,16 @@ export class StatusBarComponent implements OnInit {
   @Input()
   public config: {
     length: number,
-    color: 'green' | 'blue' | 'red' | 'grey' | 'yellow',
+    color: Color,
-    title?: string,
+    label?: string,
   }[] = [];
 
   @Input()
   public small = false;
 
+  @Input()
+  public labelClass = '';
+
   constructor() {
   }
 

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -84,7 +84,8 @@
 
         <div *ngIf="infoTab" class="tab-content info-container">
           <redaction-status-bar [small]="true"
-                                [config]="[{ length: 1, title: 'Unassigned', color: 'grey'}]"></redaction-status-bar>
+                                [labelClass]="'subtitle'"
+                                [config]="[{ length: 1, label: 'Unassigned', color: 'unassigned'}]"></redaction-status-bar>
 
           <div class="subtitle stats-subtitle mt-5">
             <div>645</div>

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -65,8 +65,6 @@ redaction-pdf-viewer {
   }
 
   .assign-reviewer {
-    font-size: 13px;
-    line-height: 16px;
     margin-left: 12px;
   }
 
@@ -92,8 +90,6 @@ redaction-pdf-viewer {
     }
 
     .page-number {
-      font-size: 13px;
-      line-height: 18px;
       font-weight: 600;
     }
 

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

@@ -57,7 +57,7 @@
         </div>
         <div class="stats-bar">
           <redaction-status-bar
-            [config]="[{ color: 'yellow', length: 2}, { length: 1, color: 'green'}]"
+            [config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
           ></redaction-status-bar>
         </div>
 
@@ -79,8 +79,11 @@
   </div>
 
   <div class="right-fixed-container">
-    <redaction-simple-doughnut-chart [data]="projectsChartData" [strokeWidth]="15"></redaction-simple-doughnut-chart>
+    <redaction-simple-doughnut-chart [data]="projectsChartData"
-
+                                     [strokeWidth]="15"
+                                     [title]=9
+                                     [subtitle]="'Projects'"
+    ></redaction-simple-doughnut-chart>
   </div>
 </div>
 

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

@@ -1,14 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-import {Project, ProjectControllerService} from "@redaction/red-ui-http";
+import { Project, ProjectControllerService } from '@redaction/red-ui-http';
-import {MatDialog} from "@angular/material/dialog";
+import { MatDialog } from '@angular/material/dialog';
-import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-project-dialog.component";
+import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component';
-import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component";
+import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component';
-import {TranslateService} from "@ngx-translate/core";
+import { TranslateService } from '@ngx-translate/core';
-import {NotificationService} from "../../notification/notification.service";
+import { NotificationService } from '../../notification/notification.service';
-import {AppStateService, ProjectWrapper} from "../../state/app-state.service";
+import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
-import {UserService} from "../../user/user.service";
+import { UserService } from '../../user/user.service';
-import {ProjectDetailsDialogComponent} from "../project-overview-screen/project-details-dialog/project-details-dialog.component";
+import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component';
-import {DataSeries} from "../../simple-doughnut-chart/simple-doughnut-chart.component";
+import { DataSeries } from '../../simple-doughnut-chart/simple-doughnut-chart.component';
 
 @Component({
   selector: 'redaction-project-listing-screen',
@@ -34,8 +34,10 @@ export class ProjectListingScreenComponent implements OnInit {
   ngOnInit(): void {
     this.appStateService.reset();
     this.projectsChartData = [
-      {value: this.activeProjects, color: '#DD4D50', label: 'active-projects'},
+      // {value: this.activeProjects, color: '#DD4D50', label: 'active-projects'},
-      {value: this.inactiveProjects, color: '#f8eded', label: 'Archived'}];
+      // {value: this.inactiveProjects, color: '#f8eded', label: 'Archived'}];
+      { value: 3, color: 'active', label: 'active-projects' },
+      { value: 7, color: 'archived', label: 'Archived' }];
   }
 
   openAddProjectDialog(project?: Project): void {
@@ -55,7 +57,7 @@ export class ProjectListingScreenComponent implements OnInit {
     $event.stopPropagation();
     const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
       width: '400px',
-      maxWidth: '90vw',
+      maxWidth: '90vw'
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -84,7 +86,7 @@ export class ProjectListingScreenComponent implements OnInit {
   }
 
   get activeProjects() {
-    return this.appStateService.allProjects.reduce((i, p) => i+(p.project.status === Project.StatusEnum.ACTIVE ? 1 :0), 0)
+    return this.appStateService.allProjects.reduce((i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0), 0);
   }
 
   get inactiveProjects() {

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

@@ -61,7 +61,7 @@
         <div class=" status-container">
           <div class="status-bar-wrapper">
           <redaction-status-bar
-            [config]="[{ color: 'yellow', length: 1 }]"
+            [config]="[{ color: 'under-review', length: 1 }]"
           ></redaction-status-bar>
           </div>
         </div>
@@ -110,7 +110,7 @@
         ></redaction-initials-avatar>
       </div>
 
-      <div class="description mt-20">
+      <div class="mt-20">
         {{ appStateService.activeProject.project.description }}
       </div>
 

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

@@ -24,11 +24,6 @@
 }
 
 .project-details-container {
-  .description {
-    font-size: 13px;
-    line-height: 18px;
-  }
-
   .members-container {
     gap: 5px;
   }

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

@@ -1,9 +1,10 @@
+<div class="container">
   <svg attr.height="{{size}}" attr.width="{{size}}" attr.viewBox="0 0 {{size}} {{size}}" class="donut-chart">
     <g *ngFor="let value of data; let i = index">
       <circle attr.cx="{{cx}}"
               attr.cy="{{cy}}"
               attr.r="{{radius}}"
-            attr.stroke="{{data[i].color}}"
+              [class]="value.color"
               attr.stroke-width="{{strokeWidth}}"
               attr.stroke-dasharray="{{adjustedCircumference}}"
               attr.stroke-dashoffset="{{calculateStrokeDashOffset(value.value, circumference)}}"
@@ -11,6 +12,19 @@
               attr.transform="{{returnCircleTransformValue(i)}}" />
     </g>
   </svg>
-<div *ngFor="let val of data">
+
-  {{val.value}} {{val.label}}
+  <div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px;'">
+    <div class="heading-xl">{{ title }}</div>
+    <div class="projects-text mt-5">{{ subtitle }}</div>
+  </div>
+
+  <div class="mt-20 breakdown-container">
+    <div>
+      <div *ngFor="let val of data">
+        <redaction-status-bar [small]="true"
+                              [config]="[{ length: val.value, color: val.color, label: val.label}]">
+        </redaction-status-bar>
+      </div>
+    </div>
+  </div>
 </div>

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

@@ -0,0 +1,66 @@
+@import "../../assets/styles/red-variables";
+
+.container {
+  position: absolute;
+}
+
+.text-container {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.breakdown-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  div {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
+circle {
+  &.unassigned {
+    stroke: $grey-5;
+  }
+
+  &.under-review {
+    stroke: $yellow-1;
+  }
+
+  &.under-approval {
+    stroke: $red-1;
+  }
+
+  &.approved {
+    stroke: $blue-2;
+  }
+
+  &.submitted {
+    stroke: $blue-3;
+  }
+
+  &.efsa {
+    stroke: $blue-4;
+  }
+
+  &.finished {
+    stroke: $green-2;
+  }
+
+  &.active {
+    stroke: $primary;
+  }
+
+  &.archived {
+    stroke: rgba($red-1, 0.1);
+  }
+}

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

@@ -1,13 +1,12 @@
 import {Component, Input, OnInit} from '@angular/core';
-
+import { Color } from '../utils/types';
 
 export class DataSeries {
   value: number;
-  color: string;
+  color: Color;
   label: string;
 }
 
-
 @Component({
   selector: 'redaction-simple-doughnut-chart',
   templateUrl: './simple-doughnut-chart.component.html',
@@ -16,17 +15,17 @@ export class DataSeries {
 export class SimpleDoughnutChartComponent implements OnInit {
 
   @Input() title: string;
-  @Input() subtitle: number;
+  @Input() subtitle: string;
   @Input() data: DataSeries[] = [];
   @Input() angleOffset = -90;
   @Input() radius = 80;
   @Input() strokeWidth = 20;
 
-  chartData: any[] = [];
+  public chartData: any[] = [];
-  perimeter: number;
+  public perimeter: number;
-  cx = 0;
+  public cx = 0;
-  cy = 0;
+  public cy = 0;
-  size = 0;
+  public size = 0;
 
   constructor() {
   }
@@ -65,10 +64,6 @@ export class SimpleDoughnutChartComponent implements OnInit {
     return circumference - strokeDiff;
   }
 
-  degreesToRadians(angle) {
-    return angle * (Math.PI / 180);
-  }
-
   dataPercentage(dataVal) {
     return dataVal / this.dataTotal;
   }
@@ -76,5 +71,4 @@ export class SimpleDoughnutChartComponent implements OnInit {
   returnCircleTransformValue(index) {
     return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`;
   }
-
 }

apps/red-ui/src/app/utils/types.d.ts

@@ -0,0 +1,10 @@
+export type Color =
+  'unassigned' |
+  'under-review' |
+  'under-approval' |
+  'approved' |
+  'submitted' |
+  'efsa' |
+  'finished' |
+  'active' |
+  'archived';

apps/red-ui/src/assets/styles/red-controls.scss

@@ -9,7 +9,7 @@
     cursor: pointer;
     color: $accent;
     background: $white;
-    font-family: 'Inter', sans-serif;
+    font-family: Inter, sans-serif;
     font-size: 13px;
     letter-spacing: 0;
     line-height: 14px;

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -5,8 +5,10 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100vh;
-  font-family: 'Inter', sans-serif;
+  font-family: Inter, sans-serif;
   color: $accent;
+  font-size: 13px;
+  line-height: 16px;
 }
 
 .page-header {
@@ -57,9 +59,6 @@ html, body {
 }
 
 .filters {
-  font-size: 13px;
-  line-height: 14px;
-
   > div {
     padding: 10px 14px;
   }
@@ -157,8 +156,6 @@ html, body {
   .breadcrumb {
     text-decoration: none;
     color: $accent;
-    font-size: 13px;
-    line-height: 18px;
     font-weight: 600;
     @include line-clamp(1);
     max-width: 320px;

apps/red-ui/src/assets/styles/red-tables.scss

@@ -10,7 +10,6 @@
 
   .actions {
     display: flex;
-    font-size: 13px;
 
     div {
       padding: 10px 14px;
@@ -41,9 +40,7 @@
   }
 
   .table-item-title {
-    font-size: 13px;
     font-weight: 600;
-    line-height: 18px;
     @include line-clamp(1);
   }
 

apps/red-ui/src/assets/styles/red-variables.scss

@@ -8,13 +8,18 @@ $dark: #000;
 
 $grey-1: #283241;
 $grey-2: #ECECEE;
-$grey-3: #aaacb3;
+$grey-3: #AAACB3;
 $grey-4: #E2E4E9;
+$grey-5: #D3D5DA;
 
 $blue-1: #4875F7;
+$blue-2: #48C9F7;
+$blue-3: #5B97DB;
+$blue-4: #374C81;
 $red-1: #F65757;
 $yellow-1: #FFB83B;
 $green-1: #46CE7D;
+$green-2: #5CE594;
 
 $separator: rgba(226,228,233,0.9);