Mini Graph et adaptation

Entraide Home Assistant
1

Bonsoir à tous,

je cherche à adapter un peu les mini graph sur ma page des températures
Pour le moment j’ai ceci visuellement :

image
image507×395 21.5 KB

Le code utilisé est le suivant : 
type: custom:mini-graph-card
entities:
  - entity: sensor.temp_ch_parents_temperature
    name: Température
    show_state: true
    show_line: true
  - entity: binary_sensor.jour
    name: Jour/Nuit
    color: "#B3B3B3"
    y_axis: secondary
    smoothing: false
    aggregate_func: min
    show_state: false
    show_line: false
    show_points: false
color_thresholds:
  - value: 15
    color: "#4682b4"
  - value: 22
    color: "#5d9d52"
  - value: 25
    color: "#f3a93c"
  - value: 30
    color: "#cb4f40"
height: 50
decimals: 1
font_size: 60
hour24: true
name: CH Parents
hours_to_show: 48
point_per_hour: 1
line_width: 2
smoothing: fa
show:
  fill: fade
  graph: line
  icon: true
  name: true
  state: true
  labels: false
  labels_secondary: false
  extrema: false
  average: false
  icon_adaptive_color: true
  legend: false
state_map:
  - value: "off"
    label: Nuit
  - value: "on"
    label: Jour
align_icon: right
align_state: center
card_mod:
  style: |
    .info.flex {
      margin-top: -60px;
    }
    .graph__legend__item:nth-child(-n+2) {
      flex-basis: 40%;
      justify-content: center
    }
grid_options:
  columns: 6
  rows: 2

Un première adaptation a été de faire en sorte que le symbole change de couleur en fonction de la valeur de l’entité température.

J’ai aussi modifié la couleur de la valeur numérique en fonction de la température de la pièce
avec ceci :

Couleur de la valeur numérique en fonction de la température 
.states.flex {
      {% if states('sensor.temp_ch_parents_temperature') <= '15' %}
      color: #4682b4
      {% elif states('sensor.temp_ch_parents_temperature') <= '22' %}
      color: #5d9d52;
      {% elif states('sensor.temp_ch_parents_temperature') <= '25' %}
      color: #f3a93c;
      {% elif states('sensor.temp_ch_parents_temperature') <= '30' %}
      color: #cb4f40;
      {% endif %}
      margin-top: -20px; /* Monte la température légèrement */
    }

Ce que j’aimerais faire maintenant, sans changer la taille de la carte au global :

  • Afficher la valeur numérique un peu plus haut pour laisser de la place à la courbe
  • Augmenter l’espace d’affichage de la courbe pour mieux la voir

Je n’ai pas trouver encore comment faire sans agrandir la carte :frowning:

Merci de votre aide et coup de pouce sur le sujet

2

Salut,
pour la première demande.

image
image411×121 6.41 KB

card_mod:
  style: |
    ha-card > div.states.flex > div.state.false {
      margin-top: -42px;
      margin-left: -130px;
    }

Pour la deuxième pas trouver, je cherche.

3

essaye un des trucs la dedans

                card_mod:
                  style: |
                    .states--secondary {
                       font-size: 5px;
                         }
                     ha-card .header.flex .name.flex { 
                       margin-top: -15px;
                       font-size: 12px;
                       margin-left: -10px;
                       } 
                     ha-card .states.flex {
                       margin-top: -18px;
                       margin-left: -10px;
                       margin-right: -10px;
                       font-weight: bold;
                       font-size: 6px;
                       }
                     ha-card .graph .graph__container {
                       margin-top: -15px;
                       }
                     ha-card .graph .graph__container .graph__labels span { 
                       color: #ff7800;
                       background-color: transparent;

                       font-size: 80%;
                       }
                     ha-card .header.flex .icon {
                       --mdc-icon-size: 5px;
                       margin-top: -11px;
                       color: #959595;
                       }
4

Bonjour,
C’est marrant, j’ai passé une partie de ma journée de hier à faire quasi la même chose pour avoir une vue équilibrée entre mon smartphone et ma tablette murale.
Mais je cherche à le faire sans card_mod.
J’ai le même problème que toi de hauteur du graphe, j’aurais aimé avoir les labels min et maxi, mais ça bug en vue section.
Pour ma part j’affiche température, humidité et niveau de batterie des sondes.
Voici mes vues pour partager :
Vue smartphone

1000015677
10000156771220×2712 122 KB

Vue tablette
1000015676
10000156761220×848 59.5 KB

