Finished charts on project listing
This commit is contained in:
Adina Țeudan
parent
3279bb1230
commit
bea47054b7
@ -20,7 +20,7 @@
|
||||
<div class="left-container">
|
||||
<div class="table-header">
|
||||
<span class="subheading">
|
||||
{{'projects.table-header.title.label'| translate:{length: appStateService.allProjects?.length || 0} }}
|
||||
{{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
|
||||
</span>
|
||||
<div class="actions">
|
||||
<div translate="projects.table-header.bulk-select.label"></div>
|
||||
@ -79,11 +79,36 @@
|
||||
</div>
|
||||
|
||||
<div class="right-fixed-container">
|
||||
<redaction-simple-doughnut-chart [data]="projectsChartData"
|
||||
[strokeWidth]="15"
|
||||
[title]=9
|
||||
[subtitle]="'Projects'"
|
||||
></redaction-simple-doughnut-chart>
|
||||
<div>
|
||||
<redaction-simple-doughnut-chart [config]="projectsChartData"
|
||||
[strokeWidth]="15"
|
||||
[subtitle]="'Projects'"
|
||||
></redaction-simple-doughnut-chart>
|
||||
|
||||
<div class="project-stats-container">
|
||||
<div class="project-stats-item">
|
||||
<mat-icon svgIcon="red:files"></mat-icon>
|
||||
<div>
|
||||
<div class="heading">1324</div>
|
||||
<div>Analyzed pages</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-stats-item">
|
||||
<mat-icon svgIcon="red:user"></mat-icon>
|
||||
<div>
|
||||
<div class="heading">240</div>
|
||||
<div>Total people</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<redaction-simple-doughnut-chart [config]="documentsChartData"
|
||||
[strokeWidth]="15"
|
||||
[subtitle]="'Total Documents'"
|
||||
></redaction-simple-doughnut-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ 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 { 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.co
|
||||
styleUrls: ['./project-listing-screen.component.scss']
|
||||
})
|
||||
export class ProjectListingScreenComponent implements OnInit {
|
||||
projectsChartData: DataSeries [] = [];
|
||||
projectsChartData: DoughnutChartConfig [] = [];
|
||||
documentsChartData: DoughnutChartConfig [] = [];
|
||||
|
||||
constructor(
|
||||
public readonly appStateService: AppStateService,
|
||||
@ -34,10 +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: 3, color: 'active', label: 'active-projects' },
|
||||
{ value: 7, color: 'archived', 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 {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<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">
|
||||
<g *ngFor="let value of parsedConfig; let i = index">
|
||||
<circle attr.cx="{{cx}}"
|
||||
attr.cy="{{cy}}"
|
||||
attr.r="{{radius}}"
|
||||
@ -14,15 +14,15 @@
|
||||
</svg>
|
||||
|
||||
<div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px;'">
|
||||
<div class="heading-xl">{{ title }}</div>
|
||||
<div class="heading-xl">{{ dataTotal }}</div>
|
||||
<div class="projects-text mt-5">{{ subtitle }}</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 breakdown-container">
|
||||
<div>
|
||||
<div *ngFor="let val of data">
|
||||
<div *ngFor="let val of parsedConfig">
|
||||
<redaction-status-bar [small]="true"
|
||||
[config]="[{ length: val.value, color: val.color, label: val.label}]">
|
||||
[config]="[{ length: val.value, color: val.color, label: val.value + ' ' + val.label}]">
|
||||
</redaction-status-bar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
@import "../../assets/styles/red-variables";
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import { Color } from '../utils/types';
|
||||
|
||||
export class DataSeries {
|
||||
export class DoughnutChartConfig {
|
||||
value: number;
|
||||
color: Color;
|
||||
label: string;
|
||||
@ -14,11 +14,10 @@ export class DataSeries {
|
||||
})
|
||||
export class SimpleDoughnutChartComponent implements OnInit {
|
||||
|
||||
@Input() title: string;
|
||||
@Input() subtitle: string;
|
||||
@Input() data: DataSeries[] = [];
|
||||
@Input() config: DoughnutChartConfig[] = [];
|
||||
@Input() angleOffset = -90;
|
||||
@Input() radius = 80;
|
||||
@Input() radius = 85;
|
||||
@Input() strokeWidth = 20;
|
||||
|
||||
public chartData: any[] = [];
|
||||
@ -46,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,
|
||||
}
|
||||
@ -71,4 +70,9 @@ export class SimpleDoughnutChartComponent implements OnInit {
|
||||
returnCircleTransformValue(index) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user