Mini graph card à plusieurs courbes et couleurs variables

Entraide Home Assistant
1

Bonjour,
J’ai trouvé une carte intéressante sur ce forum : Quel type de carte pour capteur température + humidité? - #56 par titoumimi
image

J’ai réussi à modifier les couleurs de chacune des deux courbes, indépendamment, mais j’aurais souhaité une couleur variable différente sur chacune des deux courbes.
Par exemple, que ma courbe température utilise le color_thresholds, et que la courbe humidité utilise soit une couleur fixe color: yellow (par exemple), ou une autre color_thresholds, mais je n’y arrive pas…
Voici mon code actuel :

Code 
type: custom:stack-in-card
title: Extérieur
mode: vertical
keep:
  background: true
  margin: true
  outer_padding: true
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.netatmo_sonde_temperature_exterieur_temperature
        icon_color: pink
      - type: entity
        entity: sensor.netatmo_sonde_temperature_exterieur_humidite
        icon_color: cyan
      - type: entity
        entity: sensor.netatmo_sonde_temperature_exterieur_batterie
        icon_color: amber
    alignment: justify
  - type: custom:mini-graph-card
    height: 100
    hours_to_show: 24
    points_per_hour: 4
    hour24: true
    line_width: 4
    decimals: 1
    entities:
      - color: crimson
        entity: sensor.netatmo_sonde_temperature_exterieur_temperature
        name: Température extérieure
        show_legend: true
        y_axis: secondary
      - color: dodgerblue
        entity: sensor.netatmo_sonde_temperature_exterieur_humidite
        name: Humidité
        show_legend: true
    show:
      fill: true
      graph: line
      icon: false
      name: false
      state: false
      labels: true
      extrema: true
      icon_adaptive_color: false
      labels_secondary: true

Si c’est réalisable, sauriez-vous me dire où intégrer le color_thresholds pour l’appliquer uniquement à la courbe température, svp ?

PS : pardonnez-moi, je ne sais pas comment intégrer à mon message mon code de manière plus claire…

2

Oui c’est possible.
Un exemple :

      type: custom:mini-graph-card
      color_thresholds:
        - color: '#ef1d0f'
          value: 80
        - color: '#ef5a0f'
          value: 60
        - color: '#f0da11'
          value: 50
        - color: '#11f13a'
          value: 40
        - color: '#1da4f2'
          value: 30
      entities:
        - entity: sensor.nas_temperature
          name: Température
          state_adaptive-color: true
        - entity: sensor.nas_debit_de_telechargement
          name: Down
          color: var(--orange-color)
        - entity: sensor.nas_debit_de_transfert
          name: Up
          color: var(--blue-color)
          y_axis: secondary
      hours_to_show: 72
      line_width: 3
      font_size: 50
      animate: false
      show:
        name: false
        icon: false
        state: false
        legend: false
        fill: fade

Tu défini ton color_thresholds au départ. Dans la courbe où tu veux l’utiliser tu mets « state_adaptive-color: true » et dans l’autre la couleur que tu veux (par exemple: « color: var(–blue-color) »)

3

Bonjour,
a tester :

    entities:
      - entity: sensor.netatmo_sonde_temperature_exterieur_temperature
        name: Température extérieure
        show_legend: true
        y_axis: secondary
        color_thresholds:
          - value: 20
            color: "#ff0000"
          - value: 40
            color: "#ff0000"
          - value: 60
            color: "#0000ff"
      - entity: sensor.netatmo_sonde_temperature_exterieur_humidite
        name: Humidité
        show_legend: true
        color_thresholds:
          - value: 20
            color: "#ff0000"
          - value: 40
            color: "#ff0000"
          - value: 60
            color: "#0000ff"
1 « J'aime »
4

Nous avons répondu en même temps…

5

J’avais déjà tenté cette solution @WarC0zes en bidouillant. Cela ne fonctionne pas.

Concernant la solution de @sbdomo, on progresse car effectivement, j’arrive à faire varier la couleur de la courbe.
Toutefois, l’intégralité de la courbe est colorée uniformément, et visiblement selon la valeur actuelle lue:
image
Dans l’exemple, toute la courbe est verte, car il fait actuellement 19.9°C.

