Climate Card, Needs Improvement

[wormuths]

Hello all,

I've created this card from samples in these forums, and help from ChatGPT.

As you see, the fireplace blower (red line on bottom) only shows "0 W" instead of the actual wattage. This line is drawn from a power use sensor and shows if it's drawing power (not "0"). I prefer the small line like it is, but ideally, it would be better if it showed the actual wattage. Even just showing "On" instead of "0 W" is fine.

One other thing is that it's showing up as a broken line. The reality is that it's steadily on during those periods instead of on/off repeatedly like the line would indicate.

Is there a better way to be doing this, and does anyone see any issues with the rest of the code?

type: custom:plotly-graph
title: Household Climate Information
hours_to_show: 7d
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
config:
  displayModeBar: false
defaults:
  entity:
    filters:
      - force_numeric
layout:
  height: 300
  dragmode: pan
  showlegend: true
  paper_bgcolor: "#EFDECD"
  plot_bgcolor: "#EFDECD"
  yaxis1:
    tickfont:
      color: "#000000"
  yaxis2:
    ticklen: 0
    showticklabels: false
    tickfont:
      color: "#000000"
  yaxis3:
    overlaying: "y"
    side: right
    showticklabels: false
    range:
      - 0
      - 1
  xaxis:
    tickfont:
      color: "#000000"
    rangeselector:
      "y": 1.2
      buttons:
        - 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_temperature
    name: Outdoor Temperature
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    fill: tozeroy
    fillcolor: rgba(143, 195, 74, 0.10)
    line:
      width: 0.5
      color: rgb(143,195,74)
  - entity: sensor.average_outdoor_heat_index
    name: Outdoor Heat Index
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    line:
      width: 1
      dash: dot
      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
  - entity: sensor.smart_plug_living_room_fireplace_blower_power
    name: Fireplace
    showlegend: true
    yaxis: y3
    line:
      width: 0
    mode: markers
    marker:
      color: rgb(178,34,34)
      size: 8
    texttemplate: "%{y}W"
    textposition: top center
    filters:
      - map_y: "state !== \"0\" ? 0 : 1 "

Thanks!

[dbuezas]

You could either use a second axis on the right or do as you did for heating. To do that, make another internal entity with the temperature, resample it with a filter, store it in a var, then take the fireplace entity, also resample it so the datapoints align in the x axis and in the map_y filter look at the stored var value (current temperature) by index

[wormuths]

I'm gonna have to take your word on that, buddy. LOL

But with the help of my frenemy ChatGTP, it spit out this...

type: custom:plotly-graph
title: Household Climate Information
hours_to_show: 7d
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
config:
  displayModeBar: false
defaults:
  entity:
    filters:
      - force_numeric
layout:
  height: 300
  dragmode: false
  showlegend: true
  paper_bgcolor: "#EFDECD"
  plot_bgcolor: "#EFDECD"
  yaxis1:
    tickfont:
      color: "#000000"
  yaxis2:
    ticklen: 0
    showticklabels: false
    tickfont:
      color: "#000000"
  xaxis:
    tickfont:
      color: "#000000"
    rangeselector:
      "y": 1.2
      buttons:
        - 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_temperature
    name: Outdoor Temperature
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    fill: tozeroy
    fillcolor: rgba(143, 195, 74, 0.10)
    line:
      width: 0.5
      color: rgb(143,195,74)

  - entity: sensor.average_outdoor_heat_index
    name: Outdoor Heat Index
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    line:
      width: 1
      dash: dot
      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

  - entity: sensor.smart_plug_living_room_fireplace_blower_power
    name: Fireplace
    showlegend: true
    yaxis: y1  # Align with primary y-axis
    line:
      width: 0
    mode: markers
    marker:
      color: rgb(178,34,34)
      size: 8
    texttemplate: "%{y}W"
    textposition: top center
    filters:
      - map_y: >-
          state !== "0" ? states['climate.ecobee_thermostat'].attributes.current_temperature : null

This creates a card which appears to display fine, but has an error.

Essentially, for reference, I'm trying to create a small bar underneath the main graph like the built in history card shows. I was trying to have the line show power usage on the tooltip, but that's not terribly important, just nice.

Something like this...

That history bar just uses the "switch.smart_plug_living_room_fireplace_blower_switch" entity and doesn't show power. I don't need the power reading if that makes this easier? I just need to figure out how to create the separate bar underneath the primary graph. Small, like in the original image would be ideal.

