[Library | new-theme]: metrics.component.ts: Round large numbers in metrics | Use type names from OpenaireEntities.

landingPages/landing-utils/metrics/metrics.component.ts

@@ -6,6 +6,8 @@ import {ErrorCodes} from '../../../utils/properties/errorCodes';
 import {Subscription, zip} from 'rxjs';
 import {EnvProperties} from '../../../utils/properties/env-properties';
 import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
+import {NumberUtils} from "../../../utils/number-utils.class";
+import {OpenaireEntities} from "../../../utils/properties/searchFields";
 
 @Component({
   selector: 'metrics',
@@ -14,26 +16,47 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
     <div *ngIf="metrics && (pageViews >0 || metrics.totalViews > 0|| metrics.totalDownloads >0)" class="metrics">
       <a class="m-badge uk-link-reset uk-display-block" (click)="clickedMetrics()">
         <img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="usage counts">
-        <div class="number">{{total | number}}</div>
+        <div class="number">
+          <ng-container *ngIf="isNumberLarge(total, true); else notFormattedTotal">{{formatNumber(total)}}</ng-container>
+          <ng-template #notFormattedTotal>{{total | number}}</ng-template>
+        </div>
       </a>
       <div class="uk-dropdown uk-background-default" uk-dropdown="pos: right-top; mode: click; offset: 30; animation: uk-animation-fade">
         <div class="uk-padding-small uk-width-large@s uk-width-medium">
           <div *ngIf="entityType == 'projects'" class="uk-alert uk-alert-primary uk-margin-small-bottom">
-            <span class="uk-text-center uk-text-small">Project metrics
-              are derived from aggregating individual research results metrics.
+            <span class="uk-text-center uk-text-small">{{openaireEntities.PROJECT}} metrics
+              are derived from aggregating individual {{openaireEntities.RESULTS}} metrics.
             </span>
           </div>
           <div class="uk-child-width-1-3@m uk-grid-small uk-grid-divider uk-margin-top" uk-grid>
             <div class="uk-text-center">
-              <div class="number uk-text-bold uk-text-background">{{metrics.totalDownloads | number}}</div>
+              <div class="number uk-text-bold uk-text-background">
+                <ng-container *ngIf="metrics.totalDownloads == 0">-</ng-container>
+                <span *ngIf="metrics.totalDownloads > 0" [attr.uk-tooltip]="metrics.totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                      title="{{metrics.totalDownloads | number}}">{{formatNumber(metrics.totalDownloads)}}</span>
+<!--                <ng-container *ngIf="isNumberLarge(metrics.totalDownloads); else notFormattedDownloads">{{formatNumber(metrics.totalDownloads)}}</ng-container>-->
+<!--                <ng-template #notFormattedDownloads>{{metrics.totalDownloads | number}}</ng-template>-->
+              </div>
               <div>Downloads</div>
             </div>
             <div class="uk-text-center">
-              <div class="number uk-text-bold uk-text-background">{{pageViews | number}}</div>
+              <div class="number uk-text-bold uk-text-background">
+                <ng-container *ngIf="pageViews == 0">-</ng-container>
+                <span *ngIf="pageViews > 0" [attr.uk-tooltip]="pageViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                      title="{{pageViews | number}}">{{formatNumber(pageViews)}}</span>
+<!--                <ng-container *ngIf="isNumberLarge(pageViews); else notFormattedPageviews">{{formatNumber(pageViews)}}</ng-container>-->
+<!--                <ng-template #notFormattedPageviews>{{pageViews | number}}</ng-template>-->
+              </div>
               <div>OpenAIRE views</div>
             </div>
             <div class="uk-text-center">
-              <div class="number uk-text-bold uk-text-background">{{metrics.totalViews | number}}</div>
+              <div class="number uk-text-bold uk-text-background">
+                <ng-container *ngIf="metrics.totalViews == 0">-</ng-container>
+                <span *ngIf="metrics.totalViews > 0" [attr.uk-tooltip]="metrics.totalViews >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
+                      title="{{metrics.totalViews | number}}">{{formatNumber(metrics.totalViews)}}</span>
+<!--                <ng-container *ngIf="isNumberLarge(metrics.totalViews); else notFormattedTotalviews">{{formatNumber(metrics.totalViews)}}</ng-container>-->
+<!--                <ng-template #notFormattedTotalviews>{{metrics.totalViews | number}}</ng-template>              -->
+              </div>
               <div>Total views</div>
             </div>
           </div>
@@ -54,19 +77,21 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive";
                       </thead>
                       <tbody>
                       <tr *ngFor="let key of getKeys(metrics.infos)">
-                        <td class="uk-text-center">
+                        <td class="uk-width-1-3 uk-text-center uk-text-truncate" uk-tooltip [title]="metrics.infos.get(key).name">
                           <a href="{{metrics.infos.get(key).url}}">
                             {{metrics.infos.get(key).name}}
                           </a>
                         </td>
                         <td class="uk-text-center">
-                          {{metrics.infos.get(key).numOfViews | number}}
+                          <ng-container *ngIf="isNumberLarge(metrics.infos.get(key).numOfViews, true); else notFormattedNumViews">{{formatNumber(metrics.infos.get(key).numOfViews)}}</ng-container>
+                          <ng-template #notFormattedNumViews>{{metrics.infos.get(key).numOfViews | number}}</ng-template>
                           <!-- <span *ngIf="metrics.infos.get(key).numOfViews > 0 && metrics.infos.get(key).openaireViews > 0">
                            ( {{metrics.infos.get(key).openaireViews | number}} from OpenAIRE )
                          </span>-->
                         </td>
                         <td class="uk-text-center">
-                          {{metrics.infos.get(key).numOfDownloads | number}}
+                          <ng-container *ngIf="isNumberLarge(metrics.infos.get(key).numOfDownloads, true); else notFormattedNumDownloads">{{formatNumber(metrics.infos.get(key).numOfDownloads)}}</ng-container>
+                          <ng-template #notFormattedNumDownloads>{{metrics.infos.get(key).numOfDownloads | number}}</ng-template>
                           <!--<span *ngIf="metrics.infos.get(key).numOfDownloads > 0 && metrics.infos.get(key).openaireDownloads > 0">
                           ( {{metrics.infos.get(key).openaireDownloads | number}} from OpenAIRE )
                         </span>-->
@@ -124,6 +149,8 @@ export class MetricsComponent {
 
   public status: number;
   public state: number = -1;
+  public openaireEntities = OpenaireEntities;
+
   constructor(private metricsService: MetricsService, private cdr: ChangeDetectorRef) {
   }
 
@@ -275,4 +302,14 @@ export class MetricsComponent {
   public getKeys(map) {
     return Array.from(map.keys());
   }
+
+  public isNumberLarge(num: number | string, bigNum: boolean = false) {
+    let limit: number = bigNum ? 100000000 : 100000;
+    return (+num) >= limit;
+  }
+
+  public formatNumber(num: number | string) {
+    let formatted = NumberUtils.roundNumber(+num);
+    return formatted.number + formatted.size;
+  }
 }