Mon souhait, la courbe qui change de couleur selon son historique. Je pensais qu’avec le thresholds j’y arriverais, car ça semble fonctionner dans mes autres tests :
image

Une idée ?
(merci encore pour l’aide incroyable fournie sur ce forum!)

PS : comment vous faites pour que le code ressemble à ça dans votre post sur le forum ?

6

Lorsque tu postes, tu utilises les balises « texte formaté » (selon le device que tu utilises, il est possible que ce soit dans le menu de la roue crantée, et tu colle ton code entre les balise.
image

1 « J'aime »
7

Okay parfait merci. J’ai testé ça pour les exemples de color_thresholds, mais je n’avais pas tenté pour le code complet… Merci :slight_smile:

8

Salut,
Je crois que c’est juste que j’ai mis le thresholds à l’envers. Il faut commencer par la plus petite valeur.

Exemple :

      color_thresholds:
        - color: '#1da4f2'
          value: 0.1
        - color: '#11f13a'
          value: 0.3
        - color: '#f0da11'
          value: 0.8
        - color: '#ef5a0f'
          value: 1
        - color: '#ef1d0f'
          value: 1.5

Et le résultat:
graph

3 « J'aime »
9

Si tu rajoute le code :

show:
  fill: false

tu enlèves le « coloriage » sous les courbes pour ne garder que les « spaghetti »…

Je trouve que le coloriage sous la courbe est moins utile / lisible lorsqu’on a plusieurs courbes sur le mini graph…

1 « J'aime »
10

Salut, j’avais bien mis les valeurs dans le bon ordre (car j’avais gardé mes valeurs et couleurs).
En revanche, je n’avais pas suffisamment joué avec les valeurs pour voir une vraie différence sur la courbe.
J’ai rajouté d’autres valeurs intermédiaires, et c’est plus visible.
Du coup tout fonctionne.
J’ai également retiré le remplissage en dessous.

Seul chose que je n’arrive pas à comprendre : le petit encart où il est indiqué les min et max et l’horaire associé passe tout en bas de la carte lorsque je mets le fill: false:
image

Toutefois, en fill: true il reste bien entre les icônes et les courbes:
image

11

Bonjour,
Merci pour ce sujet, je débute sur HA et j’ai repris le code du début avec succès… Trop cool! Merci.
Par contre je me pose la question de comment obtenir la valeur du capteur lorsqu’on passe la souris sur la courbe (comme on peut l’avoir dans une mini-graph-card « normale »).
J’ai essayé d’ajouter un « show_state: true » mais rien ne change.
Merci d’avance

12

Egalement, est-il possible de mettre des color_thresholds différents pour chaque courbe ?
mon code actuel:
Je voudrais par exemple mettre uen variation de couleur sur l’humidité…
D’ailleurs si je met « state_adaptive-color: true » pour les deux sensors, seul le premier est pris en compte… normal ?

type: custom:stack-in-card
title: Balcon
mode: vertical
keep:
  background: true
  margin: true
  outer_padding: true
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.alecto_ws1700_71_03_temperature_2
        icon_color: pink
      - type: entity
        entity: sensor.alecto_ws1700_71_03_humidite_2
        icon_color: cyan
      - type: entity
        entity: sensor.alecto_ws1700_71_03_batterie_2
        icon_color: amber
    alignment: justify
  - type: custom:mini-graph-card
    height: 100
    hours_to_show: 24
    points_per_hour: 4
    hour24: true
    line_width: 4
    decimals: 1
    color_thresholds:
      - value: -10
        color: "#0fefeb"
      - color: "#34ef0f"
      - value: 30
        color: "#ef0f0f"
    entities:
      - entity: sensor.alecto_ws1700_71_03_temperature_2
        name: Température extérieure
        show_legend: true
        state_adaptive-color: true
      - entity: sensor.alecto_ws1700_71_03_humidite_2
        name: Humidité
        color: dodgerblue
        y_axis: secondary
        show_legend: true
    show:
      fill: true
      graph: line
      icon: false
      name: false
      state: false
      labels: true
      extrema: true
      icon_adaptive_color: false
      labels_secondary: true