feat: Adding unlimited value (#1014)

* feat: Adding unlimited value

* feat: Adding uts

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

Author: palbizu

projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss

@@ -12,6 +12,13 @@
         @include subtitle-1($gray-9);
         padding-bottom: 8px;
 
+        .unlimited-symbol {
+          position: relative;
+          top: 3px;
+          font-size: 28px;
+          line-height: 0px;
+        }
+
         .units {
           @include body-small($gray-5);
         }
@@ -22,13 +29,21 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      padding: 0px 2px;
 
       .title {
         @include body-2-medium($gray-7);
       }
 
       .count {
         @include body-2-regular($gray-5);
+
+        .unlimited-symbol {
+          font-size: 18px;
+          position: relative;
+          top: 2px;
+          line-height: 0px;
+        }
       }
     }
   }
@@ -42,7 +57,7 @@
       height: 100%;
       width: 100%;
       background: $gray-2;
-      border-radius: 4px;
+      border-radius: 16px;
       overflow: hidden;
 
       &.over-max-value {

projects/observability/src/shared/components/bar-gauge/bar-gauge.component.test.ts

@@ -53,6 +53,7 @@ describe('Bar Gauge component', () => {
         title="Test Title"
         [segments]="segments"
         [maxValue]="maxValue"
+        [isUnlimited]="isUnlimited"
       ></ht-bar-gauge>
     `
   });
@@ -72,7 +73,8 @@ describe('Bar Gauge component', () => {
             label: 'test-segment-yellow'
           }
         ],
-        maxValue: 100
+        maxValue: 100,
+        isUnlimited: false
       }
     });
     spectator.tick();
@@ -94,6 +96,7 @@ describe('Bar Gauge component', () => {
         value: 33
       }
     ]);
+    expect(spectator.component.isUnlimited).toEqual(false);
   }));
 
   test('assigns correct values when near full', fakeAsync(() => {
@@ -215,5 +218,38 @@ describe('Bar Gauge component', () => {
         value: 33
       }
     ]);
+    expect(spectator.query('.unlimited-symbol')).not.toExist();
+  }));
+
+  test('should display unlimited value', fakeAsync(() => {
+    spectator = createHost(undefined, {
+      providers: [
+        MockProvider(DomElementMeasurerService, {
+          measureHtmlElement: setMeasureHtmlElement(100)
+        })
+      ],
+      hostProps: {
+        segments: [
+          {
+            value: 100,
+            color: 'red',
+            label: 'test-segment-red'
+          }
+        ],
+        maxValue: 100,
+        isUnlimited: true
+      }
+    });
+    spectator.tick();
+    expect(spectator.component.totalValue).toEqual(100);
+    expect(spectator.component.barSegments).toEqual([
+      {
+        value: 100,
+        color: 'red',
+        percentage: 100,
+        label: 'test-segment-red'
+      }
+    ]);
+    expect(spectator.query('.unlimited-symbol')).toExist();
   }));
 });

projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts

@@ -27,8 +27,12 @@ import {
       <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>
+          <span>{{ this.totalValue | number }}</span>
+          <span class="units" *ngIf="this.units && this.isUnlimited"> {{ this.units }}</span>
+          <span> / </span>
+          <span *ngIf="!this.isUnlimited">{{ this.maxValue | number }}</span>
+          <span class="unlimited-symbol" *ngIf="this.isUnlimited">&#8734;</span>
+          <span class="units" *ngIf="this.units && !this.isUnlimited"> {{ this.units }}</span>
         </div>
       </div>
       <div class="bar">
@@ -84,6 +88,9 @@ export class BarGaugeComponent implements OnChanges, AfterViewInit {
   @Input()
   public display: BarGaugeStyle = BarGaugeStyle.Regular;
 
+  @Input()
+  public isUnlimited: boolean = false;
+
   public barSegments: BarSegment[] = [];
   public totalValue: number = 0;
   public overMaxValue: boolean = false;