From ddde7f10563e0997cf7dcf7e848f0c826da5a987 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Fri, 10 May 2024 17:59:03 -0600
Subject: [PATCH] XYChart: Use global range for mapped size field (#87661)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 .../app/plugins/panel/xychart/v2/scatter.ts   | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/xychart/v2/scatter.ts b/public/app/plugins/panel/xychart/v2/scatter.ts
index c908eec8a42..301fdbb8cab 100644
--- a/public/app/plugins/panel/xychart/v2/scatter.ts
+++ b/public/app/plugins/panel/xychart/v2/scatter.ts
@@ -434,6 +434,8 @@ export function prepData(xySeries: XYSeries[]): FacetedData {
   //   return [null];
   // }
 
+  const { size: sizeRange } = getGlobalRanges(xySeries);
+
   return [
     null,
     ...xySeries.map((s, idx) => {
@@ -450,12 +452,9 @@ export function prepData(xySeries: XYSeries[]): FacetedData {
         // use quadratic size scaling in byValue modes
         let pxRange = maxPx - minPx;
 
-        // todo: add shared, local, or key-group min/max option?
-        // todo: better min/max with ignoring non-finite values
-        // todo: allow this to come from fieldConfig min/max ? or field.state.min/max (shared)
         let vals = s.size.field.values;
-        let minVal = Math.min(...vals);
-        let maxVal = Math.max(...vals);
+        let minVal = sizeRange.min;
+        let maxVal = sizeRange.max;
         let valRange = maxVal - minVal;
 
         diams = Array(len);
@@ -474,9 +473,48 @@ export function prepData(xySeries: XYSeries[]): FacetedData {
       return [
         s.x.field.values, // X
         s.y.field.values, // Y
-        diams, // TODO: fails for by value
+        diams,
         Array(len).fill(s.color.fixed!), // TODO: fails for by value
       ];
     }),
   ];
 }
+
+const getGlobalRanges = (xySeries: XYSeries[]) => {
+  const ranges = {
+    size: {
+      min: Infinity,
+      max: -Infinity,
+    },
+    color: {
+      min: Infinity,
+      max: -Infinity,
+    },
+  };
+
+  xySeries.forEach((series) => {
+    [series.size, series.color].forEach((facet, fi) => {
+      if (facet.field != null) {
+        let range = fi === 0 ? ranges.size : ranges.color;
+
+        const vals = facet.field.values;
+
+        for (let i = 0; i < vals.length; i++) {
+          const v = vals[i];
+
+          if (v != null) {
+            if (v < range.min) {
+              range.min = v;
+            }
+
+            if (v > range.max) {
+              range.max = v;
+            }
+          }
+        }
+      }
+    });
+  });
+
+  return ranges;
+};