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 92aa26fa8389baa36b66b6849bf88240c4eedcba Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 20 Jul 2021 16:44:16 +0530 Subject: [PATCH 3/3] fix: removing blue hover color and ink bar from tabs --- .../src/tabs/content/tab-group.component.scss | 15 ++++++++++++--- .../src/tabs/content/tab-group.component.ts | 2 +- .../navigable/navigable-tab-group.component.scss | 13 ++++++++----- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/projects/components/src/tabs/content/tab-group.component.scss b/projects/components/src/tabs/content/tab-group.component.scss index f44e838d2..46e086d83 100644 --- a/projects/components/src/tabs/content/tab-group.component.scss +++ b/projects/components/src/tabs/content/tab-group.component.scss @@ -41,14 +41,14 @@ background: $gray-3 radial-gradient(circle, transparent 1%, $gray-3 1%) center/12000%; &.active { - background-color: $blue-5; + background-color: $gray-9; } } } &:active { .ink-bar { - background-color: $blue-5; + background-color: $gray-9; background-size: 100%; transition: background 0s; } @@ -77,6 +77,15 @@ display: flex; flex-direction: row; align-items: center; + color: $gray-5; + + &:hover { + color: $gray-9; + } + + &.active { + color: $gray-9; + } .tab-label-tag { margin-left: 4px; @@ -96,6 +105,6 @@ } &.active { - background-color: $blue-5; + background-color: $gray-9; } } diff --git a/projects/components/src/tabs/content/tab-group.component.ts b/projects/components/src/tabs/content/tab-group.component.ts index 31b50f99b..a95910983 100644 --- a/projects/components/src/tabs/content/tab-group.component.ts +++ b/projects/components/src/tabs/content/tab-group.component.ts @@ -27,7 +27,7 @@ import { TabComponent } from './tab/tab.component'; > -
+
{{ tab.label }}