From e45b3d6c976b43da47fcedbed5861d7754c72fdb Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 1 Apr 2022 00:45:45 +0530 Subject: [PATCH 1/2] feat: adding font size property to legend component --- .../components/donut/donut-builder.service.ts | 5 +++-- .../components/donut/donut.component.ts | 8 +++++-- .../src/shared/components/donut/donut.ts | 3 ++- .../components/legend/legend.component.scss | 22 +++++++++++++++++-- .../components/legend/legend.component.ts | 17 +++++++++++++- .../d3/d3-visualization-builder.service.ts | 14 +++++++++++- .../components/utils/d3/d3-visualization.scss | 2 +- 7 files changed, 61 insertions(+), 10 deletions(-) diff --git a/projects/observability/src/shared/components/donut/donut-builder.service.ts b/projects/observability/src/shared/components/donut/donut-builder.service.ts index 01a3f565d..9373d9fe1 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/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 }; } diff --git a/projects/observability/src/shared/components/donut/donut.component.ts b/projects/observability/src/shared/components/donut/donut.component.ts index 32af2e6d3..1b469b252 100644 --- a/projects/observability/src/shared/components/donut/donut.component.ts +++ b/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 }); } diff --git a/projects/observability/src/shared/components/donut/donut.ts b/projects/observability/src/shared/components/donut/donut.ts index cb85471e2..1aa175c9d 100644 --- a/projects/observability/src/shared/components/donut/donut.ts +++ b/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 { diff --git a/projects/observability/src/shared/components/legend/legend.component.scss b/projects/observability/src/shared/components/legend/legend.component.scss index e381d5fe1..0883a1e1e 100644 --- a/projects/observability/src/shared/components/legend/legend.component.scss +++ b/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); + } + } } } diff --git a/projects/observability/src/shared/components/legend/legend.component.ts b/projects/observability/src/shared/components/legend/legend.component.ts index 7de22495b..c6219d1dc 100644 --- a/projects/observability/src/shared/components/legend/legend.component.ts +++ b/projects/observability/src/shared/components/legend/legend.component.ts @@ -8,7 +8,12 @@ export const LEGEND_DATA = new InjectionToken>('LEGEND DATA' styleUrls: ['./legend.component.scss'], template: `
-
+
{{ entry.name }} {{ entry.data.value }} @@ -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 { export interface LegendData { position: LegendPosition; layout: LegendLayout; + fontSize: LegendFontSize; series: LegendSeries[]; } @@ -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', diff --git a/projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts b/projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts index 5b5144aa3..f0150f83d 100644 --- a/projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts +++ b/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; } diff --git a/projects/observability/src/shared/components/utils/d3/d3-visualization.scss b/projects/observability/src/shared/components/utils/d3/d3-visualization.scss index 8a1d4f391..ad7b3a0d9 100644 --- a/projects/observability/src/shared/components/utils/d3/d3-visualization.scss +++ b/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; } } From 633c044b95c6691815f07b3780f8a317a4a3c7db Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Fri, 1 Apr 2022 00:48:22 +0530 Subject: [PATCH 2/2] fix: tests --- .../src/shared/components/legend/legend.component.test.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/observability/src/shared/components/legend/legend.component.test.ts b/projects/observability/src/shared/components/legend/legend.component.test.ts index 88a900e03..0754b60f0 100644 --- a/projects/observability/src/shared/components/legend/legend.component.test.ts +++ b/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,6 +41,7 @@ describe('Legend component', () => { expect(entries[1].querySelector('.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', () => { @@ -46,6 +49,7 @@ describe('Legend component', () => { providers: LegendComponent.buildProviders({ layout: LegendLayout.Row, position: LegendPosition.Right, + fontSize: LegendFontSize.ExtraSmall, series: [ { name: 'alpha',