# \[Announce\] node-red-contrib-ui-state-trail \[Features\]

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539>\
**Category:** Share Your Nodes\
**Created:** [18 January 2020 16:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539 "2020-01-18T16:49:05Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 February 2020 21:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/21 "2020-02-03T21:44:01Z")

</div>

> [@hotNipi](#):
>
> the gap calculation should somehow be possible

Yes you are right ...  
I would simply add to the readme page:

- When no end time (or duration) is specified, a time slice:
  - Will run until the start of the next time slice.
  - Will run until eternity if no next time slice available.

- When an end time (or duration) is available:
  - Gaps will occur when the endtime is before than the start time of the next time slice.
  - Overlaps will be removed when the end time is after the start time of the next time slice. The end time will become equal to the start time of the next time slice.

> [@hotNipi](#):
>
> I love challenges. But I really don't have couple of next years free

Indeed, we prefer that you develop this year 20 smaller nodes instead of only a single large one...  
And all for free of course 🤣

> [@Christian-Me](#):
>
> But it is certainly less fun.

Indeed I don't think an SVG/CSS wizard like hotnipi won't have much fun reusing existing components...

> [@hotNipi](#):
>
> should the situation then be graphically covered nicely (having no bright idea how to do it) or it should be treated as not supported case.

I assume you can only solve it by showing multiple lines below each other. But if nobody has real life (iot) use cases, then I would drop this functionality. Unless you want to be able to build a project planning tool in the Node-RED dashboard ...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 February 2020 21:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/22 "2020-02-03T21:57:16Z")

</div>

> [@BartButenaers](#):
>
> SVG/CSS wizard

Oh I'm definitely not the one. I'm an 25+ years ActionScript developer, if anybody even remembers what that was. Just trying to familiarize myself with technologies the world accepts for today 😃

But OK, I'v got something to think about. (which I tend to spend more time than coding the stuff)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [4 February 2020 12:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/23 "2020-02-04T12:44:15Z")

</div>

Meanwhile the state-trail got some updates  
**v0.1.6**

- Legend (with option to toggle between state names and aggregated time per state)
- Improved configuration page (to indicate configuration errors more clearly)

![statetrail](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25048ccadae2789f649fb0f1ba9eacb33dae5924.png)

> **[node-red-contrib-ui-state-trail](https://flows.nodered.org/node/node-red-contrib-ui-state-trail)**
>
> A Node-RED dashboard ui node. Trail of state changes over time

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [5 March 2020 06:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/24 "2020-03-05T06:32:15Z")

</div>

I have found some strange behaviors using the node. I use it in my dashboard to visualize the state of a door. I use a full 24 hours as the interval that is being shown. What I noticed is that the time marks and the state representations are not being shown correctly. It works for the first few hours but the longer the time frame is that the graph represents the more the two are shifted in relationship to each other.  
For example this morning an event that happened at 21:45 last night will be shown before the 9pm time mark. It was shown right last night but the longer ago the more it will shift in relationship to the time label. The shift is always to an earlier time.  
Have you noticed this behavior before?  
Thanks for the great node. Johannes

---

<div class="post-metadata">

**Author:** ![unixneo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unixneo/32/17441_2.png) [@unixneo](https://discourse.nodered.org/u/unixneo)\
**Post date:** [5 March 2020 06:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/25 "2020-03-05T06:34:30Z")

</div>

This is an awesome dashboard node @hotNipi

Thanks again!

Will try this soon on a network monitoring app.

Cheer and Great Job!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 March 2020 06:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/26 "2020-03-05T06:39:56Z")

</div>

Can you collect raw data of 24h events and give me for analysis?

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [5 March 2020 07:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/27 "2020-03-05T07:05:25Z")

</div>

The input data? Yes I can do that. I will save it in the state/timestamp format to a csv.

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [5 March 2020 12:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/28 "2020-03-05T12:29:13Z")

</div>

i will send you the data but i thought id show you it’s happening already:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44049caca55b0eeded06dd98faa9449baf7dc834.jpeg)  
I started putting values into this chart at 8:01 this morning.  
There is CLOSED(grey) and OPEN(green).  
The first two values are CLOSED until at 8:23(timestamp 1583393020921) the first OPEN arrives. it gets rendered correctly at the time but now a few hours later its beeing shown at the 8:01 mark.  
Same rendering when I inject the Object as an array with timestamps.  
The closer the number scale gets to now the more accurate it is the further in the past and the longer the period shown the more it shifts.  
Johannes

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 March 2020 14:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/29 "2020-03-05T14:44:56Z")

</div>

Please add info about the settings of dashboard. Sizes and theme. I think you are using the Angular theme?

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [5 March 2020 17:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/30 "2020-03-05T17:07:49Z")

</div>

-yes it angular(but the same happens with the nodered theme)  
-the widget is set to 6x2  
-Two states strings OPEN/CLOSED  
-5 ticks(tried different numbers, didn’t make a difference)  
-no persistable storage(tried both, didn’t make a difference)  
-combine similar states!!!  
-no legend (no difference)  
-format hh:mm(tried different formats no difference).  
I know more about what happens now. It has something to do with the combination of similar states.  
What I can reproduce is that if the chart receives CLOSED several times after deployment or after resetting it the error occurs when it first receives OPEN. OPEN gets pushed to the time of the very first received CLOSED and for some reason all the previous states of CLOSED get completely ignored.  
So I depoyed a chart today at 1:50pm. It received CLOSED as a state 9 Times and showed it correctly as grey. Than it received OPEN(blue) for the first time at 5:24pm and this happens:

 ![IMG_3706](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f048d5ec3a9c375de4d210e80c40b26697984a4.jpeg)  
it forgets the 9 previous Values of CLOSED and after receiving CLOSED again a few seconds later this:  
 ![IMG_3707](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbd165f3895814395e5626a1e88983f2a0c98c3f.jpeg)  
The period length of OPEN is shown correctly now but its moved to the very start.  
But if i now take the same data and inject it into another graph widget which has combine similar states turned off it shows it correctly Rendering the blob for OPEN at the correct time :  
 ![IMG_3708](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2351e93849a82ec27521e431b178f85493a3bfe.jpeg)  
So it is 100 percent something that combine similar states does when applied to several similar states at the start of a graph.  
Here is the csv with the data as a txt:  
[KitchenWindowState.txt](https://discourse.nodered.org/uploads/short-url/j21l5vqSzTp03usudHwBwbJTm9V.txt) (250 Bytes)  
I hope this helps to narrow it down, Johannes

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 March 2020 17:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/31 "2020-03-05T17:26:30Z")

</div>

Thank you, investigating. 🤔

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 March 2020 18:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/32 "2020-03-05T18:08:46Z")

</div>

Many thanks to help me out to discover this!  
Issue found and fixed in version 0.2.9  
🙃

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [5 March 2020 18:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/33 "2020-03-05T18:39:39Z")

</div>

Thank you alot for fixing it. I wanted a graph like this for a long time, thanks for the time developing it.  
Johannes

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [6 March 2020 12:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/34 "2020-03-06T12:23:38Z")

</div>

I'm using state-trail to display the temperature of my solar diverter, and have configured the node to 'Show current states', thinking that it would only display the 'current state', but it appears to display all of the states that are present in the chart (it's a 8hr chart)  
For example, the current state is 16 deg, so expected just to see 'More than 15C', but in fact it lists all of the states (and runs out of space).  
I suppose the emphasis is in the trailing 's' in 'Show current state **s**'.

![state](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a200cc8e8ad78e38d35587617425c068fc7643f3.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 March 2020 12:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/35 "2020-03-06T12:38:18Z")

</div>

Well it is from widget perspective. All the states currently visible. And of course it can run out of space cos the number of states is not limited.  
Main purpose of widget is to get overview of state **changes** over time. Current state is actually partially out of display (fades out to right) thus the importance considered low.

But I think It can be done of course. (Show latest state). Takes couple of lines of coding 🙂

Well easy to promise but....  
Clicking on legend shows summary of each state. Current state is not calculated in as it has no duration yet. If the configuration says that legend shows latest state, what to expect from stats to show? A bit of confusion.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 March 2020 14:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/36 "2020-03-06T14:20:58Z")

</div>

Published v0.2.10. 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 March 2020 14:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/37 "2020-03-06T14:55:24Z")

