Grouping graces & split temperature and humidity plots

[dbuezas]

type: custom:plotly-graph
entities:
  - entity: sensor.a4c138d9252a_temperature
    yaxis: y1
    legendgroup: 1
  - entity: sensor.a4c138d9252a_humidity
    yaxis: y2
    legendgroup: 1
    showlegend: false
  - entity: sensor.a4c1386c071c_temperature
    yaxis: y1
    legendgroup: 2
  - entity: sensor.a4c1386c071c_humidity
    yaxis: y2
    legendgroup: 2
    showlegend: false
  - entity: sensor.a4c1389c2e0c_temperature
    yaxis: y1
    legendgroup: 3
  - entity: sensor.a4c1389c2e0c_humidity
    yaxis: y2
    legendgroup: 3
    showlegend: false
  - entity: sensor.keller_temperature
    yaxis: y1
    legendgroup: 4
  - entity: sensor.keller_humidity
    yaxis: y2
    legendgroup: 4
    showlegend: false
  - entity: sensor.a4c1389217d4_temperature
    yaxis: y1
    legendgroup: 5
  - entity: sensor.a4c1389217d4_humidity
    yaxis: y2
    legendgroup: 5
    showlegend: false
  - entity: sensor.a4c1382520f0_temperature
    yaxis: y1
    legendgroup: 6
  - entity: sensor.a4c1382520f0_humidity
    yaxis: y2
    legendgroup: 6
    showlegend: false
  - entity: sensor.sonoff_rf_gateway_temperature_2
    yaxis: y1
    legendgroup: 7
  - entity: sensor.sonoff_rf_gateway_humidity_2
    yaxis: y2
    legendgroup: 7
    showlegend: false
  - entity: sensor.openweathermap_temperature
    yaxis: y1
    legendgroup: 8
  - entity: sensor.openweathermap_humidity
    yaxis: y2
    legendgroup: 8
    showlegend: false
  - entity: sensor.wintergarten_clima_temperature
    yaxis: y1
    legendgroup: 9
  - entity: sensor.wintergarten_clima_humidity
    yaxis: y2
    legendgroup: 9
    showlegend: false
layout:
  dragmode: pan
  margin:
    t: 30
    l: 45
    r: 30
    b: 50
  showlegend: true
  height: 650
  legend:
    x: 0
    'y': 1
    bgcolor: rgba(0,0,0,.7)
    orientation: v
    itemsizing: constant
    font:
      size: 10
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  yaxis:
    title:
      text: Temperature
  yaxis2:
    title:
      text: Humidity
no_default_layout: true
defaults:
  entity:
    show_value:
      right_margin: 10
  yaxes:
    fixedrange: true
title: Climate
hours_to_show: 24
refresh_interval: 10
color_scheme:
  - '#1f77b4'
  - '#1f77b4'
  - '#aec7e8'
  - '#aec7e8'
  - '#ff7f0e'
  - '#ff7f0e'
  - '#ffbb78'
  - '#ffbb78'
  - '#2ca02c'
  - '#2ca02c'
  - '#98df8a'
  - '#98df8a'
  - '#d62728'
  - '#d62728'
  - '#ff9896'
  - '#ff9896'
  - '#9467bd'
  - '#9467bd'

[netweaver1970]

Hi,
thanks for this example, I'm trying to -ultimately- get to the same situation, but for now I'm having the problem that when 'unclicking' 1 room (aka sensor group), all sensors graphs disappear ... I didn't have this behaviour before I modified this plotly graph definition towards this example? Any idea what could be the issue or offending option?

