feat: Adding count reference to Gauge List (#1203)

Co-authored-by: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>

Author: palbizu

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';
         </div>
         <div class="value">
           <span>{{ item.value | htDisplayNumber }}</span>
+          <span *ngIf="this.showPercentages"> ({{ item.percentage | htDisplayNumber }}%)</span>
         </div>
       </ng-container>
     </div>
@@ -43,6 +44,9 @@ export class GaugeListComponent<T extends GaugeItem = GaugeItem> implements OnCh
   @Input()
   public showLabels: boolean = true;
 
+  @Input()
+  public showPercentages: boolean = false;
+
   @Input()
   public showItemBorders: boolean = true;
 
@@ -73,12 +77,14 @@ export class GaugeListComponent<T extends GaugeItem = GaugeItem> 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<T extends GaugeItem = GaugeItem> implements OnCh
 export interface GaugeItem {
   label: string;
   value: number;
+  percentage?: number;
   colorKey?: string;
 }