jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: change default options for granularity

Browse source
This commit is contained in:
nick-delirium 2025-06-04 15:26:59 +02:00
parent fcece8d5c1
commit 51b838a2b4
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx
View file

@ -35,7 +35,7 @@ function RangeGranularity({
React.useEffect(() => { React.useEffect(() => {
if (granularityOptions.length === 0) return; 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); onDensityChange(granularityOptions[defaultOption].key);
}, [period, granularityOptions.length]); }, [period, granularityOptions.length]);
@ -54,29 +54,26 @@ function RangeGranularity({
); );
} }
const PAST_24_HR_MS = 24 * 60 * 60 * 1000;
export function calculateGranularities(periodDurationMs: number) { export function calculateGranularities(periodDurationMs: number) {
const granularities = [ const granularities = [
{ label: 'Hourly', durationMs: 60 * 60 * 1000 }, { label: 'Hourly', durationMs: 60 * 60 * 1000, disabled: false },
{ label: 'Daily', durationMs: 24 * 60 * 60 * 1000 }, { label: 'Daily', durationMs: 24 * 60 * 60 * 1000, disabled: false },
{ label: 'Weekly', durationMs: 7 * 24 * 60 * 60 * 1000 }, { label: 'Weekly', durationMs: 7 * 24 * 60 * 60 * 1000, disabled: false },
{ label: 'Monthly', durationMs: 30 * 24 * 60 * 60 * 1000 }, { label: 'Monthly', durationMs: 30 * 24 * 60 * 60 * 1000, disabled: false },
{ label: 'Quarterly', durationMs: 3 * 30 * 24 * 60 * 60 * 1000 }, {
label: 'Quarterly',
durationMs: 3 * 30 * 24 * 60 * 60 * 1000,
disabled: false,
},
]; ];
const result = []; 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) { for (const granularity of granularities) {
if (periodDurationMs >= granularity.durationMs) { const density = Math.floor(
const density = Math.floor( Number(BigInt(periodDurationMs) / BigInt(granularity.durationMs)),
Number(BigInt(periodDurationMs) / BigInt(granularity.durationMs)), );
); const disabled = periodDurationMs >= granularity.durationMs ? false : true;
result.push({ label: granularity.label, key: density }); result.push({ label: granularity.label, key: density, disabled });
}
} }
return result; return result;

4
frontend/app/mstore/dashboardStore.ts
View file

@ -69,7 +69,9 @@ export default class DashboardStore {
}; };
createDensity = (duration: number) => { createDensity = (duration: number) => {
const densityOpts = calculateGranularities(duration); const densityOpts = calculateGranularities(duration).filter(
(opt) => !opt.disabled,
);
const defaultOption = densityOpts[densityOpts.length - 2]; const defaultOption = densityOpts[densityOpts.length - 2];
this.setDensity(defaultOption.key); this.setDensity(defaultOption.key);