lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add file-types bar to statistics widget (#2914)

Browse Source
This commit is contained in:
Tobias Schürg
2023-03-20 05:06:59 +01:00
committed by GitHub
parent 2bdf0aae14
commit 4d26a3d2c6
3 changed files with 110 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
View File

@@ -13,14 +13,33 @@
<ng-container i18n>Total characters</ng-container>:
<span class="badge bg-secondary text-light rounded-pill">{{statistics?.character_count | number}}</span>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="flex-grow-1"><ng-container i18n>File types</ng-container>:</div>
<div class="d-flex flex-column flex-grow-1 filetypes-list">
<div *ngFor="let filetype of statistics?.document_file_type_counts; let i = index" class="d-flex justify-content-between align-items-center">
<span class="fst-italic text-muted text-truncate pe-3">{{filetype.mime_type}}</span>
<span class="badge bg-secondary text-light rounded-pill">{{getFileTypePercent(filetype) | number: '1.0-1'}}%</span>
</div>
<div class="list-group-item widget-container">
<div class="file-type-bar">
<ng-container
*ngFor="
let fileType of fileTypeDataArray;
let isFirst = first;
let isLast = last
"
>
<div
class="file-type"
[style.width.%]="fileType.percentage"
[style.backgroundColor]="fileType.color"
[ngClass]="{ 'rounded-left': isFirst, 'rounded-right': isLast }"
></div>
</ng-container>
</div>
<ng-container *ngFor="let fileType of fileTypeDataArray">
<div class="file-type-label">
<div
class="file-type-color"
[style.backgroundColor]="fileType.color"
></div>
<span>{{ fileType.name }} ({{ fileType.percentage }}%)</span>
</div>
</ng-container>
</div>
</div>
</ng-container>