fix: fix misc issues with gauge and donuts (#950)

* fix: fix misc issues with gauge and donuts

* refactor: remove unused code

* refactor: addressing self review

* refactor: addressing self review

* refactor: fixing style

* refactor: addressing revew commits

* refactor: fixing lint errors

Author: anandtiwary

.prettierignore

@@ -15,3 +15,4 @@ browserslist
 LICENSE*
 conf/
 coverage/
+test-results/

projects/components/src/titled-content/titled-content.component.scss

@@ -26,7 +26,7 @@
     }
 
     .title {
-      @include widget-title($gray-9);
+      @include overline($gray-9);
       margin-top: 16px;
     }
   }
@@ -40,7 +40,7 @@
 
   .footer {
     .title {
-      @include widget-title($gray-4);
+      @include overline($gray-4);
       margin-top: 8px;
     }
   }

projects/observability/src/public-api.ts

@@ -71,6 +71,8 @@ export { LegendPosition } from './shared/components/legend/legend.component';
 
 // Donut
 export * from './shared/components/donut/donut';
+export * from './shared/components/donut/donut.component';
+export * from './shared/components/donut/donut.module';
 
 // Pages
 export * from './pages/apis/backends/backend-list.module';

projects/observability/src/shared/components/donut/donut-builder.service.ts

@@ -38,8 +38,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   private static readonly DONUT_VALUE_CLASS: string = 'donut-value';
   private static readonly DONUT_ARC_CLASS: string = 'donut-arc';
 
