diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
index 4a0eabb7866..c648022d864 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialArcPath.tsx
@@ -1,4 +1,4 @@
-import { useId, memo, HTMLAttributes, ReactElement } from 'react';
+import { useId, memo, HTMLAttributes, ReactNode } from 'react';
import { FieldDisplay } from '@grafana/data';
@@ -77,38 +77,25 @@ export const RadialArcPath = memo(
endpointMarker === 'point' ? Math.min((barWidth / 2) * DOT_RADIUS_FACTOR, MAX_DOT_RADIUS) : barWidth / 2;
let barEndcapColors: [string | undefined, string | undefined] | undefined;
- const endpointMarks: ReactElement[] = [];
+
+ let endpointMarks: ReactNode = null;
if (endpointMarker && gradientStops.length > 0) {
switch (endpointMarker) {
case 'point':
const [pointColorStart, pointColorEnd] = getEndpointMarkerColors(gradientStops, fieldDisplay.display.percent);
- if (arcLengthDeg > DOT_START_MIN_ANGLE_DEG) {
- endpointMarks.push(
-
- );
- }
- endpointMarks.push(
-
+ endpointMarks = (
+ <>
+ {arcLengthDeg > DOT_START_MIN_ANGLE_DEG && (
+
+ )}
+
+ >
);
break;
case 'glow':
const xStartMark = centerX + radius * Math.cos(endRadians - 0.2);
const yStartMark = centerY + radius * Math.sin(endRadians - 0.2);
- endpointMarks.push(
+ endpointMarks = (
= {
seriesCount: { control: { type: 'range', min: 1, max: 20 } },
segmentCount: { control: { type: 'range', min: 0, max: 100 } },
segmentSpacing: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+ endpointMarker: { control: { type: 'select' }, options: ['none', 'point', 'glow'] },
colorScheme: {
control: { type: 'select' },
options: [
@@ -344,6 +345,7 @@ interface ExampleProps {
roundedBars?: boolean;
thresholdsBar?: boolean;
colorScheme?: FieldColorModeId;
+ endpointMarker?: RadialGaugeProps['endpointMarker'];
decimals?: number;
showScaleLabels?: boolean;
}
@@ -370,6 +372,7 @@ export function RadialGaugeExample({
roundedBars = false,
thresholdsBar = false,
colorScheme = FieldColorModeId.Thresholds,
+ endpointMarker = 'glow',
decimals = 0,
showScaleLabels,
}: ExampleProps) {
@@ -456,6 +459,7 @@ export function RadialGaugeExample({
roundedBars={roundedBars}
thresholdsBar={thresholdsBar}
showScaleLabels={showScaleLabels}
+ endpointMarker={endpointMarker}
/>
);
}
diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
index e2fed36ec3f..783e3b764da 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.test.tsx
@@ -1,13 +1,28 @@
import { render, screen } from '@testing-library/react';
+import { ComponentProps } from 'react';
import { RadialGaugeExample } from './RadialGauge.story';
describe('RadialGauge', () => {
- it('should render', () => {
- render();
-
- expect(screen.getByRole('img')).toBeInTheDocument();
- });
+ it.each([
+ { description: 'default', props: {} },
+ { description: 'gauge shape', props: { shape: 'gauge' } },
+ { description: 'with gradient', props: { gradient: true } },
+ { description: 'with glow bar', props: { glowBar: true } },
+ { description: 'with glow center', props: { glowCenter: true } },
+ { description: 'with segments', props: { segmentCount: 5 } },
+ { description: 'with rounded bars', props: { roundedBars: true } },
+ { description: 'with endpoint marker glow', props: { roundedBars: true, endpointMarker: 'glow' } },
+ { description: 'with endpoint marker point', props: { roundedBars: true, endpointMarker: 'point' } },
+ { description: 'with thresholds bar', props: { thresholdsBar: true } },
+ { description: 'with sparkline', props: { sparkline: true } },
+ ] satisfies Array<{ description: string; props?: ComponentProps }>)(
+ 'should render $description without throwing',
+ ({ props }) => {
+ render();
+ expect(screen.getByRole('img')).toBeInTheDocument();
+ }
+ );
it('should render threshold labels', () => {
render();
diff --git a/packages/grafana-ui/src/components/RadialGauge/utils.ts b/packages/grafana-ui/src/components/RadialGauge/utils.ts
index 72030a09ad6..e089f9b3267 100644
--- a/packages/grafana-ui/src/components/RadialGauge/utils.ts
+++ b/packages/grafana-ui/src/components/RadialGauge/utils.ts
@@ -115,6 +115,7 @@ export function calculateDimensions(
maxRadiusW -= labelsSize;
maxRadiusH -= labelsSize;
+ // FIXME: needs coverage
// For gauges the max label needs a bit more vertical space so that it does not get clipped
if (maxRadiusIsLimitedByHeight && endAngle < 180) {
const amount = outerRadius * 0.07;