<context context-type="linenumber">13</context>
</context-group>
</trans-unit>
- <trans-unit id="6125391559813574136" datatype="html">
- <source>File types</source>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html</context>
- <context context-type="linenumber">17</context>
- </context-group>
- </trans-unit>
- <trans-unit id="3881818169480672345" datatype="html">
- <source>other</source>
+ <trans-unit id="8693603235657020323" datatype="html">
+ <source>Other</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts</context>
- <context context-type="linenumber">56</context>
+ <context context-type="linenumber">87</context>
</context-group>
</trans-unit>
<trans-unit id="8187573012244728580" datatype="html">
<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 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 *ngIf="statistics?.document_file_type_counts?.length > 1" class="list-group-item filetypes">
+ <div class="d-flex justify-content-between align-items-center my-2">
+ <div class="progress flex-grow-1">
+ <div *ngFor="let filetype of statistics?.document_file_type_counts; let i = index; let last = last"
+ class="progress-bar bg-primary text-primary-contrast"
+ role="progressbar"
+ [ngbPopover]="getFileTypeName(filetype)"
+ i18n-ngbPopover
+ triggers="mouseenter:mouseleave"
+ [attr.aria-label]="getFileTypeName(filetype)"
+ [class.me-1px]="!last"
+ [style.width]="getFileTypePercent(filetype) + '%'"
+ [style.opacity]="getItemOpacity(i)"
+ [attr.aria-valuenow]="getFileTypePercent(filetype)"
+ aria-valuemin="0"
+ aria-valuemax="100">
+ </div>
+ </div>
</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 class="d-flex flex-wrap align-items-start">
+ <div class="d-flex" *ngFor="let filetype of statistics?.document_file_type_counts; let i = index">
+ <div class="text-nowrap me-2">
+ <span class="badge rounded-pill bg-primary d-inline-block p-0 me-1" [style.opacity]="getItemOpacity(i)"></span>
+ <small class="text-nowrap"><span class="fw-bold">{{ getFileTypeExtension(filetype) }}</span> <span class="text-muted">({{getFileTypePercent(filetype) | number: '1.0-1'}}%)</span></small>
+ </div>
</div>
- </ng-container>
+ </div>
</div>
</div>
</ng-container>
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
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,
})
}
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
},
])
}
-
- 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
- }
}
projects / thirdparty / paperless-ngx.git / commitdiff
