RealTimeDomain

RealTimeDomain provides a time-series reference for charts.

Usage

The chart needs the timespan of events to plot over time (x-axis window), and optionally can provide a horizontal offset so new values aren't visibly popping onto the chart (delay).

The window size and delay values are in milliseconds.

To displays a 30-second span of data with a 100ms delay:

tsx
<RealTimeDomain window={30000} delay={100} />

A RealTimeDomain requires a parent ChartContainer context. A minimal example in practice:

tsx
import {
ChartContainer,
LineChart,
RealTimeDomain,
} from '@electricui/components-desktop-charts'
import { MessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
const sensorDS = new MessageDataSource('fan_speed')
 
return (
<React.Fragment>
<ChartContainer>
<LineChart dataSource={sensorDS} />
<RealTimeDomain window={10000} delay={50} />
</ChartContainer>
</React.Fragment>
)
}

To build out a typical chart, refer to the integration guide:

Autoselecting window durations

For long duration window settings, viewing the chart immediately after connection can provide a sub-optimal user experience as the window is mostly empty space.

Pass the window property an array of durations in milliseconds, and the x-axis will choose the smallest window value that fits the available data, resizing as the data covers longer periods.

tsx
<RealTimeDomain window={[1000, 5000, 10_000, 20_000, 60_000, 120_000]} />

Specifying data ranges

By default, the chart will autoscale the y-axis based on the range of visible data. This ranging calculation is performed here, because the RealTimeDomain is ultimately responsible for processing and managing the data.

Constrain either the minimum, maximum, or both bounds in the y-axis by providing yMin and/or yMax values as numbers. If this domain is known, it is recommended to constrain it as a performance optimisation.

Soft constraints can be added to provide a minimum extent with the yMinSoft, and yMaxSoft properties. If the data exceeds the soft constraint, the chart will autoscale. If the data does not exceed the soft constraint, the soft constraint is used as the domain.

tsx
<RealTimeDomain window={30000} yMin={0} yMax={100} />

Prop Reference

PropTypeDefaultOptionalDescription
delaynumberYes

The delay of the window. If data comes in at 10Hz, set this to 100 milliseconds to have data roll in smoothly.

ignoreZoombooleanYes

Whether this domain should ignore the domain specified by the ZoomWrapper.

windownumber | number[]No

The horizontal width of the window in milliseconds.

If passed an array, the smallest window that encompasses all the data will be used.

If no window encompasses all the data, the largest will be used.

yMaxnumberYes

The data y maximum.

yMaxSoftnumberYes

The data y soft maximum.

yMinnumberYes

The data y minimum.

yMinSoftnumberYes

The data y soft minimum.