TimeSeries: Add option to match axis color to series color (#51437)

packages/grafana-schema/src/schema/mudball.cue

@@ -5,6 +5,9 @@ package schema
 // TODO docs
 AxisPlacement:      "auto" | "top" | "right" | "bottom" | "left" | "hidden" @cuetsy(kind="enum")
 
+// TODO docs
+AxisColorMode:      "text" | "series"                                       @cuetsy(kind="enum")
+
 // TODO docs
 VisibilityMode:     "auto" | "never" | "always"                             @cuetsy(kind="enum")
 
@@ -85,6 +88,7 @@ ScaleDistributionConfig: {
 // TODO docs
 AxisConfig: {
 	axisPlacement?:     AxisPlacement
+	axisColorMode?:     AxisColorMode
 	axisLabel?:         string
 	axisWidth?:         number
 	axisSoftMin?:       number

packages/grafana-schema/src/schema/mudball.gen.ts

@@ -15,6 +15,11 @@ export enum AxisPlacement {
   Top = 'top',
 }
 
+export enum AxisColorMode {
+  Series = 'series',
+  Text = 'text',
+}
+
 export enum VisibilityMode {
   Always = 'always',
   Auto = 'auto',
@@ -118,6 +123,7 @@ export interface ScaleDistributionConfig {
 }
 
 export interface AxisConfig {
+  axisColorMode?: AxisColorMode;
   axisGridShow?: boolean;
   axisLabel?: string;
   axisPlacement?: AxisPlacement;

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -26,10 +26,13 @@ import {
   ScaleOrientation,
   StackingMode,
   GraphTransform,
+  AxisColorMode,
+  GraphGradientMode,
 } from '@grafana/schema';
 
 import { buildScaleKey } from '../GraphNG/utils';
 import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
+import { getScaleGradientFn } from '../uPlot/config/gradientFills';
 import { getStackingGroups, preparePlotData2 } from '../uPlot/utils';
 
 const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
@@ -192,6 +195,36 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
     }
 
     if (customConfig.axisPlacement !== AxisPlacement.Hidden) {
+      let axisColor: uPlot.Axis.Stroke | undefined;
+
+      if (customConfig.axisColorMode === AxisColorMode.Series) {
+        if (
+          colorMode.isByValue &&
+          field.config.custom?.gradientMode === GraphGradientMode.Scheme &&
+          colorMode.id === FieldColorModeId.Thresholds
+        ) {
+          axisColor = getScaleGradientFn(1, theme, colorMode, field.config.thresholds);
+        } else {
+          axisColor = seriesColor;
+        }
+      }
+
+      let axisColorOpts = {};
+
+      if (axisColor) {
+        axisColorOpts = {
+          border: {
+            show: true,
+            width: 1,
+            stroke: axisColor,
+          },
+          ticks: {
+            stroke: axisColor,
+          },
+          color: customConfig.axisColorMode === AxisColorMode.Series ? axisColor : undefined,
+        };
+      }
+
       builder.addAxis(
         tweakAxis(
           {
@@ -203,6 +236,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
             theme,
             grid: { show: customConfig.axisGridShow },
             show: customConfig.hideFrom?.viz === false,
+            ...axisColorOpts,
           },
           field
         )

packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts

@@ -27,6 +27,8 @@ export interface AxisProps {
   values?: Axis.Values;
   isTime?: boolean;
   timeZone?: TimeZone;
+  color?: uPlot.Axis.Stroke;
+  border?: uPlot.Axis.Border;
 }
 
 export const UPLOT_AXIS_FONT_SIZE = 12;
@@ -106,6 +108,8 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       theme,
       tickLabelRotation,
       size,
+      color,
+      border,
     } = this.props;
 
     const font = `${UPLOT_AXIS_FONT_SIZE}px ${theme.typography.fontFamily}`;
@@ -119,7 +123,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
     let config: Axis = {
       scale: scaleKey,
       show,
-      stroke: theme.colors.text.primary,
+      stroke: color ?? theme.colors.text.primary,
       side: getUPlotSideFromAxis(placement),
       font,
       size:
@@ -156,6 +160,10 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       filter,
     };
 
+    if (border != null) {
+      config.border = border;
+    }
+
     if (label != null && label.length > 0) {
       config.label = label;
       config.labelSize = UPLOT_AXIS_FONT_SIZE + labelPad;

packages/grafana-ui/src/options/builder/axis.tsx

@@ -7,7 +7,7 @@ import {
   SelectableValue,
   StandardEditorProps,
 } from '@grafana/data';
-import { AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
+import { AxisColorMode, AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
 
 import { graphFieldOptions, Select, HorizontalGroup, RadioButtonGroup } from '../../index';
 
@@ -81,6 +81,18 @@ export function addAxisConfig(
           { value: false, label: 'Off' },
         ],
       },
+    })
+    .addRadio({
+      path: 'axisColorMode',
+      name: 'Color',
+      category,
+      defaultValue: AxisColorMode.Text,
+      settings: {
+        options: [
+          { value: AxisColorMode.Text, label: 'Text' },
+          { value: AxisColorMode.Series, label: 'Series' },
+        ],
+      },
     });
 
   if (!hideScale) {