node-red-dashboard

repository·master·Indexed 23 days ago

https://github.com/node-red/node-red-dashboard

A set of dashboard nodes for Node-RED, version 3.6.6, providing visualization components for live and historical data. It includes the ui_chart node for Line, Bar, and Pie charts, and a programmatic API featuring addWidget() for creating custom UI elements, as well as methods to retrieve theme and layout information.

Tokens: 1.8K
Snippets: 1
Records: 10
Agent score: 30%

What's inside node-red-dashboard

Configure multiple series for live line charts
master
To display multiple lines on a single line chart using live data, you must identify which data series each message belongs to. You can use either the topic property or the series property. Each unique series will be rendered in a different color.
To create visual gaps in a line chart, send null or false as the msg.payload.
To specify a custom time for a data point (instead of using the arrival time), include a timestamp property. The timestamp must be in milliseconds (epoch time) or ISO8601 format.
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Display stored data in Bar and Pie charts
master
When providing stored data for Bar or Pie charts, the structure depends on whether you want different colors for each bar or a uniform color.
Different colored bars
Use the series array to define different colors for each data set.
Same colored bars
1. Set the Use first colour for all bars flag in the node configuration.
2. Provide a labels array to define the labels for each column/bar.
3. The data array will contain the values for those labels.
You can mix series and labels to provide both grouping and individual labeling.
```
// Different colors
[{
    "series": [ "X", "Y", "Z"],
    "data": [ [5], [3], [6] ],
    "labels": [ "Jan" ]
}]

// Same color (requires 'Use first colour for all bars' enabled in node)
[{
    "series": [ "X" ],
    "data": [ [5,6,9] ],
    "labels": [ "Jan", "Feb", "Mar" ]
}]

// Mixed series and labels
[{
    "series": ["X", "Y", "Z" ],
    "data": [ [5,6,9,10], [3,8,5,11], [6,7,2,12] ],
    "labels": ["Jan", "Feb", "Mar", "Apr"]
}]
```
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Display stored data in line charts
master
To render a complete chart at once (e.g., loading historical data from a database), the msg.payload must be an array containing an object with series, labels, and data arrays. This follows the Chart.js format.
Timeseries Line Charts
For timeseries data, the data array contains arrays of objects, where each object has x (timestamp in ms) and y (value) properties.
Non-timeseries Line Charts
For categorical data, the data array contains arrays of numbers, and the labels array defines the categories.
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Display live data in charts
master
To display live, streaming data in a chart, wire an input to the chart node where the msg.payload contains a number. Each incoming message will be treated as a new data point.
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Configure bars for live charts
master
For bar charts or other non-line charts using live data, use the label property if you want all bars to be the same color. If you want different colors, use the series or topic property. You can use both label and series properties simultaneously if needed.
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Format data for Node-RED-Dashboard Charts
master
The ui_chart node supports several data formats to populate different chart types. Depending on the chart type, you should structure your msg.payload as follows:
1. Array of Objects (Labels and Series)
Used for Bar, Pie, and other categorical charts. You can pass an object containing labels, series, and data arrays, or an array of objects where each object represents a data point.
Option A: Single Object with Arrays
```
var m = {
    "series": ["X", "Y", "Z"],
    "data": [[5, 6, 9], [3, 8, 5], [6, 7, 2]],
    "labels": ["Jan", "Feb", "Mar"]
};
msg.payload = [m]; // Note: payload is often an array containing the object
```
Option B: Array of Data Point Objects Each object in the array can define its own label, payload, and series.
```
var m = [
    {label: "A", payload: 22, series: "X"},
    {label: "B", payload: 66, series: "X"},
    {label: "C", payload: 42, series: "X"},
    {label: "A", payload: 33, series: "Y"}
];
msg.payload = m;
```
2. Time-Series Data (X/Y Coordinates)
For Line charts or charts requiring specific timestamps, provide an array of objects with x (timestamp) and y (value) keys.
```
var chart = [{
    "series": ["A", "B", "C"],
    "data": [
        [{"x": 1504029632890, "y": 5}, {"x": 1504029636001, "y": 4}],
        [{"x": 1504029633514, "y": 6}, {"x": 1504029636622, "y": 7}]
    ],
    "labels": [""]
}];
msg.payload = chart;
```
3. Using topic for Series Identification
You can also use the msg.topic to identify a series when sending individual data points.
```
var m = [
    {topic: "X", payload: 22},
    {topic: "Y", payload: 66}
];
msg.payload = m;
```
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Clear all data from charts
master
To clear the displayed data from a ui_chart node, send an empty JSON array [] as the msg.payload to the node.
```
msg.payload = [];
return msg;
```
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
Retrieve dashboard theme and layout information
master
The dashboard API provides methods to inspect the current UI state, including theme colors and grid dimensions. These are useful when building custom widgets that need to adapt to the user's dashboard settings.
- getSizes(): Returns the grid size configuration in pixels.
- getTheme(): Returns the current theme object.
- isDark(): Returns a boolean indicating if the dashboard theme background is dark or light.
https://github.com/node-red/node-red-dashboard/blob/master/index.js

Add a dashboard widget with addWidget()

master

Use addWidget(options) to programmatically register a new widget in the Node-RED Dashboard. This allows you to create custom UI elements that integrate with the dashboard's layout system (tabs and groups).

Options Object

Option	Type	Description
`node`	`object`	The Node-RED node representing the control on the flow.
`format`	`string`	The HTML code of the widget.
`group`	`string`	(Optional) The name of the group to place the widget in. Required if `templateScope` is not `'global'`.
`width`	`number`	Width of the widget (defaults to group width if not specified).
`height`	`number`	Height of the widget (defaults to 0 if not specified).
`order`	`number`	The placement order of the widget.
`templateScope`	`string`	Scope of the widget: `'global'` or `'local'` (default: `'local'`).
`emitOnlyNewValues`	`boolean`	If `true`, only sends messages to the front-end if the payload has changed (default: `true`).
`forwardInputMessages`	`boolean`	If `true`, forwards input messages to the node output (default: `true`).
`storeFrontEndInputAsState`	`boolean`	If `true`, messages received from the front-end are stored as state (default: `true`).
`persistantFrontEndValue`	`boolean`	If `true`, the last received message is re-sent when the front-end reconnects (default: `true`).
`convert`	`function`	Callback to convert the value before sending it to the front-end.
`beforeEmit`	`function`	Callback to prepare the message that is emitted to the front-end.
`convertBack`	`function`	Callback to convert the message from the front-end before sending it to the next connected node.
`beforeSend`	`function`	Callback to prepare the message that is sent to the output.
`initController`	`function`	Callback to initialize logic within the client-side controller. Note: This is converted to a string internally.

Reference: addWidget options schema
master
The following is the complete list of configuration keys available for the addWidget method.
https://github.com/node-red/node-red-dashboard/blob/master/index.js

node-red-dashboard

What's inside node-red-dashboard

Different colored bars

Same colored bars

Timeseries Line Charts

Non-timeseries Line Charts

1. Array of Objects (Labels and Series)

2. Time-Series Data (X/Y Coordinates)

3. Using topic for Series Identification

Options Object

3. Using `topic` for Series Identification