node-red-contrib-ui-timeline

node-red-contrib-ui-timeline

A Node-RED-Dashboard UI widget node that displays timeline. Google-like timeline chart based on Chart.js.

Install

Either use the Editor - Menu - Manage Palette - Install option, or run the following command in your Node-RED user directory (typically ~/.node-red) after installing Node-RED-dashboard.

    npm i node-red-contrib-ui-timeline
    npm i https://github.com/PO-CES-EDGE/node-red-contrib-ui-timeline

Usage

This timeline node expects msg.payload to contain an array of array of timeline data, one object per row. Each data row object should have the same set of values:

• Label
• Start date timestamp
• End date timestamp

Example data

[
  [
    "Start Extruders",
    1619861576130,
    1619866976130
  ],
  [
    "Raise to starting speeds",
    1619866976130,
    1619868476130
  ],
  [
    "Raise to starting speeds",
    1619868476130,
    1619870276130
  ],

  [
    "Stop",
    1619900816130,
    1619902076130
  ]
]

Outputs

(No output)

advanced features

Validation

Input data into message payload must be an array of array of 3 items [[String, date timestamp, date timestamp], ....] Example of JavaScript validation with Joi:

const dataSchema =  Joi.array().items(stepSchema).required();
const stepSchema = Joi.array().length(3).items(Joi.string().required(), Joi.date().timestamp().required(), Joi.date().timestamp().required());

Configuration

The configuration is used to change how the timeline behaves. There are properties to control styling, fonts, the legend, etc.

Configuration key	Description
Display label	Display label of each element
Enable responsive	Enable responsive design: Resizes the chart canvas when its container does.
Text padding	Label padding space
Y-axis configuration
Background colors	Choose two colors for y-axis grid background color
Repeat two colors	Repeat two background colors on y-axis grid.
Elements or steps background color configuration
Palette 1	Choose palette 1 colors
Palette 2	Choose palette 2 colors