From 8bf3da538bb441a7cdd3e758d404a67472e24478 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 13 Jul 2021 18:10:47 +0530 Subject: [PATCH 1/4] fix: donut chart fixes --- .../components/donut/donut-builder.service.ts | 21 +++++++++++++++---- .../components/donut/donut.component.scss | 4 +--- 2 files changed, 18 insertions(+), 7 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 922cd5eb6..f0d4cd26d 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -39,6 +39,9 @@ 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; public constructor( d3: D3UtilService, @@ -69,11 +72,19 @@ export class DonutBuilderService extends D3VisualizationBuilderService< visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`) + .style( + 'font-size', + Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE) + ); visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`) + .style( + 'font-size', + Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE) + ); } protected drawVisualization( @@ -127,12 +138,14 @@ 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, diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index ea3aa6b3f..01b3be92f 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -9,12 +9,10 @@ .donut-svg { .donut-value-title { - font-size: 15px; dominant-baseline: hanging; } .donut-value { - font-size: 64px; dominant-baseline: hanging; } } @@ -22,7 +20,7 @@ .donut-arc { stroke: white; - stroke-width: 2px; + stroke-width: 0.5px; } .donut-value-title { From 5599c6aa5eb0e254313d4001b3333bbd8feca35f Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 13 Jul 2021 18:11:33 +0530 Subject: [PATCH 2/4] Revert "fix: donut chart fixes" This reverts commit 8bf3da538bb441a7cdd3e758d404a67472e24478. --- .../components/donut/donut-builder.service.ts | 21 ++++--------------- .../components/donut/donut.component.scss | 4 +++- 2 files changed, 7 insertions(+), 18 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 f0d4cd26d..922cd5eb6 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -39,9 +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; public constructor( d3: D3UtilService, @@ -72,19 +69,11 @@ export class DonutBuilderService extends D3VisualizationBuilderService< visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`) - .style( - 'font-size', - Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE) - ); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`); visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`) - .style( - 'font-size', - Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE) - ); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`); } protected drawVisualization( @@ -138,14 +127,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, diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index 01b3be92f..ea3aa6b3f 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -9,10 +9,12 @@ .donut-svg { .donut-value-title { + font-size: 15px; dominant-baseline: hanging; } .donut-value { + font-size: 64px; dominant-baseline: hanging; } } @@ -20,7 +22,7 @@ .donut-arc { stroke: white; - stroke-width: 0.5px; + stroke-width: 2px; } .donut-value-title { From a82fce5be83d09c18b3e0d81a30efdda5c3f6ebe Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 13 Jul 2021 18:13:54 +0530 Subject: [PATCH 3/4] fix: donut chart fixes --- .../components/donut/donut-builder.service.ts | 21 +++++++++++++++---- .../components/donut/donut.component.scss | 2 -- 2 files changed, 17 insertions(+), 6 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 922cd5eb6..f0d4cd26d 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/projects/observability/src/shared/components/donut/donut-builder.service.ts @@ -39,6 +39,9 @@ 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; public constructor( d3: D3UtilService, @@ -69,11 +72,19 @@ export class DonutBuilderService extends D3VisualizationBuilderService< visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_TITLE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 2})`) + .style( + 'font-size', + Math.min(Math.floor(dimensions.donutInnerRadius / 8), DonutBuilderService.MAX_FONT_SIZE_FOR_TITLE) + ); visualizationContainer .select(selector(DonutBuilderService.DONUT_VALUE_CLASS)) - .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`); + .attr('transform', `translate(0,-${dimensions.donutInnerRadius / 4})`) + .style( + 'font-size', + Math.min(Math.floor(dimensions.donutInnerRadius / 2), DonutBuilderService.MAX_FONT_SIZE_FOR_VALUE) + ); } protected drawVisualization( @@ -127,12 +138,14 @@ 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, diff --git a/projects/observability/src/shared/components/donut/donut.component.scss b/projects/observability/src/shared/components/donut/donut.component.scss index ea3aa6b3f..559538db8 100644 --- a/projects/observability/src/shared/components/donut/donut.component.scss +++ b/projects/observability/src/shared/components/donut/donut.component.scss @@ -9,12 +9,10 @@ .donut-svg { .donut-value-title { - font-size: 15px; dominant-baseline: hanging; } .donut-value { - font-size: 64px; dominant-baseline: hanging; } } From ac5f177a7456e3aa26159bf6804b4e3c0311c304 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Thu, 29 Jul 2021 16:15:04 +0530 Subject: [PATCH 4/4] fix: donut and legend responsiveness issue --- .../src/shared/components/donut/donut-builder.service.ts | 7 ++----- .../src/shared/components/legend/legend.component.scss | 5 +++-- .../utils/d3/d3-visualization-builder.service.ts | 6 +++++- 3 files changed, 10 insertions(+), 8 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 f0d4cd26d..1e9829d13 100644 --- a/projects/observability/src/shared/components/donut/donut-builder.service.ts +++ b/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, diff --git a/projects/observability/src/shared/components/legend/legend.component.scss b/projects/observability/src/shared/components/legend/legend.component.scss index 063ef5317..e381d5fe1 100644 --- a/projects/observability/src/shared/components/legend/legend.component.scss +++ b/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; } } 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 98b45b29c..eaebf370c 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 @@ -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; }