From f3d337b044d142a042bcaf75f89f42541cf150ff Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 24 Sep 2022 13:15:16 +0200
Subject: [PATCH] Feature/add value of active filters on allocations page
 (#1286)

* Add value

* Update changelog
---
 CHANGELOG.md                                         |  1 +
 .../portfolio/allocations/allocations-page.html      | 12 ++++++++++--
 .../portfolio/allocations/allocations-page.scss      |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75552827..c101591e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added the value of the active filter in percentage on the allocations page
 - Extended the feature overview page by multi-language support (English, German, Italian)
 
 ### Changed
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
index 4a030c8a..36e98011 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@@ -13,8 +13,16 @@
   <div class="row">
     <div class="col">
       <mat-card class="mb-3">
-        <mat-card-header>
-          <mat-card-title i18n>Proportion of Net Worth</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n
+            >Proportion of Net Worth</mat-card-title
+          >
+          <gf-value
+            class="align-items-end flex-grow-1 ml-2"
+            size="medium"
+            [isPercent]="true"
+            [value]="isLoading ? undefined : portfolioDetails?.filteredValueInPercentage"
+          ></gf-value>
         </mat-card-header>
         <mat-card-content>
           <mat-progress-bar
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
index ca8b5609..7d631947 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
@@ -20,6 +20,7 @@
       ::ng-deep {
         .mat-card-header-text {
           flex: 1 1 auto;
+          overflow: hidden;
         }
       }