RealTimeSlicingDomain

RealTimeSlicingDomain provides a RealTimeDomain equivelent, for multidimensional charting.

Usage

RealTimeSlicingDomain has an identical API surface to a RealTimeDomain, but differs in how the internal representation of time is passed to child Charts.

Time-sliced charts use the 'z-axis' to represent time. This allows for x-y data to be plotted.

This example snippet shows a simple force-displacement plot from sensor data. After the 10000ms window elapses, data 'falls off' the chart.

import { 
  ChartContainer, 
  TimeSlicedLineChart, 
  RealTimeSlicingDomain, 
  HorizontalAxis,
  VerticalAxis,
} from '@electricui/components-desktop-charts'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
  const sensorDS = useMessageDataSource('force_disp')
 
  return (
    <React.Fragment>
      <ChartContainer>
        <TimeSlicedLineChart
          dataSource={sensorDS}
          accessor={(data, time) => ({x: data.linearpos, y: data.loadcell})}
        />
        <RealTimeSlicingDomain window={10000} />
        <HorizontalAxis label="Displacement mm" />
        <VerticalAxis label="Force N" />
      </ChartContainer>
    </React.Fragment>
  )
}

To for information on 2D charting, refer to the integration guide and the TimeSlicedLineChart component docs.

Autoselecting window durations

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.

<RealTimeSlicingDomain window={[1000, 5000]} />

Specifying data ranges

By default, the chart will autoscale both the x-axis and y-axis based on the range of visible data.

Constrain either the minimum, maximum, or both bounds in either or both axis with the xMin, xMax, yMin, yMax properties. If the 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 xMinSoft, xMaxSoft, 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.

<RealTimeSlicingDomain
  window={10000}
  xMin={0}
  xMax={200}
  yMin={-100}
  yMax={250}
/>