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

Visualizations: Hue gradient mode now applies to the line color (#80805)

Browse Source
This commit is contained in:
Torkel Ödegaard 2024-01-18 18:02:56 +01:00 committed by GitHub
parent f97cea5522
commit 2cdf73f584
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
View File

@ -172,6 +172,10 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
return getScaleGradientFn(1, theme, colorMode, thresholds, hardMin, hardMax, softMin, softMax); return getScaleGradientFn(1, theme, colorMode, thresholds, hardMin, hardMax, softMin, softMax);
} }
if (gradientMode === GraphGradientMode.Hue) {
return getHueGradientFn(lineColor ?? FALLBACK_COLOR, 1, theme);
}
return lineColor ?? FALLBACK_COLOR; return lineColor ?? FALLBACK_COLOR;
} }

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

@ -68,8 +68,8 @@ export function getHueGradientFn(
ctx ctx
); );
const color1 = tinycolor(color).spin(-15); const color1 = tinycolor(color).spin(-25).darken(5);
const color2 = tinycolor(color).spin(15); const color2 = tinycolor(color).saturate(20).spin(20).brighten(10);
if (theme.isDark) { if (theme.isDark) {
gradient.addColorStop(0, color2.lighten(10).setAlpha(opacity).toString()); gradient.addColorStop(0, color2.lighten(10).setAlpha(opacity).toString());

18
packages/grafana-ui/src/graveyard/GraphNG/__snapshots__/utils.test.ts.snap
View File

@ -156,17 +156,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },
@ -202,17 +202,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },
@ -225,17 +225,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },

18
public/app/core/components/GraphNG/__snapshots__/utils.test.ts.snap
View File

@ -156,17 +156,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },
@ -202,17 +202,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },
@ -225,17 +225,17 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
"fill": [Function], "fill": [Function],
"paths": [Function], "paths": [Function],
"points": { "points": {
"fill": "#ff0000", "fill": [Function],
"filter": [Function], "filter": [Function],
"show": true, "show": true,
"size": undefined, "size": undefined,
"stroke": "#ff0000", "stroke": [Function],
}, },
"pxAlign": undefined, "pxAlign": undefined,
"scale": "__fixed/na-na/na-na/auto/linear/na/number", "scale": "__fixed/na-na/na-na/auto/linear/na/number",
"show": true, "show": true,
"spanGaps": false, "spanGaps": false,
"stroke": "#ff0000", "stroke": [Function],
"value": [Function], "value": [Function],
"width": 2, "width": 2,
}, },