DataSourcePrinter
Use DataSourcePrinter to render Dataflow stream values.
![Screenshot of component DataSourcePrinter example](/static/2a015058c94e4b157737023ae55ddd02/DataSourcePrinter-example-desktop.png)
Usage
DataSourcePrinter
is different from the standard Printer
component - instead of subscribing to the state tree, it receives updates directly as the DataSource emits events.
Use it to display transformed data, query results, and alongside interactive charts as a legend.
Performance Tip!
We recommend using the performance-tuned
Printer
for displaying hardware data which hasn't been transformed.
![Screenshot of component DataSourcePrinter basic](/static/345ecc4e20883252ebfcdbaa763e88ac/DataSourcePrinter-basic-desktop.png)
import { DataSourcePrinter } from '@electricui/components-desktop-charts'import { useMessageDataSource } from '@electricui/core-timeseries' const OverviewPage = () => { const sensorDS = useMessageDataSource ('temp') return ( <> <DataSourcePrinter dataSource ={sensorDS }/> </> )}
Standard accessor
syntax allows for selection of specific member fields in the DataSource.
![Screenshot of component DataSourcePrinter accessor](/static/ca22aa7aad9d27a83e577fe2c2bed4fa/DataSourcePrinter-accessor-desktop.png)
<DataSourcePrinter dataSource ={sensorDS } accessor ={event => event .humidity }/> %RH
Stringification
The accessor
can be abused for data manipulation. This can be useful as a debug tool when working with complex Transformers.
![Screenshot of component DataSourcePrinter stringify](/static/57e270112f243ddb7ba7c380c513e910/DataSourcePrinter-stringify-desktop.png)
<DataSourcePrinter dataSource ={sensorDS } accessor ={data => JSON .stringify (data )} />
Query Mutation
Often printing a datasource used for charting doesn't provide ideal behaviour when printed as text.
The prepare
prop allows you to mutate the query against the datasource.
![Screenshot of component DataSourcePrinter prepare-query](/static/fd9372327d278e0a7a1976941fc464d1/DataSourcePrinter-prepare-query-desktop.png)
Formatting
Placeholder Text
The defaultValue
prop accepts either string
or number
types, used when rendering occurs before the query resolves.
The defaults to a blank string.
![Screenshot of component DataSourcePrinter placeholder-text](/static/9ac308dc6539917b1378abe1ee308dec/DataSourcePrinter-placeholder-text-desktop.png)
<DataSourcePrinter dataSource ={sensorDS } defaultValue ="Sensor Error"/><DataSourcePrinter dataSource ={sensorDS } defaultValue ={1000}/>
Precision
Like the normal Printer
component, the precision
property accepts a number to specify the number of decimal points.
The default precision for floats is two decimal places.
This only applies to values typed as
number
.
![Screenshot of component DataSourcePrinter precision](/static/75c2e3015a7707e1839d543d0b1c9cf4/DataSourcePrinter-precision-desktop.png)
<DataSourcePrinter dataSource ={tempDS } precision ={0} /><DataSourcePrinter dataSource ={tempDS } precision ={1} /><DataSourcePrinter dataSource ={tempDS } precision ={2} /><DataSourcePrinter dataSource ={tempDS } precision ={4} /><DataSourcePrinter dataSource ={tempDS } precision ={8} />
Styling
Pass CSS to the inline span element with style
.