fix(dashboards): Rebalance chart interval options and defaults (#112562)

Rebalance chart interval ladders and default strategy on dashboards to
reduce data point counts and improve chart smoothness. Awaiting
#112678

See [DAIN-1376](https://linear.app/getsentry/issue/DAIN-1376) for full
context and audit.

tl;dr the current behaviour is: give everyone 3-4 options for the
interval, always default to the highest granularity. This causes much
jank, since so much data is loading! What we think we want to do is
choose the _second_ highest granularity by default, but in many cases
that's not enough points.

In this PR I both switch to using the second-highest granularity by
default (in Dashboards, not Explore), and also re-balance the options so
things are a bit more even. It's a bit of science and a bit of art, but
the results should be pretty decent!

### Before

| Duration Range | 1m | 5m | 15m | 30m | 1h | 3h | 12h | 1d |
|---|---|---|---|---|---|---|---|---|
| **1h–6h** | **60–359** | 12–71 | 4–23 | - | - | - | - | - |
| **6h–48h** | - | **72–575** | 24–191 | 12–95 | 6–47 | - | - | - |
| **48h–7d** | - | - | **192–671** | 96–335 | 48–167 | 16–55 | - | - |
| **7d–14d** | - | - | - | **336–671** | 168–335 | 56–111 | 14–27 | - |
| **14d–30d** | - | - | - | - | **336–719** | 112–239 | 28–59 | 14–29 |
| **30d–90d** | - | - | - | - | - | **240–720** | 60–180 | 30–90 |

Defaults (bold) hit 575–720 points at the upper end of every band, which
is an awful lot of points to show by default.

### After

| Duration Range | 1m | 5m | 10m | 30m | 1h | 3h | 6h | 12h |
|---|---|---|---|---|---|---|---|---|
| **1h–6h** | **60–359** | 12–71 | - | - | - | - | - | - |
| **6h–12h** | *360–719* | **72–143** | 36–71 | - | - | - | - | - |
| **12h–2d** | - | *144–575* | **72–287** | 24–95 | - | - | - | - |
| **2d–4d** | - | - | *288–575* | **96–191** | 48–95 | - | - | - |
| **4d–14d** | - | - | - | *192–671* | **96–335** | 32–111 | - | - |
| **14d–30d** | - | - | - | - | *336–719* | **112–239** | 56–119 | - |
| **30d–90d** | - | - | - | - | - | *240–720* | **120–360** | 60–180 |

Defaults (bold) stay in the 60–360 range. High granularity is still
available for those who want it.

### Changes
- Replace `15m` with `10m`, add `6h`, remove `1d` from interval options
- Rebalance MINIMUM/MAXIMUM ladders with new thresholds at 12h, 2d, 4d
- Default to second-biggest interval on dashboards
(`USE_SECOND_BIGGEST`), keep Explore using the highest granularity by
default
- 1h–6h band naturally defaults to 1m (finest) since it only has 2
options

Refs DAIN-1376

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: gggritso

static/app/components/charts/utils.tsx

@@ -27,8 +27,10 @@ export const SIXTY_DAYS = 86400;
 export const THIRTY_DAYS = 43200;
 export const TWO_WEEKS = 20160;
 export const ONE_WEEK = 10080;
+export const FOUR_DAYS = 5760;
 export const FORTY_EIGHT_HOURS = 2880;
 export const TWENTY_FOUR_HOURS = 1440;
+export const TWELVE_HOURS = 720;
 export const SIX_HOURS = 360;
 const THREE_HOURS = 180;
 export const ONE_HOUR = 60;

static/app/utils/useChartInterval.spec.tsx

@@ -26,8 +26,7 @@ describe('useChartInterval', () => {
     expect(intervalOptions).toEqual([
       {value: '1h', label: '1 hour'},
       {value: '3h', label: '3 hours'},
-      {value: '12h', label: '12 hours'},
-      {value: '1d', label: '1 day'},
+      {value: '6h', label: '6 hours'},
     ]);
     expect(chartInterval).toBe('1h'); // default
 
@@ -47,12 +46,11 @@ describe('useChartInterval', () => {
     expect(intervalOptions).toEqual([
       {value: '1m', label: '1 minute'},
       {value: '5m', label: '5 minutes'},
-      {value: '15m', label: '15 minutes'},
     ]);
     act(() => {
-      setChartInterval('15m');
+      setChartInterval('5m');
     });
-    expect(chartInterval).toBe('15m');
+    expect(chartInterval).toBe('5m');
   });
 });
 

static/app/utils/useChartInterval.tsx

@@ -4,12 +4,13 @@ import type {Location} from 'history';
 import {
   FIVE_MINUTES,
   FORTY_EIGHT_HOURS,
+  FOUR_DAYS,
   getDiffInMinutes,
   GranularityLadder,
   ONE_HOUR,
-  ONE_WEEK,
   SIX_HOURS,
   THIRTY_DAYS,
+  TWELVE_HOURS,
   TWO_WEEKS,
 } from 'sentry/components/charts/utils';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
@@ -20,7 +21,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-enum ChartIntervalUnspecifiedStrategy {
+export enum ChartIntervalUnspecifiedStrategy {
   /** Use the second biggest possible interval (e.g., pretty big buckets) */
   USE_SECOND_BIGGEST = 'use_second_biggest',
   /** Use the smallest possible interval (e.g., the smallest possible buckets) */
@@ -104,12 +105,12 @@ function useChartIntervalImpl({
 const ALL_INTERVAL_OPTIONS = [
   {value: '1m', label: t('1 minute')},
   {value: '5m', label: t('5 minutes')},
-  {value: '15m', label: t('15 minutes')},
+  {value: '10m', label: t('10 minutes')},
   {value: '30m', label: t('30 minutes')},
   {value: '1h', label: t('1 hour')},
   {value: '3h', label: t('3 hours')},
+  {value: '6h', label: t('6 hours')},
   {value: '12h', label: t('12 hours')},
-  {value: '1d', label: t('1 day')},
 ];
 
 /**
@@ -119,19 +120,21 @@ const ALL_INTERVAL_OPTIONS = [
 const MINIMUM_INTERVAL = new GranularityLadder([
   [THIRTY_DAYS, '3h'],
   [TWO_WEEKS, '1h'],
-  [ONE_WEEK, '30m'],
-  [FORTY_EIGHT_HOURS, '15m'],
-  [SIX_HOURS, '5m'],
+  [FOUR_DAYS, '30m'],
+  [FORTY_EIGHT_HOURS, '10m'],
+  [TWELVE_HOURS, '5m'],
+  [SIX_HOURS, '1m'],
   [0, '1m'],
 ]);
 
 const MAXIMUM_INTERVAL = new GranularityLadder([
-  [THIRTY_DAYS, '1d'],
-  [TWO_WEEKS, '1d'],
-  [ONE_WEEK, '12h'],
-  [FORTY_EIGHT_HOURS, '4h'],
-  [SIX_HOURS, '1h'],
-  [ONE_HOUR, '15m'],
+  [THIRTY_DAYS, '12h'],
+  [TWO_WEEKS, '6h'],
+  [FOUR_DAYS, '3h'],
+  [FORTY_EIGHT_HOURS, '1h'],
+  [TWELVE_HOURS, '30m'],
+  [SIX_HOURS, '10m'],
+  [ONE_HOUR, '5m'],
   [FIVE_MINUTES, '5m'],
   [0, '1m'],
 ]);

static/app/views/dashboards/dashboard.spec.tsx

@@ -11,10 +11,10 @@ import {resetMockDate, setMockDate} from 'sentry-test/utils';
 import {PageFiltersStore} from 'sentry/components/pageFilters/store';
 import {MemberListStore} from 'sentry/stores/memberListStore';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import {Dashboard} from 'sentry/views/dashboards/dashboard';
 import {FiltersBar} from 'sentry/views/dashboards/filtersBar';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import type {
   DashboardDetails,
   DashboardFilters,
@@ -499,7 +499,7 @@ describe('Dashboards > Dashboard', () => {
       dashboard?: DashboardDetails;
     } = {}) {
       const location = useLocation();
-      const [widgetInterval] = useChartInterval();
+      const [widgetInterval] = useDashboardChartInterval();
       return (
         <MEPSettingProvider forceTransactions={false}>
           <FiltersBar
@@ -541,39 +541,39 @@ describe('Dashboards > Dashboard', () => {
     });
 
     describe('no interval set in URL', () => {
-      it('defaults to the smallest valid interval for the dashboard period', async () => {
-        const fiveMinuteMock = MockApiClient.addMockResponse({
+      it('defaults to the second-biggest valid interval for the dashboard period', async () => {
+        const tenMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '5m'})],
+          match: [MockApiClient.matchQuery({interval: '10m'})],
         });
-        const hourlyIntervalMock = MockApiClient.addMockResponse({
+        const thirtyMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '1h'})],
+          match: [MockApiClient.matchQuery({interval: '30m'})],
         });
 
-        // No interval in the URL — the 5m default is derived purely from the
-        // dashboard's saved 24h period via PageFiltersStore → useChartInterval.
+        // No interval in the URL — the 10m default (second-biggest of [5m, 10m, 30m])
+        // is derived from the dashboard's saved 24h period via useDashboardChartInterval.
         const {router} = render(<DashboardWithIntervalSelector />, {
           organization: orgWithFlag,
           initialRouterConfig: {location: {pathname: '/'}},
         });
 
         await screen.findByText('Test Spans Widget');
-        await waitFor(() => expect(fiveMinuteMock).toHaveBeenCalled());
-        expect(hourlyIntervalMock).not.toHaveBeenCalled();
+        await waitFor(() => expect(tenMinuteMock).toHaveBeenCalled());
+        expect(thirtyMinuteMock).not.toHaveBeenCalled();
 
-        // Click the interval selector and choose '1 hour'. FiltersBar writes
-        // interval=1h to the URL, DashboardWithIntervalSelector re-renders with
+        // Click the interval selector and choose '30 minutes'. FiltersBar writes
+        // interval=30m to the URL, DashboardWithIntervalSelector re-renders with
         // the new widgetInterval, and the widget re-fetches with the new interval.
-        await userEvent.click(screen.getByRole('button', {name: '5 minutes'}));
-        await userEvent.click(screen.getByRole('option', {name: '1 hour'}));
+        await userEvent.click(screen.getByRole('button', {name: '10 minutes'}));
+        await userEvent.click(screen.getByRole('option', {name: '30 minutes'}));
 
-        await waitFor(() => expect(hourlyIntervalMock).toHaveBeenCalled());
-        expect(router.location.query.interval).toBe('1h');
+        await waitFor(() => expect(thirtyMinuteMock).toHaveBeenCalled());
+        expect(router.location.query.interval).toBe('30m');
       });
     });
 
@@ -592,11 +592,11 @@ describe('Dashboards > Dashboard', () => {
           match: [MockApiClient.matchQuery({interval: '5m'})],
         });
 
-        const hourlyIntervalMock = MockApiClient.addMockResponse({
+        const tenMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '1h'})],
+          match: [MockApiClient.matchQuery({interval: '10m'})],
         });
 
         const {router} = render(<DashboardWithIntervalSelector />, {
@@ -615,28 +615,28 @@ describe('Dashboards > Dashboard', () => {
 
         // Selecting a new interval updates the URL and triggers a re-fetch.
         await userEvent.click(screen.getByRole('button', {name: '30 minutes'}));
-        await userEvent.click(screen.getByRole('option', {name: '1 hour'}));
+        await userEvent.click(screen.getByRole('option', {name: '10 minutes'}));
 
-        await waitFor(() => expect(hourlyIntervalMock).toHaveBeenCalled());
-        expect(router.location.query.interval).toBe('1h');
+        await waitFor(() => expect(tenMinuteMock).toHaveBeenCalled());
+        expect(router.location.query.interval).toBe('10m');
       });
     });
 
     describe('URL interval not valid for the dashboard period', () => {
       beforeEach(() => {
-        // Override the outer 24h store setup — valid intervals for 30d are 3h, 12h, 1d.
+        // Override the outer 24h store setup — valid intervals for 30d are 3h, 6h, 12h.
         PageFiltersStore.init();
         PageFiltersStore.onInitializeUrlState(
           getSavedFiltersAsPageFilters(thirtyDayDashboard)
         );
       });
 
       it('ignores the URL interval and falls back to the period default', async () => {
-        const threeHourMock = MockApiClient.addMockResponse({
+        const sixHourMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
           method: 'GET',
           body: [],
-          match: [MockApiClient.matchQuery({interval: '3h'})],
+          match: [MockApiClient.matchQuery({interval: '6h'})],
         });
         const fiveMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-stats/',
@@ -653,11 +653,12 @@ describe('Dashboards > Dashboard', () => {
 
         await screen.findByText('Test Spans Widget');
 
-        // The selector should show the period-derived default, not the invalid URL value.
-        expect(screen.getByRole('button', {name: '3 hours'})).toBeInTheDocument();
+        // The selector should show the period-derived default (6h = second-biggest
+        // of [3h, 6h, 12h]), not the invalid URL value (5m).
+        expect(screen.getByRole('button', {name: '6 hours'})).toBeInTheDocument();
 
         // The widget should query with the valid default interval, not the URL value.
-        await waitFor(() => expect(threeHourMock).toHaveBeenCalled());
+        await waitFor(() => expect(sixHourMock).toHaveBeenCalled());
         expect(fiveMinuteMock).not.toHaveBeenCalled();
       });
     });
@@ -681,11 +682,11 @@ describe('Dashboards > Dashboard', () => {
       it('ignores the URL interval and falls back to the period default', async () => {
         // Uses the /sessions/ endpoint (session.status in columns → useSessionAPI=true),
         // which surfaces the "intervals too granular" error in production.
-        const threeHourMock = MockApiClient.addMockResponse({
+        const sixHourMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/sessions/',
           method: 'GET',
           body: emptySessionsBody,
-          match: [MockApiClient.matchQuery({interval: '3h'})],
+          match: [MockApiClient.matchQuery({interval: '6h'})],
         });
         const fiveMinuteMock = MockApiClient.addMockResponse({
           url: '/organizations/org-slug/sessions/',
@@ -701,13 +702,13 @@ describe('Dashboards > Dashboard', () => {
 
         await screen.findByText('Test Releases Widget');
 
-        // The selector should show the period-derived default (3h), not the
-        // invalid URL value (5m).
-        expect(screen.getByRole('button', {name: '3 hours'})).toBeInTheDocument();
+        // The selector should show the period-derived default (6h = second-biggest
+        // of [3h, 6h, 12h]), not the invalid URL value (5m).
+        expect(screen.getByRole('button', {name: '6 hours'})).toBeInTheDocument();
 
         // The widget should query the sessions endpoint with the valid default
         // interval, not the 5m value from the URL.
-        await waitFor(() => expect(threeHourMock).toHaveBeenCalled());
+        await waitFor(() => expect(sixHourMock).toHaveBeenCalled());
         expect(fiveMinuteMock).not.toHaveBeenCalled();
       });
     });

static/app/views/dashboards/detail.tsx

@@ -53,14 +53,14 @@ import {OnRouteLeave} from 'sentry/utils/reactRouter6Compat/onRouteLeave';
 import {scheduleMicroTask} from 'sentry/utils/scheduleMicroTask';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useApi} from 'sentry/utils/useApi';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {useProjects} from 'sentry/utils/useProjects';
 import {useRouter} from 'sentry/utils/useRouter';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {
   cloneDashboard,
   getCurrentPageFilters,
@@ -1519,7 +1519,7 @@ export function DashboardDetailWithInjectedProps(
   const location = useLocation();
   const params = useParams<RouteParams>();
   const router = useRouter();
-  const [chartInterval] = useChartInterval();
+  const [chartInterval] = useDashboardChartInterval();
   const queryClient = useQueryClient();
   const hasPageFrameFeature = useHasPageFrameFeature();
   // Always use the validated chart interval so the UI dropdown and widget

static/app/views/dashboards/filtersBar.tsx

@@ -25,14 +25,14 @@ import type {User} from 'sentry/types/user';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {ToggleOnDemand} from 'sentry/utils/performance/contexts/onDemandControl';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useUser} from 'sentry/utils/useUser';
 import {useUserTeams} from 'sentry/utils/useUserTeams';
 import {AddFilter} from 'sentry/views/dashboards/globalFilter/addFilter';
 import {GenericFilterSelector} from 'sentry/views/dashboards/globalFilter/genericFilterSelector';
 import {globalFilterKeysAreEqual} from 'sentry/views/dashboards/globalFilter/utils';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {useDatasetSearchBarData} from 'sentry/views/dashboards/hooks/useDatasetSearchBarData';
 import {useInvalidateStarredDashboards} from 'sentry/views/dashboards/hooks/useInvalidateStarredDashboards';
 import {getDashboardFiltersFromURL} from 'sentry/views/dashboards/utils';
@@ -234,7 +234,7 @@ export function FiltersBar({
   const hasIntervalSelection = organization.features.includes(
     'dashboards-interval-selection'
   );
-  const [interval, setInterval, intervalOptions] = useChartInterval();
+  const [interval, setInterval, intervalOptions] = useDashboardChartInterval();
 
   return (
     <Wrapper>

static/app/views/dashboards/hooks/useDashboardChartInterval.tsx

@@ -0,0 +1,15 @@
+import {
+  ChartIntervalUnspecifiedStrategy,
+  useChartInterval,
+} from 'sentry/utils/useChartInterval';
+
+/**
+ * Wrapper around `useChartInterval` that uses the `USE_SECOND_BIGGEST`
+ * strategy for dashboards. This keeps the dashboard detail page, widget
+ * builder preview, and filters bar in sync.
+ */
+export function useDashboardChartInterval() {
+  return useChartInterval({
+    unspecifiedStrategy: ChartIntervalUnspecifiedStrategy.USE_SECOND_BIGGEST,
+  });
+}

static/app/views/dashboards/widgetBuilder/components/widgetPreview.tsx

@@ -3,10 +3,10 @@ import {useState} from 'react';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {dedupeArray} from 'sentry/utils/dedupeArray';
 import type {Sort} from 'sentry/utils/discover/fields';
-import {useChartInterval} from 'sentry/utils/useChartInterval';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {useDashboardChartInterval} from 'sentry/views/dashboards/hooks/useDashboardChartInterval';
 import {
   DisplayType,
   WidgetType,
@@ -44,7 +44,7 @@ export function WidgetPreview({
   const location = useLocation();
   const navigate = useNavigate();
   const pageFilters = usePageFilters();
-  const [chartInterval] = useChartInterval();
+  const [chartInterval] = useDashboardChartInterval();
 
   const {state, dispatch} = useWidgetBuilderContext();
   const [tableWidths, setTableWidths] = useState<number[]>();