Merge pull request #1542 from rodekruis/feat.compact-numbers

feat: compact numbers
rodekruis · Aug 26, 2024 · 25449fe · 25449fe
2 parents f089d68 + 47e4811
commit 25449fe
Show file tree

Hide file tree

Showing 31 changed files with 205 additions and 147 deletions.
diff --git a/interfaces/IBF-dashboard/src/app/components/aggregates/aggregates.component.html b/interfaces/IBF-dashboard/src/app/components/aggregates/aggregates.component.html
@@ -6,7 +6,7 @@
         style="background: var(--ion-color-ibf-secondary)"
         data-test="action-title"
       >
-        <ion-col class="ion-no-padding">
+        <ion-col class="ion-no-padding" size-lg="11" size-md="11" size-xs="11">
           <ion-item
             lines="none"
             class="component-title-item ion-no-margin"
@@ -34,6 +34,19 @@
             </ion-col>
           </ion-item>
         </ion-col>
+        <ion-col size-lg="1" size-md="1" size-xs="1">
+          <ion-item
+            class="aggregate-item-information-icon ion-no-padding"
+            data-test="icon-row"
+            style="--inner-padding-end: 0px"
+            color="transparent"
+            lines="none"
+          >
+            <ion-label>
+              <app-disclaimer-approximate></app-disclaimer-approximate>
+            </ion-label>
+          </ion-item>
+        </ion-col>
       </ion-row>
       <div data-test="aggregate-list">
         @for (indicator of indicators; track indicator.name) {
@@ -62,47 +75,15 @@
                     class="ion-text-right"
                     data-test="aggregate-number"
                   >
-                    @switch (indicator.numberFormatAggregate) {
-                      @case ('decimal2') {
-                        <span>
-                          {{
-                            getAggregate(
-                              indicator.name,
-                              indicator.weightedAvg,
-                              indicator.numberFormatAggregate
-                            )
-                              | number: '.2-2'
-                              | translate
-                          }}
-                        </span>
-                      }
-                      @case ('decimal0') {
-                        <span>
-                          {{
-                            getAggregate(
-                              indicator.name,
-                              indicator.weightedAvg,
-                              indicator.numberFormatAggregate
-                            )
-                              | number: '.0-0'
-                              | translate
-                          }}
-                        </span>
-                      }
-                      @case ('perc') {
-                        <span>
-                          {{
-                            getAggregate(
-                              indicator.name,
-                              indicator.weightedAvg,
-                              indicator.numberFormatAggregate
-                            )
-                              | percent: '.0-0'
-                              | translate
-                          }}
-                        </span>
-                      }
-                    }
+                    {{
+                      getAggregate(
+                        indicator.name,
+                        indicator.weightedAvg,
+                        indicator.numberFormatAggregate
+                      )
+                        | compact: indicator.numberFormatAggregate
+                        | translate
+                    }}
                     {{ indicator.aggregateUnit }}
                   </ion-label>
                 } @else {

diff --git a/interfaces/IBF-dashboard/src/app/components/chat/chat.component.html b/interfaces/IBF-dashboard/src/app/components/chat/chat.component.html
@@ -189,14 +189,7 @@
                 "
               ></span>
               <strong>
-                @switch (actionIndicatorNumberFormat) {
-                  @case ('decimal0') {
-                    <span>{{ area.actionsValue | number: '.0-0' }}</span>
-                  }
-                  @case ('perc') {
-                    <span>{{ area.actionsValue | percent: '.0-0' }}</span>
-                  }
-                }
+                {{ area.actionsValue | compact: actionIndicatorNumberFormat }}
               </strong>
             </ion-note>
           }

diff --git a/interfaces/IBF-dashboard/src/app/components/chat/chat.component.ts b/interfaces/IBF-dashboard/src/app/components/chat/chat.component.ts
@@ -29,7 +29,7 @@ import { AdminLevelService } from '../../services/admin-level.service';
 import { AggregatesService } from '../../services/aggregates.service';
 import { TimelineService } from '../../services/timeline.service';
 import { AdminLevel, AdminLevelType } from '../../types/admin-level';
-import { Indicator } from '../../types/indicator-group';
+import { Indicator, NumberFormat } from '../../types/indicator-group';
 import { LeadTimeTriggerKey, LeadTimeUnit } from '../../types/lead-time';
 import { TriggeredArea } from '../../types/triggered-area';
 import { ActionResultPopoverComponent } from '../action-result-popover/action-result-popover.component';