</div>

I would say (if possible) just highlight the current state in the legend slightly so 100% for current state and slightly less opacity for rest of text...?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [6 March 2020 15:04 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/38 "2020-03-06T15:04:14Z")

</div>

Well I did it as was requested and it actually still does the job nicely.  
If latest state is not found anywhere else in timeline, the statistics will show zero time and it is correct value. I just never tough about it that way but really, statistics of state history should provide info about current state as much as possible. So it is done 🙂

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [6 March 2020 19:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/39 "2020-03-06T19:18:19Z")

</div>

![status](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/936fe6db3d333a95b0aa4dbae005829c8fb8f016.jpeg)

Perfect! that's helped a lot thanks.

Sorry I didn't see your earlier edit....

> [@hotNipi](#):
>
> Well easy to promise but....  
> Clicking on legend shows summary of each state. Current state is not calculated in as it has no duration yet. If the configuration says that legend shows latest state, what to expect from stats to show? A bit of confusion.

---

<div class="post-metadata">

**Author:** ![Botched1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/botched1/32/21190_2.png) [@Botched1](https://discourse.nodered.org/u/Botched1)\
**Post date:** [3 May 2020 19:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/40 "2020-05-03T19:23:43Z")

</div>

I made 2 feature requests / wishes on the git:

1. Ability to graph more than one value (aka multiple gantt chart / swim lanes), using msg.topic as the graph id/key to determine where msg.payload goes. I'm also 100% OK if legend can't be shown at all when there are multiple graphs.

2. Ability to put label on LEFT instead of ABOVE. Especially important if feature request #1 above is implemented.

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539.md?page=1)

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539.md?page=3)