diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx index 18a2b7815..92f560094 100644 --- a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx +++ b/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx @@ -35,7 +35,7 @@ function RangeGranularity({ React.useEffect(() => { if (granularityOptions.length === 0) return; - const defaultOption = Math.max(granularityOptions.length - 2, 0); + const defaultOption = Math.max(granularityOptions.filter(opt => !opt.disabled).length - 2, 0); onDensityChange(granularityOptions[defaultOption].key); }, [period, granularityOptions.length]); @@ -54,29 +54,26 @@ function RangeGranularity({ ); } -const PAST_24_HR_MS = 24 * 60 * 60 * 1000; export function calculateGranularities(periodDurationMs: number) { const granularities = [ - { label: 'Hourly', durationMs: 60 * 60 * 1000 }, - { label: 'Daily', durationMs: 24 * 60 * 60 * 1000 }, - { label: 'Weekly', durationMs: 7 * 24 * 60 * 60 * 1000 }, - { label: 'Monthly', durationMs: 30 * 24 * 60 * 60 * 1000 }, - { label: 'Quarterly', durationMs: 3 * 30 * 24 * 60 * 60 * 1000 }, + { label: 'Hourly', durationMs: 60 * 60 * 1000, disabled: false }, + { label: 'Daily', durationMs: 24 * 60 * 60 * 1000, disabled: false }, + { label: 'Weekly', durationMs: 7 * 24 * 60 * 60 * 1000, disabled: false }, + { label: 'Monthly', durationMs: 30 * 24 * 60 * 60 * 1000, disabled: false }, + { + label: 'Quarterly', + durationMs: 3 * 30 * 24 * 60 * 60 * 1000, + disabled: false, + }, ]; const result = []; - if (periodDurationMs === PAST_24_HR_MS) { - // if showing for 1 day, show by minute split as well - granularities.unshift({ label: 'By minute', durationMs: 60 * 1000 }); - } - for (const granularity of granularities) { - if (periodDurationMs >= granularity.durationMs) { - const density = Math.floor( - Number(BigInt(periodDurationMs) / BigInt(granularity.durationMs)), - ); - result.push({ label: granularity.label, key: density }); - } + const density = Math.floor( + Number(BigInt(periodDurationMs) / BigInt(granularity.durationMs)), + ); + const disabled = periodDurationMs >= granularity.durationMs ? false : true; + result.push({ label: granularity.label, key: density, disabled }); } return result; diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index f3ce84316..c337ac75c 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -69,7 +69,9 @@ export default class DashboardStore { }; createDensity = (duration: number) => { - const densityOpts = calculateGranularities(duration); + const densityOpts = calculateGranularities(duration).filter( + (opt) => !opt.disabled, + ); const defaultOption = densityOpts[densityOpts.length - 2]; this.setDensity(defaultOption.key);