kalkih / mini-graph-card

Minimalistic graph card for Home Assistant Lovelace UI
MIT License
3.07k stars 238 forks source link

[Question] Show the value of the 2nd entity on the card #1141

Closed Nisbo closed 2 months ago

Nisbo commented 2 months ago

Hi Guys,

is it possible to show the value of the 2nd entity on the card. Currently its only possible to add it with the labels_secondary: true option and this value is not the latest / current value.

grafik

I want something like this:

grafik

My current code:

type: custom:mini-graph-card
entities:
  - entity: climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571
    attribute: current_temperature
    unit: °C
  - entity: climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571
    attribute: temperature
    color: rgba(220,0,0,0.5)
    y_axis: secondary
view_layout:
  column: 2
style:
  .: |
    ha-card {
      box-shadow: none;
      border-radius: 20px;
      color: {{ 'rgba(225,225,225,1)' if is_state('input_boolean.waerme_RAUMNAME_an_und_aus', 'on') else 'rgba(225,225,225,0.3)' }};
    }
name: Bad
points_per_hour: 1
tap_action:
  action: more-info
show:
  fill: fade
  icon: false
  labels: false
  legend: false
  labels_secondary: true
animate: true
decimals: 1
align_state: center
align_header: center
hour24: true
aggregate_func: last
styles:
  name:
    - filter: drop-shadow(3px 5px 2px rgb(255 0 0 / 0.4))
line_color: rgba(10,100,140,1)
hours_to_show: 24

EDIT: looks like its possible with the show_state in the configuration part of the second entity, but its not in a new row and locks crazy

grafik

Nisbo commented 2 months ago

I was able to solve it with the custom:card_mod addon: https://github.com/thomasloven/lovelace-card-mod

grafik

The color changes depending on the set temperature

type: custom:mini-graph-card
entities:
  - entity: climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571
    attribute: current_temperature
    unit: °C
  - entity: climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571
    attribute: temperature
    color: rgba(220,0,0,0.5)
    y_axis: secondary
    show_state: true
    unit: °C
font_size: 75
view_layout:
  column: 2
card_mod:
  style: |
    .states.flex {
      flex-direction: column;
      margin-top: -8px;
    }
    .states--secondary {
      margin-left: 0px !important;
      margin-top: 0px;
    }
    .state.state--small .state__value.ellipsis {
      font-size: 12px !important;
      color: {% set temp = state_attr('climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571', 'temperature') | float %}
              {% if temp <= 20 %}
                green
              {% elif temp > 20 and temp <= 22 %}
                yellow
              {% else %}
                red
              {% endif %} !important;
    }
    .state.state--small .state__uom.ellipsis {
      font-size: 10px !important;
      color: {% set temp = state_attr('climate.thermostat_bad_xxx_bad_hm_cc_rt_dn_oeq0842571', 'temperature') | float %}
              {% if temp <= 20 %}
                green
              {% elif temp > 20 and temp <= 22 %}
                yellow
              {% else %}
                red
              {% endif %} !important;
    }
    .state.false .state__value.ellipsis {
      font-size: 28px !important;  # Text auf 12px setzen
    }
name: Bad
points_per_hour: 1
tap_action:
  action: more-info
show:
  fill: fade
  icon: false
  labels: false
  legend: false
animate: true
decimals: 1
align_state: center
align_header: center
hour24: true
aggregate_func: last
styles:
  name:
    - filter: drop-shadow(3px 5px 2px rgb(255 0 0 / 0.4))
line_color: rgba(10,100,140,1)
hours_to_show: 24