fix: donut chart fixes (#988)

Author: itssharmasandeep

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

@@ -39,6 +39,8 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   private static readonly DONUT_ARC_CLASS: string = 'donut-arc';
 
   private static readonly DONUT_PADDING_PX: number = 10;
+  private static readonly MAX_FONT_SIZE_FOR_TITLE: number = 15;
+  private static readonly MAX_FONT_SIZE_FOR_VALUE: number = 64;
 
   public constructor(
     d3: D3UtilService,
@@ -69,11 +71,19 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`);
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`)
+      .style(
+        'font-size',
+        Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE)
+      );
 
     visualizationContainer
       .select(selector(DonutBuilderService.DONUT_VALUE_CLASS))
-      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`);
+      .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`)
+      .style(
+        'font-size',
+        Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE)
+      );
   }
 
   protected drawVisualization(

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

@@ -9,12 +9,10 @@
 
   .donut-svg {
     .donut-value-title {
-      font-size: 15px;
       dominant-baseline: hanging;
     }
 
     .donut-value {
-      font-size: 64px;
       dominant-baseline: hanging;
     }
   }

projects/observability/src/shared/components/legend/legend.component.scss

@@ -4,6 +4,7 @@
 .legend-entries {
   display: flex;
   flex-wrap: wrap;
+  overflow: hidden;
 
   &.legend-row {
     flex-direction: row;
@@ -45,14 +46,14 @@
     }
 
     .legend-label {
-      @include body-2-medium($gray-4);
+      @include chart-small-regular($gray-4);
       @include ellipsis-overflow();
       flex: 1;
       min-width: 24px;
     }
 
     .legend-value {
-      @include body-2-medium($gray-9);
+      @include chart-small-regular($gray-9);
       padding-left: 16px;
     }
   }

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

@@ -226,7 +226,7 @@ export abstract class D3VisualizationBuilderService<
     let legendWidth = isLegendVisible
       ? 0
       : isSideLegend
-      ? Math.min(legendRect.width, this.getMaxLegendWidth())
+      ? Math.min(this.getLegendWidth(outerRect.width), this.getMaxLegendWidth())
       : isTopOrBottomLegend
       ? outerRect.width
       : 0;
@@ -264,6 +264,10 @@ export abstract class D3VisualizationBuilderService<
     });
   }
 
+  private getLegendWidth(outerRectWidth: number): number {
+    return outerRectWidth >= 200 ? outerRectWidth * 0.35 : 0;
+  }
+
   private isLegendVisible(config: ChartConfig): boolean {
     return config.legend === LegendPosition.None;
   }