feat: adding font size property to legend component and style fix (#1521)

Author: itssharmasandeep

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

@@ -9,7 +9,7 @@ import {
 import { BaseType, Selection } from 'd3-selection';
 import { arc, pie, PieArcDatum } from 'd3-shape';
 import { isEmpty } from 'lodash-es';
-import { LegendPosition, LegendSeries } from '../legend/legend.component';
+import { LegendFontSize, LegendPosition, LegendSeries } from '../legend/legend.component';
 import { ChartTooltipBuilderService } from '../utils/chart-tooltip/chart-tooltip-builder.service';
 import { DefaultChartTooltipRenderData } from '../utils/chart-tooltip/default/default-chart-tooltip.component';
 import { D3UtilService } from '../utils/d3/d3-util.service';
@@ -166,7 +166,8 @@ export class DonutBuilderService extends D3VisualizationBuilderService<
       center: provided.center,
       legend: provided.legendPosition === undefined ? LegendPosition.None : provided.legendPosition,
       tooltipOption: provided.tooltipOption === undefined ? { title: '' } : provided.tooltipOption,
-      displayLegendCounts: provided.displayLegendCounts ?? true
+      displayLegendCounts: provided.displayLegendCounts ?? true,
+      legendFontSize: provided.legendFontSize ?? LegendFontSize.ExtraSmall
     };
   }
 

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

@@ -9,7 +9,7 @@ import {
   OnDestroy,
   ViewChild
 } from '@angular/core';
-import { LegendPosition } from '../legend/legend.component';
+import { LegendFontSize, LegendPosition } from '../legend/legend.component';
 import { TooltipOption } from '../utils/d3/d3-visualization-builder.service';
 import { Donut, DonutAlignmentStyle, DonutCenter, DonutSeries } from './donut';
 import { DonutBuilderService } from './donut-builder.service';
@@ -37,6 +37,9 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
   @Input()
   public legendPosition?: LegendPosition;
 
+  @Input()
+  public legendFontSize?: LegendFontSize;
+
   @Input()
   public tooltipOption?: TooltipOption;
 
@@ -70,7 +73,8 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
       center: this.center,
       legendPosition: this.legendPosition,
       tooltipOption: this.tooltipOption,
-      displayLegendCounts: this.displayLegendCounts
+      displayLegendCounts: this.displayLegendCounts,
+      legendFontSize: this.legendFontSize
     });
   }
 

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

@@ -1,4 +1,4 @@
-import { LegendPosition } from '../legend/legend.component';
+import { LegendFontSize, LegendPosition } from '../legend/legend.component';
 import { TooltipOption } from '../utils/d3/d3-visualization-builder.service';
 
 export interface Donut {
@@ -12,6 +12,7 @@ export interface DonutConfiguration {
   legendPosition?: LegendPosition;
   tooltipOption?: TooltipOption;
   displayLegendCounts?: boolean;
+  legendFontSize?: LegendFontSize;
 }
 
 export interface DonutSeriesResults {

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

@@ -46,15 +46,33 @@
     }
 
     .legend-label {
-      @include chart-small-regular($gray-4);
       @include ellipsis-overflow();
       flex: 1;
       min-width: 24px;
     }
 
     .legend-value {
-      @include chart-small-regular($gray-9);
       padding-left: 16px;
     }
+
+    &.font-size-extra-small {
+      .legend-label {
+        @include chart-small-regular($gray-4);
+      }
+
+      .legend-value {
+        @include chart-small-regular($gray-9);
+      }
+    }
+
+    &.font-size-small {
+      .legend-label {
+        @include body-small($gray-4);
+      }
+
+      .legend-value {
+        @include body-small($gray-9);
+      }
+    }
   }
 }

projects/observability/src/shared/components/legend/legend.component.test.ts

@@ -1,5 +1,5 @@
 import { createComponentFactory } from '@ngneat/spectator/jest';
