diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx index 5c5faa64db7..f2387e0d753 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.story.tsx @@ -50,6 +50,7 @@ const meta: Meta = { thresholdsBar: false, colorScheme: FieldColorModeId.Thresholds, decimals: 0, + neutral: undefined, }, argTypes: { barWidthFactor: { control: { type: 'range', min: 0.1, max: 1, step: 0.01 } }, @@ -75,6 +76,7 @@ const meta: Meta = { ], }, decimals: { control: { type: 'range', min: 0, max: 7 } }, + neutral: { control: { type: 'number' } }, }, }; @@ -270,6 +272,23 @@ export const Examples: StoryFn = (args) => { barWidthFactor={0.7} /> +
+ Neutral (range -50 to 50, neutral = 0) +
+ + + ); }; @@ -330,6 +349,7 @@ interface ExampleProps { endpointMarker?: RadialGaugeProps['endpointMarker']; decimals?: number; showScaleLabels?: boolean; + neutral?: number; } export function RadialGaugeExample({ @@ -357,6 +377,7 @@ export function RadialGaugeExample({ endpointMarker = 'glow', decimals = 0, showScaleLabels, + neutral, }: ExampleProps) { const theme = useTheme2(); @@ -442,6 +463,7 @@ export function RadialGaugeExample({ thresholdsBar={thresholdsBar} showScaleLabels={showScaleLabels} endpointMarker={endpointMarker} + neutral={neutral} /> ); } diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx index 783e3b764da..8d7cf310c6e 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx @@ -16,6 +16,7 @@ describe('RadialGauge', () => { { description: 'with endpoint marker point', props: { roundedBars: true, endpointMarker: 'point' } }, { description: 'with thresholds bar', props: { thresholdsBar: true } }, { description: 'with sparkline', props: { sparkline: true } }, + { description: 'with neutral value', props: { neutral: 50 } }, ] satisfies Array<{ description: string; props?: ComponentProps }>)( 'should render $description without throwing', ({ props }) => { diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx index b6518048c27..499b4dd6fee 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx @@ -17,7 +17,7 @@ import { ThresholdsBar } from './ThresholdsBar'; import { buildGradientColors } from './colors'; import { GlowGradient, MiddleCircleGlow, SpotlightGradient } from './effects'; import { RadialShape, RadialTextMode } from './types'; -import { calculateDimensions, getFieldConfigMinMax, getValueAngleForValue } from './utils'; +import { calculateDimensions, getValueAngleForValue } from './utils'; export interface RadialGaugeProps { values: FieldDisplay[];