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 58f01ef8a8d8850c4f7c8bda01576e980f4e0a9d Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Mon, 26 Jul 2021 17:09:16 +0530 Subject: [PATCH 3/4] fix: header should not be visible if nothing is below this --- .../navigation/navigation-list.component.ts | 40 +++++++++++++++---- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index 3c0025d02..4e3b52461 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -1,8 +1,9 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationService } from '@hypertrace/common'; -import { Observable } from 'rxjs'; +import { FeatureState, FeatureStateResolver, NavigationService } from '@hypertrace/common'; +import { isEmpty } from 'lodash-es'; +import { combineLatest, Observable, of } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { IconSize } from '../icon/icon-size'; @@ -13,13 +14,15 @@ import { IconSize } from '../icon/icon-size'; template: `