Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Doughnut chart filters

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-07 13:05:27 +02:00
parent 7b94c227f2
commit 1c65ebdc1f
7 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/common/filter/utils/filter-utils.ts
View File

@ -1,6 +1,5 @@
import { FilterModel } from '../model/filter.model';
import { FileStatusWrapper } from '../../../screens/file/model/file-status.wrapper';
import * as moment from 'moment';
import { ProjectWrapper } from '../../../state/app-state.service';
export const RedactionFilterSorter = {
@ -57,9 +56,6 @@ export const annotationFilterChecker = (f: FileStatusWrapper, filter: FilterMode
return f[getter];
};
export const fileAddedFilterChecker = (f: FileStatusWrapper, filter: FilterModel) =>
moment(f.added).format('DD/MM/YYYY') === filter.key;
export const projectStatusChecker = (pw: ProjectWrapper, filter: FilterModel) =>
pw.hasStatus(filter.key);

6
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

@ -30,7 +30,11 @@
<div class="breakdown-container">
<div>
<div *ngFor="let val of parsedConfig">
<div
*ngFor="let val of parsedConfig"
[class.active]="val.checked"
(click)="toggleFilter.emit(val.label)"
>
<redaction-status-bar
[small]="true"
[config]="[

17
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -30,11 +30,26 @@
flex-direction: column;
align-items: center;
gap: 8px;
margin-left: -8px;
div {
> div {
width: fit-content;
display: flex;
flex-direction: column;
gap: 8px;
> div {
border-radius: 4px;
cursor: pointer;
padding: 3px 8px;
&:hover {
background-color: $grey-6;
}
&.active {
background-color: rgba($primary, 0.1);
}
}
}
}

13
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
View File

@ -1,10 +1,12 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Color } from '../../utils/types';
import { FilterModel } from '../../common/filter/model/filter.model';
export class DoughnutChartConfig {
value: number;
color: Color;
label: string;
active?: boolean;
}
@Component({
@ -18,6 +20,8 @@ export class SimpleDoughnutChartComponent implements OnChanges {
@Input() radius = 85;
@Input() strokeWidth = 20;
@Input() direction: 'row' | 'column' = 'column';
@Input() filter: FilterModel[] = [];
@Output() public toggleFilter = new EventEmitter<string>();
public chartData: any[] = [];
public perimeter: number;
@ -70,6 +74,11 @@ export class SimpleDoughnutChartComponent implements OnChanges {
// Eliminate items with value = 0
public get parsedConfig() {
return this.config.filter((el) => el.value);
return this.config
.filter((el) => el.value)
.map((el) => ({
...el,
checked: this.filter.find((f) => f.key === el.label)?.checked
}));
}
}

5
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
View File

@ -66,15 +66,16 @@
[strokeWidth]="15"
[subtitle]="'project-overview.project-details.charts.documents-in-project'"
direction="row"
[filter]="filters.statusFilters"
(toggleFilter)="toggleFilter('statusFilters', $event)"
></redaction-simple-doughnut-chart>
</div>
<div class="mt-24 legend" *ngIf="hasFiles">
<div
*ngFor="let filter of filters.needsWorkFilters"
class="annotation"
[class.active]="filter.checked"
(click)="toggleFilter(filter.key)"
(click)="toggleFilter('needsWorkFilters', filter.key)"
>
<redaction-annotation-icon
[typeValue]="appStateService.getDictionaryTypeValue(filter.key.slice(0, -1))"

6
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
View File

@ -14,7 +14,7 @@ import { FilterModel } from '../../../common/filter/model/filter.model';
})
export class ProjectDetailsComponent implements OnInit {
public documentsChartData: DoughnutChartConfig[] = [];
@Input() public filters: { needsWorkFilters: FilterModel[] };
@Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] };
@Output() public reloadProjects = new EventEmitter();
@Output() public filtersChanged = new EventEmitter();
@ -94,8 +94,8 @@ export class ProjectDetailsComponent implements OnInit {
return this.appStateService.activeProject.hasFiles;
}
public toggleFilter(key: string): void {
const filter = this.filters.needsWorkFilters.find((f) => f.key === key);
public toggleFilter(filterType: 'needsWorkFilters' | 'statusFilters', key: string): void {
const filter = this.filters[filterType].find((f) => f.key === key);
filter.checked = !filter.checked;
this.filtersChanged.emit(this.filters);
}

9
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -43,7 +43,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public displayedFiles: FileStatusWrapper[] = [];
public detailsContainerFilters: { needsWorkFilters: FilterModel[] };
public detailsContainerFilters: {
needsWorkFilters: FilterModel[];
statusFilters: FilterModel[];
};
@ViewChild('projectDetailsComponent', { static: false })
private _projectDetailsComponent: ProjectDetailsComponent;
@ -318,7 +321,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
filtersChanged(filters?: { [key: string]: FilterModel[] }): void {
if (filters) {
for (const key of Object.keys(filters)) {
console.log(filters[key]);
for (let idx = 0; idx < this[key].length; ++idx) {
this[key][idx] = filters[key][idx];
}
@ -338,7 +340,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
filters
);
this.detailsContainerFilters = {
needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f }))
needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })),
statusFilters: this.statusFilters.map((f) => ({ ...f }))
};
this._changeDetectorRef.detectChanges();
}