Stacked temperature graphs with heating/cooling information [ from multiple sensors]

[myfp31]

Unsing the storing function and what has been already made on these discussions #219 and #197, I have created a stacked temperature graphs with heating/cooling information from multiple sensors (as I don't have pure climate sensors with attributes).

The result is

And the associated code is :

type: custom:plotly-graph
entities:
# Entities for the first plot
  - entity: sensor.py_bout_statut
  # Entity to retrieve status of the heat/cooling.
  # internal to avoid to show it
  # Store in variable. Resample is necessary.
    internal: true
    filters:
      - resample: 1m
      - store_var: statutbout
  - entity: sensor.py_bout_consigne
  # Entity to graph the target temperature.
  # Min and max stored for yaxis range.
    yaxis: y1
    filters:
      - resample: 1m
      - store_var: consigne
    fnmin: $fn ({ ys, vars }) => {vars.minyboutc = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxyboutc = Math.max(...ys.filter(Number))}
  - entity: sensor.py_bout_temp
  # Entity to graph with fill-in with blue color when cooling. No line.
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'y'
      - map_y: |
          vars.statutbout.ys[i] === 'Refroidissement' ?  y : 0
  - entity: sensor.py_bout_temp
  # Entity to graph with fill-in with red color when heating. No line.
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(220, 0, 0, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'y'
      - map_y: |
          vars.statutbout.ys[i] === 'Chauffe' ?  y : 0
  - entity: sensor.py_bout_temp
   # Entity to graph the temperature.
  # Min and max stored for yaxis range.
    yaxis: y1
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minybout1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybout1 = Math.max(...ys.filter(Number))}
#Second plot. Same model than the first one.
  - entity: sensor.py_bar_statut
    internal: true
    filters:
      - resample: 1m
      - store_var: statut
  - entity: sensor.py_bar_consigne
    yaxis: y2
    legendgroup: 2
    filters:
      - resample: 1m
      - store_var: consigne
    fnmin: $fn ({ ys, vars }) => {vars.minybarc = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybarc = Math.max(...ys.filter(Number))}
  - entity: sensor.py_bar_temp
    yaxis: y2
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'y'
      - map_y: |
          vars.statut.ys[i] === 'Refroidissement' ?  y : 0
  - entity: sensor.py_bar_temp
    yaxis: y2
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(2200, 0, 0, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'y'
      - map_y: |
          vars.statut.ys[i] === 'Chauffe' ?  y : 0  
  - entity: sensor.py_bar_temp
    yaxis: y2
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minybar1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybar1 = Math.max(...ys.filter(Number))}
  - entity: input_select.py_gly_mode
    internal: true
    filters:
      - resample: 1m
      - store_var: statutgly
  #Third plot. No target temp and only on/off value
  - entity: sensor.py_gly_temp
    yaxis: y3
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'y'
      - map_y: |
          vars.statutgly.ys[i] === 'Marche' ?  y : 0
  - entity: sensor.py_gly_temp
    yaxis: y3
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minygly1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxygly1 = Math.max(...ys.filter(Number))}
layout:
  height: 750
  legend:
    bgcolor: transparent
    x: 0
    'y': 1
    yanchor: bottom
    orientation: h
    itemsizing: small
    font:
      size: 10
  grid:
    rows: 3
    columns: 1
    roworder: top to bottom
  yaxis:
    autorange: false
    fixedrange: true
    title: Chai bouteilles
# used var to decide the range and avoid  zero from "calculated" temp. 
    range:
      - $fn ({vars}) => Math.min(vars.minybout1,vars.minyboutc) - 0.5
      - $fn ({vars}) => Math.max(vars.maxybout1,vars.maxyboutc) + 1
    ticksuffix: °C
    griddash: dot
  yaxis2:
    title: Chai barriques
    autorange: false
    fixedrange: true
    range:
      - $fn ({vars}) => Math.min(vars.minybar1,vars.minybarc) - 0.5
      - $fn ({vars}) => Math.max(vars.maxybar1,vars.maxybarc) + 0.5
    ticksuffix: °C
    griddash: dot
    side: left
    overlaying: false
    visible: true
    showgrid: true
  yaxis3:
    title: Glycol et pompe à chaleur
    autorange: false
    fixedrange: true
    range:
      - $fn ({vars}) => Math.min(vars.minygly1) - 0.5
      - $fn ({vars}) => Math.max(vars.maxygly1) + 0.5
    ticksuffix: °C
    griddash: dot
    side: left
    overlaying: false
    visible: true
    showgrid: true
hours_to_show: 3d
refresh_interval: 300

Thanks a lot for this plotly card.
I should now deploy these graph automatically for multiple rooms and tanks.

[dbuezas]

Very neat,
You used a lot of advanced features!

You may also like $ex as a more compact alternative of $fn.
There's an ineffectual - map_y: 'y' in one of your filters

[myfp31]

There's an ineffectual - map_y: 'y' in one of your filters

