Trying to mimic the default Home Assistant climate card

[alexruffell]

This is the card I am trying to mimic:

I got close but either the cooling/heating shaded area doesn't match the y1 range (top of shaded area should overlay perfectly with the temperature line) or it does forcing the y1 range to begin from 0 instead of autoscaling but then it looks terrible as seen in image below...

type: custom:plotly-graph
title: Upstairs Thermostat
entities:
  - entity: climate.upstairs_thermostat
    attribute: current_temperature
    name: Temperature
    unit_of_measurement: °C
    showlegend: true
    line:
      width: 1
      color: green
  - entity: climate.upstairs_thermostat
    attribute: temperature
    name: Setpoint
    unit_of_measurement: °C
    line:
      width: 1
      color: white
      dash: dot
    show_value: false
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Heat
    show_value: true
    fill: tozeroy
    yaxis: y1
    line:
      color: red
    filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : -1
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Cool
    show_value: true
    fill: tozeroy
    yaxis: y1
    line:
      color: blue
      opacity: 0.1
    filters:
      - map_y: >-
          state.attributes.hvac_action === "cooling" ?
          state.attributes.current_temperature : -1
hours_to_show: 12
refresh_interval: 30
layout:
  height: 400
  showlegend: true
  yaxis1:
    range:
      - 20
      - 30
  yaxis2:
    ticklen: 0
    showticklabels: false

I tried many different things but the other "close point" is shown below. In this attempt the scale for the shaded area is obviously incorrect as I had to set the range to something static (0-50) that would hide the bottom line set at -1 (when heating/cooling is off, it is set to -1) but unfortunately this causes the top to never match the temperature line.

type: custom:plotly-graph
title: Upstairs Thermostat
entities:
  - entity: climate.upstairs_thermostat
    attribute: current_temperature
    name: Temperature
    unit_of_measurement: °C
    showlegend: true
    yaxis: y1
    line:
      width: 1
      color: green
  - entity: climate.upstairs_thermostat
    attribute: temperature
    name: Setpoint
    unit_of_measurement: °C
    yaxis: y1
    line:
      width: 1
      color: white
      dash: dot
    show_value: false
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Heat
    show_value: true
    fill: tozeroy
    yaxis: y2
    line:
      color: red
    filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : -1
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Cool
    show_value: true
    fill: tozeroy
    yaxis: y2
    line:
      color: blue
      opacity: 0.1
    filters:
      - map_y: >-
          state.attributes.hvac_action === "cooling" ?
          state.attributes.current_temperature : -1
hours_to_show: 12
refresh_interval: 30
layout:
  height: 400
  showlegend: true
  yaxis2:
    range:
      - 0
      - 50
    ticklen: 0
    showticklabels: false

Here I simply removed the y2 range to show the bottom line I want to hide and the fact that the top still doesn't match the temperature line.

Code below is like the one above except I removed the y2 axis range (0-50) to show the y2 scaling issue in the screenshot above.

type: custom:plotly-graph
title: Upstairs Thermostat
entities:
  - entity: climate.upstairs_thermostat
    attribute: current_temperature
    name: Temperature
    unit_of_measurement: °C
    showlegend: true
    yaxis: y1
    line:
      width: 1
      color: green
  - entity: climate.upstairs_thermostat
    attribute: temperature
    name: Setpoint
    unit_of_measurement: °C
    yaxis: y1
    line:
      width: 1
      color: white
      dash: dot
    show_value: false
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Heat
    show_value: true
    fill: tozeroy
    yaxis: y2
    line:
      color: red
    filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : -1
  - entity: climate.upstairs_thermostat
    attribute: hvac_action
    name: Cool
    show_value: true
    fill: tozeroy
    yaxis: y2
    line:
      color: blue
      opacity: 0.1
    filters:
      - map_y: >-
          state.attributes.hvac_action === "cooling" ?
          state.attributes.current_temperature : -1
hours_to_show: 12
refresh_interval: 30
layout:
  height: 400
  showlegend: true
  yaxis2:

    ticklen: 0
    showticklabels: false

Summary: How do I make heating/cooling overlay properly Temperature (top should match) while keeping the y1 scale as tight as possible to fit temperature and setpoint? In other words, y2 range should be forced to match y1 range (filltozero forces it to start from zero if I let it autoscale... I essentially need to overcome that). Hopefully all this makes sense...

[dbuezas]

