# 📈 What about this little thingy?

**URL:** <https://discourse.nodered.org/t/what-about-this-little-thingy/92292>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 October 2024 12:58 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292 "2024-10-10T12:58:35Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [10 October 2024 12:58 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/1 "2024-10-10T12:58:35Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1c506c4ad2b22ac76d815e97843be1752fc9f430.png)

> **CODE**
>
> ```auto
> <template>
> <div>
> <div class="card-chart-value">{{formatted}}</div>
> <div id="charting-area-1" ></div>
> </div>
> </template>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
> <script>
> export default {
> data() {
> return {
> value:0,
> keep:30000,
> chartdata:[],
> color:"#90EE90",
> fill: "#90EE9033",
> svg:null
> }
> },
> watch: {
>             
> },
> computed: {
> formatted(){
> return this.value.toFixed(2)+"°C"
> }
>             
> },
> methods: {
> clearOldData(){               
> this.chartdata = this.chartdata.filter(point => point.time > Date.now() - this.keep)             
> },
> onInput (msg) {
> this.clearOldData()
> this.chartdata.push({time: (new Date()).getTime(),value: msg.payload})
> this.value = msg.payload;
>                 
> if(this.svg){
> this.svg.selectAll("*").remove();                    
> }
> this.draw()
> 
> },
> draw(){               
> const w = 300;
> const h = 80;                
> if(!this.svg){
> this.svg = d3.select("#charting-area-1").append("svg").attr("viewBox", `0 0 300 80`)
> }
>                 
> const xScale = d3.scaleTime().domain([d3.min(this.chartdata, d => d.time), d3.max(this.chartdata, d => d.time)]).range([-2, w+2]);
> const yScale = d3.scaleLinear().domain([d3.min(this.chartdata, d => d.value), d3.max(this.chartdata, d => d.value)]).range([h+2, 0]);
> const lineGenerator = d3.area().x(d => xScale(d.time)).y0(yScale(0)).y1(d => yScale(d.value)).curve(d3.curveBasis);
> this.svg.append("path").datum(this.chartdata).attr("d", lineGenerator).attr("style", "stroke-width:1px;stroke:"+this.color+";fill:"+this.fill+";");
>  
> }
>           
> },
> mounted() {
> this.$socket.on('msg-input:' + this.id, this.onInput)
> let interval = setInterval(() => {
> if (window.d3) {                    
> clearInterval(interval);                    
> }
> }, 100);
>            
> },
> unmounted() {
> this.$socket.off('msg-input:' + this.id, this.onInput)
> }
> }
> </script>
> <style scoped>   
> .card-chart-value{
> font-size:x-large;
> }
> </style>
> 
> ```

Let's see what kind of responses it collects. I may then consider to make a widget ...

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 October 2024 13:13 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/2 "2024-10-10T13:13:44Z")

</div>

I've seen demand for this kind of thing too. Would be very a welcomed publication

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 October 2024 15:16 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/3 "2024-10-10T15:16:56Z")

</div>

Oh I like it!

---

<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:** [10 October 2024 15:31 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/4 "2024-10-10T15:31:25Z")

</div>

`@hotnipi/node-red-dashboard-2-ui-sparkline` ???

I've found [sparklines](https://en.wikipedia.org/wiki/Sparkline) very useful whilst using `@flexdash/node-red-flexdash`.

![spark](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/02a09d4a9523d4f8b88b6c3d57cd17e311f255f9.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:** [10 October 2024 15:48 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/5 "2024-10-10T15:48:10Z")

</div>

I don't like too much the value on top of the chart area, but as an option of course possible.

I think it should definitely have layout options to use without label as single widget in group and as regular widget, label included. And then maybe single row which does respect the row height. That last of course is full of compromise cases.

---

<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:** [10 October 2024 17:01 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/6 "2024-10-10T17:01:08Z")

</div>

One issue this node will have is the "silent performance killer".

There's no way the node can do the aggregation or any other kind of data optimization. But same time to restrict data amount or period makes it kinda of pointless.

Well known that even with bold and red written explanation in readme is just fancy echo in canyon.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 October 2024 20:23 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/7 "2024-10-10T20:23:52Z")

</div>

Doesn't D2 include Vuetify?

