refactor: updating style of single bar gauge (#1392)

Author: anandtiwary

projects/observability/src/shared/components/bar-gauge/bar-gauge.component.scss

@@ -100,7 +100,7 @@
 
     &.single-bar {
       height: 6px;
-      width: 80px;
+      width: 100%;
     }
   }
 

projects/observability/src/shared/components/bar-gauge/bar-gauge.component.ts

@@ -44,6 +44,7 @@ import {
               [ngClass]="{ 'hide-last-divider': this.nearMaxValue }"
               [style.background]="segment.color"
               [style.width.%]="segment.percentage"
+              htTooltip="{{ segment.label }} : {{ segment.value | htDisplayNumber }}"
             >
               <div class="divider"></div>
             </div>

projects/observability/src/shared/components/bar-gauge/bar-gauge.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormattingModule } from '@hypertrace/common';
-import { LayoutChangeModule } from '@hypertrace/components';
+import { LayoutChangeModule, TooltipModule } from '@hypertrace/components';
 import { BarGaugeComponent } from './bar-gauge.component';
 
 @NgModule({
   declarations: [BarGaugeComponent],
-  imports: [CommonModule, FormattingModule, LayoutChangeModule],
+  imports: [CommonModule, FormattingModule, LayoutChangeModule, TooltipModule],
   exports: [BarGaugeComponent]
 })
 export class BarGaugeModule {}