Console
A Console allows for persistent logs of rich text to be displayed.
![Screenshot of component Console overview](/static/1927478cd58f13f70f50c202722414e0/Console-overview-desktop.png)
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](/static/465b992e4d24c1c194191ffc67563a06/Console-transformed-text-desktop.png)
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](/static/84c5236825b695ec1f784feef7634028/Console-other-methods-desktop.png)
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 ] } } }} /> )}