public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more tweaks

Browse Source
This commit is contained in:
Paul Marbach
2025-12-11 17:54:40 -05:00
parent 1e0456da13
commit 76729fa866
5 changed files with 233 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devenv/dev-dashboards/panel-gauge/gauge_tests_new.json
+218 -90
View File
@@ -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
}
packages/grafana-ui/src/components/RadialGauge/RadialSparkline.tsx
+9 -22
View File
@@ -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<GraphFieldConfig> = {
color: {
mode: 'fixed',
@@ -50,12 +42,7 @@ export function RadialSparkline({ sparkline, dimensions, theme, color, shape, te
};
return (
<div
style={{
position: 'absolute',
top: topPos,
}}
>
<div style={{ position: 'absolute', top: topPos }}>
<Sparkline height={height} width={width} sparkline={sparkline} theme={theme} config={config} />
</div>
);
packages/grafana-ui/src/components/RadialGauge/RadialText.tsx
+5 -9
View File
@@ -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 (
<g transform={`translate(0, ${dy})`}>
<g transform={`translate(0, ${yOffset})`}>
{showValue && (
<text
x={centerX}
packages/grafana-ui/src/components/RadialGauge/effects.tsx
+1
View File
@@ -8,6 +8,7 @@ export interface GlowGradientProps {
}
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 (
public/app/plugins/panel/radialbar/RadialBarPanel.tsx
-1
View File
@@ -3,7 +3,6 @@ import type { JSX } from 'react';
import {
DisplayValueAlignmentFactors,
FieldDisplay,
FieldType,
getDisplayValueAlignmentFactors,
getFieldDisplayValues,
PanelProps,