diff --git a/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json b/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json index 12d3892cec6..d4dd7980100 100644 --- a/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json +++ b/apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json @@ -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": { diff --git a/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json b/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json index f7bbfdc3510..61bec02a59b 100644 --- a/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json +++ b/devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json @@ -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 } diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx index cf59cd4b9b2..dbc93d2da7f 100644 --- a/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx +++ b/packages/grafana-ui/src/components/RadialGauge/RadialBarSegmented.tsx @@ -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;