From fb107f623add7197c220ce0e1df3f32263a79357 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Sun, 27 Jun 2021 22:21:13 -0700 Subject: [PATCH 1/7] fix: fix misc issues with gauge and donuts --- .../titled-content.component.scss | 4 ++-- projects/observability/src/public-api.ts | 6 ++++++ .../components/donut/donut-builder.service.ts | 20 +++++++++---------- .../components/donut/donut.component.scss | 10 ++++++++++ .../components/donut/donut.component.ts | 5 ++++- .../gauge-list/gauge-list.component.scss | 6 +++++- .../gauge-list/gauge-list.component.ts | 13 +++++++++--- 7 files changed, 47 insertions(+), 17 deletions(-) diff --git a/projects/components/src/titled-content/titled-content.component.scss b/projects/components/src/titled-content/titled-content.component.scss index 04213150e..67ed84691 100644 --- a/projects/components/src/titled-content/titled-content.component.scss +++ b/projects/components/src/titled-content/titled-content.component.scss @@ -26,7 +26,7 @@ } .title { - @include widget-title($gray-9); + @include overline($gray-9); margin-top: 16px; } } @@ -40,7 +40,7 @@ .footer { .title { - @include widget-title($gray-4); + @include overline($gray-4); margin-top: 8px; } } diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts index c9010ab30..b6ee4b244 100644 --- a/projects/observability/src/public-api.ts +++ b/projects/observability/src/public-api.ts @@ -201,6 +201,12 @@ export * from './shared/components/timeline-card-list/timeline-card-list.compone export * from './shared/components/timeline-card-list/container/timeline-card-container.component'; export * from './shared/components/timeline-card-list/timeline-card-list.module'; + +// Card List - Timeline +export * from './shared/components/donut/donut.component'; +export * from './shared/components/donut/donut.module'; + + // Explore Filter link export * from './shared/components/explore-filter-link/explore-filter-link.component'; export * from './shared/components/explore-filter-link/explore-filter-link.module'; 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 d301a02d9..887bf1ec1 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -38,8 +38,8 @@ export class DonutBuilderService extends D3VisualizationBuilderService< private static readonly DONUT_VALUE_CLASS: string = 'donut-value'; private static readonly DONUT_ARC_CLASS: string = 'donut-arc'; - private static readonly DONUT_PADDING_PX: number = 60; - private static readonly LEGEND_SIZE_MULTIPLE: number = 1.5; + public static readonly DONUT_PADDING_PX: number = 60; + public static readonly LEGEND_SIZE_MULTIPLE: number = 1.5; public constructor( d3: D3UtilService, @@ -129,16 +129,16 @@ export class DonutBuilderService extends D3VisualizationBuilderService< let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); // Save available width before reducing width by adding padding - const chartWidth = calculatedDimensions.visualizationWidth; + // const chartWidth = calculatedDimensions.visualizationWidth; - // Legend takes up to width of donut or remaining available space (This needs more work to look good in all cases) - calculatedDimensions.legendWidth = Math.min( - diameter * DonutBuilderService.LEGEND_SIZE_MULTIPLE, - chartWidth - diameter - ); + // // Legend takes up to width of donut or remaining available space (This needs more work to look good in all cases) + // calculatedDimensions.legendWidth = Math.min( + // diameter * DonutBuilderService.LEGEND_SIZE_MULTIPLE, + // chartWidth - diameter + // ); - // Reduce diameter by padding amount (don't need to do this with legend since it provides its own padding) - diameter -= DonutBuilderService.DONUT_PADDING_PX * 2; + // // Reduce diameter by padding amount (don't need to do this with legend since it provides its own padding) + // diameter -= DonutBuilderService.DONUT_PADDING_PX * 2; // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index ea3aa6b3f..40de4fe6e 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -7,6 +7,16 @@ align-items: center; justify-content: center; + // .chart-container { + // width: 100%; + // height: 100%; + // justify-content: none + // } + + // .chart-visualization-container { + // flex: 1 1 auto; + // } + .donut-svg { .donut-value-title { font-size: 15px; diff --git a/projects/observability/src/shared/components/donut/donut.component.ts b/projects/observability/src/shared/components/donut/donut.component.ts index 34d0a6964..a5b059438 100644 --- a/projects/observability/src/shared/components/donut/donut.component.ts +++ b/projects/observability/src/shared/components/donut/donut.component.ts @@ -46,13 +46,16 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit { public ngOnChanges(): void { this.draw(); } - public ngOnDestroy(): void { this.donut && this.donut.destroy(); } public ngAfterViewInit(): void { this.reflow(); + setTimeout(() => { + this.draw(); + console.log('drawn'); + }, 8000) } private draw(): void { diff --git a/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss b/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss index 52cce7b0a..348180753 100644 --- a/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss +++ b/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss @@ -6,11 +6,15 @@ width: 100%; display: grid; margin-top: 16px; - grid-template-columns: minmax(60px, auto) minmax(80px, 160px) max-content; + grid-template-columns: minmax(80px, 1fr) max-content; grid-auto-rows: 20px; column-gap: 16px; align-items: center; + &.with-label { + grid-template-columns: minmax(60px, auto) minmax(80px, 1fr) max-content; + } + .border-top { grid-column-start: 1; grid-column-end: 4; diff --git a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts index e3db03ca2..129de1762 100644 --- a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts +++ b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts @@ -7,11 +7,12 @@ import { maxBy } from 'lodash-es'; styleUrls: ['./gauge-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
+
-
+
{{ item.label }}
-
+
@@ -39,6 +40,12 @@ export class GaugeListComponent implements OnCh @Input() public determineColor?: (colorKey: string) => string; + @Input() + public showLabels: boolean = true; + + @Input() + public showItemBorders: boolean = true; + @Output() public readonly itemClick: EventEmitter = new EventEmitter(); From 6f75ebc354fa7a16615daad2375c6a31576a1ba0 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Sun, 27 Jun 2021 22:27:46 -0700 Subject: [PATCH 2/7] refactor: remove unused code --- .../shared/components/donut/donut-builder.service.ts | 12 ------------ 1 file changed, 12 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 887bf1ec1..d08352ba6 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -128,18 +128,6 @@ export class DonutBuilderService extends D3VisualizationBuilderService< protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions { let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); - // Save available width before reducing width by adding padding - // const chartWidth = calculatedDimensions.visualizationWidth; - - // // Legend takes up to width of donut or remaining available space (This needs more work to look good in all cases) - // calculatedDimensions.legendWidth = Math.min( - // diameter * DonutBuilderService.LEGEND_SIZE_MULTIPLE, - // chartWidth - diameter - // ); - - // // Reduce diameter by padding amount (don't need to do this with legend since it provides its own padding) - // diameter -= DonutBuilderService.DONUT_PADDING_PX * 2; - // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; calculatedDimensions.visualizationHeight = diameter; From 6ebff07be1e99df8c1620a46036c24b35a4db3d7 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Sun, 27 Jun 2021 22:44:10 -0700 Subject: [PATCH 3/7] refactor: addressing self review --- projects/observability/src/public-api.ts | 8 ++------ .../shared/components/donut/donut-builder.service.ts | 2 +- .../src/shared/components/donut/donut.component.scss | 10 ---------- .../src/shared/components/donut/donut.component.ts | 8 ++++---- 4 files changed, 7 insertions(+), 21 deletions(-) diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts index b6ee4b244..8f9400f26 100644 --- a/projects/observability/src/public-api.ts +++ b/projects/observability/src/public-api.ts @@ -71,6 +71,8 @@ export { LegendPosition } from './shared/components/legend/legend.component'; // Donut export * from './shared/components/donut/donut'; +export * from './shared/components/donut/donut.component'; +export * from './shared/components/donut/donut.module'; // Pages export * from './pages/apis/backends/backend-list.module'; @@ -201,12 +203,6 @@ export * from './shared/components/timeline-card-list/timeline-card-list.compone export * from './shared/components/timeline-card-list/container/timeline-card-container.component'; export * from './shared/components/timeline-card-list/timeline-card-list.module'; - -// Card List - Timeline -export * from './shared/components/donut/donut.component'; -export * from './shared/components/donut/donut.module'; - - // Explore Filter link export * from './shared/components/explore-filter-link/explore-filter-link.component'; export * from './shared/components/explore-filter-link/explore-filter-link.module'; 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 d08352ba6..839a2c2a1 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -126,7 +126,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService< } protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions { - let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); + const diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index 40de4fe6e..ea3aa6b3f 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -7,16 +7,6 @@ align-items: center; justify-content: center; - // .chart-container { - // width: 100%; - // height: 100%; - // justify-content: none - // } - - // .chart-visualization-container { - // flex: 1 1 auto; - // } - .donut-svg { .donut-value-title { font-size: 15px; diff --git a/projects/observability/src/shared/components/donut/donut.component.ts b/projects/observability/src/shared/components/donut/donut.component.ts index a5b059438..87fb6f996 100644 --- a/projects/observability/src/shared/components/donut/donut.component.ts +++ b/projects/observability/src/shared/components/donut/donut.component.ts @@ -52,10 +52,10 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit { public ngAfterViewInit(): void { this.reflow(); - setTimeout(() => { - this.draw(); - console.log('drawn'); - }, 8000) + // setTimeout(() => { + // this.draw(); + // console.log('drawn'); + // }, 8000) } private draw(): void { From 3ae143c51b2b508edc9567a9aa036f82927752de Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Sun, 27 Jun 2021 22:44:10 -0700 Subject: [PATCH 4/7] refactor: addressing self review --- projects/observability/src/public-api.ts | 8 ++------ .../shared/components/donut/donut-builder.service.ts | 2 +- .../src/shared/components/donut/donut.component.scss | 10 ---------- .../src/shared/components/donut/donut.component.ts | 4 ---- 4 files changed, 3 insertions(+), 21 deletions(-) diff --git a/projects/observability/src/public-api.ts b/projects/observability/src/public-api.ts index b6ee4b244..8f9400f26 100644 --- a/projects/observability/src/public-api.ts +++ b/projects/observability/src/public-api.ts @@ -71,6 +71,8 @@ export { LegendPosition } from './shared/components/legend/legend.component'; // Donut export * from './shared/components/donut/donut'; +export * from './shared/components/donut/donut.component'; +export * from './shared/components/donut/donut.module'; // Pages export * from './pages/apis/backends/backend-list.module'; @@ -201,12 +203,6 @@ export * from './shared/components/timeline-card-list/timeline-card-list.compone export * from './shared/components/timeline-card-list/container/timeline-card-container.component'; export * from './shared/components/timeline-card-list/timeline-card-list.module'; - -// Card List - Timeline -export * from './shared/components/donut/donut.component'; -export * from './shared/components/donut/donut.module'; - - // Explore Filter link export * from './shared/components/explore-filter-link/explore-filter-link.component'; export * from './shared/components/explore-filter-link/explore-filter-link.module'; 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 d08352ba6..839a2c2a1 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -126,7 +126,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService< } protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions { - let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); + const diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index 40de4fe6e..ea3aa6b3f 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -7,16 +7,6 @@ align-items: center; justify-content: center; - // .chart-container { - // width: 100%; - // height: 100%; - // justify-content: none - // } - - // .chart-visualization-container { - // flex: 1 1 auto; - // } - .donut-svg { .donut-value-title { font-size: 15px; diff --git a/projects/observability/src/shared/components/donut/donut.component.ts b/projects/observability/src/shared/components/donut/donut.component.ts index a5b059438..d27759523 100644 --- a/projects/observability/src/shared/components/donut/donut.component.ts +++ b/projects/observability/src/shared/components/donut/donut.component.ts @@ -52,10 +52,6 @@ export class DonutComponent implements OnChanges, OnDestroy, AfterViewInit { public ngAfterViewInit(): void { this.reflow(); - setTimeout(() => { - this.draw(); - console.log('drawn'); - }, 8000) } private draw(): void { From b1a25edd60c2da8ed03c773fe09db8c374c9a13e Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Mon, 28 Jun 2021 12:15:57 -0700 Subject: [PATCH 5/7] refactor: fixing style --- .prettierignore | 1 + .../src/shared/components/gauge-list/gauge-list.component.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.prettierignore b/.prettierignore index ec7766e76..a6d736874 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,3 +15,4 @@ browserslist LICENSE* conf/ coverage/ +test-results/ diff --git a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts index 129de1762..14c4ca575 100644 --- a/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts +++ b/projects/observability/src/shared/components/gauge-list/gauge-list.component.ts @@ -7,7 +7,7 @@ import { maxBy } from 'lodash-es'; styleUrls: ['./gauge-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
+
Date: Mon, 28 Jun 2021 22:49:05 -0700 Subject: [PATCH 6/7] refactor: addressing revew commits --- .../components/donut/donut-builder.service.ts | 6 +++-- .../gauge-list/gauge-list.component.scss | 4 +-- .../d3/d3-visualization-builder.service.ts | 26 ++++++++++++++++--- .../components/utils/d3/d3-visualization.scss | 13 +++++----- 4 files changed, 35 insertions(+), 14 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 839a2c2a1..00a979b37 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -38,7 +38,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService< private static readonly DONUT_VALUE_CLASS: string = 'donut-value'; private static readonly DONUT_ARC_CLASS: string = 'donut-arc'; - public static readonly DONUT_PADDING_PX: number = 60; + public static readonly DONUT_PADDING_PX: number = 10; public static readonly LEGEND_SIZE_MULTIPLE: number = 1.5; public constructor( @@ -126,7 +126,9 @@ export class DonutBuilderService extends D3VisualizationBuilderService< } protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions { - const diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); + let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); + + diameter -= DonutBuilderService.DONUT_PADDING_PX ; // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; diff --git a/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss b/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss index 348180753..253a27c10 100644 --- a/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss +++ b/projects/observability/src/shared/components/gauge-list/gauge-list.component.scss @@ -6,13 +6,13 @@ width: 100%; display: grid; margin-top: 16px; - grid-template-columns: minmax(80px, 1fr) max-content; + grid-template-columns: minmax(60px, 1fr) max-content; grid-auto-rows: 20px; column-gap: 16px; align-items: center; &.with-label { - grid-template-columns: minmax(60px, auto) minmax(80px, 1fr) max-content; + grid-template-columns: minmax(60px, auto) minmax(60px, 1fr) max-content; } .border-top { 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 ee0ddb285..86b10c6a8 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 @@ -220,15 +220,18 @@ export abstract class D3VisualizationBuilderService< // tslint:disable-next-line: no-null-keyword visualizationSelection.style('display', null); + const isLegendVisible = this.isLegendVisible(config); const isTopOrBottomLegend = this.isTopOrBottomLegend(config); const isSideLegend = config.legend === LegendPosition.Right; - const legendWidth = isSideLegend + let legendWidth = isLegendVisible ? 0 + : isSideLegend ? Math.min(legendRect.width, this.getMaxLegendWidth()) : isTopOrBottomLegend ? outerRect.width : 0; - const legendHeight = isTopOrBottomLegend + let legendHeight = isLegendVisible ? 0 + : isTopOrBottomLegend ? Math.min(legendRect.height, this.getMaxLegendHeight()) : isSideLegend ? outerRect.height @@ -237,8 +240,19 @@ export abstract class D3VisualizationBuilderService< const legendWidthOffset = isSideLegend ? legendWidth : 0; const legendHeightOffset = isTopOrBottomLegend ? legendHeight : 0; - const vizWidth = outerRect.width - legendWidthOffset; - const vizHeight = outerRect.height - legendHeightOffset; + let vizWidth = outerRect.width - legendWidthOffset; + let vizHeight = outerRect.height - legendHeightOffset; + + // Hide Legend if less space is available for the viz + if(vizWidth <= legendWidthOffset || legendWidth <= 60) { + vizWidth = outerRect.width + legendWidth = 0; + } + + if(vizHeight <= legendHeightOffset || legendHeight <= 12) { + vizHeight = outerRect.height + legendHeight = 0; + } return this.decorateDimensions({ visualizationWidth: vizWidth, @@ -248,6 +262,10 @@ export abstract class D3VisualizationBuilderService< }); } + private isLegendVisible(config: ChartConfig): boolean { + return config.legend === LegendPosition.None; + } + private isTopOrBottomLegend(config: ChartConfig): boolean { switch (config.legend) { case LegendPosition.Bottom: 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 3d10ff741..e78c3791a 100644 --- a/projects/observability/src/shared/components/utils/d3/d3-visualization.scss +++ b/projects/observability/src/shared/components/utils/d3/d3-visualization.scss @@ -1,4 +1,5 @@ .chart-container { + flex: 1 1 auto; position: absolute; // We want parent to ignore size to detect resizes display: flex; align-items: center; @@ -7,24 +8,24 @@ &.row { flex-direction: row; .chart-legend-container { - padding-left: 48px; - padding-right: 12px; + margin-left: 12px; + margin-right: 12px; } } &.column { flex-direction: column; .chart-legend-container { - padding-top: 24px; - padding-bottom: 12px; + margin-top: 24px; + margin-bottom: 12px; } } &.column-reverse { flex-direction: column-reverse; .chart-legend-container { - padding-bottom: 24px; - padding-top: 12px; + margin-bottom: 24px; + margin-top: 12px; } } From 9eb1fda9635fa6eb4bf40328e50f1a6c222145a2 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Tue, 29 Jun 2021 12:01:03 -0700 Subject: [PATCH 7/7] refactor: fixing lint errors --- .../components/donut/donut-builder.service.ts | 5 ++--- .../utils/d3/d3-visualization-builder.service.ts | 16 +++++++++------- 2 files changed, 11 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 00a979b37..922cd5eb6 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -38,8 +38,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService< private static readonly DONUT_VALUE_CLASS: string = 'donut-value'; private static readonly DONUT_ARC_CLASS: string = 'donut-arc'; - public static readonly DONUT_PADDING_PX: number = 10; - public static readonly LEGEND_SIZE_MULTIPLE: number = 1.5; + private static readonly DONUT_PADDING_PX: number = 10; public constructor( d3: D3UtilService, @@ -128,7 +127,7 @@ export class DonutBuilderService extends D3VisualizationBuilderService< protected decorateDimensions(calculatedDimensions: ChartDimensions): DonutDimensions { let diameter = Math.min(calculatedDimensions.visualizationWidth, calculatedDimensions.visualizationHeight); - diameter -= DonutBuilderService.DONUT_PADDING_PX ; + diameter -= DonutBuilderService.DONUT_PADDING_PX; // Reduce visualization area to diameter calculatedDimensions.visualizationWidth = diameter; 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 86b10c6a8..98b45b29c 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 @@ -223,14 +223,16 @@ export abstract class D3VisualizationBuilderService< const isLegendVisible = this.isLegendVisible(config); const isTopOrBottomLegend = this.isTopOrBottomLegend(config); const isSideLegend = config.legend === LegendPosition.Right; - let legendWidth = isLegendVisible ? 0 + let legendWidth = isLegendVisible + ? 0 : isSideLegend ? Math.min(legendRect.width, this.getMaxLegendWidth()) : isTopOrBottomLegend ? outerRect.width : 0; - let legendHeight = isLegendVisible ? 0 + let legendHeight = isLegendVisible + ? 0 : isTopOrBottomLegend ? Math.min(legendRect.height, this.getMaxLegendHeight()) : isSideLegend @@ -244,13 +246,13 @@ export abstract class D3VisualizationBuilderService< let vizHeight = outerRect.height - legendHeightOffset; // Hide Legend if less space is available for the viz - if(vizWidth <= legendWidthOffset || legendWidth <= 60) { - vizWidth = outerRect.width + if (vizWidth <= legendWidthOffset || legendWidth <= 60) { + vizWidth = outerRect.width; legendWidth = 0; } - if(vizHeight <= legendHeightOffset || legendHeight <= 12) { - vizHeight = outerRect.height + if (vizHeight <= legendHeightOffset || legendHeight <= 12) { + vizHeight = outerRect.height; legendHeight = 0; } @@ -264,7 +266,7 @@ export abstract class D3VisualizationBuilderService< private isLegendVisible(config: ChartConfig): boolean { return config.legend === LegendPosition.None; - } + } private isTopOrBottomLegend(config: ChartConfig): boolean { switch (config.legend) {