Code une card 
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: "Salle "
    secondary: 🔋{{ states('sensor.sonde_salle_battery') | round(0)}}%
    icon: mdi:sofa
    icon_color: |-
      {% set state = states('sensor.sonde_salle_temperature') %}
      {% if is_number(state) and state | float > 26 %}
      red
      {% elif is_number(state) and state | float > 23 %}
      yellow
      {% elif is_number(state) and state | float > 19.5 %}
      green
      {% else %}
      blue
      {% endif %}
    badge_icon: |-
      {% set battery_level = states('sensor.sonde_salle_battery') | int %}
      {% if is_number(battery_level) and battery_level | float > 90 %}
      mdi:battery
      {% elif is_number(battery_level) and battery_level | float > 60 %}
      mdi:battery-80
      {% elif is_number(battery_level) and battery_level | float > 30 %}
      mdi:battery-50
      {% elif is_number(battery_level) and battery_level | float > 20 %}
      mdi:battery-30
      {% elif is_number(battery_level) and battery_level | float > 10 %}
      mdi:battery-alert-variant-outline
      {% else %}
      mdi:power-plug
      {% endif %}
    badge_color: |-
      {% set battery_level = states('sensor.sonde_salle_battery') | int %}
      {% if is_number(battery_level) and battery_level | float > 90 %}
      green
      {% elif is_number(battery_level) and battery_level | float > 60 %}
      light-green
      {% elif is_number(battery_level) and battery_level | float > 30 %}
      amber
      {% elif is_number(battery_level) and battery_level | float > 20 %}
      orange
      {% elif is_number(battery_level) and battery_level | float > 10 %}
      red
      {% else %}
      grey
      {% endif %}
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.sonde_salle_temperature
        name: Température
        state_adaptive_color: true
      - entity: sensor.sonde_salle_humidity
        name: Humidité
        show_state: true
        y_axis: secondary
        show_line: false
        show_graph: false
        color: white
    hour24: true
    hours_to_show: 24
    points_per_hour: 2
    font_size: 50
    show:
      name: false
      icon: false
      legend: false
      labels: false
      extrema: false
    color_thresholds:
      - color: "#33ccff"
        value: 19
      - color: "#00ffff"
        value: 19.5
      - color: "#33ffcc"
        value: 20
      - color: "#00ff99"
        value: 20.5
      - color: "#ffff99"
        value: 21
      - color: "#ffff33"
        value: 21.5
      - color: "#ff9933"
        value: 22
      - color: "#cc6633"
        value: 24
      - color: "#ff6000"
        value: 26
5

Bonsoir à tous

Désolé pour ma réponse tardive pas dispo ces derniers jours !

J’ai régardé ce que vous avez proposé qui est fort intéressant.
@Jeffodilo top tes cartes mais je les trouve un peu grande pour le nombre de capteur que j’ai aujourd’hui :slight_smile:

@WarC0zes et @Plouf34 , j’ai mixé un peu de ce que vous avez proposé :wink:

En tout cas merci à tous les 3

Le résultat de tout ça au bout de la flèche rouge il faut encore adapter un peu mais l’idée se profile tout de même
à gauche : ma carte d’origine
au milieu : un début d’adaptation
à droite : ta carte @Jeffodilo

image
image1045×210 24.5 KB

2 « J'aime »
6

Bonjour a tous…
Je cherche a réduire l interligne entre les 3 lignes d infos de Min et Max…
J ai réussi à tout modifier, sauf ça :frowning:

Merci pour votre aide…

233
233501×338 68 KB

7

Bonjour,
peux tu mettre ton code ?
ca sera plus simple pour t’aider.

1 « J'aime »
8

Ca fait 3 soirs que je bosse sur cette carte, et ayant tout essayé, mon code là, c est un gros bazard… :slight_smile:

Mais le voici :

type: custom:mini-graph-card
name: Extérieurs
icon: mdi:thermometer
height: 100
animate: true
font_size_header: 12
font_size: 110
hours_to_show: 24
points_per_hour: 4
labels: false
decimals: 1
hour24: true
logarithmic: false
entities:
  - entity: sensor.entree_temperature
    name: " "
    show_state: false
    show_points: false
    smoothing: true
    color: violet
    state_adaptive_color: true
    y_axis: secondary
  - entity: sensor.entree_humidite
    name: " "
    show_state: true
    show_points: true
    smoothing: true
    color: paleturquoise
    state_adaptive_color: true
show:
  labels: false
  labels_secondary: false
  extrema: true
  fill: true
  points: false
  state: true
  legend: false
  average: false
grid_options:
  columns: 6
  rows: null
color_thresholds:
  - value: 7
    color: "#eb4d54"
  - value: 5
    color: "#1db954"
  - value: 4
    color: "#3a8df7"
