From ffdb76bbb68fd1366c700382db3da1f8f9860013 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 4 Jun 2023 09:18:50 +0200
Subject: [PATCH] Add unit to value component

---
 .../src/app/portfolio/portfolio.controller.ts | 10 ++++++--
 .../analysis/analysis-page.component.ts       | 24 ++++++++++++-------
 .../portfolio/analysis/analysis-page.html     |  4 ++--
 libs/ui/src/lib/i18n.ts                       |  2 ++
 libs/ui/src/lib/value/value.component.html    |  6 +++++
 libs/ui/src/lib/value/value.component.ts      |  1 +
 6 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/apps/api/src/app/portfolio/portfolio.controller.ts b/apps/api/src/app/portfolio/portfolio.controller.ts
index e79490adb..1747936fd 100644
--- a/apps/api/src/app/portfolio/portfolio.controller.ts
+++ b/apps/api/src/app/portfolio/portfolio.controller.ts
@@ -280,7 +280,10 @@ export class PortfolioController {
         investment: item.investment / maxInvestment
       }));
 
-      streaks = nullifyValuesInObject(streaks, ['current', 'longest']);
+      streaks = nullifyValuesInObject(streaks, [
+        'currentStreak',
+        'longestStreak'
+      ]);
     }
 
     if (
@@ -291,7 +294,10 @@ export class PortfolioController {
         return nullifyValuesInObject(item, ['investment']);
       });
 
-      streaks = nullifyValuesInObject(streaks, ['current', 'longest']);
+      streaks = nullifyValuesInObject(streaks, [
+        'currentStreak',
+        'longestStreak'
+      ]);
     }
 
     return { investments, streaks };
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index d16e2caf3..0e493ec9c 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -60,9 +60,9 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public placeholder = '';
   public portfolioEvolutionDataLabel = $localize`Deposit`;
   public streaks: PortfolioInvestments['streaks'];
-  public subLabelCurrentStreak: string;
-  public subLabelLongestStreak: string;
   public top3: Position[];
+  public unitCurrentStreak: string;
+  public unitLongestStreak: string;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -249,14 +249,22 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .subscribe(({ investments, streaks }) => {
         this.investmentsByGroup = investments;
         this.streaks = streaks;
-        this.subLabelCurrentStreak =
+        this.unitCurrentStreak =
           this.mode === 'year'
-            ? `(${translate('YEARS')})`
-            : `(${translate('MONTHS')})`;
-        this.subLabelLongestStreak =
+            ? this.streaks.currentStreak === 1
+              ? translate('YEAR')
+              : translate('YEARS')
+            : this.streaks.currentStreak === 1
+            ? translate('MONTH')
+            : translate('MONTHS');
+        this.unitLongestStreak =
           this.mode === 'year'
-            ? `(${translate('YEARS')})`
-            : `(${translate('MONTHS')})`;
+            ? this.streaks.longestStreak === 1
+              ? translate('YEAR')
+              : translate('YEARS')
+            : this.streaks.longestStreak === 1
+            ? translate('MONTH')
+            : translate('MONTHS');
 
         this.changeDetectorRef.markForCheck();
       });
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index 2044d52a6..338aedc06 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -182,7 +182,7 @@
           <gf-value
             i18n
             size="large"
-            [subLabel]="subLabelCurrentStreak"
+            [unit]="unitCurrentStreak"
             [value]="streaks?.currentStreak"
             >Current Streak</gf-value
           >
@@ -191,7 +191,7 @@
           <gf-value
             i18n
             size="large"
-            [subLabel]="subLabelLongestStreak"
+            [unit]="unitLongestStreak"
             [value]="streaks?.longestStreak"
             >Longest Streak</gf-value
           >
diff --git a/libs/ui/src/lib/i18n.ts b/libs/ui/src/lib/i18n.ts
index ea0d48ee0..5def3b749 100644
--- a/libs/ui/src/lib/i18n.ts
+++ b/libs/ui/src/lib/i18n.ts
@@ -13,6 +13,7 @@ const locales = {
   HIGHER_RISK: $localize`Higher Risk`,
   IMPORT_ACTIVITY_ERROR_IS_DUPLICATE: $localize`This activity already exists.`,
   LOWER_RISK: $localize`Lower Risk`,
+  MONTH: $localize`Month`,
   MONTHS: $localize`Months`,
   OTHER: $localize`Other`,
   RETIREMENT_PROVISION: $localize`Retirement Provision`,
@@ -20,6 +21,7 @@ const locales = {
   SECURITIES: $localize`Securities`,
   SYMBOL: $localize`Symbol`,
   TAG: $localize`Tag`,
+  YEAR: $localize`Year`,
   YEARS: $localize`Years`,
 
   // enum AssetClass
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 35be5b808..d6b01be43 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -35,9 +35,15 @@
         <small *ngIf="currency && size === 'medium'" class="ml-1">
           {{ currency }}
         </small>
+        <small *ngIf="unit && size === 'medium'" class="ml-1">
+          {{ unit }}
+        </small>
         <div *ngIf="currency && size !== 'medium'" class="ml-1">
           {{ currency }}
         </div>
+        <div *ngIf="unit && size !== 'medium'" class="ml-1">
+          {{ unit }}
+        </div>
       </ng-container>
       <ng-container *ngIf="isString">
         <div
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index 959ae2002..2e1e74e79 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@@ -26,6 +26,7 @@ export class ValueComponent implements OnChanges {
   @Input() precision: number | undefined;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
   @Input() subLabel = '';
+  @Input() unit = '';
   @Input() value: number | string = '';
 
   public absoluteValue = 0;