-  private static readonly DONUT_PADDING_PX: number = 60;
-  private static readonly LEGEND_SIZE_MULTIPLE: number = 1.5;
+  private static readonly DONUT_PADDING_PX: number = 10;
 
   public constructor(
     d3: D3UtilService,
@@ -128,17 +127,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions {
     let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight);
 
-    // Save available width before reducing width by adding padding
-    const chartWidth = calculatedDimensions.visualizationWidth;
-
-    // Legend takes up to width of donut or remaining available space (This needs more work to look good in all cases)
-    calculatedDimensions.legendWidth = Math.min(
-      diameter * DonutBuilderService.LEGEND_SIZE_MULTIPLE,
-      chartWidth - diameter
-    );
-
-    // Reduce diameter by padding amount (don't need to do this with legend since it provides its own padding)
-    diameter -= DonutBuilderService.DONUT_PADDING_PX * 2;
+    diameter -= DonutBuilderService.DONUT_PADDING_PX;
 
     // Reduce visualization area to diameter
     calculatedDimensions.visualizationWidth = diameter;

projects/observability/src/shared/components/donut/donut.component.ts

@@ -46,7 +46,6 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
   public ngOnChanges(): void {
     this.draw();
   }
-
   public ngOnDestroy(): void {
     this.donut && this.donut.destroy();
   }

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

@@ -6,11 +6,15 @@
   width: 100%;
   display: grid;
   margin-top: 16px;
-  grid-template-columns: minmax(60px, auto) minmax(80px, 160px) max-content;
+  grid-template-columns: minmax(60px, 1fr) max-content;
   grid-auto-rows: 20px;
   column-gap: 16px;
   align-items: center;
 
+  &.with-label {
+    grid-template-columns: minmax(60px, auto) minmax(60px, 1fr) max-content;
+  }
+
   .border-top {
     grid-column-start: 1;
     grid-column-end: 4;

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

@@ -7,19 +7,20 @@ import { maxBy } from 'lodash-es';
   styleUrls: ['./gauge-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="gauge-list">
+    <div class="gauge-list" [ngClass]="{ 'with-label': this.showLabels }">
       <ng-container *ngFor="let item of this.itemOptions">
-        <div class="border-top"></div>
+        <div class="border-top" *ngIf="this.showItemBorders"></div>
         <div
           class="label"
+          *ngIf="this.showLabels"
           [htTooltip]="item.label"
           (click)="this.onItemClick(item)"
           [ngClass]="{ clickable: this.itemClickable }"
           [ngStyle]="{ color: item.color }"
         >
           {{ item.label }}
         </div>
-        <div class="progress">
+        <div class="progress" [htTooltip]="item.label">
           <div class="progress-value" [ngStyle]="{ width: item.width, backgroundColor: item.color }"></div>
         </div>
         <div class="value">
@@ -39,6 +40,12 @@ export class GaugeListComponent<T extends GaugeItem = GaugeItem> implements OnCh
   @Input()
   public determineColor?: (colorKey: string) => string;
 
+  @Input()
+  public showLabels: boolean = true;
+
+  @Input()
+  public showItemBorders: boolean = true;
+
   @Output()
   public readonly itemClick: EventEmitter<T> = new EventEmitter();
 

projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts

@@ -220,15 +220,20 @@ export abstract class D3VisualizationBuilderService<
     // tslint:disable-next-line: no-null-keyword
     visualizationSelection.style('display', null);
 
+    const isLegendVisible = this.isLegendVisible(config);
     const isTopOrBottomLegend = this.isTopOrBottomLegend(config);
     const isSideLegend = config.legend === LegendPosition.Right;
-    const legendWidth = isSideLegend
+    let legendWidth = isLegendVisible
+      ? 0
+      : isSideLegend
       ? Math.min(legendRect.width, this.getMaxLegendWidth())
       : isTopOrBottomLegend
       ? outerRect.width
       : 0;
 
-    const legendHeight = isTopOrBottomLegend
+    let legendHeight = isLegendVisible
+      ? 0
+      : isTopOrBottomLegend
       ? Math.min(legendRect.height, this.getMaxLegendHeight())
       : isSideLegend
       ? outerRect.height
@@ -237,8 +242,19 @@ export abstract class D3VisualizationBuilderService<
     const legendWidthOffset = isSideLegend ? legendWidth : 0;
     const legendHeightOffset = isTopOrBottomLegend ? legendHeight : 0;
 
-    const vizWidth = outerRect.width - legendWidthOffset;
-    const vizHeight = outerRect.height - legendHeightOffset;
+    let vizWidth = outerRect.width - legendWidthOffset;
+    let vizHeight = outerRect.height - legendHeightOffset;
+
+    // Hide Legend if less space is available for the viz
+    if (vizWidth <= legendWidthOffset || legendWidth <= 60) {
+      vizWidth = outerRect.width;
+      legendWidth = 0;
+    }
+
+    if (vizHeight <= legendHeightOffset || legendHeight <= 12) {
+      vizHeight = outerRect.height;
+      legendHeight = 0;
+    }
 
     return this.decorateDimensions({
       visualizationWidth: vizWidth,
@@ -248,6 +264,10 @@ export abstract class D3VisualizationBuilderService<
     });
   }
 
+  private isLegendVisible(config: ChartConfig): boolean {
+    return config.legend === LegendPosition.None;
+  }
+
   private isTopOrBottomLegend(config: ChartConfig): boolean {
     switch (config.legend) {
       case LegendPosition.Bottom:

projects/observability/src/shared/components/utils/d3/d3-visualization.scss

@@ -1,4 +1,5 @@
 .chart-container {
+  flex: 1 1 auto;
   position: absolute; // We want parent to ignore size to detect resizes
   display: flex;
   align-items: center;
@@ -7,24 +8,24 @@
   &.row {
     flex-direction: row;
     .chart-legend-container {
-      padding-left: 48px;
-      padding-right: 12px;
+      margin-left: 12px;
+      margin-right: 12px;
     }
   }
 
   &.column {
     flex-direction: column;
     .chart-legend-container {
-      padding-top: 24px;
-      padding-bottom: 12px;
+      margin-top: 24px;
+      margin-bottom: 12px;
     }
   }
 
   &.column-reverse {
     flex-direction: column-reverse;
     .chart-legend-container {
-      padding-bottom: 24px;
-      padding-top: 12px;
+      margin-bottom: 24px;
+      margin-top: 12px;
     }
   }