ref(insights): Split out getAxisMaxForPercentageSeries

static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.spec.tsx

@@ -0,0 +1,46 @@
+import type {Series} from 'sentry/types/echarts';
+import {getAxisMaxForPercentageSeries} from 'sentry/views/insights/common/utils/getAxisMaxForPercentageSeries';
+
+describe('getAxisMaxForPercentageSeries', function () {
+  it('Returns nearest significant digit for small series', function () {
+    expect(getAxisMaxForPercentageSeries([HTTP_5XX_SERIES])).toBeCloseTo(0.0001);
+  });
+
+  it('Returns 1 for larger series', function () {
+    expect(getAxisMaxForPercentageSeries([HTTP_2XX_SERIES])).toBeCloseTo(1);
+  });
+
+  it('Takes all series into account', function () {
+    expect(getAxisMaxForPercentageSeries([HTTP_2XX_SERIES, HTTP_5XX_SERIES])).toBeCloseTo(
+      1
+    );
+  });
+});
+
+const HTTP_2XX_SERIES: Series = {
+  seriesName: '5XX',
+  data: [
+    {
+      value: 0.9812,
+      name: '2024-03-12T13:30:00-04:00',
+    },
+    {
+      value: 0.9992,
+      name: '2024-03-12T14:00:00-04:00',
+    },
+  ],
+};
+
+const HTTP_5XX_SERIES: Series = {
+  seriesName: '5XX',
+  data: [
+    {
+      value: 0.00006713689346852019,
+      name: '2024-03-12T13:30:00-04:00',
+    },
+    {
+      value: 0.000041208717375685543,
+      name: '2024-03-12T14:00:00-04:00',
+    },
+  ],
+};

static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.tsx

@@ -0,0 +1,16 @@
+import type {Series} from 'sentry/types/echarts';
+
+/**
+ * Given a set of `Series` objects that contain percentage data (i.e., every item in `data` has a `value` between 0 and 1) return an appropriate max value.
+ *
+ * e.g., for series with very low values (like 5xx rates), it rounds to the nearest significant digit. For other cases, it limits it to 100
+ */
+export function getAxisMaxForPercentageSeries(series: Series[]): number {
+  const maxValue = Math.max(
+    ...series.map(serie => Math.max(...serie.data.map(datum => datum.value)))
+  );
+
+  const maxNumberOfDecimalPlaces = Math.ceil(Math.min(0, Math.log10(maxValue)));
+
+  return Math.pow(10, maxNumberOfDecimalPlaces);
+}

static/app/views/insights/http/components/charts/responseRateChart.tsx

@@ -7,6 +7,7 @@ import {
 } from 'sentry/views/insights/colors';
 import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
 import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
+import {getAxisMaxForPercentageSeries} from 'sentry/views/insights/common/utils/getAxisMaxForPercentageSeries';
 import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
 import {CHART_HEIGHT} from 'sentry/views/insights/http/settings';
 
@@ -46,18 +47,3 @@ export function ResponseRateChart({series, isLoading, error}: Props) {
     </ChartPanel>
   );
 }
-
-/**
- * Given a set of `Series` objects that contain percentage data (i.e., every item in `data` has a `value` between 0 and 1) return an appropriate max value.
- *
- * e.g., for series with very low values (like 5xx rates), it rounds to the nearest significant digit. For other cases, it limits it to 100
- */
-export function getAxisMaxForPercentageSeries(series: Series[]): number {
-  const maxValue = Math.max(
-    ...series.map(serie => Math.max(...serie.data.map(datum => datum.value)))
-  );
-
-  const maxNumberOfDecimalPlaces = Math.ceil(Math.min(0, Math.log10(maxValue)));
-
-  return Math.pow(10, maxNumberOfDecimalPlaces);
-}