Feature/hide sign if performance is zero (#376)

* Hide sign if performance is zero

* Update changelog

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
 

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>
+      <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
-      <div *ngIf="colorizeSign && value < 0" class="mr-1 text-danger">-</div>
+        <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>

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',

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