From 4a38142073c46376fad761faa86d4ba1228b75d5 Mon Sep 17 00:00:00 2001
From: Oriol Barcelona <oriol.barcelona@dynatrace.com>
Date: Sun, 7 Jun 2020 20:28:27 +0200
Subject: [PATCH] feat(formatters): Exposed formatted display unit in
 DtFormattedValue.

---
 .../formatters/src/formatted-value.ts         | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/libs/barista-components/formatters/src/formatted-value.ts b/libs/barista-components/formatters/src/formatted-value.ts
index b6c12fdd96..174b3b6f59 100644
--- a/libs/barista-components/formatters/src/formatted-value.ts
+++ b/libs/barista-components/formatters/src/formatted-value.ts
@@ -50,23 +50,39 @@ export class DtFormattedValue {
     return this._formattedData;
   }
 
+  /** Formatted display unit composed by unit and rate unit */
+  get formattedDisplayUnit(): string {
+    const {
+      displayUnit,
+      displayWhiteSpace,
+      displayRateUnit,
+    } = this._formattedData;
+
+    if (displayUnit !== undefined && displayRateUnit !== undefined) {
+      return `${displayUnit}${displayWhiteSpace ? ' ' : ''}/${displayRateUnit}`;
+    }
+    if (displayUnit !== undefined) {
+      return displayUnit;
+    }
+    if (displayRateUnit !== undefined) {
+      return `/${displayRateUnit}`;
+    }
+
+    return '';
+  }
+
   /** @return the string as a combination of the display data */
   toString(): string {
-    if (this._formattedData.displayValue === undefined) {
+    const { displayValue } = this._formattedData;
+    if (displayValue === undefined) {
       return NO_DATA;
     }
-    let text = this._formattedData.displayValue;
-    if (this._formattedData.displayUnit !== undefined) {
-      text = `${text} ${this._formattedData.displayUnit}`;
-    }
-    if (this._formattedData.displayRateUnit !== undefined) {
-      text =
-        this._formattedData.displayUnit !== undefined ||
-        this._formattedData.displayWhiteSpace === false
-          ? `${text}/${this._formattedData.displayRateUnit}`
-          : `${text} /${this._formattedData.displayRateUnit}`;
+
+    const displayUnit = this.formattedDisplayUnit;
+    if (displayUnit === '') {
+      return displayValue;
     }
 
-    return text;
+    return `${displayValue} ${displayUnit}`;
   }
 }