📈 What about this little thingy?

Dashboard
1

image
image749×255 11.8 KB

CODE 
<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 ...

10 Likes
2

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

3

Oh I like it!

4

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

I've found sparklines very useful whilst using @flexdash/node-red-flexdash.

spark

1 Like
5

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.

6

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.

7

Doesn't D2 include Vuetify?

1 Like
8

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
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).

1 Like
9

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

10

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

image

The performance issue still is kind of blocker here.

1 Like
11

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!

12

Just the D3. Nothing too fancy...

13

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.

14

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

Otherwise, I may of been more enthusiastic :wink:

15

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.

16

Could they be configuration options, so users can decide?

17

Certainly. Options are fancy. But what to offer?

18

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°?

19

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.

1 Like
20

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.

1 Like