Flo.w

# Timer

<flow-timer>
Reactive Stable

The timer component displays a standard Flo.w timer control.

The timer component is designed to be used as the primary time control for Flo.w time-based visualizations. Specify a Flo.w reactive state property using the timer-state attribute to bind the state property to the current timer value. Flo.w reactive queries and computed state that depend on the specified 'time' state property will be re-evaluated when the timer changes.

The timer value, by default, is an ISO8601 date/time string and can be used directly in Flo.w reactive queries. Set the timer-state-format to millis if epoch milliseconds are required instead.

TIP

The bound state property is updated according to the update-interval attribute (default 10s). This allows visualization updates to run at a lower frequency than the natural 1 second update of the timer.

The timer operates in two modes:

  • running - the timer is set to 'real time' and updates every second.
  • paused - the timer is set to a specific time and does not update automatically.

Selecting a date/time with the timer step controls or the popup calendar will set the timer to paused mode. Clicking the play button switches the timer to 'real time' running mode. The mode can also be set programmatically using the running attribute.

WARNING

Due to an outstanding bug, popup calendars will not be positioned correctly if any ancestor element of the timer component is a positioned element (i.e. CSS position property is relative or absolute). Specify the static attribute on the component as a workaround.

# Examples

# Theme

The timer supports Flo.w theming and a light and dark theme are provided as standard.

# Properties

Property Description Type Default
disabled Set to `true` to disable interaction with the timer. boolean false
enablePlay
enable-play		 Set to enable/disable the play button. boolean true
flowContext
flow-context		 The Flo.w context ID to use for application state. string 'default'
majorStep
major-step		 The time interval for the major step buttons. string '1 day'
minorStep
minor-step		 The time interval for the minor step buttons. string '1 hour'
running Set to start/stop the timer. Read to retrieve the current running state. boolean true
static Set to `true` to enable static positioning of popup calendars. By default calendars are positioned absolutely using body coordinates. boolean false
Reactive
timerState
timer-state		 The Flo.w state property to bind to the timer. The state property will be synchronized with the value of the timer. string
timerStateFormat
timer-state-format		 Specifies the format of the Flo.w state property bound to the timer. "iso" | "millis" 'iso'
updateDelay
update-delay		 Set to delay scheduled updates when the timer is running. This can be used to allow time for data to arrive in real-time use cases. string '0 seconds'
updateInterval
update-interval		 Specifies the frequency at which the timer emits updates when running. All emitted values are also rounded down using this interval. This guarantees that emitted values are always aligned to the interval specified. string '10 seconds'
utc Set display mode to UTC (default is local time) boolean false
value Set to update the current date/time. Read to retrieve the current date/time. string

# Events

Event Description Type
flowChange

Emitted when the timer value has changed.

 TimerChangeEventDetail

# CSS Parts

Name Description
control-button
control-button: Applied to each of the time control buttons (back, play, forward etc.).
date-button
date-button: The date select button.
time-button
time-button: The time select button.

← Tooltip →