Revalidate x-axis scale when graph.dimensions change (#43254)

e2e/test/scenarios/visualizations-charts/reproductions/25156-invalid-x-axis-series.cy.spec.js

 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
-import { restore } from "e2e/support/helpers";
+import { createQuestion, echartsContainer, restore } from "e2e/support/helpers";
 
 const { REVIEWS, REVIEWS_ID } = SAMPLE_DATABASE;
 
@@ -21,17 +21,16 @@ const questionDetails = {
   },
 };
 
-describe.skip("issue 25156", () => {
+describe("issue 25156", () => {
   beforeEach(() => {
     restore();
     cy.signInAsAdmin();
   });
 
   it("should handle invalid x-axis scale (metabase#25156)", () => {
-    cy.createQuestion(questionDetails, { visitQuestion: true });
+    createQuestion(questionDetails, { visitQuestion: true });
 
-    cy.get(".bar").should("have.length.at.least", 20);
-    cy.get(".x.axis .tick")
+    echartsContainer()
       .should("contain", "2022")
       .and("contain", "2023")
       .and("contain", "2023")

frontend/src/metabase/static-viz/components/ComboChart/stories-data/null-category-value-formatting.json

@@ -20,7 +20,7 @@
         "graph.dimensions": ["X"],
         "graph.series_order_dimension": null,
         "graph.series_order": null,
-        "graph.x_axis.scale": "category",
+        "graph.x_axis.scale": "ordinal",
         "graph.metrics": ["Y"]
       },
       "collection_preview": true,

frontend/src/metabase/visualizations/lib/settings/graph.js

@@ -16,6 +16,7 @@ import { getOptionFromColumn } from "metabase/visualizations/lib/settings/utils"
 import { dimensionIsTimeseries } from "metabase/visualizations/lib/timeseries";
 import { columnsAreValid, MAX_SERIES } from "metabase/visualizations/lib/utils";
 import {
+  getAvailableXAxisScales,
   getDefaultIsHistogram,
   getDefaultStackingValue,
   getDefaultXAxisScale,
@@ -41,7 +42,7 @@ import {
   STACKABLE_DISPLAY_TYPES,
   getDefaultMetrics,
 } from "metabase/visualizations/shared/settings/cartesian-chart";
-import { isDate, isNumeric } from "metabase-lib/v1/types/utils/isa";
+import { isNumeric } from "metabase-lib/v1/types/utils/isa";
 
 export const getSeriesDisplays = (transformedSeries, settings) => {
   return transformedSeries.map(single => settings.series(single).display);
@@ -399,28 +400,9 @@ export const GRAPH_AXIS_SETTINGS = {
     ],
     isValid: isXAxisScaleValid,
     getDefault: (series, vizSettings) => getDefaultXAxisScale(vizSettings),
-    getProps: ([{ data }], vizSettings) => {
-      const dimensionColumn = data.cols.find(
-        col => col != null && col.name === vizSettings["graph.dimensions"][0],
-      );
-      const options = [];
-      if (vizSettings["graph.x_axis._is_timeseries"]) {
-        options.push({ name: t`Timeseries`, value: "timeseries" });
-      }
-      if (vizSettings["graph.x_axis._is_numeric"]) {
-        options.push({ name: t`Linear`, value: "linear" });
-        // For relative date units such as day of week we do not want to show log, pow, histogram scales
-        if (!isDate(dimensionColumn)) {
-          if (!vizSettings["graph.x_axis._is_histogram"]) {
-            options.push({ name: t`Power`, value: "pow" });
-            options.push({ name: t`Log`, value: "log" });
-          }
-          options.push({ name: t`Histogram`, value: "histogram" });
-        }
-      }
-      options.push({ name: t`Ordinal`, value: "ordinal" });
-      return { options };
-    },
+    getProps: (series, vizSettings) => ({
+      options: getAvailableXAxisScales(series, vizSettings),
+    }),
   },
   "graph.y_axis.scale": {
     section: t`Axes`,

frontend/src/metabase/visualizations/shared/settings/cartesian-chart.ts

@@ -13,6 +13,7 @@ import {
 import type { ComputedVisualizationSettings } from "metabase/visualizations/types";
 import {
   isAny,
+  isDate,
   isDimension,
   isMetric,
   isNumeric,
@@ -241,6 +242,38 @@ export const getDefaultLegendIsReversed = (
 export const getDefaultShowDataLabels = () => false;
 export const getDefaultDataLabelsFrequency = () => "fit";
 
+export const getAvailableXAxisScales = (
+  [{ data }]: RawSeries,
+  settings: ComputedVisualizationSettings,
+) => {
+  const options = [];
+
+  const dimensionColumn = data.cols.find(
+    col => col != null && col.name === settings["graph.dimensions"]?.[0],
+  );
+
+  if (settings["graph.x_axis._is_timeseries"]) {
+    options.push({ name: t`Timeseries`, value: "timeseries" });
+  }
+
+  if (settings["graph.x_axis._is_numeric"]) {
+    options.push({ name: t`Linear`, value: "linear" });
+
+    // For relative date units such as day of week we do not want to show log, pow, histogram scales
+    if (!isDate(dimensionColumn)) {
+      if (!settings["graph.x_axis._is_histogram"]) {
+        options.push({ name: t`Power`, value: "pow" });
+        options.push({ name: t`Log`, value: "log" });
+      }
+      options.push({ name: t`Histogram`, value: "histogram" });
+    }
+  }
+
+  options.push({ name: t`Ordinal`, value: "ordinal" });
+
+  return options;
+};
+
 const WATERFALL_UNSUPPORTED_X_AXIS_SCALES = ["pow", "log"];
 export const isXAxisScaleValid = (
   series: RawSeries,
@@ -248,10 +281,17 @@ export const isXAxisScaleValid = (
 ) => {
   const isWaterfall = series[0].card.display === "waterfall";
   const xAxisScale = settings["graph.x_axis.scale"];
+  const options = getAvailableXAxisScales(series, settings).map(
+    option => option.value,
+  );
+
+  if (xAxisScale && !options.includes(xAxisScale)) {
+    return false;
+  }
+
   return (
     !isWaterfall ||
-    xAxisScale == null ||
-    !WATERFALL_UNSUPPORTED_X_AXIS_SCALES.includes(xAxisScale)
+    (xAxisScale && !WATERFALL_UNSUPPORTED_X_AXIS_SCALES.includes(xAxisScale))
   );
 };