From a8ff242a3fec3057821e80c25224e5c1d2aeb483 Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Tue, 16 Dec 2025 14:06:43 -0500 Subject: [PATCH] fix a couple of bugs --- .../RadialGauge/RadialSparkline.tsx | 22 +++++++--- .../src/components/RadialGauge/RadialText.tsx | 44 +++++++++++-------- .../src/components/RadialGauge/utils.test.ts | 6 +-- .../src/components/RadialGauge/utils.ts | 2 +- 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx index 67969fd3208..2d6c45a14bf 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx @@ -8,12 +8,12 @@ import { Sparkline } from '../Sparkline/Sparkline'; import { RadialShape, RadialTextMode, RadialGaugeDimensions } from './types'; interface RadialSparklineProps { - sparkline: FieldDisplay['sparkline']; - dimensions: RadialGaugeDimensions; - theme: GrafanaTheme2; color?: string; - shape?: RadialShape; + dimensions: RadialGaugeDimensions; + shape: RadialShape; + sparkline: FieldDisplay['sparkline']; textMode: Exclude; + theme: GrafanaTheme2; } const SPARKLINE_HEIGHT_DIVISOR = 4; @@ -24,13 +24,23 @@ const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE = 4; const SPARKLINE_TOP_OFFSET_DIVISOR_CIRCLE_NAME_AND_VALUE = 3.3; const SPARKLINE_SPACING = 8; +export function getSparklineDimensions( + radius: number, + barWidth: number, + showNameAndValue: boolean, + shape: RadialShape +): { width: number; height: number } { + const height = radius / (showNameAndValue ? SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE : SPARKLINE_HEIGHT_DIVISOR); + const width = radius * (shape === 'gauge' ? SPARKLINE_WIDTH_FACTOR_ARC : SPARKLINE_WIDTH_FACTOR_CIRCLE) - barWidth; + return { width, height }; +} + export const RadialSparkline = memo( ({ sparkline, dimensions, theme, color, shape, textMode }: RadialSparklineProps) => { const { radius, barWidth } = dimensions; const showNameAndValue = textMode === 'value_and_name'; - const height = radius / (showNameAndValue ? SPARKLINE_HEIGHT_DIVISOR_NAME_AND_VALUE : SPARKLINE_HEIGHT_DIVISOR); - const width = radius * (shape === 'gauge' ? SPARKLINE_WIDTH_FACTOR_ARC : SPARKLINE_WIDTH_FACTOR_CIRCLE) - barWidth; + const { width, height } = getSparklineDimensions(radius, barWidth, showNameAndValue, shape); const topPos = shape === 'gauge' ? dimensions.gaugeBottomY - height - SPARKLINE_SPACING diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx index c1e9b0a616e..69ab16e450e 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx @@ -34,7 +34,9 @@ const MAX_TEXT_WIDTH_DIVISOR = 7; const MAX_NAME_HEIGHT_DIVISOR = 4; const VALUE_SPACE_PERCENTAGE = 0.7; const SPARKLINE_SPACING = 8; -const MIN_UNIT_FONT_SIZE = 5; +const MIN_VALUE_FONT_SIZE = 1; +const MIN_NAME_FONT_SIZE = 10; +const MIN_UNIT_FONT_SIZE = 6; export const RadialText = memo( ({ @@ -71,27 +73,31 @@ export const RadialText = memo( maxNameHeight = NAME_TO_HEIGHT_FACTOR * Math.pow(radius, LARGE_RADIUS_SCALING_DECAY); } - const valueFontSize = + const valueFontSize = Math.max( valueManualFontSize ?? - calculateFontSize( - valueToAlignTo, - maxTextWidth, - maxValueHeight, - LINE_HEIGHT_FACTOR, - undefined, - theme.typography.body.fontWeight - ); + calculateFontSize( + valueToAlignTo, + maxTextWidth, + maxValueHeight, + LINE_HEIGHT_FACTOR, + undefined, + theme.typography.body.fontWeight + ), + MIN_VALUE_FONT_SIZE + ); - const nameFontSize = + const nameFontSize = Math.max( nameManualFontSize ?? - calculateFontSize( - nameToAlignTo, - maxTextWidth, - maxNameHeight, - LINE_HEIGHT_FACTOR, - undefined, - theme.typography.body.fontWeight - ); + calculateFontSize( + nameToAlignTo, + maxTextWidth, + maxNameHeight, + LINE_HEIGHT_FACTOR, + undefined, + theme.typography.body.fontWeight + ), + MIN_NAME_FONT_SIZE + ); const unitFontSize = Math.max(valueFontSize * VALUE_SPACE_PERCENTAGE, MIN_UNIT_FONT_SIZE); const valueHeight = valueFontSize * LINE_HEIGHT_FACTOR; diff --git a/packages/grafana-ui/src/components/RadialGauge/utils.test.ts b/packages/grafana-ui/src/components/RadialGauge/utils.test.ts index c153faae173..b9b2e4ad8f3 100644 --- a/packages/grafana-ui/src/components/RadialGauge/utils.test.ts +++ b/packages/grafana-ui/src/components/RadialGauge/utils.test.ts @@ -325,11 +325,9 @@ describe('RadialGauge utils', () => { expect(drawRadialArcPath(0, 380, defaultDims)).toEqual(drawRadialArcPath(0, 380, defaultDims)); }); - it('should throw an error if inner radius collapses to zero or below', () => { + it('should return empty string if inner radius collapses to zero or below', () => { const smallRadiusDims = { ...defaultDims, radius: 5, barWidth: 20 }; - expect(() => drawRadialArcPath(0, 180, smallRadiusDims)).toThrow( - 'Inner radius collapsed to zero or below, cannot draw radial arc path' - ); + expect(drawRadialArcPath(0, 180, smallRadiusDims)).toBe(''); }); }); }); diff --git a/packages/grafana-ui/src/components/RadialGauge/utils.ts b/packages/grafana-ui/src/components/RadialGauge/utils.ts index e682fbbd37d..72030a09ad6 100644 --- a/packages/grafana-ui/src/components/RadialGauge/utils.ts +++ b/packages/grafana-ui/src/components/RadialGauge/utils.ts @@ -195,7 +195,7 @@ export function drawRadialArcPath( const outerR = radius + barWidth / 2; const innerR = Math.max(0, radius - barWidth / 2); if (innerR <= 0) { - throw new Error('Inner radius collapsed to zero or below, cannot draw radial arc path'); + return ''; // cannot draw arc with 0 inner radius } // get points for both an inner and outer arc. we draw