From 38bbb90ed6f469c46911807bce5a3351b27589e9 Mon Sep 17 00:00:00 2001 From: Robbie Date: Tue, 1 Oct 2024 20:27:54 +0100 Subject: [PATCH] feat: Add milliseconds and fractional second support to humanFriendlyDuration (#25313) --- frontend/src/lib/utils.test.ts | 26 +++++++++++++---- frontend/src/lib/utils.tsx | 29 +++++++++++++++++-- .../queries/nodes/WebOverview/WebOverview.tsx | 16 +--------- .../FunnelBarHorizontal.tsx | 2 +- .../funnels/FunnelBarVertical/StepLegend.tsx | 2 +- .../src/scenes/funnels/FunnelHistogram.tsx | 2 +- frontend/src/scenes/funnels/FunnelTooltip.tsx | 4 +-- .../views/Funnels/FunnelStepsTable.tsx | 8 +++-- 8 files changed, 58 insertions(+), 31 deletions(-) diff --git a/frontend/src/lib/utils.test.ts b/frontend/src/lib/utils.test.ts index b4f4f54ea71d1..94b6939ed641b 100644 --- a/frontend/src/lib/utils.test.ts +++ b/frontend/src/lib/utils.test.ts @@ -500,11 +500,25 @@ describe('lib/utils', () => { }) }) describe('humanFriendlyDuration()', () => { - it('returns correct value for <= 60', () => { + it('returns correct value for 0 <= t < 1', () => { + expect(humanFriendlyDuration(0)).toEqual('0s') + expect(humanFriendlyDuration(0.001)).toEqual('1ms') + expect(humanFriendlyDuration(0.02)).toEqual('20ms') + expect(humanFriendlyDuration(0.3)).toEqual('300ms') + expect(humanFriendlyDuration(0.999)).toEqual('999ms') + }) + + it('returns correct value for 1 < t <= 60', () => { expect(humanFriendlyDuration(60)).toEqual('1m') expect(humanFriendlyDuration(45)).toEqual('45s') expect(humanFriendlyDuration(44.8)).toEqual('45s') expect(humanFriendlyDuration(45.2)).toEqual('45s') + expect(humanFriendlyDuration(45.2, { secondsFixed: 1 })).toEqual('45.2s') + expect(humanFriendlyDuration(1.23)).toEqual('1s') + expect(humanFriendlyDuration(1.23, { secondsPrecision: 3 })).toEqual('1.23s') + expect(humanFriendlyDuration(1, { secondsPrecision: 3 })).toEqual('1s') + expect(humanFriendlyDuration(1, { secondsFixed: 1 })).toEqual('1s') + expect(humanFriendlyDuration(1)).toEqual('1s') }) it('returns correct value for 60 < t < 120', () => { expect(humanFriendlyDuration(90)).toEqual('1m 30s') @@ -524,13 +538,13 @@ describe('lib/utils', () => { expect(humanFriendlyDuration(86400.12)).toEqual('1d') }) it('truncates to specified # of units', () => { - expect(humanFriendlyDuration(3961, 2)).toEqual('1h 6m') - expect(humanFriendlyDuration(30, 2)).toEqual('30s') // no change - expect(humanFriendlyDuration(30, 0)).toEqual('') // returns no units (useless) + expect(humanFriendlyDuration(3961, { maxUnits: 2 })).toEqual('1h 6m') + expect(humanFriendlyDuration(30, { maxUnits: 2 })).toEqual('30s') // no change + expect(humanFriendlyDuration(30, { maxUnits: 0 })).toEqual('') // returns no units (useless) }) it('returns an empty string for nullish inputs', () => { - expect(humanFriendlyDuration('', 2)).toEqual('') - expect(humanFriendlyDuration(null, 2)).toEqual('') + expect(humanFriendlyDuration('', { maxUnits: 2 })).toEqual('') + expect(humanFriendlyDuration(null, { maxUnits: 2 })).toEqual('') }) }) diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx index d5120b9dc1e05..2ca7d3e5f71a0 100644 --- a/frontend/src/lib/utils.tsx +++ b/frontend/src/lib/utils.tsx @@ -497,13 +497,36 @@ export const humanFriendlyMilliseconds = (timestamp: number | undefined): string return `${(timestamp / 1000).toFixed(2)}s` } -export function humanFriendlyDuration(d: string | number | null | undefined, maxUnits?: number): string { +export function humanFriendlyDuration( + d: string | number | null | undefined, + { + maxUnits, + secondsPrecision, + secondsFixed, + }: { maxUnits?: number; secondsPrecision?: number; secondsFixed?: number } = {} +): string { // Convert `d` (seconds) to a human-readable duration string. // Example: `1d 10hrs 9mins 8s` - if (d === '' || d === null || d === undefined) { + if (d === '' || d === null || d === undefined || maxUnits === 0) { return '' } d = Number(d) + if (d < 0) { + return `-${humanFriendlyDuration(-d)}` + } + if (d === 0) { + return `0s` + } + if (d < 1) { + return `${Math.round(d * 1000)}ms` + } + if (d < 60) { + if (secondsPrecision != null) { + return `${parseFloat(d.toPrecision(secondsPrecision))}s` // round to s.f. then throw away trailing zeroes + } + return `${parseFloat(d.toFixed(secondsFixed ?? 0))}s` // round to fixed point then throw away trailing zeroes + } + const days = Math.floor(d / 86400) const h = Math.floor((d % 86400) / 3600) const m = Math.floor((d % 3600) / 60) @@ -520,7 +543,7 @@ export function humanFriendlyDuration(d: string | number | null | undefined, max } else { units = [hDisplay, mDisplay, sDisplay].filter(Boolean) } - return units.slice(0, maxUnits).join(' ') + return units.slice(0, maxUnits ?? undefined).join(' ') } export function humanFriendlyDiff(from: dayjs.Dayjs | string, to: dayjs.Dayjs | string): string { diff --git a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx index f9aeb562c3433..10e724fc7c524 100644 --- a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx +++ b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx @@ -139,20 +139,6 @@ const formatPercentage = (x: number, options?: { precise?: boolean }): string => return (x / 100).toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 0 }) } -const formatSeconds = (x: number): string => { - // if over than a minute, show minutes and seconds - if (x >= 60) { - return humanFriendlyDuration(x) - } - // if over 1 second, show 3 significant figures - if (x >= 1) { - return `${x.toPrecision(3)}s` - } - - // show the number of milliseconds - return `${x * 1000}ms` -} - const formatUnit = (x: number, options?: { precise?: boolean }): string => { if (options?.precise) { return x.toLocaleString() @@ -170,7 +156,7 @@ const formatItem = ( } else if (kind === 'percentage') { return formatPercentage(value, options) } else if (kind === 'duration_s') { - return formatSeconds(value) + return humanFriendlyDuration(value, { secondsPrecision: 3 }) } return formatUnit(value, options) } diff --git a/frontend/src/scenes/funnels/FunnelBarHorizontal/FunnelBarHorizontal.tsx b/frontend/src/scenes/funnels/FunnelBarHorizontal/FunnelBarHorizontal.tsx index 07feedadd3ec8..892ab7d5d3745 100644 --- a/frontend/src/scenes/funnels/FunnelBarHorizontal/FunnelBarHorizontal.tsx +++ b/frontend/src/scenes/funnels/FunnelBarHorizontal/FunnelBarHorizontal.tsx @@ -91,7 +91,7 @@ export function FunnelBarHorizontal({ {step.average_conversion_time && step.average_conversion_time >= Number.EPSILON ? (
Average time to convert:{' '} - {humanFriendlyDuration(step.average_conversion_time, 2)} + {humanFriendlyDuration(step.average_conversion_time, { maxUnits: 2 })}
) : null} diff --git a/frontend/src/scenes/funnels/FunnelBarVertical/StepLegend.tsx b/frontend/src/scenes/funnels/FunnelBarVertical/StepLegend.tsx index 2c688b9cf82d6..d357175f8a720 100644 --- a/frontend/src/scenes/funnels/FunnelBarVertical/StepLegend.tsx +++ b/frontend/src/scenes/funnels/FunnelBarVertical/StepLegend.tsx @@ -121,7 +121,7 @@ export function StepLegend({ step, stepIndex, showTime, showPersonsModal }: Step {showTime && ( } title="Median time of conversion from previous step"> - {humanFriendlyDuration(step.median_conversion_time, 3) || '–'} + {humanFriendlyDuration(step.median_conversion_time, { maxUnits: 3 }) || '–'} )} diff --git a/frontend/src/scenes/funnels/FunnelHistogram.tsx b/frontend/src/scenes/funnels/FunnelHistogram.tsx index 0c1c95ebbc80f..1709b0eb514b4 100644 --- a/frontend/src/scenes/funnels/FunnelHistogram.tsx +++ b/frontend/src/scenes/funnels/FunnelHistogram.tsx @@ -40,7 +40,7 @@ export function FunnelHistogram(): JSX.Element | null { width={width} isDashboardItem={isInDashboardContext} height={height} - formatXTickLabel={(v) => humanFriendlyDuration(v, 2)} + formatXTickLabel={(v) => humanFriendlyDuration(v, { maxUnits: 2 })} /> ) diff --git a/frontend/src/scenes/funnels/FunnelTooltip.tsx b/frontend/src/scenes/funnels/FunnelTooltip.tsx index 7def251b4c5ab..db1c8cdbb5d80 100644 --- a/frontend/src/scenes/funnels/FunnelTooltip.tsx +++ b/frontend/src/scenes/funnels/FunnelTooltip.tsx @@ -89,13 +89,13 @@ export function FunnelTooltip({ {stepIndex > 0 && series.median_conversion_time != null && ( Median time from previous - {humanFriendlyDuration(series.median_conversion_time, 3)} + {humanFriendlyDuration(series.median_conversion_time, { maxUnits: 3 })} )} {stepIndex > 0 && series.average_conversion_time != null && ( Average time from previous - {humanFriendlyDuration(series.average_conversion_time, 3)} + {humanFriendlyDuration(series.average_conversion_time, { maxUnits: 3 })} )} diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx index f07a3dd67e4a0..aa6703deebf86 100644 --- a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx +++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx @@ -252,7 +252,9 @@ export function FunnelStepsTable(): JSX.Element | null { ), render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) => breakdown.steps?.[step.order]?.median_conversion_time != undefined - ? humanFriendlyDuration(breakdown.steps[step.order].median_conversion_time, 3) + ? humanFriendlyDuration(breakdown.steps[step.order].median_conversion_time, { + maxUnits: 3, + }) : '–', align: 'right', width: 0, @@ -268,7 +270,9 @@ export function FunnelStepsTable(): JSX.Element | null { ), render: (_: void, breakdown: FlattenedFunnelStepByBreakdown) => breakdown.steps?.[step.order]?.average_conversion_time != undefined - ? humanFriendlyDuration(breakdown.steps[step.order].average_conversion_time, 3) + ? humanFriendlyDuration(breakdown.steps[step.order].average_conversion_time, { + maxUnits: 3, + }) : '–', align: 'right', width: 0,