diff --git a/packages/grafana-data/src/themes/colorManipulator.test.ts b/packages/grafana-data/src/themes/colorManipulator.test.ts index 16a25e78a68..f4ca0652065 100644 --- a/packages/grafana-data/src/themes/colorManipulator.test.ts +++ b/packages/grafana-data/src/themes/colorManipulator.test.ts @@ -279,10 +279,18 @@ describe('utils/colorManipulator', () => { expect(alpha('hsla(0, 100%, 50%, 0.2)', 0.5)).toEqual('hsla(0, 100%, 50%, 0.5)'); }); - it('converts an rgb hex color with the alpha value provided', () => { + it('converts an #rrggbb hex color with the alpha value provided', () => { expect(alpha('#FFFFFF', 0)).toEqual('#FFFFFF00'); }); + it('converts an #rgb color with the alpha value provided', () => { + expect(alpha('#fff', 0.5)).toEqual('#ffffff80'); + }); + + it('converts an #rgba color with the alpha value provided', () => { + expect(alpha('#ffff', 0.5)).toEqual('#ffffff80'); + }); + it('throw on invalid colors', () => { expect(() => { alpha('white', 0.4); diff --git a/packages/grafana-data/src/themes/colorManipulator.ts b/packages/grafana-data/src/themes/colorManipulator.ts index af7a22d3e80..1626d573e17 100644 --- a/packages/grafana-data/src/themes/colorManipulator.ts +++ b/packages/grafana-data/src/themes/colorManipulator.ts @@ -261,10 +261,16 @@ export function alpha(color: string, value: number) { value = clamp(value); - // hex 6, hex 8 (w/alpha) + // hex 3, hex 4 (w/alpha), hex 6, hex 8 (w/alpha) if (color[0] === '#') { if (color.length === 9) { color = color.substring(0, 7); + } else if (color.length <= 5) { + let c = '#'; + for (let i = 1; i < 4; i++) { + c += color[i] + color[i]; + } + color = c; } return ( diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts index b7128aedacf..fea3256a6a2 100755 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts @@ -3,6 +3,7 @@ import { DataFrameFieldIndex, FALLBACK_COLOR, FieldColorMode, + FieldColorModeId, GrafanaTheme2, ThresholdsConfig, } from '@grafana/data'; @@ -139,7 +140,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { private getLineColor(): Series.Stroke { const { lineColor, gradientMode, colorMode, thresholds, theme } = this.props; - if (gradientMode === GraphGradientMode.Scheme) { + if (gradientMode === GraphGradientMode.Scheme && colorMode?.id !== FieldColorModeId.Fixed) { return getScaleGradientFn(1, theme, colorMode, thresholds); } @@ -162,7 +163,10 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { case GraphGradientMode.Hue: return getHueGradientFn((fillColor ?? lineColor)!, opacityPercent, theme); case GraphGradientMode.Scheme: - return getScaleGradientFn(opacityPercent, theme, colorMode, thresholds); + if (colorMode?.id !== FieldColorModeId.Fixed) { + return getScaleGradientFn(opacityPercent, theme, colorMode, thresholds); + } + // intentional fall-through to handle Scheme with Fixed color default: if (opacityPercent > 0) { return colorManipulator.alpha(lineColor ?? '', opacityPercent);