Is that something that's possible, or am I approaching this wrong?

Thanks, as always.

[dbuezas]

Haha, sorry i forget how many options this card has gathered with the years. Your frenemy wasn't that far off, you should try feeding it more examples!

It would be something like this:

entities;
  ... all other entities...
  - entity: climate.ecobee_thermostat
     attribute: current_temperature
     internal: true
     filters:
        - resample
        - store_var: temperature 
   - entity: sensor.fireplace
     filters:
      - resample 
      - map_y: >-
          y !== "0" ? vars.temperature.ys[i] : null

I know the readme is long, but do try powering through it, this whole business will become less cryptic

[dbuezas]

I took the freedom of not actually reading what you're actually trying to do and decided to instead show you how to convert the fireplace switch thing into something like the cooling trace.

[dbuezas]

If you want to create a bar like thing, try what you had originally but add a resample filter. That will add data points and fix the gaps I think were bothering you

[wormuths]

Sorry for the delay. My SD card died and I had to restore a backup to get back into this.

Anyhow, I recreated the card piece by piece, and managed to get something I was happy with. I gave up on having two stacked graphs in one card and settled on this...

Here's the code for anyone interested in tweaking for their own use...

type: custom:plotly-graph
title: Thermostat Climate Information
hours_to_show: 7d
refresh_interval: auto
autorange_after_scroll: true
config:
  displayModeBar: false
layout:
  height: 300
  dragmode: false
  showlegend: true
  yaxis:
    title: Temperatures (°F)
    range:
      - -10
      - 110
    domain:
      - 0.2
      - 1
  yaxis2:
    title: Power (W)
    showticklabels: false
    range:
      - 0
      - 1000
    domain:
      - 0
      - 0.2
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - 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
    yaxis_id: y1
    unit_of_measurement: °F
    showlegend: true
    show_value: false
    line:
      width: 1
      color: rgb(5, 160, 226)
  - entity: climate.ecobee_thermostat
    attribute: temperature
    name: Set Point
    yaxis_id: y1
    unit_of_measurement: °F
    showlegend: true
    show_value: false
    line:
      width: 1
      color: rgb(255, 152, 0)
      dash: dot
  - entity: sensor.average_outdoor_temperature
    name: Outdoor Temperature
    yaxis_id: y1
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    fill: tozeroy
    fillcolor: rgba(143, 195, 74, 0.10)
    line:
      width: 0.5
      color: rgb(143,195,74)
  - entity: sensor.average_outdoor_heat_index
    name: Outdoor Heat Index
    yaxis_id: y1
    unit_of_measurement: °F
    showlegend: false
    show_value: false
    line:
      width: 1
      dash: dot
      color: rgb(143,195,74)
  - entity: sensor.smart_plug_living_room_fireplace_blower_power
    name: Fireplace
    yaxis_id: y2
    unit_of_measurement: W
    showlegend: true
    show_value: false
    mode: lines+markers
    line:
      width: 1
      color: rgb(178,34,34)
    marker:
      size: 6
      color: rgb(178,34,34)
  - entity: climate.ecobee_thermostat
    attribute: hvac_action
    name: Heating
    show_value: true
    fill: tozeroy
    fillcolor: rgba(255, 152, 0, 0.25)
    yaxis_id: y1
    line:
      width: 1
      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_id: y1
    line:
      width: 1
      color: rgb(74,141,195)
      opacity: 0.25
    filters:
      - map_y: >-
          state.attributes.hvac_action === "cooling" ?
          state.attributes.current_temperature : -1

I settled on adjusting the range to keep the fireplace at the bottom when drawing its usual wattage. Users can adjust the range if the entity they want to track (AC or something that draws more) uses more energy than my fireplace blower.

I found that the order I put the entities in matters. If I put the thermostat "heating" entity higher, it throws things out of whack, even though it uses the same scale as the Y Axis temperature... Not sure why.

I do read the readme for reference for the record. I just don't understand the coding parts... variables, scripting, etc... Coding is like my kryptonite. I just can't wrap my head around it, but ChatGPT keeps me from asking other people to do my work for me most of the time. LOL

[dbuezas]

Congrats!

Btw, yaxis_id is not a thing in plotlyjs as far as zi know.

You want to use:
yaxis: y (or y2,...)