Skip to main content

duration Renderer

renderAs: 'duration' converts a numeric duration value to a human-friendly string. The unit option is required to specify the unit of the raw number. Three output formats are available: humanized, clock, and decimal.

Core Examples​

Humanized​

format: 'humanized' (the default) breaks the duration into its largest named components. precision limits how many components appear:

Millisecond durations shown as humanized text. Default precision is 2 (e.g. '1 day 2 hours'); precision 1 shows only the largest unit.

Name
Response time
Precision 1
Aurora Chen1 day 2 hours1 day
Mateo Silva2 hours 3 minutes2 hours
Priya Nair2 days2 days
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'humanized' } }               // "1 day 2 hours"
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'humanized', precision: 1 } }  // "1 day"

Clock Format​

format: 'clock' outputs HH:MM:SS. Useful for build times, lap times, and other measured intervals:

Second and millisecond durations in HH:MM:SS clock format.

Name
Build time
Response
Aurora Chen00:02:2526:00:00
Mateo Silva00:01:0202:03:00
Priya Nair00:05:0148:00:00
{ renderAs: 'duration', renderAsOptions: { unit: 'sec', format: 'clock' } }  // "0:02:25"
{ renderAs: 'duration', renderAsOptions: { unit: 'ms',  format: 'clock' } }  // "26:00:00"

Decimal Format​

format: 'decimal' expresses the duration as a decimal number in the input unit. showSign: true adds a + prefix for positive values:

Lag values in decimal. Right column shows sign control — positive gets '+', negative shows '-'.

Name
Lag (hours)
Lag + sign
Aurora Chen-3600000.00 ms-3600000.00 ms
Mateo Silva+900000.00 ms+900000.00 ms
Priya Nair-120000.00 ms-120000.00 ms
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'decimal', formatOptions: { maximumFractionDigits: 2 } } }
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'decimal', showSign: true } }

Custom Humanized Units​

humanizedUnits restricts which components appear in humanized output. Useful to suppress days or seconds:

Same response-time values with default units vs. hours + minutes only.

Name
Default units
hours + minutes only
Aurora Chen1 day 2 hours26 hours
Mateo Silva2 hours 3 minutes2 hours 3 minutes
Priya Nair2 days48 hours
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'humanized' } }
{ renderAs: 'duration', renderAsOptions: { unit: 'ms', format: 'humanized', humanizedUnits: ['hour', 'minute'] } }

Options Reference​

OptionTypeDefaultEffect
unitDurationUnitrequiredUnit of the raw input value.
format'humanized' | 'clock' | 'decimal''humanized'Output format.
precisionnumber2humanized only — maximum number of components to show.
showSignbooleanfalsedecimal only — prefix positive values with +.
humanizedUnitsDurationHumanizedUnit[]['day','hour','minute','second']humanized only — allowed component units.
formatOptionsIntl.NumberFormatOptionsunsetdecimal only — passed to Intl.NumberFormat for the decimal number.
fallbackTextstring'Invalid'Text shown when the value is not a finite number.
classNamestringunsetAdditional CSS class on the root element.

DurationUnit values​

ValueInterprets raw number as
'ms'Milliseconds
'sec'Seconds
'min'Minutes
'hour'Hours
'day'Days

DurationHumanizedUnit values​

'year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond'

Caveats​

  • unit is required. Without it the renderer cannot convert the raw number and outputs fallbackText.
  • format: 'humanized' uses precision (default 2) to limit output to the largest N components. A value of 3600001 ms with precision: 1 shows "1 hour", not "1 hour 1 millisecond".
  • Year and month are approximations: 1 year = 365 days, 1 month = 30 days.
  • format: 'clock' always produces HH:MM:SS with no sign prefix, even for negative values.
  • showSign: true only affects format: 'decimal'. For humanized, negatives show a leading -; for clock, sign is not shown.
  • All options accept (entity) => value functions for per-row dynamic values.

See Also​