Dash 2.0 Sparkline

Dashboard
1

I see they are now out of the labs and are in the main menu.

image

Ive spent about an hour trying to get them going, but am just getting no where.
I wonder if because they are new in 3.6.0 something needs to be added (or turned on) in dash 2.0?

EDIT: if they should be working, I will start a new thread for using them in a template node in 2.0

2

Hi. We added the sparklines in the last release. Pretty sure Joe did a demo flow. Let me see if I can find it.

3

Here's where it was added -

I couldn't get it working either, so a demo flow would be good.

1 Like
4

@thebaldgeek @Paul-Reed

1 Like
5

Thanks!
That was the example code I needed.
Up and limping.
Some (ok, lots) fine tuning and tweaking, but hey, great to have them back on a 2.0 dash.

image

6

I had to shut it down.....

image

There is no FIFO or rolling buffer and I can see the memory use for the tab just climb up and up.
Will open a new sparkline thread.... But hey, its a good start.

7

I have examples of sparklines here: Dashboard 2.0: Milestones, PWA and New Components • FlowFuse

I did notice an underlying Vuetify bug though when experimenting: [Bug Report][3.5.17] VSparkline - Width of sparkline reduces as more data is added · Issue #19692 · vuetifyjs/vuetify · GitHub which hasn't had any attention from the Vuetify team yet. Not sure if it was fixed with the move into being a core component though - haven't had the chance to test it.

We'll need to update our Vuetify package dependency in Dashboard 2.0 in order to get the latest/greatest Sparkline component updates

1 Like
8

Could a forum @admins please move the last 7 posts here to a new Dash 2.0 Sparkline thread so we can pick it up over there and leave the original thread intact.

Thanks.

9

I have tried to send an array to this sparkline template to constrain it to just plotting the array size but the node simply repeats the entire array each time it updates (thus making the memory leak even worse).

image

This is an example of the array.

So what I need help with is how to constrain the sparkline template code to not just grow for infinity, but to be able to cap a given number of points to be plotted on the sparkline.

I cant see where to do that inside the template code, so that's why I tried building a rolling FIFO outside in a function node.
I don't care which method is the correct one to use, just need to know how to limit the sparkline in size / time.

Also I tried to get to get the second example shown here: Dashboard 2.0: Milestones, PWA and New Components • FlowFuse
The one with the sparklines in a table (this would be useful in a site I am currently building), but could not get anything to show up at all beyond the table outline.
I suspect it might be because I don't know what the msg.payload array needs to look like for the table example. (id, ping and pingvalues?)
But I am worried that even if I did get it working, the same 'infinity' problem would happen with the sparklines on the table.

10

I was just looking at that myself.
I haven't fully tested it, but try this;

<template>
  <v-sparkline class="nrdb-ui-sparkline" :auto-line-width="false" :fill="false" :gradient="gradient"
    :gradient-direction="'top'" :line-width="2" :model-value="value" :padding="8"
    :smooth="10" :stroke-linecap="'round'" :type="'trend'" auto-draw></v-sparkline>
</template>

<script>
  export default {
    data: function () {
      return {
        gradient: ['#f72047', '#ffd200', '#1feaea'],
        value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]
      }
    },
    watch: {
      msg: function () {
        this.value.push(this.msg.payload)
          // Change the number to limit the array size
          while (this.value.length > 30) {
          this.value = this.value.slice(1)
        }
      }
    }
  }
</script>

<style>
.nrdb-ui-sparkline path {
  stroke-dasharray: 0 !important;
}
</style>

test

2 Likes
11

Fantastic!
This was exactly what I needed. Thanks so much @Paul-Reed

I mashed it up with the heartrate example on the Vuetify page (tip: the 'edit in vuetify playground' is a lot faster to unbreak things than uncrashing your browser showing the Node-RED dashboard and editor - yes, both crash if you get the template code wrong).

sparkline

Thanks for adding an adjustable array size.
Now with the delay node in front you can actually get an exact time span for the sparkline, something that was impossible (and rejected by the node dev) with the dash 1.0 sparkline node.

I need to figure out the sizing a bit better, its all a bit jumbo sized.
Will try and kick at the table example with your code as well as I suspect that a table of these is going to be much more in line with my needs (I have about 10 to 20 per page I need to show).

