From 7053aba2da513b3adaf360bb4589e720969446b9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 21 Sep 2024 13:28:49 +0200
Subject: [PATCH] Feature/add portfolio performance metrics to public page
 (#3793)

* Add portfolio performance metrics

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../src/app/pages/public/public-page.html     | 56 +++++++++++++++++++
 libs/ui/src/lib/value/value.component.html    |  2 +-
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c4ea5c66..180306acd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Extended the _Public API_ with a new endpoint that provides portfolio performance metrics (experimental)
+- Added the portfolio performance metrics to the public page
 - Added a blog post: _Hacktoberfest 2024_
 
 ### Changed
diff --git a/apps/client/src/app/pages/public/public-page.html b/apps/client/src/app/pages/public/public-page.html
index fe213166f..369ea50f5 100644
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/apps/client/src/app/pages/public/public-page.html
@@ -7,6 +7,62 @@
       </h1>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['1d']?.relativeChange ??
+              undefined
+            "
+            >Today</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['ytd']?.relativeChange ??
+              undefined
+            "
+            >This year</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [colorizeSign]="true"
+            [isPercent]="true"
+            [precision]="2"
+            [value]="
+              publicPortfolioDetails?.performance?.['max']?.relativeChange ??
+              undefined
+            "
+            >From the beginning</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
   <div class="proportion-charts row">
     <div class="col-md-12 allocations-by-symbol">
       <mat-card appearance="outlined" class="mb-3">
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index d1e498bcc..a691c54e8 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -5,7 +5,7 @@
   <ng-template #label><ng-content></ng-content></ng-template>
   <ng-container *ngIf="value || value === 0 || value === null">
     <div
-      class="d-flex"
+      class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
       <ng-container *ngIf="isNumber || value === null">