+
);
diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
index d01a2d99570..51a1c64c842 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
@@ -1,6 +1,12 @@
import { css } from '@emotion/css';
-import { DisplayValue, DisplayValueAlignmentFactors, formattedValueToString, GrafanaTheme2 } from '@grafana/data';
+import {
+ DisplayValue,
+ DisplayValueAlignmentFactors,
+ FieldSparkline,
+ formattedValueToString,
+ GrafanaTheme2,
+} from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext';
import { calculateFontSize } from '../../utils/measureText';
@@ -8,21 +14,13 @@ import { calculateFontSize } from '../../utils/measureText';
import { RadialShape, RadialTextMode } from './RadialGauge';
import { GaugeDimensions } from './utils';
-// function toCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {
-// let radian = ((angleInDegrees - 90) * Math.PI) / 180.0;
-// return {
-// x: centerX + radius * Math.cos(radian),
-// y: centerY + radius * Math.sin(radian),
-// };
-// }
-
interface RadialTextProps {
displayValue: DisplayValue;
theme: GrafanaTheme2;
dimensions: GaugeDimensions;
- textMode: RadialTextMode;
- vizCount: number;
+ textMode: Exclude
;
shape: RadialShape;
+ sparkline?: FieldSparkline;
alignmentFactors?: DisplayValueAlignmentFactors;
valueManualFontSize?: number;
nameManualFontSize?: number;
@@ -33,8 +31,8 @@ export function RadialText({
theme,
dimensions,
textMode,
- vizCount,
shape,
+ sparkline,
alignmentFactors,
valueManualFontSize,
nameManualFontSize,
@@ -46,10 +44,6 @@ export function RadialText({
return null;
}
- if (textMode === 'auto') {
- textMode = vizCount === 1 ? 'value' : 'value_and_name';
- }
-
const nameToAlignTo = (alignmentFactors ? alignmentFactors.title : displayValue.title) ?? '';
const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : displayValue);
@@ -59,7 +53,7 @@ export function RadialText({
// Not sure where this comes from but svg text is not using body line-height
const lineHeight = 1.21;
- const valueWidthToRadiusFactor = 0.85;
+ const valueWidthToRadiusFactor = 0.82;
const nameToHeightFactor = 0.45;
const largeRadiusScalingDecay = 0.86;
@@ -98,18 +92,23 @@ export function RadialText({
const valueHeight = valueFontSize * lineHeight;
const nameHeight = nameFontSize * lineHeight;
- const valueY = showName ? centerY - nameHeight / 2 : centerY;
- const valueNameSpacing = valueHeight / 3.5;
- const nameY = showValue ? valueY + valueHeight / 2 + valueNameSpacing : centerY;
+ const valueY = showName ? centerY - nameHeight * 0.3 : centerY;
+ const nameY = showValue ? valueY + valueHeight * 0.7 : centerY;
const nameColor = showValue ? theme.colors.text.secondary : theme.colors.text.primary;
const suffixShift = (valueFontSize - unitFontSize * 1.2) / 2;
- // For gauge shape we shift text up a bit
- const valueDy = shape === 'gauge' ? -valueFontSize * 0.3 : 0;
- const nameDy = shape === 'gauge' ? -nameFontSize * 0.7 : 0;
+ // adjust the text up on gauges and when sparklines are present
+ let yOffset = 0;
+ if (shape === 'gauge') {
+ // we render from the center of the gauge, so move up by half of half of the total height
+ yOffset -= (valueHeight + nameHeight) / 4;
+ }
+ if (sparkline) {
+ yOffset -= 8;
+ }
return (
-
+
{showValue && (
{displayValue.prefix ?? ''}
{displayValue.text}
@@ -133,7 +131,6 @@ export function RadialText({
fontSize={nameFontSize}
x={centerX}
y={nameY}
- dy={nameDy}
textAnchor="middle"
dominantBaseline="middle"
fill={nameColor}
diff --git a/packages/grafana-ui/src/components/RadialGauge/effects.tsx b/packages/grafana-ui/src/components/RadialGauge/effects.tsx
index 551d9d91186..354a68a25ba 100644
--- a/packages/grafana-ui/src/components/RadialGauge/effects.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/effects.tsx
@@ -4,11 +4,12 @@ import { GaugeDimensions } from './utils';
export interface GlowGradientProps {
id: string;
- radius: number;
+ barWidth: number;
}
-export function GlowGradient({ id, radius }: GlowGradientProps) {
- const glowSize = 0.02 * radius;
+export function GlowGradient({ id, barWidth }: GlowGradientProps) {
+ // 0.75 is the minimum glow size, and it scales with bar width
+ const glowSize = 0.75 + barWidth * 0.08;
return (
@@ -82,7 +83,7 @@ export function MiddleCircleGlow({ dimensions, gaugeId, color }: CenterGlowProps
<>
-
+
diff --git a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx
index fa064037157..86235a3bf68 100644
--- a/public/app/plugins/panel/radialbar/RadialBarPanel.tsx
+++ b/public/app/plugins/panel/radialbar/RadialBarPanel.tsx
@@ -7,6 +7,7 @@ import {
getFieldDisplayValues,
PanelProps,
} from '@grafana/data';
+import { PanelDataErrorView } from '@grafana/runtime';
import { DataLinksContextMenu, Stack, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
import { DataLinksContextMenuApi, RadialGauge } from '@grafana/ui/internal';
import { config } from 'app/core/config';
@@ -14,6 +15,7 @@ import { config } from 'app/core/config';
import { Options } from './panelcfg.gen';
export function RadialBarPanel({
+ id,
height,
width,
data,
@@ -88,6 +90,10 @@ export function RadialBarPanel({
const minVizHeight = 60;
const minVizWidth = 60;
+ if (getValues()[0]?.display?.text === 'No data') {
+ return ;
+ }
+
return (