You're right, I will correrct it

You may also like $ex as a more compact alternative of $fn.

Not sure to find the right syntax for it ;-) But I will have a look.

[dbuezas]

$ex is the same as $fn, but without params and arrow:

$fn ({ vars, ys }) => ys.map....
$fn ({ ... }) => { vars.xxx = ... }

Are the same as

$ex: ys.map...
$ex { vars.xxx = ... }

[myfp31]

Thanks, it works fine.

[myfp31]

corrected code without ineffectual map_y

type: custom:plotly-graph
entities:
# Entities for the first plot
  - entity: sensor.py_bout_statut
  # Entity to retrieve status of the heat/cooling.
  # internal to avoid to show it
  # Store in variable. Resample is necessary.
    internal: true
    filters:
      - resample: 1m
      - store_var: statutbout
  - entity: sensor.py_bout_consigne
  # Entity to graph the target temperature.
  # Min and max stored for yaxis range.
    yaxis: y1
    filters:
      - resample: 1m
      - store_var: consigne
    fnmin: $fn ({ ys, vars }) => {vars.minyboutc = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxyboutc = Math.max(...ys.filter(Number))}
  - entity: sensor.py_bout_temp
  # Entity to graph with fill-in with blue color when cooling. No line.
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: |
          vars.statutbout.ys[i] === 'Refroidissement' ?  y : 0
  - entity: sensor.py_bout_temp
  # Entity to graph with fill-in with red color when heating. No line.
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(220, 0, 0, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: |
          vars.statutbout.ys[i] === 'Chauffe' ?  y : 0
  - entity: sensor.py_bout_temp
   # Entity to graph the temperature.
  # Min and max stored for yaxis range.
    yaxis: y1
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minybout1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybout1 = Math.max(...ys.filter(Number))}
#Second plot. Same model than the first one.
  - entity: sensor.py_bar_statut
    internal: true
    filters:
      - resample: 1m
      - store_var: statut
  - entity: sensor.py_bar_consigne
    yaxis: y2
    legendgroup: 2
    filters:
      - resample: 1m
      - store_var: consigne
    fnmin: $fn ({ ys, vars }) => {vars.minybarc = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybarc = Math.max(...ys.filter(Number))}
  - entity: sensor.py_bar_temp
    yaxis: y2
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: |
          vars.statut.ys[i] === 'Refroidissement' ?  y : 0
  - entity: sensor.py_bar_temp
    yaxis: y2
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(2200, 0, 0, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: |
          vars.statut.ys[i] === 'Chauffe' ?  y : 0  
  - entity: sensor.py_bar_temp
    yaxis: y2
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minybar1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxybar1 = Math.max(...ys.filter(Number))}
  - entity: input_select.py_gly_mode
    internal: true
    filters:
      - resample: 1m
      - store_var: statutgly
  #Third plot. No target temp and only on/off value
  - entity: sensor.py_gly_temp
    yaxis: y3
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(0, 0, 220, 0.5)
    line:
      width: 0
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: |
          vars.statutgly.ys[i] === 'Marche' ?  y : 0
  - entity: sensor.py_gly_temp
    yaxis: y3
    fill: none
    fnmin: $fn ({ ys, vars }) => {vars.minygly1 = Math.min(...ys.filter(Number))}
    fnmax: $fn ({ ys, vars }) => {vars.maxygly1 = Math.max(...ys.filter(Number))}
layout:
  height: 750
  legend:
    bgcolor: transparent
    x: 0
    'y': 1
    yanchor: bottom
    orientation: h
    itemsizing: small
    font:
      size: 10
  grid:
    rows: 3
    columns: 1
    roworder: top to bottom
  yaxis:
    autorange: false
    fixedrange: true
    title: Chai bouteilles
# used var to decide the range and avoid  zero from "calculated" temp. 
    range:
      - $fn ({vars}) => Math.min(vars.minybout1,vars.minyboutc) - 0.5
      - $fn ({vars}) => Math.max(vars.maxybout1,vars.maxyboutc) + 1
    ticksuffix: °C
    griddash: dot
  yaxis2:
    title: Chai barriques
    autorange: false
    fixedrange: true
    range:
      - $fn ({vars}) => Math.min(vars.minybar1,vars.minybarc) - 0.5
      - $fn ({vars}) => Math.max(vars.maxybar1,vars.maxybarc) + 0.5
    ticksuffix: °C
    griddash: dot
    side: left
    overlaying: false
    visible: true
    showgrid: true
  yaxis3:
    title: Glycol et pompe à chaleur
    autorange: false
    fixedrange: true
    range:
      - $fn ({vars}) => Math.min(vars.minygly1) - 0.5
      - $fn ({vars}) => Math.max(vars.maxygly1) + 0.5
    ticksuffix: °C
    griddash: dot
    side: left
    overlaying: false
    visible: true
    showgrid: true
hours_to_show: 3d
refresh_interval: 300