Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 31, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e45b3d6
feat: adding font size property to legend component
itssharmasandeep Mar 31, 2022
633c044
fix: tests
itssharmasandeep Mar 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions projects/observability/src/shared/components/donut/donut-builder.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
};
}

Expand Down
8 changes: 6 additions & 2 deletions projects/observability/src/shared/components/donut/donut.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -37,6 +37,9 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit {
@Input()
public legendPosition?: LegendPosition;

@Input()
public legendFontSize?: LegendFontSize;

@Input()
public tooltipOption?: TooltipOption;

Expand Down Expand Up @@ -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
});
}

Expand Down
3 changes: 2 additions & 1 deletion projects/observability/src/shared/components/donut/donut.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -12,6 +12,7 @@ export interface DonutConfiguration {
legendPosition?: LegendPosition;
tooltipOption?: TooltipOption;
displayLegendCounts?: boolean;
legendFontSize?: LegendFontSize;
}

export interface DonutSeriesResults {
Expand Down
22 changes: 20 additions & 2 deletions projects/observability/src/shared/components/legend/legend.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
}
6 changes: 5 additions & 1 deletion projects/observability/src/shared/components/legend/legend.component.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -8,6 +8,7 @@ describe('Legend component', () => {
providers: LegendComponent.buildProviders({
layout: LegendLayout.Column,
position: LegendPosition.Right,
fontSize: LegendFontSize.ExtraSmall,
series: []
})
});
Expand All @@ -17,6 +18,7 @@ describe('Legend component', () => {
providers: LegendComponent.buildProviders({
layout: LegendLayout.Column,
position: LegendPosition.Right,
fontSize: LegendFontSize.Small,
series: [
{
name: 'alpha',
Expand All @@ -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',
Expand Down
17 changes: 16 additions & 1 deletion projects/observability/src/shared/components/legend/legend.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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:
Expand All @@ -53,6 +62,7 @@ export interface LegendSeries<T> {
export interface LegendData<T> {
position: LegendPosition;
layout: LegendLayout;
fontSize: LegendFontSize;
series: LegendSeries<T>[];
}

Expand All @@ -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',
Expand Down
14 changes: 13 additions & 1 deletion projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)
})
);
Expand Down Expand Up @@ -327,6 +334,10 @@ export abstract class D3VisualizationBuilderService<
}
}

protected getLegendFontSize(configuration: TInternalConfig): LegendFontSize {
return configuration.legendFontSize ?? LegendFontSize.ExtraSmall;
}

protected getMaxLegendWidth(): number {
return 200;
}
Expand Down Expand Up @@ -371,6 +382,7 @@ export interface Chart {

export interface ChartConfig {
legend: LegendPosition;
legendFontSize?: LegendFontSize;
tooltipOption?: TooltipOption;
}

Expand Down
2 changes: 1 addition & 1 deletion projects/observability/src/shared/components/utils/d3/d3-visualization.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
flex-direction: row-reverse;
.chart-legend-container {
margin-left: 12px;
margin-right: 12px;
margin-right: 36px;
Copy link
Contributor

@anandtiwary anandtiwary Mar 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this may not be the case for all legend orientations. We should only apply larger right margin when we have left aligned legend

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this only the case for left aligned, row-reverse class will only be applied when it is left aligned

Copy link
Contributor Author

@itssharmasandeep itssharmasandeep Mar 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in d3-visualization-builder.ts

protected getOuterContainerLayoutClass(configuration: TInternalConfig): string {
    switch (configuration.legend) {
      case LegendPosition.Bottom:
        return 'column';
      case LegendPosition.Top:
      case LegendPosition.TopLeft:
      case LegendPosition.TopRight:
        return 'column-reverse';
      case LegendPosition.Right:
        return 'row';
      case LegendPosition.Left:
        return 'row-reverse';
      case LegendPosition.None:
        return '';
      default:
        return assertUnreachable(configuration.legend);
    }
  }

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh got it.

}
}

Expand Down