> **[Sparkline Component — Vuetify.js](https://v15.vuetifyjs.com/en/components/sparklines/)**
>
> Sparkline component for Vuetify Framework

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [10 October 2024 23:14 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/8 "2024-10-10T23:14:55Z")

</div>

> [@TotallyInformation](#):
>
> Doesn't D2 include Vuetify?

Unlike the D1 version of the sparkline, the Vuetify version does NOT build the array for you in the background so it takes a lot of code to take a value and keep a rolling array for display.  
ie, it works, but it is anything but low/no code.

Edit for those looking for the D1 Node: [node-red-contrib-ui-value-trail (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-ui-value-trail)  
It has some shortfalls, about 4 years back when I asked for some tweaks, it was a pretty clear 'No'.  
I tested the D2 version and found it too frustrating to use.  
The OP image looks a bit far from a sparkline for my site/use case.  
I'd like the D1 version, even with the few options it had, ported across to D2.  
It is quicker / cleaner to use and worked much better than anything else I've tested (my site needs about 58 of them on the home page, so there is a pretty big pent up need for a D2 version).

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [11 October 2024 06:54 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/9 "2024-10-11T06:54:29Z")

</div>

> [@thebaldgeek](#):
>
> the Vuetify version does NOT build the array for you in the background so it takes a lot of code to take a value and keep a rolling array for display.  
> ie, it works, but it is anything but low/no code.

Definitely agree here. The Sparkline in Vuetify works okay for static data, but from the brief play I had about 3 months ago, was not an easy exercise to widget-ify it

---

<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:** [11 October 2024 06:56 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/10 "2024-10-11T06:56:24Z")

</div>

Having a line instead of the area is walk in the park.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d8ef47acf951b0490206fdfc275105581ea4d29.png)

The performance issue still is kind of blocker here.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 October 2024 08:59 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/11 "2024-10-11T08:59:52Z")

</div>

I wonder if you've had a peek into how chart libraries do sparklines?

One of many things that has been on my ever-growing backlog for a long time. There just aren't enough hours in the day!

---

<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:** [11 October 2024 09:09 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/12 "2024-10-11T09:09:14Z")

</div>

Just the D3. Nothing too fancy...

---

<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:** [15 October 2024 18:30 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/13 "2024-10-15T18:30:31Z")

</div>

5 days:  
1x demand seen  
1x oh like  
1x found useful previously  
1x vuetify is short of such

Not enough for me.

Let's call this post as bump but do read whole story and if you can, do contribute with thinking on rised problems.

---

<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:** [15 October 2024 20:23 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/14 "2024-10-15T20:23:41Z")

</div>

This comment gave me some concern - maybe I haven't appreciated how much impact there would be...

> [@hotNipi](#):
>
> One issue this node will have is the "silent performance killer".

Otherwise, I may of been more enthusiastic 😉

---

<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:** [15 October 2024 20:36 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/15 "2024-10-15T20:36:10Z")

</div>

Looking like tiny curve the base still is bunch of data points.  
How much of data should it handle, keep in memory, or even maybe aggregate for user so the input can be straight from sensor.

And then with 40 of such on dashboard fingers crossed it doesn't turn the little PI zero to be fancy glowing Christmas decoration.

This without hard rules makes it performance killer and with hard rules just as the current vuetify component is.

---

<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:** [15 October 2024 20:41 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/16 "2024-10-15T20:41:32Z")

</div>

> [@hotNipi](#):
>
> How much of data should it handle, keep in memory, or even maybe aggregate for user

Could they be configuration options, so users can decide?

---

<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:** [15 October 2024 20:43 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/17 "2024-10-15T20:43:41Z")

</div>

Certainly. Options are fancy. But what to offer?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [15 October 2024 20:53 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/18 "2024-10-15T20:53:42Z")

</div>

It looks nice but I can't see the point.

Without labelled axes graphs convey very little useful information.

There was a dip in Inside Temperature. When? What did it fall to?

The Outside Temperature is 1.43°C. But it was previously higher. 2°? 5°? 20°?

---

<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:** [15 October 2024 21:01 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/19 "2024-10-15T21:01:52Z")

</div>

That's the difference. It is not chart - the tool for analysis for what the user usually can configure or adjust the precision component to get fine enough readout.

It is sparkline - very downsampled overview of property movement in some process.

---

<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:** [15 October 2024 21:11 UTC](https://discourse.nodered.org/t/what-about-this-little-thingy/92292/20 "2024-10-15T21:11:28Z")

</div>

A sparkline takes up little dashboard space and presents the general shape of a variation...

- Is the temperature increasing or decreasing?
- Is the stock market gaining or losing?
- Is the air pressure increasing or falling?
- Has there been a recent malfunction in a process

The sparkline gives an indication, which leads the user to further examine, such as logs, forecasts, charts etc.

[Next page](https://discourse.nodered.org/t/what-about-this-little-thingy/92292.md?page=2)