From 2b382b692ab7aaede23bec6f7cb6456c47ef6007 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Wed, 30 Jun 2021 12:26:59 -0300
Subject: [PATCH 1/2] feat: adding compact style

---
 .../bar-gauge/bar-gauge.component.scss        | 36 ++++++++++++++-----
 .../bar-gauge/bar-gauge.component.ts          | 20 ++++++++---
 2 files changed, 42 insertions(+), 14 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 afb565520..fa9da4af0 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
@@ -1,17 +1,35 @@
 @import 'mixins';
 
 .bar-gauge {
-  .title {
-    @include overline($gray-7);
-    padding-bottom: 24px;
-  }
+  .header-data {
+    &.standard {
+      .title {
+        @include overline($gray-7);
+        padding-bottom: 24px;
+      }
 
-  .count {
-    @include subtitle-1($gray-9);
-    padding-bottom: 8px;
+      .count {
+        @include subtitle-1($gray-9);
+        padding-bottom: 8px;
 
-    .units {
-      @include body-small($gray-5);
+        .units {
+          @include body-small($gray-5);
+        }
+      }
+    }
+
+    &.compact {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .title {
+        @include body-2-medium($gray-7);
+      }
+
+      .count {
+        @include body-2-regular($gray-5);
+      }
     }
   }
 
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 623aa3cd0..d305c7a07 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,10 +24,12 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="bar-gauge" (htLayoutChange)="this.checkNearMaxValue()">
-      <div *ngIf="this.title" class="title">{{ this.title | htDisplayTitle }}</div>
-      <div class="count">
-        {{ this.totalValue | number }} / {{ this.maxValue | number }}
-        <span class="units" *ngIf="this.units">{{ this.units }}</span>
+      <div class="header-data" [ngClass]="this.display">
+        <div *ngIf="this.title" class="title">{{ this.title | htDisplayTitle }}</div>
+        <div class="count">
+          {{ this.totalValue | number }} / {{ this.maxValue | number }}
+          <span class="units" *ngIf="this.units">{{ this.units }}</span>
+        </div>
       </div>
       <div class="bar">
         <div #maxValueBar class="max-value-bar" [ngClass]="{ 'over-max-value': this.overMaxValue }">
@@ -45,7 +47,7 @@ import {
           </div>
         </div>
       </div>
-      <div class="legend">
+      <div *ngIf="this.display === '${BarGaugeStyle.Standard}'" class="legend">
         <div class="legend-item" *ngFor="let segment of this.barSegments">
           <span class="legend-symbol" [style.backgroundColor]="segment.color"></span>
           <span class="legend-value" *ngIf="this.barSegments.length > 1">{{ segment.value | number }}</span>
@@ -79,6 +81,9 @@ export class BarGaugeComponent implements OnChanges, AfterViewInit {
   @Input()
   public segments?: Segment[] = [];
 
+  @Input()
+  public display: BarGaugeStyle = BarGaugeStyle.Standard;
+
   public barSegments: BarSegment[] = [];
   public totalValue: number = 0;
   public overMaxValue: boolean = false;
@@ -148,3 +153,8 @@ export interface Segment {
 interface BarSegment extends Segment {
   percentage: number;
 }
+
+export const enum BarGaugeStyle {
+  Standard = 'standard',
+  Compact = 'compact'
+}

From 4e7139668b3e303cb36bfd5f1e8547e0750f58d6 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Wed, 30 Jun 2021 12:38:28 -0300
Subject: [PATCH 2/2] feat: changing naming from standard to regular

---
 .../shared/components/bar-gauge/bar-gauge.component.scss    | 2 +-
 .../src/shared/components/bar-gauge/bar-gauge.component.ts  | 6 +++---
 2 files changed, 4 insertions(+), 4 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 fa9da4af0..ae27b3d56 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
@@ -2,7 +2,7 @@
 
 .bar-gauge {
   .header-data {
-    &.standard {
+    &.regular {
       .title {
         @include overline($gray-7);
         padding-bottom: 24px;
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 d305c7a07..9bc296748 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
@@ -47,7 +47,7 @@ import {
           </div>
         </div>
       </div>
-      <div *ngIf="this.display === '${BarGaugeStyle.Standard}'" class="legend">
+      <div *ngIf="this.display === '${BarGaugeStyle.Regular}'" class="legend">
         <div class="legend-item" *ngFor="let segment of this.barSegments">
           <span class="legend-symbol" [style.backgroundColor]="segment.color"></span>
           <span class="legend-value" *ngIf="this.barSegments.length > 1">{{ segment.value | number }}</span>
@@ -82,7 +82,7 @@ export class BarGaugeComponent implements OnChanges, AfterViewInit {
   public segments?: Segment[] = [];
 
   @Input()
-  public display: BarGaugeStyle = BarGaugeStyle.Standard;
+  public display: BarGaugeStyle = BarGaugeStyle.Regular;
 
   public barSegments: BarSegment[] = [];
   public totalValue: number = 0;
@@ -155,6 +155,6 @@ interface BarSegment extends Segment {
 }
 
 export const enum BarGaugeStyle {
-  Standard = 'standard',
+  Regular = 'regular',
   Compact = 'compact'
 }