PolledCSVLogger

PolledCSVLoggers log data to disk by polling the UI state at a specified interval.

Usage

PolledCSVLogger components use the structured DataSource under the hood, similar to LineChart components. This is provided along with the column name and optional accessors for structured data.

The logging interval is specified as a period measured in milliseconds. The current value of the variable at the end of that period will be recorded, regardless if it has updated since the last log entry.

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 single-value temperature message, and how to put elements of a structured message in different columns using accessor syntax with the DataSource.

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

The resulting log file is formatted with the columns in order listed in the columns array with the full precision available.

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.

<PolledCSVLogger
  startLoggingText="Start Recording"
  stopLoggingText="Stop Recording"
  selectSaveLocationText="Select Destination Folder"
  interval={10}
  columns={[{ dataSource: tempDS, column: 'tempC' }]}
/>

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.

<PolledCSVLogger
  timestampColumnName="Time"
  timestampColumnFormat="HH:mm:ss"
  interval={10}
  columns={[{ dataSource: tempDS, column: 'tempC' }]}
/>

Beware of using lower precision timing data than the interval period (formatting millisecond scale entries with only a seconds field for example).

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