Add unit to value component

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 };

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();
       });

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
           >

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

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

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;