Widget Request: State History Timeline Bar (inspired by Home Assistant)

[IIIReneIII]

Description

I would like to request a new widget to visualize the state history of an entity over time. This request is inspired by the history timeline bar visualizations commonly used in Home Assistant. The goal is something similar to the visualization shown in the example image.

Key Features:

• Visual Timeline: Display a horizontal bar composed of colored segments.
• State Representation: Each colored segment should represent a specific state of the entity.
• Duration Representation: The width/length of each segment should correspond to the duration the entity was in that state.
• Time Axis: Include time markers below the bar to provide context for the displayed period.

Purpose: This widget would offer a quick, intuitive visual summary of an entity's past states and activity, making it easier to understand patterns, track changes, or identify when specific events occurred. It is particularly useful for visualizing binary processes, such as 'on' versus 'off' periods, or 'fault' versus 'ok' statuses.

Properties

Here are some thoughts on potential user customisation options in the Node-RED Editor:

Labelling:

• Widget Title: Allow users to set a custom title (e.g., "Device History", "Sensor Status"). Default could be "History".
• State Labels (on hover/tooltip): Option to show the specific state name and duration when hovering over a segment.

Style:

• State Colors: Allow mapping specific state values (e.g., 'on', 'off', 'fault', true, false) to specific colors. Provide sensible defaults.
• Bar Height: Option to configure the thickness of the timeline bar.
• Time Axis Format: Maybe options for time format (e.g., absolute time, relative time markers).

Behaviour:

• Input Entity/Data: (Fundamental) Specify the msg.payload or context variable containing the state history data. (This might be more of a core configuration than a simple property).
• Time Range: Define the time window to display (e.g., "Last 24 hours", "Since midnight", "Last 7 days", or potentially allow start/end timestamps via input messages).
• Update Mechanism: How the widget receives updates (e.g., requires a full history dataset each time, or can append live changes).

Events

• on_segment_click: (Optional) It could be useful if clicking on a specific colored segment in the timeline bar sends a message back to Node-RED. This message could contain details about that specific historical event (e.g., { state: "on", startTime: 1678886400, endTime: 1678887000, duration: 600 }).

Controls

• Time Range: the time window displayed by the widget should definitely be controllable from Node-RED. This could be via a property in the node configuration (e.g., dropdown: "Last 24h", "Last 7d") and/or dynamically via an input message (e.g., msg.payload = { timeRange: "24h" } or msg.payload = { startTime: ..., endTime: ... }).
• Color Map: (Optional) Allow defining the state-to-color mapping via an input message (msg.payload = { colorMap: { 'on': 'green', 'off': 'red', 'idle': '#ccc' } }).
• enabled: Standard control to enable/disable interaction (if any) or updates.
• visible: Standard control to show/hide the widget.-

Existing Examples

The primary inspiration comes from the history timeline visualizations commonly used in Home Assistant, as shown in the example image.

Regarding Vuetify components: there doesn't seem to be a direct, out-of-the-box equivalent for this specific horizontal state-duration timeline bar.

Have you provided an initial effort estimate for this issue?

I am no FlowFuse team member