@@ -72,7 +72,7 @@ export class ChatComponent implements OnInit, OnDestroy {
   public disasterTypeLabel: string;
   public disasterTypeName: string;
   public actionIndicatorLabel: string;
-  public actionIndicatorNumberFormat: string;
+  public actionIndicatorNumberFormat: NumberFormat;
   public forecastInfo: string[];
   public country: Country;
   public disasterType: DisasterType;

diff --git a/...dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.html b/...dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.html
@@ -0,0 +1,13 @@
+<img src="assets/icons/source-info.svg" id="disclaimer-approximate-trigger" />
+<ion-popover
+  side="right"
+  trigger="disclaimer-approximate-trigger"
+  triggerAction="click"
+  showBackdrop="false"
+>
+  <ng-template>
+    <ion-content class="ion-padding font-size-12">
+      {{ 'disclaimer-approximate-component.message' | translate }}
+    </ion-content>
+  </ng-template>
+</ion-popover>
diff --git a/...dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.scss b/...dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.scss
@@ -0,0 +1,4 @@
+ion-popover {
+  --offset-x: 8px;
+  --offset-y: -2px;
+}
diff --git a/...hboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.spec.ts b/...hboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { DisclaimerApproximateComponent } from './disclaimer-approximate.component';
+
+describe('DisclaimerApproximateComponent', () => {
+  let component: DisclaimerApproximateComponent;
+  let fixture: ComponentFixture<DisclaimerApproximateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DisclaimerApproximateComponent],
+      imports: [IonicModule, TranslateModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DisclaimerApproximateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...F-dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.ts b/...F-dashboard/src/app/components/disclaimer-approximate/disclaimer-approximate.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-disclaimer-approximate',
+  templateUrl: './disclaimer-approximate.component.html',
+  styleUrls: ['./disclaimer-approximate.component.scss'],
+})
+export class DisclaimerApproximateComponent {}
diff --git a/...s/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.html b/...s/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.html
@@ -147,7 +147,7 @@
               '(' +
                 (actionIndicatorLabel | titlecase) +
                 ' ' +
-                (event.actionsValueSum | number: '.0-0') +
+                (event.actionsValueSum | compact) +
                 ')'
             }}</span>
           } @else {
@@ -220,14 +220,9 @@
                   }
                   @if (area.actionsValue && area.actionsValue > 0) {
                     {{ ' - ' }}
-                    @switch (actionIndicatorNumberFormat) {
-                      @case ('decimal0') {
-                        <span>{{ area.actionsValue | number: '.0-0' }}</span>
-                      }
-                      @case ('perc') {
-                        <span>{{ area.actionsValue | percent: '.0-0' }}</span>
-                      }
-                    }
+                    <span>{{
+                      area.actionsValue | compact: actionIndicatorNumberFormat
+                    }}</span>
                   }
                 </p>
               </li>
@@ -281,14 +276,9 @@
                   <span>({{ area.nameParent }})</span>
                 }
                 -
-                @switch (actionIndicatorNumberFormat) {
-                  @case ('decimal0') {
-                    <span>{{ area.actionsValue | number: '.0-0' }}</span>
-                  }
-                  @case ('perc') {
-                    <span>{{ area.actionsValue | percent: '.0-0' }}</span>
-                  }
-                }
+                <span>{{
+                  area.actionsValue | compact: actionIndicatorNumberFormat
+                }}</span>
               </p>
             </li>
           }

diff --git a/...ces/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.ts b/...ces/IBF-dashboard/src/app/components/event-speech-bubble/event-speech-bubble.component.ts
@@ -16,6 +16,7 @@ import { TimelineService } from '../../services/timeline.service';
 import { DisasterTypeKey } from '../../types/disaster-type-key';
 import { LeadTime, LeadTimeTriggerKey } from '../../types/lead-time';
 import { TriggeredArea } from '../../types/triggered-area';
