From 4540b18efffdcabba043806b1fd3922e90e7e778 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Fri, 27 Aug 2021 20:28:17 -0300
Subject: [PATCH] feat: Adding bar gauge new style

---
 .../components/bar-gauge/bar-gauge.component.scss    | 12 ++++++++++++
 .../components/bar-gauge/bar-gauge.component.ts      |  7 ++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss b/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss
index 15c77993a..4ea0f88b8 100644
--- a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss
+++ b/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss
@@ -46,6 +46,13 @@
         }
       }
     }
+
+    &.single-bar {
+      .title {
+        @include body-2-regular($gray-7);
+        margin-right: 12px;
+      }
+    }
   }
 
   .bar {
@@ -90,6 +97,11 @@
       width: 1px;
       background: white;
     }
+
+    &.single-bar {
+      height: 6px;
+      width: 80px;
+    }
   }
 
   .legend {
diff --git a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts b/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts
index 43be12741..292260b7e 100644
--- a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts
+++ b/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts
@@ -24,7 +24,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="bar-gauge" (htLayoutChange)="this.checkNearMaxValue()">
-      <div class="header-data" [ngClass]="this.display">
+      <div *ngIf="this.display !== '${BarGaugeStyle.SingleBar}'" class="header-data" [ngClass]="this.display">
         <div *ngIf="this.title" class="title">{{ this.title | htDisplayTitle }}</div>
         <div class="count">
           <span>{{ this.totalValue | htDisplayNumber }}</span>
@@ -34,7 +34,7 @@ import {
           <span class="units" *ngIf="this.units && !this.isUnlimited"> {{ this.units }}</span>
         </div>
       </div>
-      <div class="bar">
+      <div class="bar" [ngClass]="this.display">
         <div #maxValueBar class="max-value-bar" [ngClass]="{ 'over-max-value': this.overMaxValue }">
           <div class="segment-bars">
             <div
@@ -162,5 +162,6 @@ interface BarSegment extends Segment {
 
 export const enum BarGaugeStyle {
   Regular = 'regular',
-  Compact = 'compact'
+  Compact = 'compact',
+  SingleBar = 'single-bar'
 }