-import { LegendComponent, LegendLayout, LegendPosition } from './legend.component';
+import { LegendComponent, LegendFontSize, LegendLayout, LegendPosition } from './legend.component';
 
 describe('Legend component', () => {
   const componentFactory = createComponentFactory({
@@ -8,6 +8,7 @@ describe('Legend component', () => {
     providers: LegendComponent.buildProviders({
       layout: LegendLayout.Column,
       position: LegendPosition.Right,
+      fontSize: LegendFontSize.ExtraSmall,
       series: []
     })
   });
@@ -17,6 +18,7 @@ describe('Legend component', () => {
       providers: LegendComponent.buildProviders({
         layout: LegendLayout.Column,
         position: LegendPosition.Right,
+        fontSize: LegendFontSize.Small,
         series: [
           {
             name: 'alpha',
@@ -39,13 +41,15 @@ describe('Legend component', () => {
     expect(entries[1].querySelector<HTMLElement>('.legend-symbol')!.style.backgroundColor).toBe('red');
 
     expect(spectator.query('.legend-entries')).toHaveClass('legend-column');
+    expect(spectator.query('.legend-entry')).toHaveClass('font-size-small');
   });
 
   test('should render in requested orientation', () => {
     const spectator = componentFactory({
       providers: LegendComponent.buildProviders({
         layout: LegendLayout.Row,
         position: LegendPosition.Right,
+        fontSize: LegendFontSize.ExtraSmall,
         series: [
           {
             name: 'alpha',

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

@@ -8,7 +8,12 @@ export const LEGEND_DATA = new InjectionToken<LegendData<unknown>>('LEGEND DATA'
   styleUrls: ['./legend.component.scss'],
   template: `
     <div class="legend-entries fill-container" [ngClass]="this.layoutClass">
-      <div *ngFor="let entry of this.entries" class="legend-entry" [htTooltip]="entry.name">
+      <div
+        *ngFor="let entry of this.entries"
+        class="legend-entry"
+        [ngClass]="this.fontSizeClass"
+        [htTooltip]="entry.name"
+      >
         <span class="legend-symbol" [style.backgroundColor]="entry.color"></span>
         <span class="legend-label">{{ entry.name }}</span>
         <span *ngIf="entry.data.value !== undefined" class="legend-value">{{ entry.data.value }}</span>
@@ -31,6 +36,10 @@ export class LegendComponent {
     return this.legendData.series;
   }
 
+  public get fontSizeClass(): string {
+    return `font-size-${this.legendData.fontSize}`;
+  }
+
   public get layoutClass(): string {
     switch (this.legendData.layout) {
       case LegendLayout.Row:
@@ -53,6 +62,7 @@ export interface LegendSeries<T> {
 export interface LegendData<T> {
   position: LegendPosition;
   layout: LegendLayout;
+  fontSize: LegendFontSize;
   series: LegendSeries<T>[];
 }
 
@@ -61,6 +71,11 @@ export const enum LegendLayout {
   Column = 'column'
 }
 
+export const enum LegendFontSize {
+  ExtraSmall = 'extra-small',
+  Small = 'small'
+}
+
 export const enum LegendPosition {
   // Kabob case because these are used for css classes
   Bottom = 'bottom',

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

@@ -2,7 +2,13 @@ import { ElementRef, Injector, Renderer2, TemplateRef, Type } from '@angular/cor
 import { assertUnreachable, DomElementMeasurerService, DynamicComponentService, selector } from '@hypertrace/common';
 import { ContainerElement, mouse, Selection } from 'd3-selection';
 import { isEqual } from 'lodash-es';
-import { LegendComponent, LegendLayout, LegendPosition, LegendSeries } from '../../legend/legend.component';
+import {
+  LegendComponent,
+  LegendFontSize,
+  LegendLayout,
+  LegendPosition,
+  LegendSeries
+} from '../../legend/legend.component';
 import { ChartTooltipBuilderService, ChartTooltipDataMapper } from '../chart-tooltip/chart-tooltip-builder.service';
 import { ChartTooltipRef } from '../chart-tooltip/chart-tooltip-popover';
 import { MouseDataLookupStrategy } from '../mouse-tracking/mouse-tracking';
@@ -137,6 +143,7 @@ export abstract class D3VisualizationBuilderService<
       LegendComponent.buildProviders({
         position: config.legend,
         layout: this.getLegendLayout(config),
+        fontSize: this.getLegendFontSize(config),
         series: this.getLegendEntries(config)
       })
     );
@@ -327,6 +334,10 @@ export abstract class D3VisualizationBuilderService<
     }
   }
 
+  protected getLegendFontSize(configuration: TInternalConfig): LegendFontSize {
+    return configuration.legendFontSize ?? LegendFontSize.ExtraSmall;
+  }
+
   protected getMaxLegendWidth(): number {
     return 200;
   }
@@ -371,6 +382,7 @@ export interface Chart {
 
 export interface ChartConfig {
   legend: LegendPosition;
+  legendFontSize?: LegendFontSize;
   tooltipOption?: TooltipOption;
 }
 

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

@@ -17,7 +17,7 @@
     flex-direction: row-reverse;
     .chart-legend-container {
       margin-left: 12px;
-      margin-right: 12px;
+      margin-right: 36px;
     }
   }