diff --git a/static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.spec.tsx b/static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.spec.tsx new file mode 100644 index 00000000000000..106a5de80bb40a --- /dev/null +++ b/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', + }, + ], +}; diff --git a/static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.tsx b/static/app/views/insights/common/utils/getAxisMaxForPercentageSeries.tsx new file mode 100644 index 00000000000000..ca9c94fac255e7 --- /dev/null +++ b/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); +} diff --git a/static/app/views/insights/http/components/charts/responseRateChart.spec.tsx b/static/app/views/insights/http/components/charts/responseRateChart.spec.tsx deleted file mode 100644 index 423aff6f1f67d3..00000000000000 --- a/static/app/views/insights/http/components/charts/responseRateChart.spec.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import type {Series} from 'sentry/types/echarts'; -import {getAxisMaxForPercentageSeries} from 'sentry/views/insights/http/components/charts/responseRateChart'; - -describe('ResponseRateChart', function () { - 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', - }, - ], -}; diff --git a/static/app/views/insights/http/components/charts/responseRateChart.tsx b/static/app/views/insights/http/components/charts/responseRateChart.tsx index a5fd79dc09d754..0cfdf610aeda52 100644 --- a/static/app/views/insights/http/components/charts/responseRateChart.tsx +++ b/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) { ); } - -/** - * 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); -}