diff --git a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts index 14c4ca575..9f59698b6 100644 --- a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts +++ b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { TypedSimpleChanges } from '@hypertrace/common'; -import { maxBy } from 'lodash-es'; +import { maxBy, sum } from 'lodash-es'; @Component({ selector: 'ht-gauge-list', @@ -25,6 +25,7 @@ import { maxBy } from 'lodash-es';
{{ item.value | htDisplayNumber }} + ({{ item.percentage | htDisplayNumber }}%)
@@ -43,6 +44,9 @@ export class GaugeListComponent implements OnCh @Input() public showLabels: boolean = true; + @Input() + public showPercentages: boolean = false; + @Input() public showItemBorders: boolean = true; @@ -73,12 +77,14 @@ export class GaugeListComponent implements OnCh } const colorLookupMap = this.buildColorLookupForData(this.items); + const totalCount = sum(this.items.map((gaugeItem: GaugeItem) => gaugeItem.value)); this.itemOptions = this.items.map(option => ({ label: option.label, color: colorLookupMap.get(option.colorKey ?? option.label), width: `${((option.value / maxValue!) * 100).toFixed(2)}%`, value: option.value, + percentage: totalCount > 0 ? (option.value / totalCount) * 100 : 100, original: option })); } @@ -95,6 +101,7 @@ export class GaugeListComponent implements OnCh export interface GaugeItem { label: string; value: number; + percentage?: number; colorKey?: string; }