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:

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

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

import { 
  ChartContainer, 
  LineChart, 
  RealTimeDomain, 
} from '@electricui/components-desktop-charts'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
  const sensorDS = useMessageDataSource('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.

<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.

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