TimeSeries: Add per-axis grid visibility toggle (#38502)

* Allow grid lines visibility control to XYChart and TimeSeries

* Move grid lines config to field config (axis)

* Fix merge

* Auto grid mode

* Fix ts

* Align naming

* Update packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* remove 'grid' from props diff array since field.config.custom.* is handled by structureRev diffing

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

public/app/plugins/panel/barchart/utils.ts

@@ -99,7 +99,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
     placement: vizOrientation.xOri === 0 ? AxisPlacement.Bottom : AxisPlacement.Left,
     splits: config.xSplits,
     values: config.xValues,
-    grid: false,
+    grid: { show: false },
     ticks: false,
     gap: 15,
     theme,
@@ -174,6 +174,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
         placement,
         formatValue: (v) => formattedValueToString(field.display!(v)),
         theme,
+        grid: { show: customConfig.axisGridShow },
       });
     }
 

public/app/plugins/panel/state-timeline/utils.ts

@@ -167,6 +167,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
     placement: AxisPlacement.Bottom,
     timeZone,
     theme,
+    grid: { show: true },
   });
 
   builder.addAxis({
@@ -175,7 +176,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
     placement: AxisPlacement.Left,
     splits: coreConfig.ySplits,
     values: coreConfig.yValues,
-    grid: false,
+    grid: { show: false },
     ticks: false,
     gap: 16,
     theme,

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -40,6 +40,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
   }
 
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
+
   return (
     <TimeSeries
       frames={frames}

public/app/plugins/panel/timeseries/config.ts

@@ -36,6 +36,7 @@ export const defaultGraphConfig: GraphFieldConfig = {
     mode: StackingMode.None,
     group: 'A',
   },
+  axisGridShow: true,
 };
 
 const categoryStyles = ['Graph styles'];