NewGauge: Fix segmented gauge with min value != 0 (#112697)
* NewGauge: Fix segmented gauge with min value != 0 * update gdev dashboard to exercise case * update gdev dashboard with panel to exercise * update --------- Co-authored-by: Paul Marbach <paul.marbach@grafana.com>
This commit is contained in:
Torkel Ödegaard
co-authored by
Paul Marbach
Paul Marbach
parent
5a798afb3f
commit
27ac08dd51
+99
-39
@@ -37,8 +37,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -105,8 +104,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -174,8 +172,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "very small\n",
|
||||
"fieldConfig": {
|
||||
@@ -241,8 +238,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -311,8 +307,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -370,8 +365,7 @@
|
||||
"targets": [
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"refId": "A",
|
||||
"scenarioId": "no_data_points"
|
||||
@@ -382,8 +376,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -451,8 +444,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -523,8 +515,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -598,8 +589,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -678,8 +668,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -744,8 +733,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "B",
|
||||
@@ -754,8 +742,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "C",
|
||||
@@ -764,8 +751,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "D",
|
||||
@@ -791,8 +777,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -820,7 +805,7 @@
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 15,
|
||||
"w": 8,
|
||||
"x": 0,
|
||||
"y": 26
|
||||
},
|
||||
@@ -853,8 +838,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -893,8 +877,8 @@
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 9,
|
||||
"x": 15,
|
||||
"w": 8,
|
||||
"x": 8,
|
||||
"y": 26
|
||||
},
|
||||
"id": 2,
|
||||
@@ -924,6 +908,84 @@
|
||||
"title": "Many thresholds with labels",
|
||||
"type": "gauge"
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"fieldConfig": {
|
||||
"defaults": {
|
||||
"color": {
|
||||
"mode": "thresholds"
|
||||
},
|
||||
"mappings": [],
|
||||
"max": 90,
|
||||
"min": 20,
|
||||
"thresholds": {
|
||||
"mode": "absolute",
|
||||
"steps": [
|
||||
{
|
||||
"color": "green"
|
||||
},
|
||||
{
|
||||
"color": "yellow",
|
||||
"value": 30
|
||||
},
|
||||
{
|
||||
"color": "orange",
|
||||
"value": 50
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"value": 70
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"overrides": []
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 8,
|
||||
"x": 16,
|
||||
"y": 26
|
||||
},
|
||||
"id": 19,
|
||||
"options": {
|
||||
"barWidthFactor": 0.5,
|
||||
"effects": {
|
||||
"barGlow": false,
|
||||
"centerGlow": false,
|
||||
"rounded": false,
|
||||
"spotlight": false
|
||||
},
|
||||
"gradient": "none",
|
||||
"orientation": "auto",
|
||||
"reduceOptions": {
|
||||
"calcs": [
|
||||
"lastNotNull"
|
||||
],
|
||||
"fields": "",
|
||||
"values": false
|
||||
},
|
||||
"segmentCount": 70,
|
||||
"segmentSpacing": 0.3,
|
||||
"shape": "gauge",
|
||||
"showThresholdLabels": false,
|
||||
"showThresholdMarkers": true,
|
||||
"sparkline": false
|
||||
},
|
||||
"pluginVersion": "12.3.0-pre",
|
||||
"targets": [
|
||||
{
|
||||
"max": 90,
|
||||
"min": 20,
|
||||
"refId": "A",
|
||||
"scenarioId": "random_walk"
|
||||
}
|
||||
],
|
||||
"title": "Segmented w/ thresholds (min != 0, max != 100)",
|
||||
"type": "gauge"
|
||||
},
|
||||
{
|
||||
"collapsed": false,
|
||||
"gridPos": {
|
||||
@@ -939,8 +1001,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -1012,8 +1073,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
|
||||
@@ -37,8 +37,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -103,8 +102,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -170,8 +168,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "very small\n",
|
||||
"fieldConfig": {
|
||||
@@ -236,8 +233,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -304,8 +300,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -361,8 +356,7 @@
|
||||
"targets": [
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"refId": "A",
|
||||
"scenarioId": "no_data_points"
|
||||
@@ -373,8 +367,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -440,8 +433,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -510,8 +502,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -583,8 +574,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -661,8 +651,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "",
|
||||
"fieldConfig": {
|
||||
@@ -725,8 +714,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "B",
|
||||
@@ -735,8 +723,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "C",
|
||||
@@ -745,8 +732,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"hide": false,
|
||||
"refId": "D",
|
||||
@@ -772,8 +758,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -801,7 +786,7 @@
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 15,
|
||||
"w": 8,
|
||||
"x": 0,
|
||||
"y": 26
|
||||
},
|
||||
@@ -832,8 +817,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -872,8 +856,8 @@
|
||||
},
|
||||
"gridPos": {
|
||||
"h": 9,
|
||||
"w": 9,
|
||||
"x": 15,
|
||||
"w": 8,
|
||||
"x": 8,
|
||||
"y": 26
|
||||
},
|
||||
"id": 2,
|
||||
@@ -901,6 +885,83 @@
|
||||
"title": "Many thresholds with labels",
|
||||
"type": "gauge"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"type": "gauge",
|
||||
"title": "Segmented w/ thresholds (min != 0, max != 100)",
|
||||
"gridPos": {
|
||||
"x": 16,
|
||||
"y": 26,
|
||||
"h": 9,
|
||||
"w": 8
|
||||
},
|
||||
"fieldConfig": {
|
||||
"defaults": {
|
||||
"mappings": [],
|
||||
"thresholds": {
|
||||
"mode": "absolute",
|
||||
"steps": [
|
||||
{
|
||||
"value": null,
|
||||
"color": "green"
|
||||
},
|
||||
{
|
||||
"value": 30,
|
||||
"color": "yellow"
|
||||
},
|
||||
{
|
||||
"value": 50,
|
||||
"color": "orange"
|
||||
},
|
||||
{
|
||||
"value": 70,
|
||||
"color": "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
"color": {
|
||||
"mode": "thresholds"
|
||||
},
|
||||
"min": 20,
|
||||
"max": 90
|
||||
},
|
||||
"overrides": []
|
||||
},
|
||||
"pluginVersion": "12.3.0-pre",
|
||||
"targets": [
|
||||
{
|
||||
"scenarioId": "random_walk",
|
||||
"refId": "A",
|
||||
"min": 20,
|
||||
"max": 90
|
||||
}
|
||||
],
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"options": {
|
||||
"reduceOptions": {
|
||||
"values": false,
|
||||
"calcs": ["lastNotNull"],
|
||||
"fields": ""
|
||||
},
|
||||
"orientation": "auto",
|
||||
"shape": "gauge",
|
||||
"gradient": "none",
|
||||
"barWidthFactor": 0.5,
|
||||
"segmentCount": 70,
|
||||
"segmentSpacing": 0.3,
|
||||
"sparkline": false,
|
||||
"showThresholdMarkers": true,
|
||||
"showThresholdLabels": false,
|
||||
"effects": {
|
||||
"barGlow": false,
|
||||
"centerGlow": false,
|
||||
"rounded": false,
|
||||
"spotlight": false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"collapsed": false,
|
||||
"gridPos": {
|
||||
@@ -916,8 +977,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -987,8 +1047,7 @@
|
||||
},
|
||||
{
|
||||
"datasource": {
|
||||
"type": "grafana-testdata-datasource",
|
||||
"uid": "PD8C576611E62080A"
|
||||
"type": "grafana-testdata-datasource"
|
||||
},
|
||||
"description": "should not show any threshold markers",
|
||||
"fieldConfig": {
|
||||
@@ -1071,5 +1130,5 @@
|
||||
"timezone": "browser",
|
||||
"title": "Panel tests - Old gauge to new",
|
||||
"uid": "panel-tests-old-gauge-to-new",
|
||||
"version": 3
|
||||
"version": 4
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ export function RadialBarSegmented({
|
||||
const segmentArcLengthDeg = angleRange / segmentCountAdjusted - angleBetweenSegments;
|
||||
|
||||
for (let i = 0; i < segmentCountAdjusted; i++) {
|
||||
const angleValue = ((max - min) / segmentCountAdjusted) * i;
|
||||
const angleValue = min + ((max - min) / segmentCountAdjusted) * i;
|
||||
const angleColor = colorDefs.getSegmentColor(angleValue);
|
||||
const segmentAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01;
|
||||
const segmentColor = angleValue >= value ? theme.colors.action.hover : angleColor;
|
||||
|
||||
Reference in New Issue
Block a user