mirror of https://github.com/grafana/grafana.git
New bar gauge style: Unfilled (#21201)
* BarGauge: Added unfilled option * Fixed white theme and added 2 unit tests * Added another demo dashboard * Fixed dev env dashboards
This commit is contained in:
Torkel Ödegaard
GitHub
parent
587e4009f3
commit
392819c5d0
|
|
@ -0,0 +1,491 @@
|
||||||
|
{
|
||||||
|
"annotations": {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"builtIn": 1,
|
||||||
|
"datasource": "-- Grafana --",
|
||||||
|
"enable": true,
|
||||||
|
"hide": true,
|
||||||
|
"iconColor": "rgba(0, 211, 255, 1)",
|
||||||
|
"name": "Annotations & Alerts",
|
||||||
|
"type": "dashboard"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"editable": true,
|
||||||
|
"gnetId": null,
|
||||||
|
"graphTooltip": 0,
|
||||||
|
"links": [],
|
||||||
|
"panels": [
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 32,
|
||||||
|
"w": 9,
|
||||||
|
"x": 0,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"id": 4,
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "yellow",
|
||||||
|
"value": 50
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "percent"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "D",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "E",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "G",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"labels": "",
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "I",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "J",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "K",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "L",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "M",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "N",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"labels": "",
|
||||||
|
"refId": "O",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "P",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "Q",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Panel Title",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 11,
|
||||||
|
"w": 8,
|
||||||
|
"x": 9,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"id": 3,
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "purple",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "percent"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "vertical",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "D",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "E",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "G",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Panel Title",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 33,
|
||||||
|
"w": 7,
|
||||||
|
"x": 17,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"id": 6,
|
||||||
|
"options": {
|
||||||
|
"displayMode": "basic",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": 50
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "percent"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "K",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "L",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "M",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "N",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "O",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "P",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "Q",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "R",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "S",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "T",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "U",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "V",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "W",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "X",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Panel Title",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 11,
|
||||||
|
"w": 8,
|
||||||
|
"x": 9,
|
||||||
|
"y": 11
|
||||||
|
},
|
||||||
|
"id": 7,
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "purple",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "percent"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "vertical",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "D",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "E",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "G",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Panel Title",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 11,
|
||||||
|
"w": 8,
|
||||||
|
"x": 9,
|
||||||
|
"y": 22
|
||||||
|
},
|
||||||
|
"id": 8,
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "purple",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "percent"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "vertical",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "D",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "E",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "G",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Panel Title",
|
||||||
|
"type": "bargauge"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"schemaVersion": 21,
|
||||||
|
"style": "dark",
|
||||||
|
"tags": ["gdev", "demo"],
|
||||||
|
"templating": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"time": {
|
||||||
|
"from": "now-6h",
|
||||||
|
"to": "now"
|
||||||
|
},
|
||||||
|
"timepicker": {
|
||||||
|
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
|
||||||
|
},
|
||||||
|
"timezone": "",
|
||||||
|
"title": "Bar Gauge Demo Unfilled",
|
||||||
|
"uid": "xMsQdBfWz",
|
||||||
|
"version": 5
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,530 @@
|
||||||
|
{
|
||||||
|
"annotations": {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"builtIn": 1,
|
||||||
|
"datasource": "-- Grafana --",
|
||||||
|
"enable": true,
|
||||||
|
"hide": true,
|
||||||
|
"iconColor": "rgba(0, 211, 255, 1)",
|
||||||
|
"name": "Annotations & Alerts",
|
||||||
|
"type": "dashboard"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"editable": true,
|
||||||
|
"gnetId": null,
|
||||||
|
"graphTooltip": 0,
|
||||||
|
"links": [],
|
||||||
|
"panels": [
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 10,
|
||||||
|
"w": 12,
|
||||||
|
"x": 0,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"id": 8,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "basic",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "purple",
|
||||||
|
"value": 50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": 70
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "watt"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "vertical",
|
||||||
|
"showUnfilled": false
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "D",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "I",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "J",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "K",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "L",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "M",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "N",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "O",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "P",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "Q",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Basic vertical ",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 10,
|
||||||
|
"w": 12,
|
||||||
|
"x": 12,
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
|
"id": 22,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "basic",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": 25
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "orange",
|
||||||
|
"value": 37.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "purple",
|
||||||
|
"value": 43.75
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 50
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "watt"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "vertical",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "csv_metric_values",
|
||||||
|
"stringInput": "100,100,100"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "J",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "K",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "L",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "M",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "N",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "O",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "P",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "Q",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Basic vertical (Unfilled)",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 9,
|
||||||
|
"w": 12,
|
||||||
|
"x": 0,
|
||||||
|
"y": 10
|
||||||
|
},
|
||||||
|
"id": 12,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "orange",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "celsius"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": false
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"alias": "Inside",
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "csv_metric_values",
|
||||||
|
"stringInput": "100,100,100"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": "Outhouse",
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Gradient ",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 9,
|
||||||
|
"w": 12,
|
||||||
|
"x": 12,
|
||||||
|
"y": 10
|
||||||
|
},
|
||||||
|
"id": 23,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "gradient",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "orange",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "celsius"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"alias": "Inside",
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "csv_metric_values",
|
||||||
|
"stringInput": "100,100,100"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": "Outhouse",
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Gradient (Unfilled)",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 6,
|
||||||
|
"w": 12,
|
||||||
|
"x": 0,
|
||||||
|
"y": 19
|
||||||
|
},
|
||||||
|
"id": 21,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "basic",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "orange",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "celsius"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": false
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"alias": "Inside",
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "csv_metric_values",
|
||||||
|
"stringInput": "100,100,100"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": "Outhouse",
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Title to left of bar",
|
||||||
|
"type": "bargauge"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"datasource": null,
|
||||||
|
"gridPos": {
|
||||||
|
"h": 6,
|
||||||
|
"w": 12,
|
||||||
|
"x": 12,
|
||||||
|
"y": 19
|
||||||
|
},
|
||||||
|
"id": 24,
|
||||||
|
"links": [],
|
||||||
|
"options": {
|
||||||
|
"displayMode": "basic",
|
||||||
|
"fieldOptions": {
|
||||||
|
"calcs": ["mean"],
|
||||||
|
"defaults": {
|
||||||
|
"decimals": null,
|
||||||
|
"mappings": [],
|
||||||
|
"max": 100,
|
||||||
|
"min": 0,
|
||||||
|
"thresholds": [
|
||||||
|
{
|
||||||
|
"color": "blue",
|
||||||
|
"value": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "green",
|
||||||
|
"value": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "orange",
|
||||||
|
"value": 40
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "red",
|
||||||
|
"value": 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unit": "celsius"
|
||||||
|
},
|
||||||
|
"overrides": [],
|
||||||
|
"values": false
|
||||||
|
},
|
||||||
|
"orientation": "horizontal",
|
||||||
|
"showUnfilled": true
|
||||||
|
},
|
||||||
|
"pluginVersion": "6.6.0-pre",
|
||||||
|
"targets": [
|
||||||
|
{
|
||||||
|
"alias": "Inside",
|
||||||
|
"refId": "H",
|
||||||
|
"scenarioId": "csv_metric_values",
|
||||||
|
"stringInput": "100,100,100"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": "Outhouse",
|
||||||
|
"refId": "A",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "F",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "B",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"refId": "C",
|
||||||
|
"scenarioId": "random_walk"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"timeFrom": null,
|
||||||
|
"timeShift": null,
|
||||||
|
"title": "Title to left of bar (Filled)",
|
||||||
|
"type": "bargauge"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"schemaVersion": 21,
|
||||||
|
"style": "dark",
|
||||||
|
"tags": ["gdev", "panel-tests"],
|
||||||
|
"templating": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"time": {
|
||||||
|
"from": "now-6h",
|
||||||
|
"to": "now"
|
||||||
|
},
|
||||||
|
"timepicker": {
|
||||||
|
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
|
||||||
|
"time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
|
||||||
|
},
|
||||||
|
"timezone": "",
|
||||||
|
"title": "Panel Tests - Bar Gauge 2",
|
||||||
|
"uid": "sRrEibfZk",
|
||||||
|
"version": 5
|
||||||
|
}
|
||||||
|
|
@ -106,6 +106,20 @@ describe('BarGauge', () => {
|
||||||
});
|
});
|
||||||
const styles = getBasicAndGradientStyles(props);
|
const styles = getBasicAndGradientStyles(props);
|
||||||
expect(styles.bar.height).toBe('249px');
|
expect(styles.bar.height).toBe('249px');
|
||||||
|
expect(styles.emptyBar.bottom).toBe('-3px');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Horizontal bar', () => {
|
||||||
|
it('should stretch items', () => {
|
||||||
|
const props = getProps({
|
||||||
|
height: 300,
|
||||||
|
value: getValue(100, 'ServerA'),
|
||||||
|
orientation: VizOrientation.Horizontal,
|
||||||
|
});
|
||||||
|
const styles = getBasicAndGradientStyles(props);
|
||||||
|
expect(styles.wrapper.alignItems).toBe('stretch');
|
||||||
|
expect(styles.emptyBar.left).toBe('-3px');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,7 @@ export interface Props extends Themeable {
|
||||||
displayMode: 'basic' | 'lcd' | 'gradient';
|
displayMode: 'basic' | 'lcd' | 'gradient';
|
||||||
onClick?: React.MouseEventHandler<HTMLElement>;
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
showUnfilled?: boolean;
|
||||||
alignmentFactors?: DisplayValueAlignmentFactors;
|
alignmentFactors?: DisplayValueAlignmentFactors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -57,6 +58,7 @@ export class BarGauge extends PureComponent<Props> {
|
||||||
orientation: VizOrientation.Horizontal,
|
orientation: VizOrientation.Horizontal,
|
||||||
thresholds: [],
|
thresholds: [],
|
||||||
itemSpacing: 10,
|
itemSpacing: 10,
|
||||||
|
showUnfilled: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -92,13 +94,14 @@ export class BarGauge extends PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderBasicAndGradientBars(): ReactNode {
|
renderBasicAndGradientBars(): ReactNode {
|
||||||
const { value } = this.props;
|
const { value, showUnfilled } = this.props;
|
||||||
|
|
||||||
const styles = getBasicAndGradientStyles(this.props);
|
const styles = getBasicAndGradientStyles(this.props);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={styles.wrapper}>
|
<div style={styles.wrapper}>
|
||||||
<FormattedValueDisplay className="bar-gauge__value" value={value} style={styles.value} />
|
<FormattedValueDisplay className="bar-gauge__value" value={value} style={styles.value} />
|
||||||
|
{showUnfilled && <div style={styles.emptyBar} />}
|
||||||
<div style={styles.bar} />
|
<div style={styles.bar} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -260,7 +263,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
|
||||||
|
|
||||||
// if height above 40 put text to above bar
|
// if height above 40 put text to above bar
|
||||||
if (height > 40) {
|
if (height > 40) {
|
||||||
const maxTitleHeightRatio = 0.35;
|
const maxTitleHeightRatio = 0.45;
|
||||||
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
|
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -289,6 +292,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
|
||||||
const wrapperStyles: CSSProperties = {
|
const wrapperStyles: CSSProperties = {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
width: '100%',
|
||||||
};
|
};
|
||||||
|
|
||||||
const titleDim = calculateTitleDimensions(props);
|
const titleDim = calculateTitleDimensions(props);
|
||||||
|
|
@ -327,6 +331,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
|
||||||
interface BasicAndGradientStyles {
|
interface BasicAndGradientStyles {
|
||||||
wrapper: CSSProperties;
|
wrapper: CSSProperties;
|
||||||
bar: CSSProperties;
|
bar: CSSProperties;
|
||||||
|
emptyBar: CSSProperties;
|
||||||
value: CSSProperties;
|
value: CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -390,7 +395,7 @@ export function getValuePercent(value: number, minValue: number, maxValue: numbe
|
||||||
* Only exported to for unit test
|
* Only exported to for unit test
|
||||||
*/
|
*/
|
||||||
export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {
|
export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {
|
||||||
const { displayMode, maxValue, minValue, value, alignmentFactors, orientation } = props;
|
const { displayMode, maxValue, minValue, value, alignmentFactors, orientation, theme } = props;
|
||||||
const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
|
const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
|
||||||
|
|
||||||
const valuePercent = getValuePercent(value.numeric, minValue, maxValue);
|
const valuePercent = getValuePercent(value.numeric, minValue, maxValue);
|
||||||
|
|
@ -402,10 +407,21 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
|
||||||
const isBasic = displayMode === 'basic';
|
const isBasic = displayMode === 'basic';
|
||||||
const wrapperStyles: CSSProperties = {
|
const wrapperStyles: CSSProperties = {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
flexGrow: 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
const barStyles: CSSProperties = {
|
const barStyles: CSSProperties = {
|
||||||
borderRadius: '3px',
|
borderRadius: '3px',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
const emptyBar: CSSProperties = {
|
||||||
|
background: `rgba(${theme.isDark ? '255,255,255' : '0,0,0'}, 0.07)`,
|
||||||
|
flexGrow: 1,
|
||||||
|
display: 'flex',
|
||||||
|
borderRadius: '3px',
|
||||||
|
position: 'relative',
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isVertical(orientation)) {
|
if (isVertical(orientation)) {
|
||||||
|
|
@ -419,11 +435,15 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
|
||||||
barStyles.height = `${barHeight}px`;
|
barStyles.height = `${barHeight}px`;
|
||||||
barStyles.width = `${maxBarWidth}px`;
|
barStyles.width = `${maxBarWidth}px`;
|
||||||
|
|
||||||
|
// adjust so that filled in bar is at the bottom
|
||||||
|
emptyBar.bottom = '-3px';
|
||||||
|
|
||||||
if (isBasic) {
|
if (isBasic) {
|
||||||
// Basic styles
|
// Basic styles
|
||||||
barStyles.background = `${tinycolor(valueColor)
|
barStyles.background = `${tinycolor(valueColor)
|
||||||
.setAlpha(0.25)
|
.setAlpha(0.35)
|
||||||
.toRgbString()}`;
|
.toRgbString()}`;
|
||||||
|
|
||||||
barStyles.borderTop = `2px solid ${valueColor}`;
|
barStyles.borderTop = `2px solid ${valueColor}`;
|
||||||
} else {
|
} else {
|
||||||
// Gradient styles
|
// Gradient styles
|
||||||
|
|
@ -435,16 +455,19 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
|
||||||
// Custom styles for horizontal orientation
|
// Custom styles for horizontal orientation
|
||||||
wrapperStyles.flexDirection = 'row-reverse';
|
wrapperStyles.flexDirection = 'row-reverse';
|
||||||
wrapperStyles.justifyContent = 'flex-end';
|
wrapperStyles.justifyContent = 'flex-end';
|
||||||
wrapperStyles.alignItems = 'center';
|
wrapperStyles.alignItems = 'stretch';
|
||||||
|
|
||||||
barStyles.transition = 'width 1s';
|
barStyles.transition = 'width 1s';
|
||||||
barStyles.height = `${maxBarHeight}px`;
|
barStyles.height = `${maxBarHeight}px`;
|
||||||
barStyles.width = `${barWidth}px`;
|
barStyles.width = `${barWidth}px`;
|
||||||
|
|
||||||
|
// shift empty region back to fill gaps due to border radius
|
||||||
|
emptyBar.left = '-3px';
|
||||||
|
|
||||||
if (isBasic) {
|
if (isBasic) {
|
||||||
// Basic styles
|
// Basic styles
|
||||||
barStyles.background = `${tinycolor(valueColor)
|
barStyles.background = `${tinycolor(valueColor)
|
||||||
.setAlpha(0.25)
|
.setAlpha(0.35)
|
||||||
.toRgbString()}`;
|
.toRgbString()}`;
|
||||||
barStyles.borderRight = `2px solid ${valueColor}`;
|
barStyles.borderRight = `2px solid ${valueColor}`;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -457,6 +480,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
|
||||||
wrapper: wrapperStyles,
|
wrapper: wrapperStyles,
|
||||||
bar: barStyles,
|
bar: barStyles,
|
||||||
value: valueStyles,
|
value: valueStyles,
|
||||||
|
emptyBar,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -523,18 +547,27 @@ function getValueStyles(
|
||||||
|
|
||||||
// how many pixels in wide can the text be?
|
// how many pixels in wide can the text be?
|
||||||
let textWidth = width;
|
let textWidth = width;
|
||||||
|
const formattedValueString = formattedValueToString(value);
|
||||||
|
|
||||||
if (isVertical(orientation)) {
|
if (isVertical(orientation)) {
|
||||||
|
styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
|
||||||
styles.justifyContent = `center`;
|
styles.justifyContent = `center`;
|
||||||
} else {
|
} else {
|
||||||
styles.justifyContent = `flex-start`;
|
styles.fontSize = calculateFontSize(
|
||||||
|
formattedValueString,
|
||||||
|
textWidth - VALUE_LEFT_PADDING * 2,
|
||||||
|
height,
|
||||||
|
VALUE_LINE_HEIGHT
|
||||||
|
);
|
||||||
|
styles.justifyContent = `flex-end`;
|
||||||
styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
|
styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
|
||||||
|
styles.paddingRight = `${VALUE_LEFT_PADDING}px`;
|
||||||
// Need to remove the left padding from the text width constraints
|
// Need to remove the left padding from the text width constraints
|
||||||
textWidth -= VALUE_LEFT_PADDING;
|
textWidth -= VALUE_LEFT_PADDING;
|
||||||
}
|
|
||||||
|
|
||||||
const formattedValueString = formattedValueToString(value);
|
// adjust width of title box
|
||||||
styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
|
styles.width = measureText(formattedValueString, styles.fontSize).width + VALUE_LEFT_PADDING * 2;
|
||||||
|
}
|
||||||
|
|
||||||
return styles;
|
return styles;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,17 @@ exports[`BarGauge Render with basic options should render 1`] = `
|
||||||
"display": "flex",
|
"display": "flex",
|
||||||
"flexDirection": "column",
|
"flexDirection": "column",
|
||||||
"overflow": "hidden",
|
"overflow": "hidden",
|
||||||
|
"width": "100%",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"alignItems": "center",
|
"alignItems": "stretch",
|
||||||
"display": "flex",
|
"display": "flex",
|
||||||
"flexDirection": "row-reverse",
|
"flexDirection": "row-reverse",
|
||||||
|
"flexGrow": 1,
|
||||||
"justifyContent": "flex-end",
|
"justifyContent": "flex-end",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -27,12 +29,13 @@ exports[`BarGauge Render with basic options should render 1`] = `
|
||||||
"alignItems": "center",
|
"alignItems": "center",
|
||||||
"color": "#73BF69",
|
"color": "#73BF69",
|
||||||
"display": "flex",
|
"display": "flex",
|
||||||
"fontSize": 175,
|
"fontSize": 140,
|
||||||
"height": "300px",
|
"height": "300px",
|
||||||
"justifyContent": "flex-start",
|
"justifyContent": "flex-end",
|
||||||
"lineHeight": 1,
|
"lineHeight": 1,
|
||||||
"paddingLeft": "10px",
|
"paddingLeft": "10px",
|
||||||
"width": "60px",
|
"paddingRight": "10px",
|
||||||
|
"width": 22,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
value={
|
value={
|
||||||
|
|
@ -45,12 +48,26 @@ exports[`BarGauge Render with basic options should render 1`] = `
|
||||||
<div
|
<div
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"background": "rgba(115, 191, 105, 0.25)",
|
"background": "rgba(255,255,255, 0.07)",
|
||||||
|
"borderRadius": "3px",
|
||||||
|
"display": "flex",
|
||||||
|
"flexGrow": 1,
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "relative",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"background": "rgba(115, 191, 105, 0.35)",
|
||||||
"borderRadius": "3px",
|
"borderRadius": "3px",
|
||||||
"borderRight": "2px solid #73BF69",
|
"borderRight": "2px solid #73BF69",
|
||||||
"height": "300px",
|
"height": "300px",
|
||||||
|
"position": "relative",
|
||||||
"transition": "width 1s",
|
"transition": "width 1s",
|
||||||
"width": "60px",
|
"width": "60px",
|
||||||
|
"zIndex": 1,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
|
||||||
onClick={openMenu}
|
onClick={openMenu}
|
||||||
className={targetClassName}
|
className={targetClassName}
|
||||||
alignmentFactors={alignmentFactors}
|
alignmentFactors={alignmentFactors}
|
||||||
|
showUnfilled={options.showUnfilled}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import {
|
||||||
FormLabel,
|
FormLabel,
|
||||||
Select,
|
Select,
|
||||||
DataLinksEditor,
|
DataLinksEditor,
|
||||||
|
Switch,
|
||||||
} from '@grafana/ui';
|
} from '@grafana/ui';
|
||||||
import { FieldDisplayOptions, FieldConfig, DataLink, PanelEditorProps } from '@grafana/data';
|
import { FieldDisplayOptions, FieldConfig, DataLink, PanelEditorProps } from '@grafana/data';
|
||||||
|
|
||||||
|
|
@ -54,6 +55,9 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
|
||||||
|
|
||||||
onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value });
|
onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value });
|
||||||
onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value });
|
onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value });
|
||||||
|
onToggleShowUnfilled = () => {
|
||||||
|
this.props.onOptionsChange({ ...this.props.options, showUnfilled: !this.props.options.showUnfilled });
|
||||||
|
};
|
||||||
|
|
||||||
onDataLinksChanged = (links: DataLink[]) => {
|
onDataLinksChanged = (links: DataLink[]) => {
|
||||||
this.onDefaultsChange({
|
this.onDefaultsChange({
|
||||||
|
|
@ -96,6 +100,14 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
|
||||||
value={displayModes.find(item => item.value === options.displayMode)}
|
value={displayModes.find(item => item.value === options.displayMode)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
{options.displayMode !== 'lcd' && (
|
||||||
|
<Switch
|
||||||
|
label="Unfilled"
|
||||||
|
labelClass={`width-${labelWidth}`}
|
||||||
|
checked={options.showUnfilled}
|
||||||
|
onChange={this.onToggleShowUnfilled}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</PanelOptionsGroup>
|
</PanelOptionsGroup>
|
||||||
<PanelOptionsGroup title="Field">
|
<PanelOptionsGroup title="Field">
|
||||||
<FieldPropertiesEditor
|
<FieldPropertiesEditor
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { VizOrientation, SelectableValue } from '@grafana/data';
|
||||||
|
|
||||||
export interface BarGaugeOptions extends SingleStatBaseOptions {
|
export interface BarGaugeOptions extends SingleStatBaseOptions {
|
||||||
displayMode: 'basic' | 'lcd' | 'gradient';
|
displayMode: 'basic' | 'lcd' | 'gradient';
|
||||||
|
showUnfilled: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const displayModes: Array<SelectableValue<string>> = [
|
export const displayModes: Array<SelectableValue<string>> = [
|
||||||
|
|
@ -16,4 +17,5 @@ export const defaults: BarGaugeOptions = {
|
||||||
displayMode: 'lcd',
|
displayMode: 'lcd',
|
||||||
orientation: VizOrientation.Horizontal,
|
orientation: VizOrientation.Horizontal,
|
||||||
fieldOptions: standardGaugeFieldOptions,
|
fieldOptions: standardGaugeFieldOptions,
|
||||||
|
showUnfilled: true,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue