-
File types:
-
-
- {{filetype.mime_type}}
- {{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 6b26f8f00..9a533ef47 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,7 +1,26 @@
-.flex-column {
- row-gap: 0.2rem;
+.file-type-bar {
+ display: flex;
+ height: 10px;
+ margin-bottom: 10px;
}
-
-.filetypes-list {
- max-width: 75%;
+.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;
}
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 0daecd91f..cf8b14cfa 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
@@ -44,15 +44,26 @@ 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
- // truncate the list and sum others
- if (statistics.document_file_type_counts?.length > 4) {
- let others = statistics.document_file_type_counts.slice(4)
+ const fileTypeMax = 5
+ if (statistics.document_file_type_counts?.length > fileTypeMax) {
+ let others = statistics.document_file_type_counts.slice(fileTypeMax)
statistics.document_file_type_counts =
- statistics.document_file_type_counts.slice(0, 4)
+ statistics.document_file_type_counts.slice(0, fileTypeMax)
statistics.document_file_type_counts.push({
mime_type: $localize`other`,
mime_type_count: others.reduce(
@@ -63,9 +74,26 @@ 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++],
+ }
+ }
+ )
+ }
+
ngOnInit(): void {
this.reload()
this.subscription = this.consumerStatusService
@@ -88,7 +116,33 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
])
}
- getFileTypePercent(filetype: DocumentFileType): number {
- return (filetype.mime_type_count / this.statistics?.documents_total) * 100
+ 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
}
}
From 0a977a9d0a83f8bd858cb7e4b4bac4c533dc1009 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 19 Mar 2023 21:11:29 -0700
Subject: [PATCH 5/6] Re-implement file type progress bar
---
src-ui/messages.xlf | 13 +--
src-ui/package-lock.json | 6 ++
src-ui/package.json | 1 +
.../statistics-widget.component.html | 52 ++++++------
.../statistics-widget.component.scss | 34 +++-----
.../statistics-widget.component.ts | 81 +++++--------------
src-ui/src/styles.scss | 4 +
7 files changed, 69 insertions(+), 122 deletions(-)
diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 1be4f94fe..83152f56a 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -2237,18 +2237,11 @@
13
-
- File types
-
- src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
- 17
-
-
-
- other
+
+ Other
src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
- 56
+ 87
diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 38c6d0664..6df75ac5c 100644
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -22,6 +22,7 @@
"@popperjs/core": "^2.11.6",
"bootstrap": "^5.2.3",
"file-saver": "^2.0.5",
+ "mime-names": "^1.0.0",
"ng2-pdf-viewer": "^9.1.2",
"ngx-color": "^8.0.3",
"ngx-cookie-service": "^15.0.0",
@@ -13766,6 +13767,11 @@
"node": ">= 0.6"
}
},
+ "node_modules/mime-names": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/mime-names/-/mime-names-1.0.0.tgz",
+ "integrity": "sha512-vLNEfYU63fz34panv/L3Lh3eW3+v0BlOB+bSGFdntv/gBNnokCbSsaNuHR9vH/NS5oWbL0HqMQf/3we4fRJyIQ=="
+ },
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
diff --git a/src-ui/package.json b/src-ui/package.json
index 8ec1b80ab..934011a5b 100644
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -27,6 +27,7 @@
"@popperjs/core": "^2.11.6",
"bootstrap": "^5.2.3",
"file-saver": "^2.0.5",
+ "mime-names": "^1.0.0",
"ng2-pdf-viewer": "^9.1.2",
"ngx-color": "^8.0.3",
"ngx-cookie-service": "^15.0.0",
diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
index f7af4a7dd..ec6e239d0 100644
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
@@ -13,33 +13,33 @@
Total characters:
{{statistics?.character_count | number}}
-
-