entities:
  - entity: sensor.th_livingroom_temperature
    legendgroup: 1
    name: Livingroom
    yaxes: y1
    line:
      color: red
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 30// <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_kitchen_temperature
    legendgroup: 1
    name: Kitchen
    yaxes: y1
    line:
      color: orange
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 4// <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_garage_temperature
    legendgroup: 1
    name: Garage
    yaxes: y1
    line:
      color: green
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 60 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_outside_back_temperature
    legendgroup: 1
    name: Outside
    yaxes: y1
    line:
      color: gray
      shape: spline
  - entity: sensor.th_office2_temperature
    legendgroup: 1
    name: Office
    yaxes: y1
    line:
      dash: dot
      shape: spline
  - entity: sensor.th_guest_temperature
    legendgroup: 1
    name: Guest
    yaxes: y1
    line:
      dash: dot
      shape: spline
      color: red
    lambda: |-
      (ys, xs) => {
        const MINUTES = 30// <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_master_br_temperature
    legendgroup: 1
    name: Master
    yaxes: y1
    line:
      dash: dot
      shape: spline
      color: orange
    lambda: |-
      (ys, xs) => {
        const MINUTES = 20 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_alastair_temperature
    legendgroup: 1
    name: Alastair
    yaxes: y1
    line:
      dash: dot
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 30 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
  - entity: sensor.th_bathroom_temperature
    legendgroup: 1
    name: Bathroom
    yaxes: y1
    line:
      dash: dot
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 30 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }
hours_to_show: 4
refresh_interval: 10
no_default_layout: true
default_trace:
  line:
    width: 1.5
layout:
  dragmode: pan
  margin:
    t: 30
    l: 45
    r: 30
    b: 50
  showlegend: true
  height: 650
  legend:
    x: 0
    'y': 1
    bgcolor: rgba(0,0,0,.7)
    orientation: v
    itemsizing: constant
    font:
      size: 10
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  yaxis:
    title:
      text: Temperature
  yaxis2:
    title:
      text: Humidity
  plot_bgcolor: black
  y1:
    gridcolor: whitesmoke
    zeroline: false
    fixedrange: true
  xaxis:
    rangeselector:
      'y': 1.02
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
defaults: null
title: Climate

[dbuezas]

Oh, you've got a nice one there! screeshots! :)

The legends of all traces with the same legendgroup are merged together and are hidden/shown together.
In your yaml, all traces have legendgroup: 1, so they are all merged together.

Use different legendgroup numbers for each group instead

Also,

default_trace:
  line:
    width: 1.5

is deprecated. Where in the docs/issues/discussions did you find that? (I'll change it)

Use this instead:

defaults:
  entity:
    width: 1.5

[netweaver1970]

I've found the

visibility: legendonly

option in another issue, that works fine the 1st time entering the graph but when pressing reset all entities are shown, just as the other issue claims. Seems like an improvement point 😉

[dbuezas]

Yes, you are right, reset is not complete. It also has issues with the scales of secondary y axes.
I should probably just destroy and recreate the plot instead of setting specific values to their default.
You people are taking the card to its absolute limits! :)

[netweaver1970]

Thanks, indeed, varying the legendgroup fixed it! :)
I also fixed the default width. No clue where I've found that online, this little -bit more advanced- plotly PoC is looking more like a copy(from somewhere)-paste-adjust exercise ...

Next question, how to make 1 legendgroup by default 'grayed out' when opening up the graph? The 'Outside' group (temperature/hum/etc...) should be usually hidden, only when required I would like to switch it on.

Screenshot ... It's not ready yet, I want also to include absolute humidities as a 3rd graph, to see if there's movement at times I'm not home, since it's an older house and there will be some outside->inside leakages and ground up (via walls) increases. I have long absences in this house so I should be able to see only 'natural' moisture flows. Anyhow, this brings me into building physics, not exactly my forte. But as with everything, you start with 1 'problem/request' and you end up with 10s more ultimately :)

Still, step 1 is here ... looks very similar to yours, only the humidity sensors are missing so far. And my values are more averaged out. Might be nice if there was an averaging function, taking the time window as variable, to avoid repeating the same code over and over again. Or something for defaults?
My kitchen has a strange regular temperature wobble, that's because the sensor is at the side of the fridge. So it indicates the outside fridge temp increase from cooling the fridge inside. I could average it all out, but that would be not correct as the rest of the room is not increased that much. A MIN function over a longer period would be better. Or just find a better (as invisible) spot in the kitchen to attach it to. Lots of ideas ...

Thanks for your work!

[netweaver1970]

in the plotly docs I can find an attribute on a legendgroup which should do the trick "showlegend: false" but I can't find the corresponding HA syntax (if any) ...

[dbuezas]

I think showlegend: false inside the trace will hide the legend completely instead of graying it out by default.
In any case, if it is available in plotly then you can use it in the card: whatever you put inside the entity goes to what plotly calls trace. The card mostly takes care of fetching the right data and generating reasonable defaults, but it will pass everything you give it to plotly.

As you wrote above, visible: legendonly is the way to go

[yalov]

Update please this example to the last version.

Also, the legends by default above the graphs, to make it inside the top graph I have changed

legends:
    'y': 0.8

How to make legends lines space interval lower?
And by default, on clicking legend line, the sensor is hiding, instead of been the only one to be highlited

[dbuezas]

You can find this information in generic plotly forums. Don't forget that plotly is a standalone project and this card is focused in exposing it connecting it to home assistant and provide facilities for data processing