GraphNG: Hide grid for right-y axis if left x-axis exists (#30195)

* GraphNG: Hide grid for right-y axis

* Correct fix so it works if you just a right x-axis

* Removed import

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

@@ -4,6 +4,7 @@ import { UPlotConfigBuilder } from './UPlotConfigBuilder';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { expect } from '../../../../../../public/test/lib/common';
 import { expect } from '../../../../../../public/test/lib/common';
 import { FillGradientMode, AxisPlacement, DrawStyle, PointVisibility, ScaleDistribution } from '../config';
 import { FillGradientMode, AxisPlacement, DrawStyle, PointVisibility, ScaleDistribution } from '../config';
+import darkTheme from '../../../themes/dark';
 
 
 describe('UPlotConfigBuilder', () => {
 describe('UPlotConfigBuilder', () => {
   describe('default config', () => {
   describe('default config', () => {
@@ -34,17 +35,21 @@ describe('UPlotConfigBuilder', () => {
       `);
       `);
     });
     });
   });
   });
+
   describe('scales config', () => {
   describe('scales config', () => {
     it('allows scales configuration', () => {
     it('allows scales configuration', () => {
       const builder = new UPlotConfigBuilder();
       const builder = new UPlotConfigBuilder();
+
       builder.addScale({
       builder.addScale({
         scaleKey: 'scale-x',
         scaleKey: 'scale-x',
         isTime: true,
         isTime: true,
       });
       });
+
       builder.addScale({
       builder.addScale({
         scaleKey: 'scale-y',
         scaleKey: 'scale-y',
         isTime: false,
         isTime: false,
       });
       });
+
       expect(builder.getConfig()).toMatchInlineSnapshot(`
       expect(builder.getConfig()).toMatchInlineSnapshot(`
         Object {
         Object {
           "axes": Array [],
           "axes": Array [],
@@ -85,10 +90,12 @@ describe('UPlotConfigBuilder', () => {
 
 
     it('prevents duplicate scales', () => {
     it('prevents duplicate scales', () => {
       const builder = new UPlotConfigBuilder();
       const builder = new UPlotConfigBuilder();
+
       builder.addScale({
       builder.addScale({
         scaleKey: 'scale-x',
         scaleKey: 'scale-x',
         isTime: true,
         isTime: true,
       });
       });
+
       builder.addScale({
       builder.addScale({
         scaleKey: 'scale-x',
         scaleKey: 'scale-x',
         isTime: false,
         isTime: false,
@@ -229,6 +236,7 @@ describe('UPlotConfigBuilder', () => {
 
 
   it('allows axes configuration', () => {
   it('allows axes configuration', () => {
     const builder = new UPlotConfigBuilder();
     const builder = new UPlotConfigBuilder();
+
     builder.addAxis({
     builder.addAxis({
       scaleKey: 'scale-x',
       scaleKey: 'scale-x',
       label: 'test label',
       label: 'test label',
@@ -294,19 +302,22 @@ describe('UPlotConfigBuilder', () => {
 
 
   it('Handles auto axis placement', () => {
   it('Handles auto axis placement', () => {
     const builder = new UPlotConfigBuilder();
     const builder = new UPlotConfigBuilder();
+
     builder.addAxis({
     builder.addAxis({
       scaleKey: 'y1',
       scaleKey: 'y1',
       placement: AxisPlacement.Auto,
       placement: AxisPlacement.Auto,
-      theme: { isDark: true, palette: { gray25: '#ffffff' } } as GrafanaTheme,
+      theme: darkTheme,
     });
     });
+
     builder.addAxis({
     builder.addAxis({
       scaleKey: 'y2',
       scaleKey: 'y2',
       placement: AxisPlacement.Auto,
       placement: AxisPlacement.Auto,
-      theme: { isDark: true, palette: { gray25: '#ffffff' } } as GrafanaTheme,
+      theme: darkTheme,
     });
     });
 
 
     expect(builder.getAxisPlacement('y1')).toBe(AxisPlacement.Left);
     expect(builder.getAxisPlacement('y1')).toBe(AxisPlacement.Left);
     expect(builder.getAxisPlacement('y2')).toBe(AxisPlacement.Right);
     expect(builder.getAxisPlacement('y2')).toBe(AxisPlacement.Right);
+    expect(builder.getConfig().axes![1].grid!.show).toBe(false);
   });
   });
 
 
   it('When fillColor is not set fill', () => {
   it('When fillColor is not set fill', () => {

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

@@ -11,8 +11,8 @@ export class UPlotConfigBuilder {
   private axes: Record<string, UPlotAxisBuilder> = {};
   private axes: Record<string, UPlotAxisBuilder> = {};
   private scales: UPlotScaleBuilder[] = [];
   private scales: UPlotScaleBuilder[] = [];
   private cursor: Cursor | undefined;
   private cursor: Cursor | undefined;
-
-  hasLeftAxis = false;
+  private hasLeftAxis = false;
+  private hasBottomAxis = false;
 
 
   addAxis(props: AxisProps) {
   addAxis(props: AxisProps) {
     props.placement = props.placement ?? AxisPlacement.Auto;
     props.placement = props.placement ?? AxisPlacement.Auto;
@@ -27,8 +27,13 @@ export class UPlotConfigBuilder {
       props.placement = this.hasLeftAxis ? AxisPlacement.Right : AxisPlacement.Left;
       props.placement = this.hasLeftAxis ? AxisPlacement.Right : AxisPlacement.Left;
     }
     }
 
 
-    if (props.placement === AxisPlacement.Left) {
-      this.hasLeftAxis = true;
+    switch (props.placement) {
+      case AxisPlacement.Left:
+        this.hasLeftAxis = true;
+        break;
+      case AxisPlacement.Bottom:
+        this.hasBottomAxis = true;
+        break;
     }
     }
 
 
     if (props.placement === AxisPlacement.Hidden) {
     if (props.placement === AxisPlacement.Hidden) {
@@ -64,7 +69,7 @@ export class UPlotConfigBuilder {
 
 
   getConfig() {
   getConfig() {
     const config: PlotSeriesConfig = { series: [{}] };
     const config: PlotSeriesConfig = { series: [{}] };
-    config.axes = Object.values(this.axes).map(a => a.getConfig());
+    config.axes = this.ensureNonOverlappingAxes(Object.values(this.axes)).map(a => a.getConfig());
     config.series = [...config.series, ...this.series.map(s => s.getConfig())];
     config.series = [...config.series, ...this.series.map(s => s.getConfig())];
     config.scales = this.scales.reduce((acc, s) => {
     config.scales = this.scales.reduce((acc, s) => {
       return { ...acc, ...s.getConfig() };
       return { ...acc, ...s.getConfig() };
@@ -94,4 +99,17 @@ export class UPlotConfigBuilder {
 
 
     return config;
     return config;
   }
   }
+
+  private ensureNonOverlappingAxes(axes: UPlotAxisBuilder[]): UPlotAxisBuilder[] {
+    for (const axis of axes) {
+      if (axis.props.placement === AxisPlacement.Right && this.hasLeftAxis) {
+        axis.props.grid = false;
+      }
+      if (axis.props.placement === AxisPlacement.Top && this.hasBottomAxis) {
+        axis.props.grid = false;
+      }
+    }
+
+    return axes;
+  }
 }
 }