fix: donut and legend responsiveness issue

Author: itssharmasandeep

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

@@ -39,7 +39,6 @@ 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_DIAMETER_FOR_DONUT: number = 320;
   private static readonly MAX_FONT_SIZE_FOR_TITLE: number = 15;
   private static readonly MAX_FONT_SIZE_FOR_VALUE: number = 64;
 
@@ -138,14 +137,12 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
   protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions {
     let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight);
 
+    diameter -= DonutBuilderService.DONUT_PADDING_PX;
+
     // Reduce visualization area to diameter
     calculatedDimensions.visualizationWidth = diameter;
     calculatedDimensions.visualizationHeight = diameter;
 
-    diameter -= DonutBuilderService.DONUT_PADDING_PX;
-    diameter =
-      diameter > DonutBuilderService.MAX_DIAMETER_FOR_DONUT ? DonutBuilderService.MAX_DIAMETER_FOR_DONUT : diameter;
-
     return {
       ...calculatedDimensions,
       donutOuterRadius: diameter / 2,

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