+ [labelClass]="'subtitle'"
+ [config]="[{ length: 1, label: 'Unassigned', color: 'unassigned'}]">
645
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 8df97f57d..3c513245a 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/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;
}
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 35aebac00..d3c0285a4 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
@@ -20,7 +20,7 @@
-
+
+
+
+
+
+
+
1324
+
Analyzed pages
+
+
+
+
+
+
+
+
+
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 064f81453..bdfae4da8 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -15,3 +15,42 @@
color: $white;
}
}
+
+
+.right-fixed-container {
+ display: flex;
+ width: 470px;
+ padding-top: 50px;
+
+ > div {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .project-stats-container {
+ width: fit-content;
+
+ .project-stats-item {
+ display: flex;
+ width: fit-content;
+ gap: 5px;
+ margin-top: 25px;
+
+ &:first-of-type {
+ margin-top: 50px;
+ }
+
+ mat-icon {
+ height: 16px;
+ width: 16px;
+ margin-top: 3px;
+ }
+ }
+ }
+}
+
+.left-container {
+ width: calc(100vw - #{$right-container-width} - 130px);
+}
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 b8ed1fe29..901b6acf3 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
@@ -1,14 +1,14 @@
-import {Component, OnInit} from '@angular/core';
-import {Project, ProjectControllerService} from "@redaction/red-ui-http";
-import {MatDialog} from "@angular/material/dialog";
-import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-project-dialog.component";
-import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component";
-import {TranslateService} from "@ngx-translate/core";
-import {NotificationService} from "../../notification/notification.service";
-import {AppStateService, ProjectWrapper} from "../../state/app-state.service";
-import {UserService} from "../../user/user.service";
-import {ProjectDetailsDialogComponent} from "../project-overview-screen/project-details-dialog/project-details-dialog.component";
-import {DataSeries} from "../../simple-doughnut-chart/simple-doughnut-chart.component";
+import { Component, OnInit } from '@angular/core';
+import { Project, ProjectControllerService } from '@redaction/red-ui-http';
+import { MatDialog } from '@angular/material/dialog';
+import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component';
+import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationService } from '../../notification/notification.service';
+import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
+import { UserService } from '../../user/user.service';
+import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component';
+import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut-chart.component';
@Component({
selector: 'redaction-project-listing-screen',
@@ -16,7 +16,8 @@ import {DataSeries} from "../../simple-doughnut-chart/simple-doughnut-chart.comp
styleUrls: ['./project-listing-screen.component.scss']
})
export class ProjectListingScreenComponent implements OnInit {
- projectsChartData: DataSeries [] = [];
+ projectsChartData: DoughnutChartConfig [] = [];
+ documentsChartData: DoughnutChartConfig [] = [];
constructor(
public readonly appStateService: AppStateService,
@@ -34,8 +35,14 @@ export class ProjectListingScreenComponent implements OnInit {
ngOnInit(): void {
this.appStateService.reset();
this.projectsChartData = [
- {value: this.activeProjects, color: '#DD4D50', label: 'active-projects'},
- {value: this.inactiveProjects, color: '#f8eded', label: 'Archived'}];
+ { value: this.activeProjects, color: 'active', label: 'active-projects' },
+ { value: this.inactiveProjects, color: 'archived', label: 'Archived' }
+ ];
+ this.documentsChartData = [
+ { value: 20, color: 'unassigned', label: 'unassigned' },
+ { value: 40, color: 'under-review', label: 'under review' },
+ { value: 16, color: 'under-approval', label: 'under approval' },
+ ]
}
openAddProjectDialog(project?: Project): void {
@@ -55,7 +62,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 +91,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() {
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 aa5127646..76d3649af 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
@@ -61,7 +61,7 @@
@@ -110,7 +110,7 @@
>
-
+
{{ appStateService.activeProject.project.description }}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index b80225463..ca6ca4ac8 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/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;
}
diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html
index 78e32dad6..887c2bdb2 100644
--- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -1,16 +1,30 @@
-
-
- {{val.value}} {{val.label}}
+
+
+
+
+
{{ dataTotal }}
+
{{ subtitle }}
+
+
+
diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss
index e69de29bb..1c934d546 100644
--- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -0,0 +1,69 @@
+@import "../../assets/styles/red-variables";
+
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.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);
+ }
+}
diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts
index a5798d713..f5da6aa3d 100644
--- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/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 {
+export class DoughnutChartConfig {
value: number;
- color: string;
+ color: Color;
label: string;
}
-
@Component({
selector: 'redaction-simple-doughnut-chart',
templateUrl: './simple-doughnut-chart.component.html',
@@ -15,18 +14,17 @@ export class DataSeries {
})
export class SimpleDoughnutChartComponent implements OnInit {
- @Input() title: string;
- @Input() subtitle: number;
- @Input() data: DataSeries[] = [];
+ @Input() subtitle: string;
+ @Input() config: DoughnutChartConfig[] = [];
@Input() angleOffset = -90;
- @Input() radius = 80;
+ @Input() radius = 85;
@Input() strokeWidth = 20;
- chartData: any[] = [];
- perimeter: number;
- cx = 0;
- cy = 0;
- size = 0;
+ public chartData: any[] = [];
+ public perimeter: number;
+ public cx = 0;
+ public cy = 0;
+ public size = 0;
constructor() {
}
@@ -47,11 +45,11 @@ export class SimpleDoughnutChartComponent implements OnInit {
};
get dataTotal() {
- return this.data.map(v => v.value).reduce((acc, val) => acc + val, 0);
+ return this.config.map(v => v.value).reduce((acc, val) => acc + val, 0);
};
calculateChartData() {
- this.data.forEach((dataVal) => {
+ this.config.forEach((dataVal) => {
const data = {
degrees: this.angleOffset,
}
@@ -65,10 +63,6 @@ export class SimpleDoughnutChartComponent implements OnInit {
return circumference - strokeDiff;
}
- degreesToRadians(angle) {
- return angle * (Math.PI / 180);
- }
-
dataPercentage(dataVal) {
return dataVal / this.dataTotal;
}
@@ -77,4 +71,8 @@ export class SimpleDoughnutChartComponent implements OnInit {
return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`;
}
+ // Eliminate items with value = 0
+ public get parsedConfig() {
+ return this.config.filter((el) => el.value);
+ }
}
diff --git a/apps/red-ui/src/app/utils/types.d.ts b/apps/red-ui/src/app/utils/types.d.ts
new file mode 100644
index 000000000..8a532fcba
--- /dev/null
+++ b/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';
diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss
index 85930a2fa..d3bfc0d3f 100644
--- a/apps/red-ui/src/assets/styles/red-controls.scss
+++ b/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;
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 200d1424c..fe7918429 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/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;
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 818888e5e..759bcf2d3 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/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);
}
diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss
index 67531990d..46645f5e2 100644
--- a/apps/red-ui/src/assets/styles/red-variables.scss
+++ b/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);