Lovelace: mini graph card

POST OF ORIGINAL ATTEMPT

THIS IS THE FINAL THIRD EDIT 15/01/2024 AFTER FURTHER TESTING

12hr House Temperature Status

  • Deleted state_map: as discussed by @Ildar_Gabdullin

  • Added the following to deal with my 0/100 AC Status sensor value, sits on the Y-axis.

    • aggregate_func: max on AC Status entity discussed and tested below post
    • upper_bound_secondary: 100 ensures humidity shows correctly below post
    • lower_bound_secondary: 0
  • Show secondary labels, for humidity 0-100%

    • labels_secondary: true
  • Added 4-Sensor card-mod as discussed in below post

-Shows Temperatures at all three levels of my house including outdoors
-Shows Heating status of heat pump (lightsalmon block)
-Shows Cooling status of heat pump (mediumturquoise block)

image

type: custom:mini-graph-card
name: House Temperatures
entities:
  - entity: sensor.netatmo_devonport_tas_indoor_temperature
    name: Upstairs
    color: brown
    show_state: true
    show_indicator: false
    smoothing: true
    show_fill: false
  - entity: sensor.netatmo_devonport_tas_indoor_outdoor_temperature
    name: Outside
    color: dodgerblue
    show_state: true
    show_indicator: true
    smoothing: true
  - entity: sensor.air_conditioning_downstairs_temperature
    name: Downstairs
    color: orange
    show_state: true
    show_indicator: true
    smoothing: true
    show_fill: true
  - entity: sensor.air_conditioning_temperature
    name: Middle
    color: gold
    show_state: true
    show_indicator: true
    smoothing: true
    show_fill: true
  - entity: sensor.ac_cool_living
    name: AC Cool
    color: mediumturquoise
    show_legend: false
    show_line: false
    show_points: false
    smoothing: false
    y_axis: secondary
    aggregate_func: max
  - entity: sensor.ac_heat_living
    name: AC Heat
    color: lightsalmon
    show_legend: false
    show_line: false
    show_points: false
    smoothing: false
    y_axis: secondary
    aggregate_func: max
show:
  name: false
  icon: false
  legend: true
  extrema: false
  fill: fade
  labels: hover
  labels_secondary: false
  state: true
font_size_header: 9
align_state: center
hour24: true
animate: true
group: true
smoothing: true
line_width: 3
hours_to_show: 12
points_per_hour: 15
upper_bound_secondary: 100
lower_bound_secondary: 0
height: 150
card_mod:
  style: |
    .states {
      justify-content: normal !important;
      font-size: 11px !important;
    }
    .state {
      flex-grow: 1;
    }
    .states--secondary {
      flex-flow: row !important;
      flex-grow: 2;
      margin-left: 0px !important;
    }
    .states--secondary .state.state--small {
      font-size: unset;
      margin-bottom: unset;
      flex-grow: unset;
    }
    .states--secondary .state.state--small:nth-of-type(2) {
      margin-left: auto !important;
    }
    .states--secondary .state.state--small:nth-of-type(3) {
      margin-left: auto !important;
    }
    .ellipsis {
      font-size: 12px ;
    }

6hr Living Room Climate Status

  • Deleted state_map: as discussed by @Ildar_Gabdullin

  • Added the following to deal with my 0/100 AC Status sensor value, sits on the Y-axis.

    • aggregate_func: max on AC Status entity discussed and tested below post
    • upper_bound_secondary: 100 ensures humidity shows correctly below post
    • lower_bound_secondary: 0
  • Show secondary labels, for humidity 0-100%

    • labels_secondary: true
  • Added 3-Sensor card-mod as discussed in below post

  • General code layout tidy up

-Shows Temperature of Middle Floor
-Shows Temperature of Upstairs Mezzanine
-Shows Humidity of Middle Floor
-Shows Dew Point of Middle Floor
-Shows Heating status of heat pump (lightsalmon block)
-Shows Cooling status of heat pump (mediumturquoise block)

image

type: custom:mini-graph-card
name: Middle Floor Temperatures
entities:
  - entity: sensor.air_conditioning_temperature
    name: Middle
    color: gold
    show_state: true
    show_indicator: false
    show_fill: false
  - entity: sensor.netatmo_devonport_tas_indoor_temperature
    name: Upstairs
    color: brown
    show_state: false
    show_indicator: false
    smoothing: true
    show_fill: false
  - entity: sensor.dewpoint_living_room
    name: Dewpoint
    color: dodgerblue
    show_state: true
    show_indicator: true
    show_fill: true
  - entity: sensor.air_conditioning_humidity
    name: Humidity
    color: rgb(135,206,250,0.5)
    show_state: true
    show_indicator: true
    show_graph: true
    show_legend: true
    show_fill: true
    y_axis: secondary
  - entity: sensor.ac_cool_living
    name: AC Cool
    color: mediumturquoise
    show_legend: false
    show_line: false
    show_points: false
    smoothing: false
    y_axis: secondary
    aggregate_func: max
  - entity: sensor.ac_heat_living
    name: AC Heat
    color: lightsalmon
    show_legend: false
    show_line: false
    show_points: false
    smoothing: false
    y_axis: secondary
    aggregate_func: max
