From 76729fa866473e47e6e56040e3fd26f7dfc7e420 Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Thu, 11 Dec 2025 17:54:40 -0500 Subject: [PATCH] more tweaks --- .../panel-gauge/gauge_tests_new.json | 308 +++++++++++++----- .../RadialGauge/RadialSparkline.tsx | 31 +- .../src/components/RadialGauge/RadialText.tsx | 14 +- .../src/components/RadialGauge/effects.tsx | 1 + .../panel/radialbar/RadialBarPanel.tsx | 1 - 5 files changed, 233 insertions(+), 122 deletions(-) diff --git a/devenv/dev-dashboards/panel-gauge/gauge_tests_new.json b/devenv/dev-dashboards/panel-gauge/gauge_tests_new.json index f9ee5a8c4e3..967aae83c0e 100644 --- a/devenv/dev-dashboards/panel-gauge/gauge_tests_new.json +++ b/devenv/dev-dashboards/panel-gauge/gauge_tests_new.json @@ -18,7 +18,7 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, - "id": 525, + "id": 1943, "links": [], "panels": [ { @@ -75,9 +75,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": false, "rounded": true, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -92,7 +92,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -152,9 +152,9 @@ "effects": { "barGlow": false, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -169,7 +169,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -229,9 +229,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -246,7 +246,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -306,9 +306,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -323,7 +323,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -383,9 +383,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -400,7 +400,7 @@ "showThresholdMarkers": false, "sparkline": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -460,9 +460,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": false, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -477,7 +477,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -537,9 +537,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": false, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -554,7 +554,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -627,9 +627,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -644,7 +644,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -704,9 +704,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -721,7 +721,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -781,9 +781,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -798,7 +798,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -858,9 +858,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": false, "rounded": true, - "spotlight": true, - "gradient": false + "spotlight": true }, "orientation": "auto", "reduceOptions": { @@ -875,7 +875,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -952,9 +952,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": false, "rounded": false, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -969,7 +969,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1029,9 +1029,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": false, "rounded": false, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1046,7 +1046,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1106,9 +1106,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": true, "rounded": false, - "spotlight": false, - "gradient": true + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1123,7 +1123,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1183,9 +1183,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": false, "rounded": false, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1200,7 +1200,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1260,9 +1260,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": false, "rounded": false, - "spotlight": false, - "gradient": false + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1277,7 +1277,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1354,9 +1354,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": true, "rounded": false, - "spotlight": false, - "gradient": true + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1371,7 +1371,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1435,9 +1435,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": true, "rounded": false, - "spotlight": false, - "gradient": true + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1452,7 +1452,7 @@ "showThresholdMarkers": false, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1516,9 +1516,9 @@ "effects": { "barGlow": false, "centerGlow": false, + "gradient": true, "rounded": false, - "spotlight": false, - "gradient": true + "spotlight": false }, "orientation": "auto", "reduceOptions": { @@ -1533,7 +1533,7 @@ "showThresholdMarkers": true, "sparkline": false }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "alias": "1", @@ -1565,7 +1565,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -1606,9 +1605,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -1625,13 +1624,12 @@ "sparkline": false, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 98, "min": 5, "noise": 22, @@ -1649,7 +1647,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -1690,9 +1687,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -1709,13 +1706,12 @@ "sparkline": true, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 98, "min": 5, "noise": 22, @@ -1746,7 +1742,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -1788,9 +1783,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -1807,13 +1802,12 @@ "sparkline": false, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 8, "min": 1, "noise": 2, @@ -1831,7 +1825,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -1873,9 +1866,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -1892,13 +1885,12 @@ "sparkline": false, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 12, "min": 1, "noise": 2, @@ -1916,7 +1908,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -1957,9 +1948,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -1976,13 +1967,12 @@ "sparkline": false, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 100, "min": 10, "noise": 22, @@ -2000,7 +1990,6 @@ "datasource": { "type": "grafana-testdata-datasource" }, - "description": "", "fieldConfig": { "defaults": { "color": { @@ -2041,9 +2030,9 @@ "effects": { "barGlow": true, "centerGlow": true, + "gradient": true, "rounded": true, - "spotlight": true, - "gradient": true + "spotlight": true }, "glow": "both", "orientation": "auto", @@ -2060,13 +2049,12 @@ "sparkline": false, "spotlight": true }, - "pluginVersion": "13.0.0-pre", + "pluginVersion": "12.4.0-pre", "targets": [ { "datasource": { "type": "grafana-testdata-datasource" }, - "hide": false, "max": 100, "min": 10, "noise": 22, @@ -2079,6 +2067,147 @@ ], "title": "Backend", "type": "radialbar" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 66 + }, + "id": 35, + "panels": [], + "title": "Empty data", + "type": "row" + }, + { + "datasource": { + "type": "grafana-testdata-datasource" + }, + "fieldConfig": { + "defaults": { + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": 0 + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 67 + }, + "id": 36, + "options": { + "barWidthFactor": 0.5, + "effects": { + "barGlow": false, + "centerGlow": false, + "gradient": true, + "rounded": false, + "spotlight": false + }, + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "segmentCount": 1, + "segmentSpacing": 0.3, + "shape": "gauge", + "showThresholdLabels": false, + "showThresholdMarkers": true, + "sparkline": true + }, + "pluginVersion": "12.4.0-pre", + "targets": [ + { + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 0 + } + ], + "title": "Numeric, no series", + "type": "gauge" + }, + { + "datasource": { + "type": "grafana-testdata-datasource" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": 0 + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 67 + }, + "id": 37, + "options": { + "barWidthFactor": 0.5, + "effects": { + "barGlow": false, + "centerGlow": false, + "gradient": true, + "rounded": false, + "spotlight": false + }, + "orientation": "auto", + "reduceOptions": { + "calcs": ["lastNotNull"], + "fields": "", + "values": false + }, + "segmentCount": 1, + "segmentSpacing": 0.3, + "shape": "gauge", + "showThresholdLabels": false, + "showThresholdMarkers": true, + "sparkline": true + }, + "pluginVersion": "12.4.0-pre", + "targets": [ + { + "refId": "A", + "scenarioId": "logs" + } + ], + "title": "Non-numeric", + "type": "gauge" } ], "preload": false, @@ -2094,6 +2223,5 @@ "timepicker": {}, "timezone": "browser", "title": "Panel tests - Gauge (new)", - "uid": "panel-tests-gauge-new", - "version": 6 + "version": 9 } diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx index c9da81f6cbf..acb255a3f3e 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx @@ -1,5 +1,3 @@ -import { useMemo } from 'react'; - import { FieldDisplay, GrafanaTheme2, FieldConfig } from '@grafana/data'; import { GraphFieldConfig, GraphGradientMode, LineInterpolation } from '@grafana/schema'; @@ -19,24 +17,18 @@ interface RadialSparklineProps { export function RadialSparkline({ sparkline, dimensions, theme, color, shape, textMode }: RadialSparklineProps) { const { radius, barWidth } = dimensions; - const showNameAndValue = textMode === 'value_and_name'; - const height = showNameAndValue ? radius / 4 : radius / 3; - const widthFactor = shape === 'gauge' ? 1.6 : 1.4; - const width = radius * widthFactor - barWidth; - const topPos = useMemo(() => { - if (!sparkline) { - return ''; - } - if (shape === 'gauge') { - return `${dimensions.gaugeBottomY - height}px`; - } - return `calc(50% + ${radius / (showNameAndValue ? 3.3 : 4)}px)`; - }, [sparkline, shape, radius, dimensions.gaugeBottomY, height, showNameAndValue]); - if (!sparkline) { return null; } + const showNameAndValue = textMode === 'value_and_name'; + const height = radius / (showNameAndValue ? 4 : 3); + const width = radius * (shape === 'gauge' ? 1.6 : 1.4) - barWidth; + const topPos = + shape === 'gauge' + ? `${dimensions.gaugeBottomY - height}px` + : `calc(50% + ${radius / (showNameAndValue ? 3.3 : 4)}px)`; + const config: FieldConfig = { color: { mode: 'fixed', @@ -50,12 +42,7 @@ export function RadialSparkline({ sparkline, dimensions, theme, color, shape, te }; return ( -
+
); diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx index 64e8ad28a0d..51a1c64c842 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialText.tsx @@ -98,21 +98,17 @@ export function RadialText({ const suffixShift = (valueFontSize - unitFontSize * 1.2) / 2; // adjust the text up on gauges and when sparklines are present - let dy = 0; + let yOffset = 0; if (shape === 'gauge') { - if (showName) { - dy -= nameFontSize * 0.2; - } - if (showValue) { - dy -= valueFontSize * 0.3; - } + // 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) { - dy -= 8; + yOffset -= 8; } return ( - + {showValue && (