IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Thresholds: Don't use series fill opacity for transparent steps (#77104)

Browse Source
This commit is contained in:
Leon Sorokin 2023-10-25 18:14:41 -05:00 committed by GitHub
parent bf8af608a7
commit 3aaeaf4203
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 234 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json
View File

@ -3,7 +3,10 @@
"list": [ "list": [
{ {
"builtIn": 1, "builtIn": 1,
"datasource": "-- Grafana --", "datasource": {
"type": "datasource",
"uid": "grafana"
},
"enable": true, "enable": true,
"hide": true, "hide": true,
"iconColor": "rgba(0, 211, 255, 1)", "iconColor": "rgba(0, 211, 255, 1)",
@ -19,10 +22,16 @@
] ]
}, },
"editable": true, "editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0, "graphTooltip": 0,
"links": [], "links": [],
"liveNow": false,
"panels": [ "panels": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"description": "", "description": "",
"fieldConfig": { "fieldConfig": {
"defaults": { "defaults": {
@ -30,6 +39,9 @@
"mode": "thresholds" "mode": "thresholds"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -41,6 +53,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 3, "lineWidth": 3,
"pointSize": 5, "pointSize": 5,
@ -91,8 +104,9 @@
"options": { "options": {
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "hidden", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": false
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -101,6 +115,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A", "refId": "A",
"scenarioId": "csv_metric_values", "scenarioId": "csv_metric_values",
"stringInput": "1,10,20,30,40,50" "stringInput": "1,10,20,30,40,50"
@ -110,6 +128,10 @@
"type": "timeseries" "type": "timeseries"
}, },
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"description": "", "description": "",
"fieldConfig": { "fieldConfig": {
"defaults": { "defaults": {
@ -117,6 +139,9 @@
"mode": "thresholds" "mode": "thresholds"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -128,6 +153,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 3, "lineWidth": 3,
"pointSize": 5, "pointSize": 5,
@ -179,7 +205,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -188,6 +215,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A", "refId": "A",
"scenarioId": "csv_metric_values", "scenarioId": "csv_metric_values",
"stringInput": "1,10,20,30,40,50" "stringInput": "1,10,20,30,40,50"
@ -197,12 +228,19 @@
"type": "timeseries" "type": "timeseries"
}, },
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": { "fieldConfig": {
"defaults": { "defaults": {
"color": { "color": {
"mode": "thresholds" "mode": "thresholds"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -214,6 +252,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 2, "lineWidth": 2,
"pointSize": 5, "pointSize": 5,
@ -265,7 +304,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -274,6 +314,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A", "refId": "A",
"scenarioId": "csv_metric_values", "scenarioId": "csv_metric_values",
"stringInput": "1,10,20,30,40,50" "stringInput": "1,10,20,30,40,50"
@ -282,6 +326,101 @@
"title": "15 orange, 50 red", "title": "15 orange, 50 red",
"type": "timeseries" "type": "timeseries"
}, },
{
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "",
"axisPlacement": "auto",
"barAlignment": 0,
"drawStyle": "line",
"fillOpacity": 25,
"gradientMode": "scheme",
"hideFrom": {
"legend": false,
"tooltip": false,
"viz": false
},
"insertNulls": false,
"lineInterpolation": "linear",
"lineWidth": 2,
"pointSize": 5,
"scaleDistribution": {
"type": "linear"
},
"showPoints": "never",
"spanNulls": false,
"stacking": {
"group": "A",
"mode": "none"
},
"thresholdsStyle": {
"mode": "off"
}
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "transparent"
},
{
"color": "orange",
"value": 20
},
{
"color": "red",
"value": 50
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 8,
"x": 8,
"y": 7
},
"id": 14,
"options": {
"legend": {
"calcs": [],
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0"
}
],
"title": "Transprent base",
"type": "timeseries"
},
{ {
"datasource": { "datasource": {
"type": "datasource", "type": "datasource",
@ -293,6 +432,9 @@
"mode": "thresholds" "mode": "thresholds"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -304,6 +446,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 3, "lineWidth": 3,
"pointSize": 5, "pointSize": 5,
@ -347,7 +490,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 0, "x": 0,
"y": 7 "y": 15
}, },
"id": 9, "id": 9,
"maxDataPoints": 45, "maxDataPoints": 45,
@ -355,7 +498,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -364,6 +508,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"panelId": 4, "panelId": 4,
"refId": "A" "refId": "A"
} }
@ -372,12 +520,19 @@
"type": "timeseries" "type": "timeseries"
}, },
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": { "fieldConfig": {
"defaults": { "defaults": {
"color": { "color": {
"mode": "thresholds" "mode": "thresholds"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -389,6 +544,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 0, "lineWidth": 0,
"pointSize": 5, "pointSize": 5,
@ -432,7 +588,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 12, "x": 12,
"y": 7 "y": 15
}, },
"id": 4, "id": 4,
"interval": "80s", "interval": "80s",
@ -441,7 +597,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -450,6 +607,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"max": 40, "max": 40,
"min": 0, "min": 0,
"noise": 1, "noise": 1,
@ -473,6 +634,9 @@
"mode": "continuous-GrYlRd" "mode": "continuous-GrYlRd"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -484,6 +648,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 3, "lineWidth": 3,
"pointSize": 5, "pointSize": 5,
@ -531,7 +696,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 0, "x": 0,
"y": 14 "y": 22
}, },
"id": 6, "id": 6,
"maxDataPoints": 50, "maxDataPoints": 50,
@ -539,7 +704,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -548,6 +714,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"panelId": 4, "panelId": 4,
"refId": "A" "refId": "A"
} }
@ -566,6 +736,9 @@
"mode": "continuous-GrYlRd" "mode": "continuous-GrYlRd"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -577,6 +750,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 1, "lineWidth": 1,
"pointSize": 5, "pointSize": 5,
@ -624,7 +798,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 12, "x": 12,
"y": 14 "y": 22
}, },
"id": 10, "id": 10,
"maxDataPoints": 45, "maxDataPoints": 45,
@ -632,7 +806,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -641,6 +816,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"panelId": 4, "panelId": 4,
"refId": "A" "refId": "A"
} }
@ -659,6 +838,9 @@
"mode": "continuous-GrYlRd" "mode": "continuous-GrYlRd"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -670,6 +852,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 1, "lineWidth": 1,
"pointSize": 5, "pointSize": 5,
@ -717,7 +900,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 0, "x": 0,
"y": 21 "y": 29
}, },
"id": 7, "id": 7,
"maxDataPoints": 50, "maxDataPoints": 50,
@ -725,7 +908,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -734,6 +918,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "datasource",
"uid": "-- Dashboard --"
},
"panelId": 4, "panelId": 4,
"refId": "A" "refId": "A"
} }
@ -742,12 +930,19 @@
"type": "timeseries" "type": "timeseries"
}, },
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": { "fieldConfig": {
"defaults": { "defaults": {
"color": { "color": {
"mode": "continuous-GrYlRd" "mode": "continuous-GrYlRd"
}, },
"custom": { "custom": {
"axisBorderShow": false,
"axisCenteredZero": false,
"axisColorMode": "text",
"axisLabel": "", "axisLabel": "",
"axisPlacement": "auto", "axisPlacement": "auto",
"barAlignment": 0, "barAlignment": 0,
@ -759,6 +954,7 @@
"tooltip": false, "tooltip": false,
"viz": false "viz": false
}, },
"insertNulls": false,
"lineInterpolation": "smooth", "lineInterpolation": "smooth",
"lineWidth": 3, "lineWidth": 3,
"pointSize": 5, "pointSize": 5,
@ -806,7 +1002,7 @@
"h": 7, "h": 7,
"w": 12, "w": 12,
"x": 12, "x": 12,
"y": 21 "y": 29
}, },
"id": 8, "id": 8,
"maxDataPoints": 250, "maxDataPoints": 250,
@ -814,7 +1010,8 @@
"legend": { "legend": {
"calcs": [], "calcs": [],
"displayMode": "list", "displayMode": "list",
"placement": "bottom" "placement": "bottom",
"showLegend": true
}, },
"tooltip": { "tooltip": {
"mode": "single", "mode": "single",
@ -823,6 +1020,10 @@
}, },
"targets": [ "targets": [
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"max": 45, "max": 45,
"min": 20, "min": 20,
"noise": 0, "noise": 0,
@ -832,6 +1033,10 @@
"startValue": 40 "startValue": 40
}, },
{ {
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"hide": false, "hide": false,
"max": 20, "max": 20,
"min": 1, "min": 1,
@ -845,8 +1050,8 @@
"type": "timeseries" "type": "timeseries"
} }
], ],
"refresh": false, "refresh": "",
"schemaVersion": 33, "schemaVersion": 38,
"tags": [ "tags": [
"gdev", "gdev",
"panel-tests", "panel-tests",
@ -863,5 +1068,6 @@
"timezone": "", "timezone": "",
"title": "Panel Tests - Graph NG - By value color schemes", "title": "Panel Tests - Graph NG - By value color schemes",
"uid": "aBXrJ0R7z", "uid": "aBXrJ0R7z",
"version": 11 "version": 4,
"weekStart": ""
} }

9
packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
View File

@ -229,6 +229,11 @@ export function getGradientRange(
return [min, max]; return [min, max];
} }
function isStepTransparent(color: string) {
// steps are stored as names or 8-char hex
return color === 'transparent' || (color[0] === '#' && color.slice(-2) === '00');
}
export function getScaleGradientFn( export function getScaleGradientFn(
opacity: number, opacity: number,
theme: GrafanaTheme2, theme: GrafanaTheme2,
@ -256,7 +261,9 @@ export function getScaleGradientFn(
if (thresholds.mode === ThresholdsMode.Absolute) { if (thresholds.mode === ThresholdsMode.Absolute) {
const valueStops: ValueStop[] = thresholds.steps.map((step) => [ const valueStops: ValueStop[] = thresholds.steps.map((step) => [
step.value, step.value,
colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity), isStepTransparent(step.color)
? '#0000'
: colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity),
]); ]);
gradient = scaleGradient(plot, scaleKey, valueStops, true); gradient = scaleGradient(plot, scaleKey, valueStops, true);
} else { } else {