diff --git a/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx b/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx index c3e00fd22a..030f922fad 100644 --- a/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx +++ b/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.tsx @@ -214,13 +214,13 @@ const tooltipTitles: Record< }, trace_samples: { percent: '% of time', - formattedValue: 'samples', + formattedValue: 'Samples', total: '% of total samples', }, '': { - percent: '', - formattedValue: '', - total: '', + percent: 'Percentage', + formattedValue: 'Units', + total: '% of total units', }, }; diff --git a/packages/pyroscope-flamegraph/src/format/format.spec.ts b/packages/pyroscope-flamegraph/src/format/format.spec.ts index 0979cf62d7..649bb67a9d 100644 --- a/packages/pyroscope-flamegraph/src/format/format.spec.ts +++ b/packages/pyroscope-flamegraph/src/format/format.spec.ts @@ -22,7 +22,7 @@ describe('format', () => { it('its constructor should default to DurationFormatter', () => { const df = getFormatter(80, 2, '' as any); - expect(df.format(0.001, 100)).toBe('< 0.01 seconds'); + expect(df.format(0.001, 100)).toBe('< 0.01 '); }); describe('DurationFormatter', () => { diff --git a/packages/pyroscope-flamegraph/src/format/format.ts b/packages/pyroscope-flamegraph/src/format/format.ts index d608a58b46..b543181bcc 100644 --- a/packages/pyroscope-flamegraph/src/format/format.ts +++ b/packages/pyroscope-flamegraph/src/format/format.ts @@ -29,10 +29,10 @@ export function getFormatter(max: number, sampleRate: number, unit: Units) { case 'lock_samples': return new ObjectsFormatter(max); case 'trace_samples': - return new DurationFormatter(max / sampleRate); + return new DurationFormatter(max / sampleRate, 'units'); default: - console.warn(`Unsupported unit: '${unit}'. Defaulting to 'samples'`); - return new DurationFormatter(max / sampleRate); + console.warn(`Unsupported unit: '${unit}'. Defaulting to ''`); + return new DurationFormatter(max / sampleRate, ' '); } } @@ -51,7 +51,10 @@ class DurationFormatter { [12, 'year'], ]; - constructor(maxDur: number) { + units = ''; + + constructor(maxDur: number, units?: string) { + this.units = units || ''; // eslint-disable-next-line no-plusplus for (let i = 0; i < this.durations.length; i++) { const level = this.durations[i]; @@ -81,7 +84,7 @@ class DurationFormatter { nStr = '< 0.01'; } - return `${nStr} ${this.suffix}${n === 1 ? '' : 's'}`; + return `${nStr} ${this.units || `${this.suffix}${n === 1 ? '' : 's'}`}`; } }