show:
  name: false
  icon: false
  legend: true
  extrema: false
  fill: fade
  labels: hover
  labels_secondary: hover
  state: true
font_size_header: 9
align_state: center
hour24: true
animate: true
group: true
smoothing: true
line_width: 3
hours_to_show: 6
points_per_hour: 15
upper_bound_secondary: 100
lower_bound_secondary: 0
height: 150
card_mod:
  style: |
    .states {
      justify-content: normal !important;
      font-size: 11px !important;
    }
    .state {
      flex-grow: 1;
    }
    .states--secondary {
      flex-flow: row !important;
      flex-grow: 1.2;
      margin-left: 0px !important;
    }
    .states--secondary .state.state--small {
      font-size: unset;
      margin-bottom: unset;
      flex-grow: unset;
    }
    .states--secondary .state.state--small:nth-of-type(2) {
      margin-left: auto !important;
    }
    .ellipsis {
      font-size: 12px ;
    }

Sensors required to be added to configuration.yaml

template:
  - sensor:
    # Air Conditioning sensors for Mini Graph Card
    - name: "ac_heat_living"
      unique_id: 4b0aa109-9f6b-430e-9f75-d3bc64645e70
      icon: mdi:sun-thermometer-outline
      state: >-
        {% if state_attr('climate.air_conditioning','hvac_action') == 'heating'  %}
        100
        {% else %}
        0
        {% endif %}

    - name: "ac_cool_living"
      unique_id: 463de126-9e29-46bd-b0cd-c2c4f97f8fa2
      icon: mdi:snowflake-thermometer
      state: >-
        {% if state_attr('climate.air_conditioning','hvac_action') == 'cooling'  %}
        100
        {% else %}
        0
        {% endif %}

12hr CO2 vs Door/Window Status

  • Deleted state_map: as discussed by @Ildar_Gabdullin

  • Added the following to deal with my 0/100 Door Status sensor value, sits on the Y-axis.

    • aggregate_func: max on Door Status entity discussed and tested below post
    • upper_bound_secondary: 100
    • lower_bound_secondary: 0
  • Hide secondary labels, due to being a number and not a word.

    • labels_secondary: false
  • Added 3-Sensor card-mod as discussed in below post

  • General code layout tidy up

-Shows CO2 levels in relation to a door and window group sensor

image

type: custom:mini-graph-card
name: CO2 vs Door
entities:
  - entity: sensor.netatmo_devonport_tas_indoor_co2
    name: CO2
    color: lightsalmon
    show_state: true
    show_indicator: false
  - entity: sensor.middle_floor_sensor_status
    name: Door Open
    color: gray
    show_legend: true
    show_line: false
    show_points: false
    y_axis: secondary
    smoothing: false
    show_state: false
    aggregate_func: max
show:
  name: false
  icon: false
  legend: true
  extrema: false
  fill: fade
  labels: hover
  labels_secondary: hover
  state: true
font_size_header: 9
align_state: left
hour24: true
animate: true
group: true
smoothing: true
line_width: 3
hours_to_show: 12
points_per_hour: 15
upper_bound_secondary: 100
lower_bound_secondary: 0
height: 150
card_mod:
  style: |
    .states {
      justify-content: normal !important;
      font-size: 11px !important;
    }
    .state {
      flex-grow: 1;
    }
    .states--secondary {
      flex-flow: row !important;
      flex-grow: 1.2;
      margin-left: 0px !important;
    }
    .states--secondary .state.state--small {
      font-size: unset;
      margin-bottom: unset;
      flex-grow: unset;
    }
    .states--secondary .state.state--small:nth-of-type(2) {
      margin-left: auto !important;
    }
    .states--secondary .state.state--small:nth-of-type(3) {
      margin-left: auto !important;
    }
    .ellipsis {
      font-size: 12px ;
    }

Sensor required for door status

template:
  - sensor:
    - name: "middle_floor_sensor_status"
      unique_id: bf540135-35df-439c-a6a7-3bd328a1fb08
      icon: mdi:door
      state: >-
        {% if states('binary_sensor.middle_floor_sensor_group') == 'on'  %}
        100
        {% else %}
        0
        {% endif %}

FINAL LOOK ON DASHBOARD

1 Like