feat: adding compact style (#961)

* feat: adding compact style

* feat: changing naming from standard to regular

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

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 {
+    &.regular {
+      .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);
+      }
     }
   }
 

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.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>
@@ -79,6 +81,9 @@ export class BarGaugeComponent implements OnChanges, AfterViewInit {
   @Input()
   public segments?: Segment[] = [];
 
+  @Input()
+  public display: BarGaugeStyle = BarGaugeStyle.Regular;
+
   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 {
+  Regular = 'regular',
+  Compact = 'compact'
+}