The issue here is that the traces with the hvac_action attribute don't have a unit_of_measurement, so they are actually in a different yaxis.
Either add unit_of_measurement: °C or yaxis: y1 to make it be in the same axis.

I suggest you change your filter to:

filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : null

And finally, plotly doesn't have a mode to fill downwards without it affecting autoscaling (unfortunately). To simulate that you could:

• Use fill: tonexty on the shaded one and and add an extra entity that has all of its y values set to the minimum temperature observed in all other traces, or
• set the y range yourself with something like Zoom limits #233

[alexruffell]

@dbuezas Using null large portions of the graph are filled in red or blue instead of only when heating or cooling are on. With a number such as -1 or 0 it works correctly. Not sure why...

In my research I found this which sounds more or less what I may need but I have not figured out how to use it yet:

https://plotly.com/javascript/reference/#layout-yaxis-matches

If I can find a way to override the scale for y2 (the cooling/heating) to match y1 then it should work. The only way I know to do it is statically setting a range which would force me to do the same for y1 (temp and setpoint). The matches function sound like what I need but I don't fully understand the instructions:

[matches](https://plotly.com/javascript/reference/#layout-yaxis-matches)
Parent: layout.yaxis
Type: enumerated , one of ( "/^x([2-9]|[1-9][0-9]+)?( domain)?$/" | "/^y([2-9]|[1-9][0-9]+)?( domain)?$/" )
If set to another axis id (e.g. `x2`, `y`), the range of this axis will match the range of the corresponding axis in data-coordinates space. Moreover, matching axes share auto-range values, category lists and histogram auto-bins. Note that setting axes simultaneously in both a `scaleanchor` and a `matches` constraint is currently forbidden. Moreover, note that matching axes must have the same `type`.

[dbuezas]

Oh, you are right, filling is buggy with missing values. I hope they fix that.
Regarding "matches", is it different that using a single yaxis?

[alexruffell]

@dbuezas I don't know... I haven't figured out how to use it yet but this is what the instructions said (see part on auto-range):

"If set to another axis id (e.g. x2, y), the range of this axis will match the range of the corresponding axis in data-coordinates space. Moreover, matching axes share auto-range values, category lists and histogram auto-bins. Note that setting axes simultaneously in both a scaleanchor and a matches constraint is currently forbidden. Moreover, note that matching axes must have the same type."

[wormuths]

I made some modifications and added the current outdoor temperature, and added a range selector to choose a different history period.

type: custom:plotly-graph
title: Ecobee Thermostat
hours_to_show: 1d
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
config:
  displayModeBar: false
layout:
  height: 300
  dragmode: pan
  showlegend: true
  paper_bgcolor: '#EFDECD'
  plot_bgcolor: '#EFDECD'
  yaxis1:
    range:
      - 20
      - 30
    tickfont:
      color: '#000000'
  yaxis2:
    ticklen: 0
    showticklabels: false
    tickfont:
      color: '#000000'
  xaxis:
    tickfont:
      color: '#000000'
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
          label: Hour
        - count: 1
          step: day
          label: Day
        - count: 7
          step: day
          label: Week
        - count: 28
          step: day
          label: Month
entities:
  - entity: climate.ecobee_thermostat
    attribute: current_temperature
    name: Temperature
    unit_of_measurement: °F
    showlegend: true
    line:
      width: 1
      color: rgb(10, 55, 58)
  - entity: sensor.average_outdoor_heat_index
    name: Outdoor Temperature
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    fill: tozeroy
    fillcolor: rgba(143, 195, 74, 0.1)
    line:
      width: 0.5
      color: rgb(143,195,74)
  - entity: climate.ecobee_thermostat
    attribute: temperature
    name: Set Point
    unit_of_measurement: °F
    line:
      width: 1
      color: rgb(10, 55, 58)
      dash: dot
    show_value: false
  - entity: climate.ecobee_thermostat
    attribute: hvac_action
    name: Heating
    show_value: true
    fill: tozeroy
    fillcolor: rgba(255, 152, 0, 0.25)
    yaxis: y1
    line:
      color: rgb(255, 152, 0)
      opacity: 0.25
    filters:
      - map_y: >-
          state.attributes.hvac_action === "heating" ?
          state.attributes.current_temperature : -1
  - entity: climate.ecobee_thermostat
    attribute: hvac_action
    name: Cooling
    show_value: true
    fill: tozeroy
    fillcolor: rgba(74, 141, 195, 0.25)
    yaxis: y1
    line:
      color: rgb(74,141,195)
      opacity: 0.25
    filters:
      - map_y: >-
          state.attributes.hvac_action === "cooling" ?
          state.attributes.current_temperature : -1

Here is the card...

[arkadi222]

how can I draw that chart, when I have 2 different entities?
entity: water_heater.boiler
entity: binary_sensor.ariston_is_heating
can I use filter->map_y from second entity at one chart?

[dbuezas]

Search for vars and resample in the docs and examples

[arkadi222]

I'm almost home :)
how to make yaxis from min to max of attribute current_temperature?
now I have this:

but I want this:

type: custom:plotly-graph
autorange_after_scroll: true
entities:
  - entity: binary_sensor.ariston_is_heating
    internal: true
    filters:
      - resample: 1m
      - map_y: 'y === "on" ? 1 : 0'
      - store_var: water_heating
  - entity: water_heater.bojler
    attribute: current_temperature
    name: Temperatura
  - entity: water_heater.bojler
    attribute: current_temperature
    name: is_heating
    fill: tozeroy
    filters:
      - resample: 1m
      - map_y: parseFloat(y)
      - map_y: 'vars.water_heating.ys[i] == 1 ? y : 0'
hours_to_show: 36
defaults:
  yaxes:
    fixedrange: true
layout:
  height: 400
  dragmode: pan
  showlegend: true

[dbuezas]

When you do fill: tozeroy, then plotly makes the yaxis go to zero. I'll update the plotly version soon which will bring some extra data relative constraints to yaxis range

[laszlojakab]

Here is a solution to the problem. On the left side of the image is the Plotly chart, and on the right is the climate card for the same climate entity.

The configuration:

type: custom:plotly-graph
autorange_after_scroll: true
entities:
  - entity: climate.bathroom_virtual_thermostat
    attribute: temperature
    name: Expected temperature
  - entity: climate.bathroom_virtual_thermostat
    attribute: current_temperature
    name: Current temperature
    legendgroup: current_temperature
  - entity: climate.bathroom_virtual_thermostat
    attribute: current_temperature
    filters:
      - fn: |-
          ({xs, ys, vars, meta, states, statistics, hass}) => {
            const min = Math.min(...ys.filter(y=>y!==undefined && y !== null))
            return { ys: ys.map(y => min - 1) }; 
          }
      - store_var: draw_from
    showlegend: false
    line:
      width: 0
  - entity: climate.bathroom_virtual_thermostat
    attribute: current_temperature
    name: filled
    legendgroup: current_temperature
    showlegend: false
    line:
      width: 0
    filters:
      - fn: |-
          ({xs, ys, vars, meta, states, statistics, hass}) => {
            return { ys: states.map((state, i)=>state?.attributes?.hvac_action === "heating" ? state?.attributes?.current_temperature : vars.draw_from.ys[i] ) }; 
          }
    fill: tonexty
hours_to_show: 2
defaults:
  yaxes:
    fixedrange: true
layout:
  dragmode: pan

Explanation:

• The 1st entity defines the expected temperature line.
• The 2nd entity defines the current temperature line, and I place it in a legend group so that it can be hidden together with the filled area when clicking on the legend.
• The 3rd entity draws an invisible line at the minimum value of the current temperature minus 1 degree. This will serve as the bottom of the filled area. The legend is hidden with showlegend=false, and the line width is set to zero to hide the line. The calculated line is saved to a variable for use in the next step.
• The 4th entity defines a line that shows different values based on whether the state is "heating" or not. For the "heating" state, it returns the current temperature, and for the "not heating" state, it returns the value calculated in the previous entity. The fill: tonexty option is used to fill the area between the previously drawn invisible line and the current line. This entity is also added to the current_temperature legend group.

[arkadi222]

@laszlojakab thank you very much, this is exactly what I needed.

[arkadi222]

@laszlojakab what is the '...' mean in min function?
I don't understand this syntax.

[dbuezas]

Spread operator, it has a couple different meaning depending on the context
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[laszlojakab]

It is spread operator in JavaScript.

The spread operator in JavaScript allows an array to be expanded into individual elements. In this case, the Math.min function can take an arbitrary number of parameters and return the minimum of those values. Since Math.min cannot accept an array directly, the array is expanded into individual values using the spread operator and passed one by one to the Math.min function.

[arkadi222]

with only change climate entity name :)