Framework Components

Public components, props, events, and refs provided by @timescope/*.

Package	Component	Guide
@timescope/vue	Timescope	Vue
@timescope/react	Timescope	React
@timescope/svelte	Timescope	Svelte
@timescope/solid	Timescope	Solid
@timescope/luna	Timescope	Luna

Props

Props

options?

Prop

Complete chart configuration; updates replace it.

Type

TimescopeOptions

time?

Prop

Selected time; null follows the clock.

Type

Decimal | number | string | Date | null

zoom?

Prop

Selected zoom level.

Type

number

timeRange?

Prop

Navigation bounds.

Type

TimescopeRange<Decimal | number | string | Date | null | undefined>

zoomRange?

Prop

Zoom bounds.

Type

TimescopeRange<number | undefined>

selectionRange?

Prop

Selected range; null clears it.

Type

TimescopeRange<Decimal> | null

Creation-only props

initialTime?

Prop

Creation-time selection; a defined time takes precedence.

Type

Decimal | number | string | Date | null

Default

null

initialZoom?

Prop

Creation-time zoom; a defined zoom takes precedence.

Type

number

Default

0

initialFit?

Prop

Fits the initial range with CSS-pixel padding; requires undefined time and zoom, and no initialTime or initialZoom.

Type

TimescopeRange<TimescopeTimeLike<never>> | { range: TimescopeRange<TimescopeTimeLike<never>>, padding?: number | [number, number] }

renderThread?

Prop

Rendering thread selected at creation.

Type

'main' | 'worker'

Default

Auto

fonts?

Prop

Additional browser font data loaded at creation.

Type

(string | { family: string, source: string | BufferSource, desc?: FontFaceDescriptors })[]

Default

Auto

Framework	Input prop type
Luna	T | (() => T)

Guide

Host props

Framework	Props
React	style?: CSSProperties, className?: string
Solid	style?: any, class?: any
Vue	Native <div> attributes
Svelte	style?: string, class?: string
Luna	style?: string | (() => string), class?: string | (() => string)

Guide

Events and callbacks

Events and callbacks

timechanged

Event

Selected time is committed.

React / Solid / Luna callback

onTimeChanged?

Value

Decimal | null

timechanging

Event

Time changes during interaction.

React / Solid / Luna callback

onTimeChanging?

Value

Decimal | null

timeanimating

Event

Time animation progresses.

React / Solid / Luna callback

onTimeAnimating?

Value

Decimal | null

zoomchanged

Event

Selected zoom is committed.

React / Solid / Luna callback

onZoomChanged?

Value

number

zoomchanging

Event

Zoom changes during interaction.

React / Solid / Luna callback

onZoomChanging?

Value

number

zoomanimating

Event

Zoom animation progresses.

React / Solid / Luna callback

onZoomAnimating?

Value

number

selectionrangechanged

Event

Selection is committed or cleared.

React / Solid / Luna callback

onSelectionRangeChanged?

Value

TimescopeRange<Decimal> | null

selectionrangechanging

Event

Selection changes during interaction.

React / Solid / Luna callback

onSelectionRangeChanging?

Value

TimescopeRange<Decimal> | null

animating

Event

Time-animation activity changes.

React / Solid / Luna callback

onAnimating?

Value

boolean

editing

Event

Time-editing state changes.

React / Solid / Luna callback

onEditing?

Value

boolean

ready

Event

First drawable mount.

React / Solid / Luna callback

onReady?

mount

Event

Each drawable mount.

React / Solid / Luna callback

onMount?

Guide · Timescope events

Component refs

Component refs

Framework	Ref type	Methods
Vue	—	setTime, setZoom, fitTo, prepareView, nextFrame
React	TimescopeAPI	setTime, setZoom, fitTo, prepareView, nextFrame
Svelte	—	setTime, setZoom, fitTo, prepareView, nextFrame

Method signatures · Guide

time

Property

Committed selected time.

Type

Decimal | null

timeChanging

Property

Time during interaction.

Type

Decimal | null

timeAnimating

Property

Time during animation.

Type

Decimal | null

zoom

Property

Committed zoom level.

Type

number

zoomChanging

Property

Zoom during interaction.

Type

number

zoomAnimating

Property

Zoom during animation.

Type

number

selectionRange

Property

Committed selected range.

Type

TimescopeRange<Decimal> | null

selectionRangeChanging

Property

Selection during interaction.

Type

TimescopeRange<Decimal> | null

animating

Property

Whether time animation is active.

Type

boolean

editing

Property

Whether time is being edited.

Type

boolean