Colors: fix by-value/hex3 & Single color schemes in Gradient mode (#38656) (#38658)

(cherry picked from commit 3c72f1678f)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

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);

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 (

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<SeriesProps, Series> {
   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<SeriesProps, Series> {
       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);