truncate long mime types + limit total types displayed

src-ui/messages.xlf

@@ -2244,6 +2244,13 @@
           <context context-type="linenumber">17</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="3881818169480672345" 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-group>
+      </trans-unit>
       <trans-unit id="8187573012244728580" datatype="html">
         <source>Upload new documents</source>
         <context-group purpose="location">

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

@@ -15,32 +15,13 @@
       </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">
+        <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">{{filetype.mime_type}}</span>
+            <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>
       </div>
-      <!-- <div class="list-group-item border-dark d-flex justify-content-between align-items-center">
-        <span class="me-3" i18n>File types:</span>
-        <div class="progress flex-grow-1">
-          <div *ngFor="let filetype of statistics?.document_file_type_counts; let i = index"
-            class="progress-bar bg-primary text-primary-contrast"
-            [class.me-1]="i < statistics?.document_file_type_counts.length - 1"
-            role="progressbar"
-            [ngbPopover]="filetype.mime_type"
-            i18n-ngbPopover
-            triggers="mouseenter:mouseleave"
-            [attr.aria-label]="filetype.mime_type"
-            [style.width]="getFileTypePercent(filetype) + '%'"
-            [attr.aria-valuenow]="getFileTypePercent(filetype)"
-            aria-valuemin="0"
-            aria-valuemax="100">
-            <ng-container *ngIf="getFileTypePercent(filetype) > 25">{{filetype.mime_type}}</ng-container>
-          </div>
-        </div>
-      </div> -->
     </div>
   </ng-container>
 </app-widget-frame>

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss

@@ -1,3 +1,7 @@
 .flex-column {
     row-gap: 0.2rem;
 }
+
+.filetypes-list {
+    max-width: 75%;
+}

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -48,6 +48,20 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
     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)
+        statistics.document_file_type_counts =
+          statistics.document_file_type_counts.slice(0, 4)
+        statistics.document_file_type_counts.push({
+          mime_type: $localize`other`,
+          mime_type_count: others.reduce(
+            (currentValue, documentFileType) =>
+              documentFileType.mime_type_count + currentValue,
+            0
+          ),
+        })
+      }
       this.statistics = statistics
     })
   }