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/3] 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/3] 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 eb66bdd54de038dd25231580645188b377d6f421 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Thu, 15 Jul 2021 16:08:03 +0530 Subject: [PATCH 3/3] fix: change color --- projects/assets-library/assets/styles/_color-palette.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/assets-library/assets/styles/_color-palette.scss b/projects/assets-library/assets/styles/_color-palette.scss index 18e1cc5a5..1905c6594 100644 --- a/projects/assets-library/assets/styles/_color-palette.scss +++ b/projects/assets-library/assets/styles/_color-palette.scss @@ -100,8 +100,8 @@ $color-health-unknown: $gray-7; // Risk $color-risk-critical: $purple-6; $color-risk-high: $red-5; -$color-risk-medium: $brown-1; -$color-risk-low: $gray-6; +$color-risk-medium: $orange-4; +$color-risk-low: $yellow-4; // Status $color-status-success: $green-2;