grafana/devenv/dev-dashboards/panel-barchart/barchart-autosizing.json
Dominik Prokop a2cbbe1b8a
BarChart: value label sizing (#34229)
* Bar chart label positioning and sizing

* Dev dashbard

* Improve autosizing

* Remove sync option

* Unify text sizing options between stat-ish visualizations and bar chart

* Add simple categorical data scenario and update dev dashboard

* Remove unused options builder

* Add docs annotations

* Fix go lint
2021-05-19 17:33:56 +02:00

578 lines
12 KiB
JSON

{
"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,
"id": 441,
"links": [],
"panels": [
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 13,
"w": 24,
"x": 0,
"y": 0
},
"id": 9,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "auto",
"showValue": "auto",
"text": {},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Plenty od data, automatic value sizing",
"type": "barchart"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 24,
"x": 0,
"y": 13
},
"id": 10,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "auto",
"showValue": "auto",
"text": {
"size": 10,
"valueSize": 10
},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Plenty od data, fixed value sizing",
"type": "barchart"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 12,
"x": 0,
"y": 25
},
"id": 11,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "auto",
"showValue": "auto",
"text": {
"size": 10
},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Auto font size, value auto visible",
"transformations": [
{
"id": "filterByValue",
"options": {
"filters": [
{
"config": {
"id": "equal",
"options": {
"value": "Bedroom"
}
},
"fieldName": "location"
},
{
"config": {
"id": "equal",
"options": {
"value": "Cellar"
}
},
"fieldName": "location"
}
],
"match": "any",
"type": "include"
}
}
],
"type": "barchart"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 12,
"x": 12,
"y": 25
},
"id": 12,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "auto",
"showValue": "always",
"text": {
"size": 10
},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Auto font size, value always visible",
"transformations": [
{
"id": "filterByValue",
"options": {
"filters": [
{
"config": {
"id": "equal",
"options": {
"value": "Bedroom"
}
},
"fieldName": "location"
},
{
"config": {
"id": "equal",
"options": {
"value": "Cellar"
}
},
"fieldName": "location"
}
],
"match": "any",
"type": "include"
}
}
],
"type": "barchart"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 12,
"x": 0,
"y": 37
},
"id": 13,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "horizontal",
"showValue": "auto",
"text": {
"size": 10
},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Auto font size, value auto visible",
"transformations": [
{
"id": "filterByValue",
"options": {
"filters": [
{
"config": {
"id": "equal",
"options": {
"value": "Bedroom"
}
},
"fieldName": "location"
},
{
"config": {
"id": "equal",
"options": {
"value": "Cellar"
}
},
"fieldName": "location"
}
],
"match": "any",
"type": "include"
}
}
],
"type": "barchart"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"axisSoftMin": 0,
"fillOpacity": 80,
"gradientMode": "none",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineWidth": 0
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 12,
"w": 12,
"x": 12,
"y": 37
},
"id": 14,
"options": {
"barWidth": 1,
"groupWidth": 1,
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom"
},
"orientation": "horizontal",
"showValue": "always",
"text": {
"size": 10
},
"tooltip": {
"mode": "single"
}
},
"targets": [
{
"refId": "A",
"scenarioId": "categorical_data"
}
],
"title": "Auto font size, value always visible",
"transformations": [
{
"id": "filterByValue",
"options": {
"filters": [
{
"config": {
"id": "equal",
"options": {
"value": "Bedroom"
}
},
"fieldName": "location"
},
{
"config": {
"id": "equal",
"options": {
"value": "Cellar"
}
},
"fieldName": "location"
}
],
"match": "any",
"type": "include"
}
}
],
"type": "barchart"
}
],
"refresh": "",
"schemaVersion": 30,
"style": "dark",
"tags": [
"gdev",
"panel-tests",
"barchart"
],
"templating": {
"list": []
},
"time": {
"from": "now-5m",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "BarChart - value text sizing",
"uid": "WFlOM-jM1",
"version": 9
}