Fix freezing when opening a timeseries chart with sparse data and without the X-axis (#22086)

frontend/src/metabase/visualizations/lib/apply_axis.js

@@ -101,6 +101,8 @@ export function applyChartTimeseriesXAxis(
   // compute the data interval
   const dataInterval = xInterval;
   let tickInterval = dataInterval;
+  let tickFormat = () => "";
+  const { timezone } = tickInterval;
 
   if (chart.settings["graph.x_axis.labels_enabled"]) {
     chart.xAxisLabel(
@@ -123,13 +125,10 @@ export function applyChartTimeseriesXAxis(
         ? xValues[xValues.length - 1]
         : null;
 
-    // extract xInterval timezone for updating tickInterval
-    const { timezone } = tickInterval;
-
     // special handling for weeks
     // TODO: are there any other cases where we should do this?
     let tickFormatUnit = dimensionColumn.unit;
-    const tickFormat = timestamp => {
+    tickFormat = timestamp => {
       const { column, ...columnSettings } = chart.settings.column(
         dimensionColumn,
       );
@@ -170,20 +169,20 @@ export function applyChartTimeseriesXAxis(
     } else {
       chart.xAxis().tickPadding(X_AXIS_PADDING);
     }
-
-    // Compute a sane interval to display based on the data granularity, domain, and chart width
-    tickInterval = {
-      ...tickInterval,
-      ...computeTimeseriesTicksInterval(
-        xDomain,
-        tickInterval,
-        chart.width(),
-        tickFormat,
-      ),
-      timezone,
-    };
   }
 
+  // Compute a sane interval to display based on the data granularity, domain, and chart width
+  tickInterval = {
+    ...tickInterval,
+    ...computeTimeseriesTicksInterval(
+      xDomain,
+      tickInterval,
+      chart.width(),
+      tickFormat,
+    ),
+    timezone,
+  };
+
   // pad the domain slightly to prevent clipping
   xDomain = stretchTimeseriesDomain(xDomain, dataInterval);
 

frontend/test/metabase/scenarios/visualizations/reproductions/18776-timeseries-hidden-axis-freeze.cy.spec.js

+import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
+
+const questionDetails = {
+  dataset_query: {
+    type: "native",
+    native: {
+      query: `
+select 101002 as "id", 1 as "rate"
+union all select 103017, 2
+union all select 210002, 3`,
+    },
+    database: SAMPLE_DB_ID,
+  },
+  display: "bar",
+  visualization_settings: {
+    "graph.dimensions": ["id"],
+    "graph.metrics": ["rate"],
+    "graph.x_axis.axis_enabled": false,
+  },
+};
+
+describe("issue 18776", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should not freeze when opening a timeseries chart with sparse data and without the X-axis", () => {
+    visitQuestionAdhoc(questionDetails);
+    cy.findByText("Visualization").should("be.visible");
+  });
+});