Merge pull request #1571 from rodekruis/fix.compact-review

fix: prefix for compact numbers

interfaces/IBF-dashboard/src/app/components/aggregates/aggregates.component.html

@@ -36,9 +36,8 @@
         </ion-col>
         <ion-col size-lg="1" size-md="1" size-xs="1">
           <ion-item
-            class="aggregate-item-information-icon ion-no-padding"
+            class="aggregate-item-information-icon ion-no-padding m-0 cursor-pointer"
             data-test="icon-row"
-            style="--inner-padding-end: 0px"
             color="transparent"
             lines="none"
           >
@@ -55,12 +54,16 @@
               <ion-item
                 class="aggregate-item ion-no-padding font-size-12"
                 color="ibf-white"
+                lines="full"
               >
                 <ion-thumbnail
                   slot="start"
-                  class="aggregate-item-thumbnail ion-no-margin"
+                  class="m-0 h-10 w-10 bg-slate-100 p-2"
                 >
-                  <ion-img src="assets/icons/{{ indicator.icon }}"></ion-img>
+                  <ion-img
+                    class="object-contain"
+                    src="assets/icons/{{ indicator.icon }}"
+                  ></ion-img>
                 </ion-thumbnail>
                 <ion-label
                   class="aggregate-item-label ion-no-margin ion-text-wrap"
@@ -78,7 +81,7 @@
               >
                 @if (!isAggregateNan(indicator.name, indicator.weightedAvg)) {
                   <ion-label
-                    class="ion-text-right"
+                    class="ion-text-right m-0"
                     data-test="aggregate-number"
                   >
                     {{
@@ -93,7 +96,10 @@
                     {{ indicator.aggregateUnit }}
                   </ion-label>
                 } @else {
-                  <ion-label class="ion-text-right" data-test="aggregate-na">
+                  <ion-label
+                    class="ion-text-right m-0"
+                    data-test="aggregate-na"
+                  >
                     {{ 'aggregates-component.not-applicable' | translate }}
                   </ion-label>
                 }
@@ -106,14 +112,13 @@
               [title]="'aggregates-component.more-information' | translate"
             >
               <ion-item
-                class="aggregate-item-information-icon ion-no-padding"
+                class="aggregate-item-information-icon ion-no-padding m-0 cursor-pointer"
                 data-test="icon-row"
-                style="--inner-padding-end: 0px"
                 color="ibf-white"
               >
                 <ion-label>
                   <img
-                    class="info-img"
+                    class="mx-auto my-0 w-5"
                     src="assets/icons/source-info.svg"
                     (click)="moreInfo(indicator)"
                   />

interfaces/IBF-dashboard/src/app/components/aggregates/aggregates.component.scss

@@ -29,19 +29,6 @@
 .aggregate-item {
   --inner-padding-end: 0;
 
-  .aggregate-item-thumbnail {
-    background: var(--ion-color-fiveten-neutral-100);
-    border: 0.2rem solid var(--ion-color-fiveten-neutral-100);
-    width: 2rem;
-    height: 2rem;
-    align-self: start;
-    padding: 2px;
-
-    ion-img {
-      object-fit: contain;
-    }
-  }
-
   .aggregate-item-label {
     line-height: 1.2;
     white-space: normal;
@@ -50,12 +37,5 @@
 }
 
 .aggregate-item-information-icon {
-  --inner-padding-end: 0.2rem;
-  cursor: pointer;
-
-  ion-label {
-    margin: 0 auto;
-    padding-top: 0.2em;
-    max-width: 20px;
-  }
+  --inner-padding-end: 0;
 }

interfaces/IBF-dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.html

@@ -1,4 +1,8 @@
-<img src="assets/icons/source-info.svg" id="disclaimer-approximate-trigger" />
+<img
+  class="mx-auto my-0 w-5"
+  src="assets/icons/source-info.svg"
+  id="disclaimer-approximate-trigger"
+/>
 <ion-popover
   side="right"
   trigger="disclaimer-approximate-trigger"

interfaces/IBF-dashboard/src/app/pipes/compact.pipe.ts

@@ -8,17 +8,50 @@ import { NumberFormat } from '../types/indicator-group';
 export class CompactPipe implements PipeTransform {
   constructor(@Inject(LOCALE_ID) private locale: string) {}
 
+  /*
+   * 0 becomes 0
+   * 2 becomes < 10
+   * 12 becomes < 20
+   * 20 becomes 20
+   * 56 becomes 60
+   * 297 becomes 300
+   * 462 becomes 460
+   * 1000 becomes 1K
+   * 4200 becomes 4.2K
+   * 225305 becomes 230K
+   * 79136946 becomes 79M
+   * negative numbers become 0
+   */
   transform(value: number, format: NumberFormat = NumberFormat.decimal0) {
+    if (value == null || isNaN(value)) {
+      return '';
+    }
+
     const style = format === NumberFormat.perc ? 'percent' : 'decimal';
-    const min = format === NumberFormat.perc ? 0.1 : 10;
-    const maximumSignificantDigits = format === NumberFormat.perc ? 2 : 1;
+    const maximumSignificantDigits = value > 100 ? 2 : 1;
+
+    let min = 0;
+    let prefix = '';
+
+    if (format !== NumberFormat.perc) {
+      // Add deviation for values between 0 and 20
+      if (value > 0 && value < 20) {
+        prefix = '< ';
+
+        if (value > 10) {
+          min = 20;
+        } else if (value > 0) {
+          min = 10;
+        }
+      }
+    }
 
-    value = value > 0 ? Math.max(min, value) : 0;
+    value = value > 0 ? Math.max(value, min) : 0;
 
-    return new Intl.NumberFormat(this.locale, {
+    return `${prefix}${new Intl.NumberFormat(this.locale, {
       maximumSignificantDigits,
       style,
       notation: 'compact',
-    }).format(value);
+    }).format(value)}`;
   }
 }

services/API-service/src/shared/helper.service.ts

@@ -121,21 +121,53 @@ export class HelperService {
     }
   }
 
-  public toCompactNumber(
+  /*
+   * 0 becomes 0
+   * 2 becomes < 10
+   * 12 becomes < 20
+   * 20 becomes 20
+   * 56 becomes 60
+   * 297 becomes 300
+   * 462 becomes 460
+   * 1000 becomes 1K
+   * 4200 becomes 4.2K
+   * 225305 becomes 230K
+   * 79136946 becomes 79M
+   * negative numbers become 0
+   */
+  toCompactNumber(
     value: number,
     format: NumberFormat = NumberFormat.decimal0,
     locale = 'en-GB',
   ) {
+    if (value == null || isNaN(value)) {
+      return '';
+    }
+
     const style = format === NumberFormat.perc ? 'percent' : 'decimal';
-    const min = format === NumberFormat.perc ? 0.1 : 10;
-    const maximumSignificantDigits = format === NumberFormat.perc ? 2 : 1;
+    const maximumSignificantDigits = value > 100 ? 2 : 1;
+
+    let min = 0;
+    let prefix = '';
+
+    if (format !== NumberFormat.perc) {
+      if (value > 20) {
+        min = 20;
+      } else if (value > 0) {
+        min = 10;
+      }
+
+      if (value > 0 && value < 20) {
+        prefix = '< ';
+      }
+    }
 
-    value = value > 0 ? Math.max(min, value) : 0;
+    value = value > 0 ? Math.max(value, min) : 0;
 
-    return new Intl.NumberFormat(locale, {
+    return `${prefix}${new Intl.NumberFormat(locale, {
       maximumSignificantDigits,
       style,
       notation: 'compact',
-    }).format(value);
+    }).format(value)}`;
   }
 }