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;
}