Stacked line graphs with high precision.

[tomtom13]

Hi, so I've been pestering maintainer on HA forums, and I though I will take this discussion here for posterity.

I would like to create a graph where certain power consumption figures are stacked on top of each other.
However trying to use some of examples of lambdas bares no good results :( Issues for me are three fold:

1. Some sensors don't report any value if socket is OFF or there is no significant change in the power consumption
2. reporting intervals are all over the place - I tried forcing those in zigbee2mqtt, with no luck :(
3. I don't know how lambdas in the context of this card work, and I think I dumb enough not to google out anything of value so far.

Stuff that I would like to achieve in lambda is:

• I'm not hell bent on averaging, last value from pervious sample before data point should do fine for me, considering I would like data points every second.
• if there was no report for a hour, currents examples seem to fall short since those only (seem) to search through movable window
• don't know if there is a way to scale lambdas along with the scale of the graph - if I zoom out to period of 5 days, I don't think that lambda producing a point every second will play nicely in terms of performance ( but then averaging of several samples would be nice), but I might be red hearing and it's not a real performance issue

[dbuezas]

If I understood everything correctly, statistics would be a perfect fit (because of the aligned timestamps that will allow you to stack them). Except that you want to have the highest resolution possible, and also the last known value should be used for as long as there is no new value available.
Is that all correct?

[dbuezas]

And also that the resolution varies with the zoom level

[tomtom13]

That is more or les correct, however the resolution varying might not be that important (if plotly can handle barrage of few days of samples every second).

[dbuezas]

I underestimated your request a bit, but I think this is what you want:

type: custom:plotly-graph-dev
entities:
  - entity: sensor.temperature_humidity_sensor_9c2e0c_temperature
  - entity: sensor.teich_temperature
  - entity: sensor.temperature_humidity_sensor_9c2e0c_temperature
    lambda: (ys)=>ys
    type: line
  - entity: sensor.teich_temperature
    type: line
    lambda: (ys)=>ys
layout:
  barmode: stack
hours_to_show: 0.1
defaults:
  entity:
    type: bar
    lambda: |-
      (ys, xs, entities) => {
        const second = 1000;
        const minute = second * 60;
        const hour = minute * 60;
        const day = hour * 24;
        const deltas = [
          // using discrete steps to minimize the chance
          // that the traces missalign
          // [max total span in ms, resolution],
          [Number.POSITIVE_INFINITY, 1*day],
          [1*day, 1*hour],
          [1*hour, 1*minute],
          [10*minute, 1*second],
        ]
        const from_ms = +xs[0];
        const to_ms = +xs[xs.length-1];
        const span = to_ms - from_ms;
        let delta_t;
        for (const [max_span, resolution] of deltas){
          if (span < max_span) delta_t = resolution;  
        } 
        console.log(span, delta_t)
        const aligned = { x:[], y:[] };
        // rounding to force alignment
        let t = Math.floor(from_ms/delta_t)*delta_t;
        console.log({entity: entities[0].entity_id, span, from_ms, to_ms, delta_t, start_t: t});

        let last_y;
        let i = 0;
        while (t < to_ms){
          let acc = 0;
          let count = 0;
          while (i<xs.length && t >= xs[i]) {
              if (ys[i]!== null){
                  acc += ys[i];
                  count++;
              }
              i++;
          }
          if (count > 0 ) last_y = acc/count;
          aligned.x.push(new Date(t))
          aligned.y.push(last_y)
          t += delta_t;
        }
        return aligned;
      } 

[tomtom13]

I've tried your thing, and it seems to carry forward first sample data forever.
Now, I don't want you to do all the work for me. I would like some pointers on how this specific "lambda" functions here. "Lambda" is a very broad terms ranging from C++, through smalltalk to python - so meanings can vary. Would be nice how the "lambda" is called, and how the data is feed and how output data is expected to be spit out of it. I assume that in this context it's a java ish syntax (js ?).
Knowing those things I might give is a shot my self.

[dbuezas]

It's just a JavaScript function :)
Javascript is the main programming language that browsers know how to interpret.
Check the readme of this repo to see the parameters and the valid structures of the return value. I named it lambda because it is somewhat analogous to lambdas in ESPHome.
You can google "how to do x in JavaScript" and you will find examples about pretty much anything.

[tomtom13]

Since the readme is not 100% specific:

1. is "labmda" iterated per point, or fed a list (I assume it's fed a list and run once)
2. what are the differences of "ys" "xs" "entity"
3. what are the other parameters possible to be fed into lambda

[dbuezas]

Yeah, at the moment the only docs for that is looking at the examples in the readme.

x is the x coordinate (timestamp) and y is the y coordinate (sensor value)

If you return an array, the card assumes it is the array of values. If instead you return an object with x and y properties (arrays), the card will use them both.

I suggest you check out the part of the code that calls it:
https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/plotly-graph-card.ts#L579

And also look for examples in the readme and discussions section (search for lambda)

Also, for debugging, you can use console.log to print things, and check the console of your browser.

https://balsamiq.com/support/faqs/browserconsole/