fix incorrect value is used for the bubble size domain (#24099)

* fix incorrect value is used for the bubble size domain

* rename

* fix typo

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

@@ -444,20 +444,29 @@ function applyChartLineBarSettings(
   }
 }
 
-// TODO - give this a good name when I figure out what it does
-function doScatterChartStuff(chart, datas, index, { yExtent, yExtents }) {
+const BUBBLE_SIZE_INDEX = 2;
+
+const getBubbleSizeMaxDomain = (datas, seriesIndex) => {
+  const seriesData = datas[seriesIndex];
+  const sizeValues = seriesData.map(data => data[BUBBLE_SIZE_INDEX]);
+  return d3.max(sizeValues);
+};
+
+function configureScatterChart(chart, datas, index) {
   chart.keyAccessor(d => d.key[0]).valueAccessor(d => d.key[1]);
 
   if (chart.radiusValueAccessor) {
-    const isBubble = datas[index][0].length > 2;
-    if (isBubble) {
+    const hasBubbleRadiusValues = datas[index][0].length > BUBBLE_SIZE_INDEX;
+    const bubbleSizeMaxDomain = getBubbleSizeMaxDomain(datas, index);
+
+    if (hasBubbleRadiusValues) {
       const BUBBLE_SCALE_FACTOR_MAX = 64;
       chart
         .radiusValueAccessor(d => d.key[2])
         .r(
           d3.scale
             .sqrt()
-            .domain([0, yExtent[1] * BUBBLE_SCALE_FACTOR_MAX])
+            .domain([0, bubbleSizeMaxDomain * BUBBLE_SCALE_FACTOR_MAX])
             .range([0, 1]),
         );
     } else {
@@ -576,7 +585,7 @@ function getCharts(
       .useRightYAxis(yAxisSplit.length > 1 && yAxisSplit[1].includes(index));
 
     if (chartType === "scatter") {
-      doScatterChartStuff(chart, datas, index, yAxisProps);
+      configureScatterChart(chart, datas, index, yAxisProps);
     }
 
     if (chart.defined) {