From 18e06bb6e6468e9b9306e944f7208f5beb7bc26f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 18 Sep 2021 13:36:49 +0200
Subject: [PATCH] Feature/hide sign if performance is zero (#376)

* Hide sign if performance is zero

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 libs/ui/src/lib/value/value.component.html    |  6 +++--
 .../src/lib/value/value.component.stories.ts  | 27 +++++++++++++++++++
 libs/ui/src/lib/value/value.component.ts      |  5 +++-
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47fc971ed..84d032e79 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
 ### Fixed
 
 - Hid the net performance in the _Presenter View_ (portfolio summary tab on the home page)
+- Hid the sign if the performance is zero in the value component
 
 ## 1.53.0 - 13.09.2021
 
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index daa585adb..68f887f8d 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -4,8 +4,10 @@
     [ngClass]="position === 'end' ? 'justify-content-end' : ''"
   >
     <ng-container *ngIf="isNumber || value === null">
-      <div *ngIf="colorizeSign && value > 0" class="mr-1 text-success">+</div>
-      <div *ngIf="colorizeSign && value < 0" class="mr-1 text-danger">-</div>
+      <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
+        <div *ngIf="value > 0" class="mr-1 text-success">+</div>
+        <div *ngIf="value < 0" class="mr-1 text-danger">-</div>
+      </ng-container>
       <div *ngIf="isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
         {{ formattedValue }}%
       </div>
diff --git a/libs/ui/src/lib/value/value.component.stories.ts b/libs/ui/src/lib/value/value.component.stories.ts
index 8cd585de9..6ea05cb17 100644
--- a/libs/ui/src/lib/value/value.component.stories.ts
+++ b/libs/ui/src/lib/value/value.component.stories.ts
@@ -36,6 +36,33 @@ Label.args = {
   value: 7.25
 };
 
+export const PerformancePositive = Template.bind({});
+PerformancePositive.args = {
+  locale: 'en-US',
+  colorizeSign: true,
+  isPercent: true,
+  value: 0.0136810853673890378
+};
+PerformancePositive.storyName = 'Performance (positive)';
+
+export const PerformanceNegative = Template.bind({});
+PerformanceNegative.args = {
+  locale: 'en-US',
+  colorizeSign: true,
+  isPercent: true,
+  value: -0.0136810853673890378
+};
+PerformanceNegative.storyName = 'Performance (negative)';
+
+export const PerformanceCloseToZero = Template.bind({});
+PerformanceCloseToZero.args = {
+  locale: 'en-US',
+  colorizeSign: true,
+  isPercent: true,
+  value: -2.388915360475e-8
+};
+PerformanceCloseToZero.storyName = 'Performance (negative zero)';
+
 export const Precision = Template.bind({});
 Precision.args = {
   locale: 'en-US',
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index fbe6c2878..3a2c3ed23 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@@ -43,7 +43,6 @@ export class ValueComponent implements OnChanges {
         this.absoluteValue = Math.abs(<number>this.value);
 
         if (this.colorizeSign) {
-          this.useAbsoluteValue = true;
           if (this.currency || this.isCurrency) {
             try {
               this.formattedValue = this.absoluteValue.toLocaleString(
@@ -106,5 +105,9 @@ export class ValueComponent implements OnChanges {
         } catch {}
       }
     }
+
+    if (this.formattedValue === '0.00') {
+      this.useAbsoluteValue = true;
+    }
   }
 }