fix funnels with zero initial step (#19030)

frontend/src/metabase/visualizations/components/FunnelNormal.jsx

@@ -163,33 +163,38 @@ export default class FunnelNormal extends Component {
             <div className={styles.Subtitle}>&nbsp;</div>
           </div>
         </div>
-        {infos.slice(1).map((info, index) => (
-          <div
-            key={index}
-            className={cx(styles.FunnelStep, "flex flex-column")}
-          >
-            <Ellipsified className={styles.Head}>
-              {formatDimension(rows[index + 1][dimensionIndex])}
-            </Ellipsified>
-            <GraphSection
-              className={cx({ "cursor-pointer": isClickable })}
-              index={index}
-              info={info}
-              infos={infos}
-              hovered={hovered}
-              onHoverChange={onHoverChange}
-              onVisualizationClick={isClickable ? onVisualizationClick : null}
-            />
-            <div className={styles.Infos}>
-              <Ellipsified className={styles.Title}>
-                {formatPercent(info.value / initial.value)}
-              </Ellipsified>
-              <Ellipsified className={styles.Subtitle}>
-                {formatMetric(rows[index + 1][metricIndex])}
+        {infos.slice(1).map((info, index) => {
+          const stepPercentage =
+            initial.value > 0 ? info.value / initial.value : 0;
+
+          return (
+            <div
+              key={index}
+              className={cx(styles.FunnelStep, "flex flex-column")}
+            >
+              <Ellipsified className={styles.Head}>
+                {formatDimension(rows[index + 1][dimensionIndex])}
               </Ellipsified>
+              <GraphSection
+                className={cx({ "cursor-pointer": isClickable })}
+                index={index}
+                info={info}
+                infos={infos}
+                hovered={hovered}
+                onHoverChange={onHoverChange}
+                onVisualizationClick={isClickable ? onVisualizationClick : null}
+              />
+              <div className={styles.Infos}>
+                <Ellipsified className={styles.Title}>
+                  {formatPercent(stepPercentage)}
+                </Ellipsified>
+                <Ellipsified className={styles.Subtitle}>
+                  {formatMetric(rows[index + 1][metricIndex])}
+                </Ellipsified>
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     );
   }

frontend/test/metabase-visual/visualizations/funnel.cy.spec.js

+import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+
+describe("visual tests > visualizations > funnel", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+    cy.server();
+    cy.route("POST", "/api/dataset").as("dataset");
+  });
+
+  it("empty", () => {
+    const testQuery = {
+      type: "native",
+      native: {
+        query:
+          "select 'a' col1, 0 col2 union all\n" +
+          "select 'b', 0 union all\n" +
+          "select 'c', 0",
+      },
+      database: 1,
+    };
+
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "funnel",
+      visualization_settings: {
+        "funnel.type": "funnel",
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.percySnapshot();
+  });
+
+  it("normal", () => {
+    const testQuery = {
+      type: "native",
+      native: {
+        query:
+          "select 'a' step, 1000 users union all\n" +
+          "select 'b', 800 union all\n" +
+          "select 'c', 400 union all\n" +
+          "select 'd', 155 union all\n" +
+          "select 'e', 0",
+      },
+      database: 1,
+    };
+
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "funnel",
+      visualization_settings: {
+        "funnel.type": "funnel",
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.percySnapshot();
+  });
+});