NEW: Timeline/state-trail Web Component

Share Your Projects
1

Hi all, as indicated in Statetrail chart in uibuilder - #16 by TotallyInformation (and a few other threads), I've started work on a new web component. Here is what it looks like so far along with the requirements I've set so far. I am looking for feedback.

Remember that being a web component means that it should work with ANY web app/page including UIBUILDER, Dashboards 1 & 2, and http-in/-response. And outside of Node-RED of course. It will, of course, have some special sauce to make use with UIBUILDER extra easy.

image
image884Ă—186 4.2 KB

Obviously, the look still needs some work but all of the visuals will be controllable from CSS variables. Also note that the group part will likely be removed for now, it doesn't really add anything.

Requirements

  • Start with pre-defined data
  • Send new data (single entry or multiple) - If a new itemId is sent, add a new row. If an existing itemId is sent, add a new entry to that row.
  • Data object - see below
    • Missing end timestamp = NOW - only allowed for last entry or new entry - must be updated automatically if the max timestamp changes
    • Missing start timestamp = earliest entry or defined start - only allowed for first entry
  • Options
    • caption (top/bottom/hidden) - hidden caption is still added to the DOM to act as a "described-by" for screen readers
    • retain (true/false) - retains the data in browser storage, auto-reloads on page refresh.
    • mapping object - see below - maps the value to a color and title
    • axis (top/bottom/both/none) - x-axis timeline
    • Max entries per row - optional - probably needs a sensible default - 1,000?
    • Max rows - optional
    • Rolling (duration) - optional - if set, automatically moves the min start timestamp
      to the max timestamp minus the duration
    • topic - optional - if set and if used with UIBUILDER, will create a data listener for the topic
  • Trim excess entries automatically if max entries/rows reached.
  • When a specific row gets a new entry, only re-render that row if the max timestamp doesn't change. But will also have to re-render al rows if the max timestamp does change.
  • No external dependencies, pure HTML/CSS/JS. (No SVG either).
  • Not dependent on Node-RED or UIBUILDER. But must have built-in support for UIBUILDER.
  • Tooltip on hover - shows the Mapped title, value, start, and end timestamps.
  • Click on a row will trigger a custom event. If used with UIBUILDER, will send the item data back to Node-RED.

Data Object

{
    <itemid>: [
        {
            "id": <itemId>,
            "value": <number>,
            "start": <ISO8601 Timestamp>,
            "end": <ISO8601 Timestamp>,
        },
        ...
    ],
    ...
}

Mapping Object

[
    { "range": [<number>, <number>], "title": <string>, "color": <CSScolor> },
    ...
]

Default

[
    {
        "range": [0, 0.3], "title": "Off", "color": "var(--failure, red)",
    },
    {
        "range": [0.3, 0.6], "title": "Partial", "color": "var(--warning, #c8b421)",
    },
    {
        "range": [0.6, 1], "title": "On", "color": "var(--success, green)",
    },
]
3 Likes