EventCSVLogger - Electric UI

EventCSVLogger is an event driven mechanism to log data to disk as new events are recieved.

Usage

EventCSVLogger components take a single DataSource reference.

A timestamp column is automatically generated with the format hour:minute:second.millisecond.

By default, this component renders buttons for selecting the file save location, as well as starting/stopping the log recording. The file selection process is handled by the OS's native save dialog menu.

This snippet shows how to log a structured Float[3] formatted message from an IMU. A row in the log is created when a accel message arrives.

import { EventCSVLogger } from '@electricui/components-desktop-blueprint-timeseries'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
  const accDS = useMessageDataSource('accel')
 
  return (
    <React.Fragment>
      <EventCSVLogger
        dataSource={accDS}
        columns={[
          { column: 'accX', accessor: event => event[0] },
          { column: 'accY', accessor: event => event[1] },
          { column: 'accZ', accessor: event => event[2] },
        ]}
      />
    </React.Fragment>
  )
}

timestamp	accX	accY	accZ
02:03:23.141	-7.18618488311768	21.7011966705322	15.7384843826294
02:03:23.153	-4.46121740341187	14.9785709381104	15.6058025360107
02:03:23.165	-3.15508389472961	-7.72271823883057	22.9484558105469
...	...	...	...

Multiple Data Sources

The coalesce DataFlow operator can be used to combine multiple DataSources. When any of the coalesced sources change, a new row will be emitted.

import { EventCSVLogger } from '@electricui/components-desktop-blueprint-timeseries'
import { useMessageDataSource } from '@electricui/core-timeseries'
import { coalesce } from '@electricui/dataflow'
import { useDataTransformer } from '@electricui/timeseries-react'
 
const OverviewPage = () => {
 
  const accDS = useMessageDataSource('accel')
  const gyroDS = useMessageDataSource('gyro')
 
  const combined = useDataTransformer(() => {
    return coalesce({ acc: accDS, gyro: gyroDS })
  })
 
  return (
    <React.Fragment>
      <EventCSVLogger
        dataSource={combined}
        columns={[
          { column: 'accX', accessor: data => data.acc[0] },
          { column: 'accY', accessor: data => data.acc[1] },
          { column: 'accZ', accessor: data => data.acc[2] },
          { column: 'gyroX', accessor: data => data.gyro[0] },
          { column: 'gyroY', accessor: data => data.gyro[1] },
          { column: 'gyroZ', accessor: data => data.gyro[2] },
        ]}
      />
    </React.Fragment>
  )
}

Button Text

The component provides buttons for selecting the save location, and starting/stopping the log.

The text on these buttons is configurable by providing a string to the props: selectSaveLocationText, startLoggingText, stopLoggingText.

<EventCSVLogger
  startLoggingText="Start Recording"
  stopLoggingText="Stop Recording"
  selectSaveLocationText="Save Folder Selection"
  dataSource={accDS}
  columns={[
    { column: 'accX', accessor: event => event[0] },
    { column: 'accY', accessor: event => event[1] },
    { column: 'accZ', accessor: event => event[2] },
  ]}
/>

The selectSaveLocationMessage prop accepts a string which is used in the path selection dialog.

Timestamp Column

The default column can be configured by the developer.

timestampColumnName prop accepts a string used in the CSV header.

timestampColumnFormat accepts a string describing the timestamp value formatting. Options here.

<EventCSVLogger
  timestampColumnName="Time"
  timestampColumnFormat="HH:mm:ss"
  dataSource={accDS}
  columns={[
    { column: 'accX', accessor: event => event[0] },
    { column: 'accY', accessor: event => event[1] },
    { column: 'accZ', accessor: event => event[2] },
  ]}
/>

Time	tempC
18:22:06	35.025
18:22:35	35.521
18:25:11	36.060
...	...

Beware of using lower precision timing formats than the time periods in which events could be logged, as this would cause aliasing in the timestamp field.

Handling and post-processing data with duplicated timestamp values is painful for everyone.