+import { NumberFormat } from '../../types/indicator-group';
 
 @Component({
   selector: 'app-event-speech-bubble',
@@ -46,7 +47,7 @@ export class EventSpeechBubbleComponent implements AfterViewChecked, OnDestroy {
   @Input()
   public actionIndicatorLabel: string;
   @Input()
-  public actionIndicatorNumberFormat: string;
+  public actionIndicatorNumberFormat: NumberFormat;
 
   public typhoonLandfallText: string;
   public displayName: string;

diff --git a/interfaces/IBF-dashboard/src/app/config.backup.ts b/interfaces/IBF-dashboard/src/app/config.backup.ts
diff --git a/interfaces/IBF-dashboard/src/app/pages/dashboard/dashboard.page.html b/interfaces/IBF-dashboard/src/app/pages/dashboard/dashboard.page.html
@@ -139,7 +139,7 @@
             >
               <ion-content>
                 <ion-grid
-                  class="ibf-dashboard-right-column-left-sub-column-grid ion-justify-content-between ion-no-padding"
+                  class="ibf-dashboard-right-column-left-sub-column-grid ion-no-padding"
                 >
                   <ion-row>
                     <ion-col>
@@ -149,7 +149,7 @@
                       <app-aggregates areaStatus="stopped"></app-aggregates>
                     </ion-col>
                   </ion-row>
-                  <ion-row>
+                  <ion-row class="margin-top-auto">
                     <ion-col>
                       <app-areas-of-focus-summary></app-areas-of-focus-summary>
                     </ion-col>

diff --git a/interfaces/IBF-dashboard/src/app/pipes/compact.pipe.spec.ts b/interfaces/IBF-dashboard/src/app/pipes/compact.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { CompactPipe } from './compact.pipe';
+
+describe('CompactPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CompactPipe('en-US');
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/interfaces/IBF-dashboard/src/app/pipes/compact.pipe.ts b/interfaces/IBF-dashboard/src/app/pipes/compact.pipe.ts
@@ -0,0 +1,23 @@
+import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
+import { NumberFormat } from '../types/indicator-group';
+
+@Pipe({
+  standalone: true,
+  name: 'compact',
+})
+export class CompactPipe implements PipeTransform {
+  constructor(@Inject(LOCALE_ID) private locale: string) {}
+
+  transform(value: number, format: NumberFormat = NumberFormat.decimal0) {
+    const style = format === NumberFormat.perc ? 'percent' : 'decimal';
+    const min = format === NumberFormat.perc ? 0.1 : 10;
+
+    value = value > 0 ? Math.max(min, value) : 0;
+
+    return new Intl.NumberFormat(this.locale, {
+      maximumSignificantDigits: 1,
+      style,
+      notation: 'compact',
+    }).format(value);
+  }
+}
diff --git a/interfaces/IBF-dashboard/src/app/shared.module.ts b/interfaces/IBF-dashboard/src/app/shared.module.ts
@@ -48,6 +48,9 @@ import { TooltipPopoverComponent } from './components/tooltip-popover/tooltip-po
 import { TooltipComponent } from './components/tooltip/tooltip.component';
 import { UserStateComponent } from './components/user-state/user-state.component';
 import { BackendMockScenarioComponent } from './mocks/backend-mock-scenario-component/backend-mock-scenario.component';
+import { CompactPipe } from './pipes/compact.pipe';
+import { DisclaimerApproximateComponent } from './components/disclaimer-approximate/disclaimer-approximate.component';
+
 @NgModule({
   imports: [
     AnalyticsModule,
@@ -57,6 +60,7 @@ import { BackendMockScenarioComponent } from './mocks/backend-mock-scenario-comp
     LeafletMarkerClusterModule,
     LeafletModule,
     TranslateModule,
+    CompactPipe,
   ],
   declarations: [
     AboutBtnComponent,
@@ -101,6 +105,7 @@ import { BackendMockScenarioComponent } from './mocks/backend-mock-scenario-comp
     DynamicPointPopupComponent,
     TyphoonTrackpointPopupContentComponent,
     GlofasStationPopupContentComponent,
+    DisclaimerApproximateComponent,
   ],
   exports: [
     AboutBtnComponent,
@@ -146,6 +151,7 @@ import { BackendMockScenarioComponent } from './mocks/backend-mock-scenario-comp
     DynamicPointPopupComponent,
     TyphoonTrackpointPopupContentComponent,
     GlofasStationPopupContentComponent,
+    DisclaimerApproximateComponent,
   ],
 })
 export class SharedModule {}
diff --git a/interfaces/IBF-dashboard/src/assets/i18n/en.json b/interfaces/IBF-dashboard/src/assets/i18n/en.json
@@ -71,6 +71,9 @@
     "plural-suffix": "(s)",
     "not-applicable": "N/A"
   },
+  "disclaimer-approximate-component": {
+    "message": "All numbers are approximate and meant to be used as guidance."
+  },
   "areas-of-focus-summary-component": {
     "title": "Actions Summary",
     "aof-subtitle": "Sector",

diff --git a/interfaces/IBF-dashboard/src/global.scss b/interfaces/IBF-dashboard/src/global.scss
@@ -310,3 +310,11 @@ app-tooltip {
     }
   }
 }
+
+.margin-top-auto {
+  margin-top: auto;
+}
+
+.font-size-12 {
+  font-size: 12px;
+}
diff --git a/interfaces/IBF-dashboard/src/shared/utils.ts b/interfaces/IBF-dashboard/src/shared/utils.ts
@@ -1,18 +1,7 @@
 // sort array ascending
-const asc = (arr) => arr.sort((a, b) => a - b);
+const asc = (arr: number[]) => arr.sort((a: number, b: number) => a - b);
 
-// const sum = (arr) => arr.reduce((a, b) => a + b, 0);
-
-// const mean = (arr) => sum(arr) / arr.length;
-
-// sample standard deviation
-// const std = (arr) => {
-//   const mu = mean(arr);
-//   const diffArr = arr.map((a) => (a - mu) ** 2);
-//   return Math.sqrt(sum(diffArr) / (arr.length - 1));
-// };
-
-export const quantile = (arr, q) => {
+export const quantile = (arr: number[], q: number) => {
   const sorted = asc(arr);
   const pos = (sorted.length - 1) * q;
   const base = Math.floor(pos);