fix usage of invalid value for scatter bubbles (#22866)

* fix usage of invalid value for scatter bubbles

* wait until chart renders

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

@@ -453,7 +453,7 @@ function doScatterChartStuff(chart, datas, index, { yExtent, yExtents }) {
     if (isBubble) {
       const BUBBLE_SCALE_FACTOR_MAX = 64;
       chart
-        .radiusValueAccessor(d => d.value)
+        .radiusValueAccessor(d => d.key[2])
         .r(
           d3.scale
             .sqrt()

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

@@ -37,6 +37,7 @@ describe("visual tests > visualizations > scatter", () => {
       },
     });
 
+    cy.get(".dc-chart");
     cy.percySnapshot();
   });
 
@@ -64,6 +65,34 @@ describe("visual tests > visualizations > scatter", () => {
       },
     });
 
+    cy.get(".dc-chart");
+    cy.percySnapshot();
+  });
+
+  it("with negative values and various bubble sizes", () => {
+    visitQuestionAdhoc({
+      dataset_query: {
+        type: "native",
+        native: {
+          query: `select 1 X, 1 Y, 20 SIZE
+union all select 2, 10, 10
+union all select 3, -9, 6
+union all select 4, 100, 30
+union all select 5, -20, 70`,
+        },
+        database: SAMPLE_DB_ID,
+      },
+      display: "scatter",
+
+      displayIsLocked: true,
+      visualization_settings: {
+        "scatter.bubble": "SIZE",
+        "graph.dimensions": ["X"],
+        "graph.metrics": ["Y"],
+      },
+    });
+
+    cy.get(".dc-chart");
     cy.percySnapshot();
   });
 });