From f1a3d861291e41f010806cc16229df9e5924615a Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Wed, 5 Mar 2025 18:12:54 -0500
Subject: [PATCH] Intelligently clamp the Y axis max for percentages

---
 .../widgets/timeSeriesWidget/settings.tsx     |  1 +
 .../timeSeriesWidgetVisualization.tsx         | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/settings.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/settings.tsx
index 7fd046a19e49b8..7b1e90c43d4ef5 100644
--- a/static/app/views/dashboards/widgets/timeSeriesWidget/settings.tsx
+++ b/static/app/views/dashboards/widgets/timeSeriesWidget/settings.tsx
@@ -5,6 +5,7 @@ import {
   SizeUnit,
 } from 'sentry/utils/discover/fields';
 
+export const Y_AXIS_INTEGER_TOLERANCE = 0.000001;
 export const FALLBACK_TYPE = 'number';
 export const FALLBACK_UNIT_FOR_FIELD_TYPE = {
   number: null,
diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
index 920c881a9e0457..c256aa1c1d590d 100644
--- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
+++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
@@ -41,7 +41,11 @@ import {Area} from './plottables/area';
 import {Bars} from './plottables/bars';
 import {Line} from './plottables/line';
 import {ReleaseSeries} from './releaseSeries';
-import {FALLBACK_TYPE, FALLBACK_UNIT_FOR_FIELD_TYPE} from './settings';
+import {
+  FALLBACK_TYPE,
+  FALLBACK_UNIT_FOR_FIELD_TYPE,
+  Y_AXIS_INTEGER_TOLERANCE,
+} from './settings';
 
 type VisualizationType = 'area' | 'line' | 'bar';
 
@@ -369,6 +373,25 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
             show: false,
           },
         },
+        max: value => {
+          // Handle a very specific edge case with percentage formatting.
+          // Percentage charts values usually range from 0 to 1, but JavaScript
+          // floating math is such that the maximum value at any point in the
+          // chart might be something like 1.0000000002. This is not enough to
+          // be visible or significant, but _is_ enough for ECharts to add a
+          // whole additional axis tick. This makes charts looks stupid, because
+          // the Y axis will be from 0% to 120%, instead of from 0% to 100%. To
+          // prevent this case, if the maximum value is _just slightly above 1_,
+          // force it to be exactly 1. Only for percnetages!
+          if (
+            yAxisFieldType === 'percentage' &&
+            value.max - 1 < Y_AXIS_INTEGER_TOLERANCE
+          ) {
+            return 1;
+          }
+
+          return value.max;
+        },
       }}
       {...chartZoomProps}
       {...(props.onZoom ? {onDataZoom: props.onZoom} : {})}