-
-
-
-
-
{{ fileType.name }} ({{ fileType.percentage }}%)
+
+
+
+
+
+
+ {{ getFileTypeExtension(filetype) }} ({{getFileTypePercent(filetype) | number: '1.0-1'}}%)
+
+
+
diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss
index 9a533ef47..bb2bc5b4f 100644
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss
@@ -1,26 +1,10 @@
-.file-type-bar {
- display: flex;
- height: 10px;
- margin-bottom: 10px;
-}
-.file-type {
- height: 100%;
-}
-.file-type-label {
- align-items: center;
- float: left;
- padding-right: 10px;
-}
-.file-type-color {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- display: inline-block;
- margin-right: 5px;
-}
-.rounded-left {
- border-radius: 5px 0 0 5px;
-}
-.rounded-right {
- border-radius: 0 5px 5px 0;
+.filetypes {
+ .progress {
+ height: 0.6rem;
+ }
+
+ .badge {
+ height: 0.6rem;
+ width: 0.6rem;
+ }
}
diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
index cf8b14cfa..d1de799c1 100644
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
@@ -1,13 +1,11 @@
import { HttpClient } from '@angular/common/http'
import { Component, OnDestroy, OnInit } from '@angular/core'
import { Observable, Subscription } from 'rxjs'
-import {
- FILTER_HAS_TAGS_ALL,
- FILTER_IS_IN_INBOX,
-} from 'src/app/data/filter-rule-type'
+import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
import { DocumentListViewService } from 'src/app/services/document-list-view.service'
import { environment } from 'src/environments/environment'
+import * as mimeTypeNames from 'mime-names'
export interface Statistics {
documents_total?: number
@@ -44,28 +42,17 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
return this.http.get(`${environment.apiBaseUrl}statistics/`)
}
- fileTypeDataArray = []
-
- private fileTypeColors = [
- '#e84118', // red
- '#00a8ff', // blue
- '#4cd137', // green
- '#9c88ff', // purple
- '#fbc531', // yellow
- '#7f8fa6', // gray
- ]
-
reload() {
this.loading = true
this.getStatistics().subscribe((statistics) => {
this.loading = false
const fileTypeMax = 5
if (statistics.document_file_type_counts?.length > fileTypeMax) {
- let others = statistics.document_file_type_counts.slice(fileTypeMax)
+ const others = statistics.document_file_type_counts.slice(fileTypeMax)
statistics.document_file_type_counts =
statistics.document_file_type_counts.slice(0, fileTypeMax)
statistics.document_file_type_counts.push({
- mime_type: $localize`other`,
+ mime_type: $localize`Other`,
mime_type_count: others.reduce(
(currentValue, documentFileType) =>
documentFileType.mime_type_count + currentValue,
@@ -74,26 +61,28 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
})
}
this.statistics = statistics
-
- this.updateFileTypePercentages()
})
}
- private updateFileTypePercentages() {
- let colorIndex = 0
- this.fileTypeDataArray = this.statistics.document_file_type_counts.map(
- (fileType) => {
- const percentage =
- (fileType.mime_type_count / this.statistics?.documents_total) * 100
- return {
- name: this.getMimeTypeName(fileType.mime_type),
- percentage: percentage.toFixed(2),
- color: this.fileTypeColors[colorIndex++],
- }
- }
+ getFileTypeExtension(filetype: DocumentFileType): string {
+ return (
+ mimeTypeNames[filetype.mime_type]?.extensions[0]?.toUpperCase() ??
+ filetype.mime_type
)
}
+ getFileTypeName(filetype: DocumentFileType): string {
+ return mimeTypeNames[filetype.mime_type]?.name ?? filetype.mime_type
+ }
+
+ getFileTypePercent(filetype: DocumentFileType): number {
+ return (filetype.mime_type_count / this.statistics?.documents_total) * 100
+ }
+
+ getItemOpacity(i: number): number {
+ return 1 - i / this.statistics?.document_file_type_counts.length
+ }
+
ngOnInit(): void {
this.reload()
this.subscription = this.consumerStatusService
@@ -115,34 +104,4 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
},
])
}
-
- getMimeTypeName(mimeType: string): string {
- const mimeTypesMap: { [key: string]: string } = {
- 'application/msword': 'Microsoft Word',
- 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
- 'Microsoft Word',
- 'application/vnd.ms-excel': 'Microsoft Excel',
- 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
- 'Microsoft Excel',
- 'application/vnd.ms-powerpoint': 'Microsoft PowerPoint',
- 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
- 'Microsoft PowerPoint',
- 'application/pdf': 'PDF',
- 'application/vnd.oasis.opendocument.text': 'OpenDocument Text',
- 'application/vnd.oasis.opendocument.spreadsheet':
- 'OpenDocument Spreadsheet',
- 'application/vnd.oasis.opendocument.presentation':
- 'OpenDocument Presentation',
- 'application/vnd.oasis.opendocument.graphics': 'OpenDocument Graphics',
- 'application/rtf': 'Rich Text Format',
- 'text/plain': 'Plain Text',
- 'text/csv': 'CSV',
- 'image/jpeg': 'JPEG',
- 'image/png': 'PNG',
- 'image/gif': 'GIF',
- 'image/svg+xml': 'SVG',
- }
-
- return mimeTypesMap[mimeType] || mimeType
- }
}
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index ed4efbe9d..1b23d7a6c 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -623,3 +623,7 @@ code {
.accordion-button::after {
filter: invert(0.5) saturate(0);
}
+
+.me-1px {
+ margin-right: 1px !important;
+}