TimeSeries/BarChart/XYChart: Allow hiding x axis (#44107)

* TimeSeries/BarChart/XYChart: Allow hiding x axis

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

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>

* Migrations

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>

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

@@ -131,10 +131,18 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptionsEX> = ({
     direction: vizOrientation.xDir,
   });
 
+  const xFieldAxisPlacement =
+    frame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden
+      ? vizOrientation.xOri === ScaleOrientation.Horizontal
+        ? AxisPlacement.Bottom
+        : AxisPlacement.Left
+      : AxisPlacement.Hidden;
+  const xFieldAxisShow = frame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden;
+
   builder.addAxis({
     scaleKey: 'x',
     isTime: false,
-    placement: vizOrientation.xOri === 0 ? AxisPlacement.Bottom : AxisPlacement.Left,
+    placement: xFieldAxisPlacement,
     label: frame.fields[0].config.custom?.axisLabel,
     splits: config.xSplits,
     values: config.xValues,
@@ -143,6 +151,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptionsEX> = ({
     gap: 15,
     tickLabelRotation: xTickLabelRotation * -1,
     theme,
+    show: xFieldAxisShow,
   });
 
   let seriesIndex = 0;

public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap

@@ -566,3 +566,28 @@ Object {
   },
 }
 `;
+
+exports[`Graph Migrations x axis should hide x axis 1`] = `
+Object {
+  "defaults": Object {
+    "custom": Object {
+      "drawStyle": "points",
+      "spanNulls": false,
+    },
+  },
+  "overrides": Array [
+    Object {
+      "matcher": Object {
+        "id": "byType",
+        "options": "time",
+      },
+      "properties": Array [
+        Object {
+          "id": "custom.axisPlacement",
+          "value": "hidden",
+        },
+      ],
+    },
+  ],
+}
+`;

public/app/plugins/panel/timeseries/migrations.test.ts

@@ -390,6 +390,22 @@ describe('Graph Migrations', () => {
       expect(panel4.options.tooltip.sort).toBe(SortOrder.None);
     });
   });
+
+  describe('x axis', () => {
+    test('should hide x axis', () => {
+      const old: any = {
+        angular: {
+          xaxis: {
+            show: false,
+            mode: 'time',
+          },
+        },
+      };
+      const panel = {} as PanelModel;
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
+      expect(panel.fieldConfig).toMatchSnapshot();
+    });
+  });
 });
 
 const customColor = {

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

@@ -7,6 +7,7 @@ import {
   FieldConfigSource,
   FieldMatcherID,
   fieldReducers,
+  FieldType,
   NullValueMode,
   PanelTypeChangedHandler,
   Threshold,
@@ -434,6 +435,20 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
     };
   }
 
+  if (angular.xaxis && angular.xaxis.show === false && angular.xaxis.mode === 'time') {
+    overrides.push({
+      matcher: {
+        id: FieldMatcherID.byType,
+        options: FieldType.time,
+      },
+      properties: [
+        {
+          id: 'custom.axisPlacement',
+          value: AxisPlacement.Hidden,
+        },
+      ],
+    });
+  }
   return {
     fieldConfig: {
       defaults: omitBy(y1, isNil),

public/app/plugins/panel/xychart/scatter.ts

@@ -548,7 +548,9 @@ const prepConfig = (
 
   builder.addAxis({
     scaleKey: 'x',
-    placement: AxisPlacement.Bottom,
+    placement:
+      xField.config.custom?.axisPlacement !== AxisPlacement.Hidden ? AxisPlacement.Bottom : AxisPlacement.Hidden,
+    show: xField.config.custom?.axisPlacement !== AxisPlacement.Hidden,
     theme,
     label: xField.config.custom.axisLabel,
   });
@@ -571,12 +573,15 @@ const prepConfig = (
       range: (u, min, max) => [min, max],
     });
 
-    builder.addAxis({
-      scaleKey,
-      theme,
-      label: field.config.custom.axisLabel,
-      values: (u, splits) => splits.map((s) => field.display!(s).text),
-    });
+    if (field.config.custom?.axisPlacement !== AxisPlacement.Hidden) {
+      builder.addAxis({
+        scaleKey,
+        theme,
+        placement: field.config.custom?.axisPlacement,
+        label: field.config.custom.axisLabel,
+        values: (u, splits) => splits.map((s) => field.display!(s).text),
+      });
+    }
 
     builder.addSeries({
       facets: [