From 3aaeaf42035d06648e691c5ef24c2856d188b381 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Wed, 25 Oct 2023 18:14:41 -0500 Subject: [PATCH] Thresholds: Don't use series fill opacity for transparent steps (#77104) --- .../timeseries-by-value-color-schemes.json | 246 ++++++++++++++++-- .../components/uPlot/config/gradientFills.ts | 9 +- 2 files changed, 234 insertions(+), 21 deletions(-) diff --git a/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json b/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json index e6b4fc5913e..d785a1fcaff 100644 --- a/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json +++ b/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json @@ -3,7 +3,10 @@ "list": [ { "builtIn": 1, - "datasource": "-- Grafana --", + "datasource": { + "type": "datasource", + "uid": "grafana" + }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", @@ -19,10 +22,16 @@ ] }, "editable": true, + "fiscalYearStartMonth": 0, "graphTooltip": 0, "links": [], + "liveNow": false, "panels": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "description": "", "fieldConfig": { "defaults": { @@ -30,6 +39,9 @@ "mode": "thresholds" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -41,6 +53,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 3, "pointSize": 5, @@ -91,8 +104,9 @@ "options": { "legend": { "calcs": [], - "displayMode": "hidden", - "placement": "bottom" + "displayMode": "list", + "placement": "bottom", + "showLegend": false }, "tooltip": { "mode": "single", @@ -101,6 +115,10 @@ }, "targets": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "refId": "A", "scenarioId": "csv_metric_values", "stringInput": "1,10,20,30,40,50" @@ -110,6 +128,10 @@ "type": "timeseries" }, { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "description": "", "fieldConfig": { "defaults": { @@ -117,6 +139,9 @@ "mode": "thresholds" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -128,6 +153,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 3, "pointSize": 5, @@ -179,7 +205,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -188,6 +215,10 @@ }, "targets": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "refId": "A", "scenarioId": "csv_metric_values", "stringInput": "1,10,20,30,40,50" @@ -197,12 +228,19 @@ "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, @@ -214,6 +252,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 2, "pointSize": 5, @@ -265,7 +304,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -274,6 +314,10 @@ }, "targets": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "refId": "A", "scenarioId": "csv_metric_values", "stringInput": "1,10,20,30,40,50" @@ -282,6 +326,101 @@ "title": "15 orange, 50 red", "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": { "type": "datasource", @@ -293,6 +432,9 @@ "mode": "thresholds" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -304,6 +446,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 3, "pointSize": 5, @@ -347,7 +490,7 @@ "h": 7, "w": 12, "x": 0, - "y": 7 + "y": 15 }, "id": 9, "maxDataPoints": 45, @@ -355,7 +498,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -364,6 +508,10 @@ }, "targets": [ { + "datasource": { + "type": "datasource", + "uid": "-- Dashboard --" + }, "panelId": 4, "refId": "A" } @@ -372,12 +520,19 @@ "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, @@ -389,6 +544,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 0, "pointSize": 5, @@ -432,7 +588,7 @@ "h": 7, "w": 12, "x": 12, - "y": 7 + "y": 15 }, "id": 4, "interval": "80s", @@ -441,7 +597,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -450,6 +607,10 @@ }, "targets": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "max": 40, "min": 0, "noise": 1, @@ -473,6 +634,9 @@ "mode": "continuous-GrYlRd" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -484,6 +648,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 3, "pointSize": 5, @@ -531,7 +696,7 @@ "h": 7, "w": 12, "x": 0, - "y": 14 + "y": 22 }, "id": 6, "maxDataPoints": 50, @@ -539,7 +704,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -548,6 +714,10 @@ }, "targets": [ { + "datasource": { + "type": "datasource", + "uid": "-- Dashboard --" + }, "panelId": 4, "refId": "A" } @@ -566,6 +736,9 @@ "mode": "continuous-GrYlRd" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -577,6 +750,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 1, "pointSize": 5, @@ -624,7 +798,7 @@ "h": 7, "w": 12, "x": 12, - "y": 14 + "y": 22 }, "id": 10, "maxDataPoints": 45, @@ -632,7 +806,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -641,6 +816,10 @@ }, "targets": [ { + "datasource": { + "type": "datasource", + "uid": "-- Dashboard --" + }, "panelId": 4, "refId": "A" } @@ -659,6 +838,9 @@ "mode": "continuous-GrYlRd" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -670,6 +852,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 1, "pointSize": 5, @@ -717,7 +900,7 @@ "h": 7, "w": 12, "x": 0, - "y": 21 + "y": 29 }, "id": 7, "maxDataPoints": 50, @@ -725,7 +908,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -734,6 +918,10 @@ }, "targets": [ { + "datasource": { + "type": "datasource", + "uid": "-- Dashboard --" + }, "panelId": 4, "refId": "A" } @@ -742,12 +930,19 @@ "type": "timeseries" }, { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "fieldConfig": { "defaults": { "color": { "mode": "continuous-GrYlRd" }, "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, @@ -759,6 +954,7 @@ "tooltip": false, "viz": false }, + "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 3, "pointSize": 5, @@ -806,7 +1002,7 @@ "h": 7, "w": 12, "x": 12, - "y": 21 + "y": 29 }, "id": 8, "maxDataPoints": 250, @@ -814,7 +1010,8 @@ "legend": { "calcs": [], "displayMode": "list", - "placement": "bottom" + "placement": "bottom", + "showLegend": true }, "tooltip": { "mode": "single", @@ -823,6 +1020,10 @@ }, "targets": [ { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "max": 45, "min": 20, "noise": 0, @@ -832,6 +1033,10 @@ "startValue": 40 }, { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, "hide": false, "max": 20, "min": 1, @@ -845,8 +1050,8 @@ "type": "timeseries" } ], - "refresh": false, - "schemaVersion": 33, + "refresh": "", + "schemaVersion": 38, "tags": [ "gdev", "panel-tests", @@ -863,5 +1068,6 @@ "timezone": "", "title": "Panel Tests - Graph NG - By value color schemes", "uid": "aBXrJ0R7z", - "version": 11 + "version": 4, + "weekStart": "" } diff --git a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts index c84ef08674c..2d580c2986f 100644 --- a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts +++ b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts @@ -229,6 +229,11 @@ export function getGradientRange( 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( opacity: number, theme: GrafanaTheme2, @@ -256,7 +261,9 @@ export function getScaleGradientFn( if (thresholds.mode === ThresholdsMode.Absolute) { const valueStops: ValueStop[] = thresholds.steps.map((step) => [ 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); } else {