Documentation Components

Console

A Console allows for persistent logs of rich text to be displayed.

Screenshot of component Console overview

Usage

Consoles use the Data Source system, and accept a dataSource prop. This allows for persistent storage of logs when navigating through the application.

import { Console } from '@electricui/components-desktop-blueprint-timeseries'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
  const textDataSource = useMessageDataSource<string>('text')
 
  return <Console dataSource={textDataSource} />
}

While text can be passed through directly, usually a simpler data type will be used in the Event which can be expanded to text via the component's accessor.

Screenshot of component Console transformed-text
const counterDataSource = useMessageDataSource<number>('counter')
 
const OverviewPage = () => {
  return (
    <Console
      dataSource={counterDataSource}
      accessor={num => `The hardware counted to ${num}!`}
    />
  )
}

Complex objects

Complex objects can be logged inline, in additional other log methods being used.

By passing an object of the form { method: "log", args: ["Simply log", num] }, each argument will be rendered with the default inspector view for its type.

Screenshot of component Console other-methods
const OverviewPage = () => {
  const counterDataSource = useMessageDataSource<number>('counter')
 
  return (
    <Console
      dataSource={counterDataSource}
      accessor={(num: number) => {
        switch (num) {
          case 0:
            return { method: `warn`, args: [`Warn the user about`, num] }
          case 1:
            return { method: `error`, args: [`Error about...`, num] }
          case 2:
            return { method: `debug`, args: [`Debug log about...`, num] }
          default:
            return { method: `log`, args: [`Simply log`, num] }
        }
      }}
    />
  )
}