card_mod:
  class: middle-right
  style: |
    .graph .graph__container .graph__container__svg svg g mask .line {
      animation-duration: 10s !important;
      animation-delay: 0s !important;
      animation-timing-function: linear !important;
      animation-iteration-count: infinite !important;
    }
    ha-card .header.flex .name.flex {
      color: white;
      margin-top: -20px
    }
    ha-card .states.flex {
      font-size: 13.5px;
      margin-top: -20px
    }
    ha-card .header.flex .icon {
      color: transparent;
      margin-top: -15px;
      margin-right: 350px;
    }
    ha-card .graph .graph__container .graph__labels {
      color: ;
      margin-top: px
    }
    ha-card {
      margin: 0px 0px 0px 0px;
    }
    .graph {
      margin-top: -10px !important;
    }
    :host {
      height: 150px;
    }
    :div.flex.info {
      font-size: 10px;
    }
    ha-card .header.flex, ha-card .states.flex {
      padding-bottom: 0;
    }
    ha-card .state__value {
      font-weight: 800;
      font-size: %;
      margin-right: -1px;
      font-family: "Open Sans";
    }
    .header.flex {
      font-size: 20px !important;
    }
    .states.flex {
      font-size: px !important;
      margin-top: -35px !important;
    }
    .info.flex {
      margin-top: -px !important;
      margin-bottom: px !important;
      font-size: px !important;
      justify-content: #right;
    }
9

teste ça :

image
image1008×589 34.2 KB

card_mod:
  class: middle-right
  style: |
    .info.flex {
      line-height: 18px;
    }
1 « J'aime »
10

Ça fonctionne ! Merci @WarC0zes !!!
Dans sa dernière version :

235
235487×327 67.4 KB

Crois tu qu il y a moyen de descendre le "« 94% » ??? Et de séparer un peu la colonne Min de la colonne Max ??? (Le « °C » qui touche le « 10,2 »)

type: custom:mini-graph-card
name: Extérieurs
icon: mdi:thermometer
height: 100
animate: true
font_size_header: 12
font_size: 110
hours_to_show: 24
points_per_hour: 4
labels: false
hour24: true
logarithmic: false
entities:
  - entity: sensor.entree_temperature
    name: " "
    show_state: false
    show_points: false
    smoothing: true
    color: violet
    state_adaptive_color: true
    y_axis: secondary
  - entity: sensor.entree_humidite
    name: " "
    show_state: true
    show_points: true
    smoothing: true
    color: paleturquoise
    state_adaptive_color: true
show:
  labels: false
  labels_secondary: false
  extrema: true
  fill: true
  points: false
  state: true
  legend: false
  average: false
grid_options:
  columns: 6
  rows: null
color_thresholds:
  - value: 7
    color: "#eb4d54"
  - value: 5
    color: "#1db954"
  - value: 4
    color: "#3a8df7"
align_state: right
card_mod:
  class: middle-right
  style: |
    .graph .graph__container .graph__container__svg svg g mask .line {
      animation-duration: 10s !important;
      animation-delay: 0s !important;
      animation-timing-function: linear !important;
      animation-iteration-count: infinite !important;
    }
    ha-card .header.flex .name.flex {
      color: white;
      margin-top: -20px;
      font-size: 12px;
    }
    ha-card .states.flex {
      font-size: 13.5px;
      margin-top: -20px
    }
    ha-card .header.flex .icon {
      color: violet;
      margin-top: -15px;
      margin-right: 65px;
    }
    ha-card .graph .graph__container .graph__labels {
      color: ;
      margin-top: px
    }
    ha-card {
      margin: 0px 0px 0px 0px;
    }
    .graph {
      margin-top: 0px !important;
    }
    :host {
      height: 150px;
    }
    :div.flex.info {
      font-size: 10px;
    }
    ha-card .header.flex, ha-card .states.flex {
      padding-bottom: 0;
    }
    ha-card .state__value {
      font-weight: 800;
      font-size: %;
      margin-right: -1px;
      font-family: "Open Sans";
    }
    .header.flex {
      font-size: 20px !important;
    }
    .states.flex {
      font-size: px !important;
      margin-top: -35px !important;
    }
    .info.flex {
      margin-top: 0px !important;
      margin-bottom: px !important;
      font-size: px !important;
      justify-content: right;
      line-height: 18px;
    }
11

Hello,

pour séparer les colonnes

teste

    ha-card .info__item:nth-child(2) {
      margin-left: 15px;
    }

image
image227×321 8.05 KB

image
image227×321 8.02 KB

cdt

12

test ça :

    .states--secondary {
      margin-top: 10px;
    }

faudra nettoyer ton code de card_mod, car plein de chose inutile.