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 ae27b3d56..15c77993a 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 @@ -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,6 +29,7 @@ display: flex; flex-direction: row; justify-content: space-between; + padding: 0px 2px; .title { @include body-2-medium($gray-7); @@ -29,6 +37,13 @@ .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 { diff --git a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.test.ts b/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.test.ts index c0481dc38..936c6cb29 100644 --- a/projects/observability/src/shared/components/bar-gauge/bar-gauge.component.test.ts +++ b/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" > ` }); @@ -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(); })); }); 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 9bc296748..96ead89cc 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 @@ -27,8 +27,12 @@ import {
{{ this.title | htDisplayTitle }}
- {{ this.totalValue | number }} / {{ this.maxValue | number }} - {{ this.units }} + {{ this.totalValue | number }} + {{ this.units }} + / + {{ this.maxValue | number }} + + {{ this.units }}
@@ -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;