DataSourcePrinter

Use DataSourcePrinter to render Dataflow stream values.

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.

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.

<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.

<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.

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.

<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.

<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.

## Code

'''tsx
0 import React from 'react'
1 type EnviroSensors = {
2   temperature: number
3   humidity: number
4   pressure: number
5 }
6 
7 declare global {
8   interface ElectricUIDeveloperState {
9     enviro: EnviroSensors
10     temp: number
11   }
12 }
13 import { DataSourcePrinter } from '@electricui/components-desktop-charts'
14 import { useMessageDataSource } from '@electricui/core-timeseries'
15 
16 const sensorDS = useMessageDataSource('enviro')
17 const tempDS = useMessageDataSource('temp')
18 const OverviewPage = () => {
19   return (
20     <>
21 // ---cut---
22 <DataSourcePrinter 
23   dataSource={tempDS}
24   style={{
25     fontSize: '4em',
26     fontWeight: "bold",
27     color: `${Colors.RED2}`
28   }} 
29 />
30 // ---cut-after---
31     </>
32   )
33 }
'''