Here is the code for the gif as you see it.

<template>
  <v-card color="surface-light" max-width="600">
    <template v-slot:title>
      <div class="text-caption text-grey text-uppercase">
        EGGD VDL2
      </div>
      <span
        class="text-h3 font-weight-black"
        v-text="value[49]"
      ></span>
      <small v-if="mpm">mpm</small>
    </template>
    <v-sheet color="transparent">
      <v-sparkline :key="String(mom)" :gradient="['#f72047', '#ffd200', '#1feaea']" :line-width="3"
        :model-value="value" :smooth="16" stroke-linecap="round" auto-draw></v-sparkline>
    </v-sheet>
  </v-card>
</template>

<script>
  export default {
    data: function () {
      return {
        gradient: ['#f72047', '#ffd200', '#1feaea'],
        value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]
      }
    },
    watch: {
      msg: function () {
        this.value.push(this.msg.payload)
          // Change the number to limit the array size
          while (this.value.length > 50) {
          this.value = this.value.slice(1)
        }
      }
    }
  }
</script>

<style>
.nrdb-ui-sparkline path {
  stroke-dasharray: 0 !important;
}
</style>

I'm not sure how to put comments in the middle of the template yet, so do note that the v-text must be the last element of the array in the script area if you want to show the newest value.

1 Like
12

The bigger issue for me is that unlike other template examples, the sparkline appears to reset with a browser connect/reset.

13

Interesting comment. I've always viewed sparklines as 'disposable' quick view history graphs.
Thus it does not matter if you restart Node-RED, in a few minutes they will be back up and running?

I've just noticed that my units 'mpm' are not showing. I need to debug that and find out why. Its odd having a unitless number floating on the graph.

14

That depends upon what data is being fed into it. For example, if it was my greenhouse temperature that updates every 5 minutes, I would have to wait a half hour before I could determine the trend.

Have you noticed what happens to the sparkline if you refresh your browser? (especially as you do have to refresh as it's 'template app')

1 Like
15

As the data for it is an array, don't feed last known value but keep the period of the data at server side, and feed always full set of data. Then the replay message contains also full set so should be valid.

2 Likes
16

Can confirm it resets back to the 'fake' array of data in your code sample ( the 0 ,2, 5, 9 etc) and starts adding my data to the end of that array on browser refresh.
So yes, if its more than a 5 minute sparkline it could get a bit annoying on browser refresh.

@hotNipi I think I sort of follow what you mean, but have no idea what node(s) I would use to pull that off.

17

Same here, above my paygrade too :astonished:

18

One way to create a fixed length (n) array from payloads is to use a batch node with overlap of n-1 and then a join node set to n to make an array, eg

[{"id":"06ac92f4adfa46d8","type":"batch","z":"8a4471faf1092e03","name":"","mode":"count","count":"5","overlap":"4","interval":10,"allowEmptySequence":false,"topics":[],"x":300,"y":780,"wires":[["6e0211cde6d7ebdc"]]},{"id":"0a1ded4c3fc93ad5","type":"inject","z":"8a4471faf1092e03","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":780,"wires":[["06ac92f4adfa46d8"]]},{"id":"ba2ab50b58e0f402","type":"debug","z":"8a4471faf1092e03","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":600,"y":780,"wires":[]},{"id":"6e0211cde6d7ebdc","type":"join","z":"8a4471faf1092e03","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"5","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":450,"y":780,"wires":[["ba2ab50b58e0f402"]]}]

the limitation is that it doesn't output anything until after the first n readings.

19

I used a function node -

let dataArray = flow.get('dataArray') || [0, 0]
dataArray.push(msg.payload);
while (dataArray.length > 10) {
    dataArray = dataArray.slice(1)
    }
msg.payload = dataArray
flow.set('dataArray', dataArray)
return msg

Which creates a fixed length array OK, however integrating that array into the DB template structure didn't prove easy.

(I lost patience, as everytime there is an error in the template script it crashes the system :hot_face: )

20

Exact same issue here trying to get the mpm to show up on the sparkline.
I give up. Just tired of the unknown template errors that crash both the dash and editor browser tabs.