Dashboard Mini Graph Card - Cartão para sensores! (+ bônus)

Esse cartão é para entidades ‎‎sensor‎‎ e ‎‎binary_sensor‎‎, exibe o estado atual dos sensores, bem como um histórico.‎ Ele é instalado pelo HACS.

Para adicionar o cartão vamos usar o HACS, clique em Frontend!

Clique em Explore & Download Repositories, pesquise por Mini Graph Card.

Clique em Download.

3

Com ele instalado o cartão foi adicionado e pode ser encontrado na tela de cartões. Pesquise pelo mini graph card na tela de cartões.

Para adicionar o cartão preencha com o código abaixo:

type: custom:mini-graph-card
entities:
 - sensor.meusensor

image

Esse cartão é muito customizável, é possível utilizar de várias formas, no github do cartão é possível ver outros exemplos!

Vou deixar como bônus a forma que uso, utilizo com sensores de temperatura e umidade.

7

8

type: custom:mini-graph-card
entities:
  - entity: sensor.ble_temperature_termostato_do_leandro
    name: Temperatura
    show_state: true
    state_adaptive_color: true
  - entity: sensor.ble_humidity_termostato_do_leandro
    name: Umidade
    show_state: true
    y_axis: secondary
    state_adaptive_color: true
hour24: true
more_info: true
name: Temperatura do Leandro
decimals: 1
height: 200
font_size: 50
icon: mdi:thermometer
line_width: 3
hours_to_show: 24
bar_spacing: 2
points_per_hour: 0.5
animate: false
aspect_ratio: 10/9
show:
  labels: false
  icon: true
  legend: false
  fill: fade
  points: true
  labels_secondary: false
style: |
  ha-card .header.flex .name.flex { 
    margin-top: -10px;
  }
  ha-card .states.flex {
    margin-top: -20px;
    font-weight: bold;
  }
  ha-card .graph .graph__container {
    margin-top: -15px;
  }
  ha-card .graph .graph__container .graph__labels.--primary.flex {
    color: #ff7800;
  }
  ha-card .graph .graph__container .graph__labels.--secondary.flex {
    color: #3498db;
  }
  ha-card .header.flex .icon {
    --mdc-icon-size: 15px;
    margin-top: -11px;
    color: #ff9800;
  }

É isso, um abraço!

3 Likes