GraphNG: Color series from by value scheme & change to fillGradient to gradientMode (#29893)

This commit is contained in:
Torkel Ödegaard
2021-01-18 19:48:45 +01:00
committed by GitHub
parent f004655b7d
commit 93a59561ba
21 changed files with 1273 additions and 126 deletions
@@ -34,7 +34,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0.5,
"gradientMode": "opacity",
"fillOpacity": 40,
"lineInterpolation": "linear",
"lineWidth": 2,
@@ -122,7 +122,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillGradient": 0.4,
"gradientNode": "opacity",
"fillOpacity": 53,
"lineInterpolation": "linear",
"lineWidth": 1,
@@ -211,7 +211,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillGradient": "opacity",
"gradientMode": "opacity",
"fillOpacity": 100,
"lineInterpolation": "linear",
"lineWidth": 0,
@@ -300,7 +300,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0.5,
"gradientMode": "opacity",
"fillOpacity": 20,
"lineInterpolation": "linear",
"lineWidth": 1,
@@ -388,7 +388,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": "hue",
"gradientMode": "hue",
"fillOpacity": 62,
"lineInterpolation": "smooth",
"lineWidth": 2,
@@ -477,7 +477,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillGradient": "hue",
"gradientMode": "hue",
"fillOpacity": 100,
"lineInterpolation": "smooth",
"lineWidth": 0,
@@ -0,0 +1,892 @@
{
"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": 391,
"links": [],
"panels": [
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 100,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 0,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "red",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 0,
"y": 0
},
"id": 2,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 72,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 1,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "green",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 8,
"y": 0
},
"id": 3,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode (line + opacity)",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 78,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 2,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "orange",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 0
},
"id": 5,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode (line + opacity)",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 100,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 0,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "purple",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 0,
"y": 9
},
"id": 4,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 100,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 0,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "yellow",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 8,
"y": 9
},
"id": 6,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "bars",
"fillOpacity": 100,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "smooth",
"lineWidth": 0,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "rgb(12, 187, 242)",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 9
},
"id": 7,
"interval": "1m",
"links": [],
"maxDataPoints": 9,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillOpacity": 78,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "linear",
"lineWidth": 2,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "orange",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 0,
"y": 18
},
"id": 8,
"interval": "1m",
"links": [],
"maxDataPoints": 100,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode (line + opacity)",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillOpacity": 78,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "linear",
"lineWidth": 2,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "blue",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 8,
"y": 18
},
"id": 9,
"interval": "1m",
"links": [],
"maxDataPoints": 100,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode (line + opacity)",
"type": "timeseries"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillOpacity": 78,
"gradientMode": "hue",
"hideFrom": {
"graph": false,
"legend": false,
"tooltip": false
},
"lineInterpolation": "linear",
"lineWidth": 2,
"pointSize": 6,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": true
},
"mappings": [],
"nullValueMode": "null",
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "color",
"value": {
"fixedColor": "green",
"mode": "fixed"
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 18
},
"id": 10,
"interval": "1m",
"links": [],
"maxDataPoints": 100,
"options": {
"graph": {},
"legend": {
"calcs": [],
"displayMode": "hidden",
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Hue gradient mode (line + opacity)",
"type": "timeseries"
}
],
"schemaVersion": 27,
"style": "dark",
"tags": ["gdev", "panel-tests", "graph-ng"],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {},
"timezone": "",
"title": "Panel Tests - GraphNG - Hue Gradients",
"uid": "k3XQFOBMk",
"version": 3
}
@@ -34,7 +34,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -135,7 +135,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -245,7 +245,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -374,7 +374,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -475,7 +475,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -585,7 +585,7 @@
"axisLabel": "",
"axisPlacement": "auto",
"drawStyle": "line",
"fillGradient": 0,
"fillGradient": "none",
"fillOpacity": 0,
"hideFrom": {
"graph": false,
@@ -726,9 +726,7 @@
"fill": {
"alpha": 0
},
"fillGradient": {
"label": "None"
},
"fillGradient": "none",
"fillOpacity": 10,
"hideFrom": {
"graph": false,
@@ -889,9 +887,7 @@
"fill": {
"alpha": 0
},
"fillGradient": {
"label": "None"
},
"fillGradient": "none",
"fillOpacity": 10,
"hideFrom": {
"graph": false,