From e7f92f1fd42a787412f331ef9fcc09dc6b8059a6 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Thu, 21 Oct 2021 17:28:30 -0300
Subject: [PATCH] feat: Adding count reference to Gauge List

---
 .../shared/components/gauge-list/gauge-list.component.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

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