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

Gauge: Updates to the design of the panel edit (#115097)

Browse Source 
* Gauge: Updates to the design of the panel edit

* i18n

* remove unused const

* i18n

* fix gdev and migration tests

* reduce bar gauge glow factor
This commit is contained in:
Paul Marbach
2025-12-10 21:03:44 +00:00
committed by GitHub
parent da14be859e
commit 63bfc1596c
26 changed files with 412 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/pkg/migration/conversion/testdata/input/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.json
Vendored
+51 -51
View File
@@ -76,9 +76,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -155,9 +155,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -234,9 +234,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -313,9 +313,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -392,9 +392,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -471,9 +471,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -550,9 +550,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -642,9 +642,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -721,9 +721,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -800,9 +800,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -879,9 +879,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -975,9 +975,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1054,9 +1054,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1133,9 +1133,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1212,9 +1212,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1291,9 +1291,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1387,9 +1387,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1470,9 +1470,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1553,9 +1553,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1645,10 +1645,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1731,10 +1731,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1831,10 +1831,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1919,10 +1919,10 @@
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2005,10 +2005,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2091,10 +2091,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2147,4 +2147,4 @@
"title": "Panel tests - Gauge (new)",
"uid": "panel-tests-gauge-new",
"weekStart": ""
}
}
apps/dashboard/pkg/migration/conversion/testdata/input/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.json
Vendored
+3 -3
View File
@@ -956,9 +956,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1162,4 +1162,4 @@
"title": "Panel tests - Old gauge to new",
"uid": "panel-tests-old-gauge-to-new",
"weekStart": ""
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v1beta1.json
Vendored
+51 -51
View File
@@ -82,9 +82,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -161,9 +161,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -240,9 +240,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -319,9 +319,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -398,9 +398,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -477,9 +477,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -556,9 +556,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -648,9 +648,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -727,9 +727,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -806,9 +806,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -885,9 +885,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -981,9 +981,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1060,9 +1060,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1139,9 +1139,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1218,9 +1218,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1297,9 +1297,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1393,9 +1393,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1476,9 +1476,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1559,9 +1559,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1651,10 +1651,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1737,10 +1737,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1837,10 +1837,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1925,10 +1925,10 @@
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2011,10 +2011,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2097,10 +2097,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2160,4 +2160,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v2alpha1.json
Vendored
+51 -51
View File
@@ -78,9 +78,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -171,10 +171,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -268,10 +268,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -367,10 +367,10 @@
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -465,10 +465,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -562,10 +562,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -658,9 +658,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -750,9 +750,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -842,9 +842,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -934,9 +934,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1026,9 +1026,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1118,9 +1118,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1206,9 +1206,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1298,9 +1298,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1390,9 +1390,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1482,9 +1482,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1578,9 +1578,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1666,9 +1666,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1758,9 +1758,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1854,9 +1854,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1950,9 +1950,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2050,9 +2050,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2142,9 +2142,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2234,9 +2234,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2327,10 +2327,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2821,4 +2821,4 @@
"variables": []
},
"status": {}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_new.v42.v2beta1.json
Vendored
+51 -51
View File
@@ -82,9 +82,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -178,10 +178,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -278,10 +278,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -380,10 +380,10 @@
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -481,10 +481,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -581,10 +581,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -680,9 +680,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -775,9 +775,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -870,9 +870,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -965,9 +965,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1060,9 +1060,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1155,9 +1155,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1246,9 +1246,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1341,9 +1341,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1436,9 +1436,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1531,9 +1531,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1630,9 +1630,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1721,9 +1721,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1816,9 +1816,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1915,9 +1915,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2014,9 +2014,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2117,9 +2117,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2212,9 +2212,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2307,9 +2307,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2403,10 +2403,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2897,4 +2897,4 @@
"variables": []
},
"status": {}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v1beta1.json
Vendored
+3 -3
View File
@@ -962,9 +962,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1175,4 +1175,4 @@
"storedVersion": "v0alpha1"
}
}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v2alpha1.json
Vendored
+3 -3
View File
@@ -865,9 +865,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1615,4 +1615,4 @@
"variables": []
},
"status": {}
}
}
apps/dashboard/pkg/migration/conversion/testdata/output/migrated_dev_dashboards/panel-gauge/v0alpha1.gauge_tests_old_to_new.v42.v2beta1.json
Vendored
+3 -3
View File
@@ -902,9 +902,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1667,4 +1667,4 @@
"variables": []
},
"status": {}
}
}
apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_new.v42.json
Vendored
+51 -52
View File
@@ -76,9 +76,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -155,9 +155,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -234,9 +234,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -313,9 +313,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -392,9 +392,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -471,9 +471,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -550,9 +550,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -642,9 +642,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -721,9 +721,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -800,9 +800,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -879,9 +879,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -975,9 +975,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1054,9 +1054,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1133,9 +1133,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1212,9 +1212,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1291,9 +1291,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1387,9 +1387,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1470,9 +1470,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1553,9 +1553,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1645,10 +1645,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1731,10 +1731,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1831,10 +1831,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1918,11 +1918,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2005,10 +2004,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2091,10 +2090,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -2147,4 +2146,4 @@
"title": "Panel tests - Gauge (new)",
"uid": "panel-tests-gauge-new",
"weekStart": ""
}
}
apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-gauge/gauge_tests_old_to_new.v42.json
Vendored
+3 -3
View File
@@ -956,9 +956,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": [
@@ -1162,4 +1162,4 @@
"title": "Panel tests - Old gauge to new",
"uid": "panel-tests-old-gauge-to-new",
"weekStart": ""
}
}
devenv/dev-dashboards/panel-gauge/gauge_tests_new.json
+50 -51
View File
@@ -76,9 +76,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -153,9 +153,9 @@
"barGlow": false,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -230,9 +230,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -307,9 +307,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -384,9 +384,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -461,9 +461,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -538,9 +538,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": false,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -628,9 +628,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -705,9 +705,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -782,9 +782,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -859,9 +859,9 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -953,9 +953,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1030,9 +1030,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1107,9 +1107,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1184,9 +1184,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1261,9 +1261,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
},
"gradient": "none",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1355,9 +1355,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1436,9 +1436,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1517,9 +1517,9 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": true
},
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1607,10 +1607,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1691,10 +1691,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1789,10 +1789,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1874,11 +1874,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"sparkline": false,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "scheme",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -1959,10 +1958,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
@@ -2043,10 +2042,10 @@
"barGlow": true,
"centerGlow": true,
"rounded": true,
"spotlight": true
"spotlight": true,
"gradient": true
},
"glow": "both",
"gradient": "hue",
"orientation": "auto",
"reduceOptions": {
"calcs": ["lastNotNull"],
devenv/dev-dashboards/panel-gauge/gauge_tests_old_to_new.json
+2 -2
View File
@@ -947,7 +947,6 @@
},
"orientation": "auto",
"shape": "gauge",
"gradient": "none",
"barWidthFactor": 0.5,
"segmentCount": 70,
"segmentSpacing": 0.3,
@@ -958,7 +957,8 @@
"barGlow": false,
"centerGlow": false,
"rounded": false,
"spotlight": false
"spotlight": false,
"gradient": false
}
}
},
packages/grafana-data/src/types/icon.ts
+1
View File
@@ -288,6 +288,7 @@ export const availableIconsIndex = {
bitbucket: true,
git: true,
'tachometer-fast': true,
'tachometer-empty': true,
'cmab-logo': true,
};
packages/grafana-schema/src/raw/composable/newgauge/panelcfg/x/NewGaugePanelCfg_types.gen.ts
Generated
+2 -2
View File
@@ -15,6 +15,7 @@ export const pluginVersion = "12.4.0-pre";
export interface GaugePanelEffects {
barGlow?: boolean;
centerGlow?: boolean;
gradient?: boolean;
rounded?: boolean;
spotlight?: boolean;
}
@@ -22,6 +23,7 @@ export interface GaugePanelEffects {
export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
barGlow: false,
centerGlow: false,
gradient: true,
rounded: false,
spotlight: false,
};
@@ -29,7 +31,6 @@ export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
export interface Options extends common.SingleStatBaseOptions {
barWidthFactor: number;
effects: GaugePanelEffects;
gradient: ('none' | 'auto');
segmentCount: number;
segmentSpacing: number;
shape: ('circle' | 'gauge');
@@ -41,7 +42,6 @@ export interface Options extends common.SingleStatBaseOptions {
export const defaultOptions: Partial<Options> = {
barWidthFactor: 0.5,
effects: {},
gradient: 'auto',
segmentCount: 1,
segmentSpacing: 0.3,
shape: 'gauge',
packages/grafana-ui/src/components/Layout/Grid/Grid.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ interface PropsWithMinColumnWidth extends GridPropsBase {
/** For a responsive layout, fit as many columns while maintaining this minimum column width.
* The real width will be calculated based on the theme spacing tokens: `theme.spacing(minColumnWidth)`
*/
minColumnWidth?: ResponsiveProp<1 | 2 | 3 | 5 | 8 | 13 | 21 | 34 | 44 | 55 | 72 | 89 | 144>;
minColumnWidth?: ResponsiveProp<1 | 2 | 3 | 5 | 8 | 13 | 16 | 21 | 34 | 44 | 55 | 72 | 89 | 144>;
}
/** 'columns' and 'minColumnWidth' are mutually exclusive */
packages/grafana-ui/src/components/RadialGauge/effects.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export interface GlowGradientProps {
}
export function GlowGradient({ id, radius }: GlowGradientProps) {
const glowSize = 0.03 * radius;
const glowSize = 0.02 * radius;
return (
<filter id={id} filterUnits="userSpaceOnUse">
public/app/core/icons/cached.json
+2 -1
View File
@@ -193,5 +193,6 @@
"unicons/ban",
"unicons/git",
"unicons/bitbucket",
"unicons/tachometer-fast"
"unicons/tachometer-fast",
"unicons/tachometer-empty"
]
public/app/plugins/panel/radialbar/EffectsEditor.tsx
+59 -42
View File
@@ -1,53 +1,70 @@
import { StandardEditorProps } from '@grafana/data';
import { css } from '@emotion/css';
import { ComponentProps, useId } from 'react';
import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
import { t } from '@grafana/i18n';
import { Stack, Switch, Label, Tooltip } from '@grafana/ui';
import { Stack, Switch, Label, Tooltip, Grid, useStyles2 } from '@grafana/ui';
import { GaugePanelEffects } from './panelcfg.gen';
function EffectsEditorInput(props: ComponentProps<typeof Switch> & { tooltip?: string }) {
const id = useId();
const styles = useStyles2(getStyles);
const content = (
<div className={styles.container}>
<Stack gap={1} alignItems="center">
<Switch {...props} id={id} />
<Label className={styles.label} htmlFor={id}>
{props.label}
</Label>
</Stack>
</div>
);
if (props.tooltip) {
return <Tooltip content={props.tooltip}>{content}</Tooltip>;
}
return content;
}
function getStyles(theme: GrafanaTheme2) {
return {
label: css({ marginBottom: 0 }),
container: css({ paddingBlock: theme.spacing(0.5) }),
};
}
/**
* Editor for all the radial bar effects options
*/
export function EffectsEditor(props: StandardEditorProps<GaugePanelEffects>) {
return (
<Stack direction="row" alignItems={'flex-start'} gap={1} wrap>
<Stack>
<Switch
id="radialbar-rounded-bars"
value={!!props.value?.rounded}
onChange={(e) => props.onChange({ ...props.value, rounded: e.currentTarget.checked })}
/>
<Label htmlFor="radialbar-rounded-bars">{t('radialbar.config.effects.rounded-bars', 'Rounded bars')}</Label>
</Stack>
<Stack>
<Switch
id="radialbar-bar-glow"
label={t('radialbar.config.effects.bar-glow', 'Bar glow')}
value={!!props.value?.barGlow}
onChange={(e) => props.onChange({ ...props.value, barGlow: e.currentTarget.checked })}
/>
<Label htmlFor="radialbar-bar-glow">{t('radialbar.config.effects.bar-glow', 'Bar glow')}</Label>
</Stack>
<Stack>
<Switch
id="radialbar-center-glow"
label={t('radialbar.config.effects.center-glow', 'Center glow')}
value={!!props.value?.centerGlow}
onChange={(e) => props.onChange({ ...props.value, centerGlow: e.currentTarget.checked })}
/>
<Label htmlFor="radialbar-center-glow">{t('radialbar.config.effects.center-glow', 'Center glow')}</Label>
</Stack>
<Tooltip content={t('radialbar.config.effects.spotlight-tooltip', 'Only visible in dark themes')}>
<Stack>
<Switch
id="radialbar-spotlight"
label={t('radialbar.config.effects.spotlight', 'Spotlight')}
value={!!props.value?.spotlight}
onChange={(e) => props.onChange({ ...props.value, spotlight: e.currentTarget.checked })}
/>
<Label htmlFor="radialbar-spotlight">{t('radialbar.config.effects.spotlight', 'Spotlight')}</Label>
</Stack>
</Tooltip>
</Stack>
<Grid alignItems={'flex-start'} gap={1} minColumnWidth={16}>
<EffectsEditorInput
label={t('radialbar.config.effects.gradient', 'Gradient')}
value={!!props.value?.gradient}
onChange={(e) => props.onChange({ ...props.value, gradient: e.currentTarget.checked })}
/>
<EffectsEditorInput
label={t('radialbar.config.effects.rounded-bars', 'Rounded bars')}
value={!!props.value?.rounded}
onChange={(e) => props.onChange({ ...props.value, rounded: e.currentTarget.checked })}
/>
<EffectsEditorInput
label={t('radialbar.config.effects.bar-glow', 'Bar glow')}
value={!!props.value?.barGlow}
onChange={(e) => props.onChange({ ...props.value, barGlow: e.currentTarget.checked })}
/>
<EffectsEditorInput
label={t('radialbar.config.effects.center-glow', 'Center glow')}
value={!!props.value?.centerGlow}
onChange={(e) => props.onChange({ ...props.value, centerGlow: e.currentTarget.checked })}
/>
<EffectsEditorInput
label={t('radialbar.config.effects.spotlight', 'Spotlight')}
tooltip={t('radialbar.config.effects.spotlight-tooltip', 'Only visible in dark themes')}
value={!!props.value?.spotlight}
onChange={(e) => props.onChange({ ...props.value, spotlight: e.currentTarget.checked })}
/>
</Grid>
);
}
public/app/plugins/panel/radialbar/GaugeMigrations.test.ts
+4 -2
View File
@@ -68,7 +68,9 @@ describe('Gauge Panel Migrations', () => {
calcs: ['lastNotNull'],
},
shape: 'circle',
gradient: 'auto',
effects: {
gradient: true,
},
sparkline: true,
},
fieldConfig: {
@@ -86,7 +88,7 @@ describe('Gauge Panel Migrations', () => {
const result = gaugePanelMigrationHandler(panel as PanelModel);
expect(result.sparkline).toBe(true);
expect(result.gradient).toBe('auto');
expect(result.effects?.gradient).toBe(true);
});
it('from 6.1.1', () => {
public/app/plugins/panel/radialbar/GaugeMigrations.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export function gaugePanelMigrationHandler(panel: PanelModel<Options>): Partial<
// This option is enabled by default in new gauge but does not exist in old gauge
newOptions.sparkline = false;
newOptions.gradient = 'none';
newOptions.effects = { gradient: false };
// Remove deprecated sizing options
if ('sizing' in newOptions) {
public/app/plugins/panel/radialbar/RadialBarPanel.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function RadialBarPanel({
width={width}
height={height}
barWidthFactor={options.barWidthFactor}
gradient={options.gradient}
gradient={options.effects?.gradient ? 'auto' : 'none'}
spotlight={options.effects?.spotlight}
glowBar={options.effects?.barGlow}
glowCenter={options.effects?.centerGlow}
public/app/plugins/panel/radialbar/module.tsx
+4 -16
View File
@@ -14,32 +14,20 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
.useFieldConfig({})
.setPanelOptions((builder) => {
const category = [t('gauge.category-radial-bar', 'Gauge')];
addStandardDataReduceOptions(builder);
addOrientationOption(builder, category);
commonOptionsBuilder.addTextSizeOptions(builder, { withTitle: true, withValue: true });
builder.addRadio({
path: 'shape',
name: t('radialbar.config.shape', 'Shape'),
name: t('radialbar.config.shape', 'Style'),
category,
defaultValue: defaultOptions.shape,
settings: {
options: [
{ value: 'circle', label: t('radialbar.config.shape-circle', 'Circle'), icon: 'circle' },
{ value: 'gauge', label: t('radialbar.config.shape-gauge', 'Gauge'), icon: 'tachometer-fast' },
],
},
});
builder.addRadio({
path: 'gradient',
name: t('radialbar.config.gradient', 'Gradient'),
category,
defaultValue: defaultOptions.gradient,
settings: {
options: [
{ value: 'none', label: t('radialbar.config.gradient-none', 'None') },
{ value: 'auto', label: t('radialbar.config.gradient-auto', 'Auto') },
{ value: 'gauge', label: t('radialbar.config.shape-gauge', 'Arc'), icon: 'tachometer-empty' },
],
},
});
@@ -105,7 +93,7 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
builder.addCustomEditor({
id: 'radialbar-effects',
path: 'effects',
name: 'Effects',
name: t('radialbar.config.effects.label', 'Effects'),
category,
editor: EffectsEditor,
settings: {},
public/app/plugins/panel/radialbar/panelcfg.cue
+4 -4
View File
@@ -28,20 +28,20 @@ composableKinds: PanelCfg: {
GaugePanelEffects: {
barGlow?: bool | *false
spotlight?: bool | *false
rounded?: bool | *false
rounded?: bool | *false
centerGlow?: bool | *false
gradient?: bool | *true
} @cuetsy(kind="interface")
Options: {
common.SingleStatBaseOptions
common.SingleStatBaseOptions
showThresholdMarkers: bool | *true
showThresholdLabels: bool | *false
segmentCount: number | *1
segmentSpacing: number | *0.3
sparkline?: bool | *true
shape: "circle" | *"gauge"
shape: "circle" | *"gauge"
barWidthFactor: number | *0.5
gradient: "none" | *"auto"
effects: GaugePanelEffects | *{}
} @cuetsy(kind="interface")
}
public/app/plugins/panel/radialbar/panelcfg.gen.ts
Generated
+2 -2
View File
@@ -13,6 +13,7 @@ import * as common from '@grafana/schema';
export interface GaugePanelEffects {
barGlow?: boolean;
centerGlow?: boolean;
gradient?: boolean;
rounded?: boolean;
spotlight?: boolean;
}
@@ -20,6 +21,7 @@ export interface GaugePanelEffects {
export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
barGlow: false,
centerGlow: false,
gradient: true,
rounded: false,
spotlight: false,
};
@@ -27,7 +29,6 @@ export const defaultGaugePanelEffects: Partial<GaugePanelEffects> = {
export interface Options extends common.SingleStatBaseOptions {
barWidthFactor: number;
effects: GaugePanelEffects;
gradient: ('none' | 'auto');
segmentCount: number;
segmentSpacing: number;
shape: ('circle' | 'gauge');
@@ -39,7 +40,6 @@ export interface Options extends common.SingleStatBaseOptions {
export const defaultOptions: Partial<Options> = {
barWidthFactor: 0.5,
effects: {},
gradient: 'auto',
segmentCount: 1,
segmentSpacing: 0.3,
shape: 'gauge',
public/img/icons/unicons/tachometer-empty.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12,4A10,10,0,0,0,2,14a9.91,9.91,0,0,0,1.69,5.56,1,1,0,0,0,1.66-1.12,8,8,0,1,1,13.3,0,1,1,0,0,0,.27,1.39,1,1,0,0,0,.56.17,1,1,0,0,0,.83-.44A9.91,9.91,0,0,0,22,14,10,10,0,0,0,12,4Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

public/locales/en-US/grafana.json
+4 -5
View File
@@ -12434,18 +12434,17 @@
"effects": {
"bar-glow": "Bar glow",
"center-glow": "Center glow",
"gradient": "Gradient",
"label": "Effects",
"rounded-bars": "Rounded bars",
"spotlight": "Spotlight",
"spotlight-tooltip": "Only visible in dark themes"
},
"gradient": "Gradient",
"gradient-auto": "Auto",
"gradient-none": "None",
"segment-count": "Segments",
"segment-spacing": "Segment spacing",
"shape": "Shape",
"shape": "Style",
"shape-circle": "Circle",
"shape-gauge": "Gauge",
"shape-gauge": "Arc",
"sparkline": "Show sparkline",
"threshold-labels": "Show threshold labels",
"threshold-markers": "Show thresholds"