Dashboard - 🌻 Minimalist

[Clemalex]

Tu devrais au moins englober le tout dans une stack-in-card, tu verras, ça feras au plus une vrai carte…(que tu peux ensuite remettre dans une grille… )

[Clemalex]

@Galadan

je n’arrive pas a faire un truc, je voudrais ajouter une seconde entity sur le template graph, j’ai créé un autre template en suivant le premier, ce qui donne ça:

Pour l’instant, j’ai pas eu trop de le temps de m’amuser avec mais voici où j’en suis :

Sur PC :

Sur Mobile:

Il reste des fioritures à corriger.

Je suis vraiment pas fan du rendu sur téléphone ou pc (sauf le bleu ou le rouge peut être).

Je poserais le modèle (template) dans la semaine…

Ps: les graph jaune (ou orange ?) sont les graphes de base.

[Galadan]

@Clemalex

stack-in-card

Celle en rouge ou en violet était mon idée de base.
cela fait chargé avec les deux icones.

[Drealine]

Hello.

La personne en charge du repo a fait des modifications dans les ressources des cartes en passant les mots en Anglais. Il faut donc faire la modification à la mano pour les configurations de chaque vue.

[Clemalex]

@Drealine

passant les mots en Anglais

Oui et des cartes ont été ajoutées et des variables renommées. Ainsi qu’un thème dark

ce sujet ne se veut pas exhaustif. Pensez à aller voir le github

[Clemalex]

J’en suis là, et j’arrête…

Je postes le code ce soir

Edit:

Le modèle :
Il est pas super propre car j’ai fais pas mal de tests mais je laisse pour montrer (un peu) les possibilités de codage…

button_card_templates:
  graph_with_card:
    variables:
      entity_carte_gauche: sensor.default
      entity_carte_droite: sensor.default
      entity_graph: sensor.default
      color: var(--info-color)
      name_carte_gauche: Default name
      name_carte_droite: Default name
      show_icon_carte_gauche: 'false'
      show_icon_carte_droite: 'false'
      show_name_carte_gauche: 'false'
      show_name_carte_droite: 'false'
      icon_carte_gauche: null
      icon_carte_droite: null
    styles:
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 0px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
      custom_fields:
        item2:
          - padding-top: >
              [[[ if (!variables.show_name_carte_gauche &&
              !variables.show_name_carte_droite) return '13px';]]]
    custom_fields:
      item1:
        card:
          type: custom:button-card
          entity: '[[[ return variables.entity_carte_gauche ]]]'
          name: '[[[ return variables.name_carte_gauche ]]]'
          template:
            - icon_info
            - generique
          show_icon: '[[[ return variables.show_icon_carte_gauche ]]]'
          show_name: '[[[ return variables.show_name_carte_gauche ]]]'
          label: |
            [[[
              if (variables.icon_carte_gauche ) return (variables.icon_carte_gauche + " " + states[variables.entity_carte_gauche].state+ " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement);
              return states[variables.entity_carte_gauche].state + " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement;
            ]]]
          styles:
            card:
              - '--padding-mobile': >
                  [[[ if (!variables.show_icon_carte_gauche &&
                  !variables.show_icon_carte_droite) return '5px 5px 14px 0px';
                  if (variables.show_icon_carte_gauche &&
                  variables.show_icon_carte_droite) return '3px 0 0px 10px';
                  return '10px 0 9px 10px'; ]]]
              - '--padding-computer': >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return '23px 0 12px 0';
                  return '12px'; ]]]
              - padding: var(--padding-computer)
            grid:
              - grid-template-areas: '"i l item1_item1" "i n item1_item1"'
              - grid-template-columns: >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return 'auto'; return
                  'min-content auto'; ]]]
          extra_styles: |
            #label {
              white-space: nowrap;
            }
            /* telephone */
            @media screen and (max-width: 800px) {
              #label {
                white-space: pre-line;
              }
              #card {
                padding: var(--padding-mobile) !important;
              }
            }
          custom_fields:
            item1_item1:
              card:
                entity: '[[[ return variables.entity_carte_droite ]]]'
                name: '[[[ return variables.name_carte_droite ]]]'
                template:
                  - icon_info
                  - generique
                label: |
                  [[[
                    if (variables.icon_carte_droite ) return (variables.icon_carte_droite + " " + states[variables.entity_carte_droite].state) + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                    return states[variables.entity_carte_droite].state + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                  ]]]
                show_icon: '[[[ return variables.show_icon_carte_droite ]]]'
                show_name: '[[[ return variables.show_name_carte_droite ]]]'
                extra_styles: |
                  #label {
                    white-space: nowrap;
                  }
                  /* telephone */
                  @media screen and (max-width: 800px) {
                    #label {
                      white-space: pre-line;
                    }
                  }
                type: custom:button-card
      item2:
        card:
          type: custom:mini-graph-card
          entities:
            - entity: '[[[ return variables.entity_graph ]]]'
          line_color: '[[[ return variables.color ]]]'
          show:
            name: false
            icon: false
            legend: false
            state: false
          style: |
            ha-card {
              box-shadow: none;
              border-radius: var(--border-radius);
            }

#carte grise
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: gray
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false
  icon_carte_gauche: 🌡️
  icon_carte_droite: 💧

#carte rouge
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: red
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false

#carte jaune
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Température
  name_carte_droite: Humidité
  color: gold
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: true
  show_name_carte_gauche: true

[Galadan]

Hello, merci @Clemalex , c’est top!!

C’est quoi cette partie:

                extra_styles: |
                  #label {
                    white-space: nowrap;
                  }
                  /* telephone */
                  @media screen and (max-width: 800px) {
                    #label {
                      white-space: pre-line;
                    }
                  }

?

[Clemalex]

@Galadan

C’est quoi cette partie

Un exemple de style appliqué seulement sur les téléphone.

[Galadan]

Ok, faut enlever alors? ça fait partie du clean? ^^
Il y a une petite erreur au niveau affichage du nom:

show_icon: '[[[ return variables.show_icon_carte_droite ]]]'
- show_name: '[[[ return variables.show_name_carte_gauche ]]]'
+ show_name: '[[[ return variables.show_name_carte_droite ]]]'

[Clemalex]

@Galadan

Il y a une petite erreur

Le joli copier/merder !

[Galadan]

j’ai eu de la chance de chercher a afficher les noms pour la voir ^^

On peux mettre le nom de l’entité principale, par exemple pour afficher le nom de la pièce?
Faut ajouter une variable name ds le template mais comment la faire afficher comme le template icon_info?

Ton template et celui « de base »:

Juste ajouter le nom de la pièce qui est égale au sensor du graph en gros.
Sinon parfait !!

[Clemalex]

@Galadan

Ok, faut enlever alors?

Pas forcément. Enleve et regarde depuis un petit écran…

@Galadan

ça fait partie du clean?

La carte est fonctionnelle mais comme je l’ai mise sans nettoyage, je ne me souviens plus de tous les tests que j’ai fais.
Pas forcément du nettoyage peut être…

[Clemalex]

@Galadan

template icon_info?

Edit et met une image, je m’y perd dans les templates…

[Galadan]

Hello,
Comment ça @M_nu62880, comment je gère la filtration?

@Clemalex , j’ai édité le post comme demandé, j’ai un autre truc que je comprends pas, pourtant j’ai l’impression d’avoir fait chaque page de la même façon mais elle ne s’affiche pas pareil sur le téléphone, deux screens seront plus parlant:

Tu vois le soucis? J’ai beau reprendre le code, je vois pas la diff…

[Clemalex]

Une nouvelle carte depuis une demande sur le forum officiel :

Ce n’est pas fini. il faut encore adapter le modèle (au lieu de prendre celui generique ancien nom) en plus de reprendre en variable les couleurs et modeliser le tout.

Pour les plus impatients, le code actuel :

Carte de gauche (sans couleur de fond)

#left card
type: custom:button-card
styles:
  card:
    - border-radius: 20px
    - box-shadow: var(--box-shadow)
    - padding: 0px
  grid:
    - grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content
custom_fields:
  item1:
    card:
      entity: sensor.canon_mg5700_series
      name: Canon MG5750
      template:
        - icon_info
        - generique
      styles:
        card:
          - padding: 12px
      type: custom:button-card
  item2:
    card:
      type: custom:bar-card
      name: BK
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_bk
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item3:
    card:
      type: custom:bar-card
      name: B
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_pgbk
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item4:
    card:
      type: custom:bar-card
      name: 'Y'
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(250,179,0)
      entities:
        - entity: sensor.canon_mg5700_series_yellow
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item5:
    card:
      type: custom:bar-card
      name: M
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(248,75,122)
      entities:
        - entity: sensor.canon_mg5700_series_magenta
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item6:
    card:
      type: custom:bar-card
      name: C
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(66,126,222)
      entities:
        - entity: sensor.canon_mg5700_series_cyan
      style: |
        bar-card-currentbar{
          border: 0.01rem solid rgb(226,226,226);
        }
        bar-card-backgroundbar{
          display: none;
        }
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px 16px 16px;
        }
      animation:
        state: 'off'

Carte de droite (avec couleur de fond)

type: custom:button-card
styles:
  card:
    - border-radius: 20px
    - box-shadow: var(--box-shadow)
    - padding: 0px
  grid:
    - grid-template-areas: '"item1" "item2" "item3" "item4" "item5" "item6"'
    - grid-template-columns: 1fr
    - grid-template-rows: min-content
custom_fields:
  item1:
    card:
      entity: sensor.canon_mg5700_series
      name: Canon MG5750
      template:
        - icon_info
        - generique
      styles:
        card:
          - padding: 12px
      type: custom:button-card
  item2:
    card:
      type: custom:bar-card
      name: BK
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_bk
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item3:
    card:
      type: custom:bar-card
      name: B
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: black
      entities:
        - entity: sensor.canon_mg5700_series_black_pgbk
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item4:
    card:
      type: custom:bar-card
      name: 'Y'
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(250,179,0)
      entities:
        - entity: sensor.canon_mg5700_series_yellow
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item5:
    card:
      type: custom:bar-card
      name: M
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(248,75,122)
      entities:
        - entity: sensor.canon_mg5700_series_magenta
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px;
        }
      animation:
        state: 'off'
  item6:
    card:
      type: custom:bar-card
      name: C
      height: 20px
      positions:
        name: outside
        value: outside
        icon: 'off'
        indicator: 'off'
        minmax: 'off'
      color: rgb(66,126,222)
      entities:
        - entity: sensor.canon_mg5700_series_cyan
      style: |
        bar-card-name{
          width: 2rem;
          margin-right: 40px !important;
        }
        bar-card-value{
          width: 2rem;
          margin-left: 40px !important;
          justify-content: center;
          display: flex;
        }
        bar-card-background{
          margin: 4px 0 4px 0 !important;
          text-align: initial;
        }
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 0px;
          box-shadow: none;
        }
        #states{
          padding: 0 16px 16px 16px;
        }
      animation:
        state: 'off'

[Galadan]

Suite du sujet Dashboard - Minimalist :

Hello @Clemalex ,
Du coup c’est possible d’ajouter le nom de la pièce dans ta carte?

[Clemalex]

@Galadan

c’est possible d’ajouter le nom de la pièce dans ta carte?

Oui pourquoi pas, reprends cette image et indique où pour les 3 cartes :

[Galadan]

En dessous ou au dessus peut-être ?

[Clemalex]

Voilà :

Carte de gauche (`show_label_up: true`)

type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: gray
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false
  icon_carte_gauche: 🌡️
  icon_carte_droite: 💧
  show_label_up: true
  label: Lorem Ipsum
  show_label_down: false

Carte de droite(`show_label_down: true`)

type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: gray
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false
  icon_carte_gauche: 🌡️
  icon_carte_droite: 💧
  show_label_up: true
  label: Lorem Ipsum
  show_label_down: false

Le modele(template)

button_card_templates:
  graph_with_card:
    variables:
      entity_carte_gauche: sensor.default
      entity_carte_droite: sensor.default
      entity_graph: sensor.default
      color: var(--info-color)
      name_carte_gauche: Default name
      name_carte_droite: Default name
      show_icon_carte_gauche: 'false'
      show_icon_carte_droite: 'false'
      show_name_carte_gauche: 'false'
      show_name_carte_droite: 'false'
      icon_carte_gauche: null
      icon_carte_droite: null
      show_label_up: false
      show_label_down: false
      label: Chambre
    show_label: |
      [[[ if (variables.show_label_up) return 'true'; return 'false' ]]] 
    label: >
      [[[ if (variables.show_label_up || variables.show_label_down ) return
      variables.label; return '' ]]] 
    styles:
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 0px
      grid:
        - grid-template-areas: |
            [[[ if (variables.show_label_up) return '"l" "item1" "item2"';
                if (variables.show_label_down) return '"item1" "l" "item2" ';
                return '"item1" "item2"'
            ]]] 
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
      label:
        - font-weight: bold
        - font-size: 14px
        - padding-top: >
            [[[ if (variables.show_label_up ) return '20px'; if
            (variables.show_label_down ) return '0' ]]] 
        - filter: opacity(100%)
      custom_fields:
        item2:
          - padding-top: >
              [[[ if (!variables.show_name_carte_gauche &&
              !variables.show_name_carte_droite) return '13px';]]]
    custom_fields:
      item1:
        card:
          type: custom:button-card
          entity: '[[[ return variables.entity_carte_gauche ]]]'
          name: '[[[ return variables.name_carte_gauche ]]]'
          template:
            - icon_info
            - generique
          show_icon: '[[[ return variables.show_icon_carte_gauche ]]]'
          show_name: '[[[ return variables.show_name_carte_gauche ]]]'
          label: |
            [[[
              if (variables.icon_carte_gauche ) return (variables.icon_carte_gauche + " " + states[variables.entity_carte_gauche].state+ " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement);
              return states[variables.entity_carte_gauche].state + " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement;
            ]]]
          styles:
            card:
              - '--padding-mobile': >
                  [[[ if (!variables.show_icon_carte_gauche &&
                  !variables.show_icon_carte_droite) return '5px 5px 14px 0px';
                  if (variables.show_icon_carte_gauche &&
                  variables.show_icon_carte_droite) return '3px 0 0px 10px';
                  return '10px 0 9px 10px'; ]]]
              - '--padding-computer': >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return '23px 0 12px 0';
                  return '12px'; ]]]
              - padding: var(--padding-computer)
            grid:
              - grid-template-areas: '"i l item1_item1" "i n item1_item1"'
              - grid-template-columns: >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return 'auto'; return
                  'min-content auto'; ]]]
          extra_styles: |
            #label {
              white-space: nowrap;
            }
            /* telephone */
            @media screen and (max-width: 800px) {
              #label {
                white-space: pre-line;
              }
              #card {
                padding: var(--padding-mobile) !important;
              }
            }
          custom_fields:
            item1_item1:
              card:
                entity: '[[[ return variables.entity_carte_droite ]]]'
                name: '[[[ return variables.name_carte_droite ]]]'
                template:
                  - icon_info
                  - generique
                label: |
                  [[[
                    if (variables.icon_carte_droite ) return (variables.icon_carte_droite + " " + states[variables.entity_carte_droite].state) + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                    return states[variables.entity_carte_droite].state + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                  ]]]
                show_icon: '[[[ return variables.show_icon_carte_droite ]]]'
                show_name: '[[[ return variables.show_name_carte_gauche ]]]'
                extra_styles: |
                  #label {
                    white-space: nowrap;
                  }
                  /* telephone */
                  @media screen and (max-width: 800px) {
                    #label {
                      white-space: pre-line;
                    }
                  }
                type: custom:button-card
      item2:
        card:
          type: custom:mini-graph-card
          entities:
            - entity: '[[[ return variables.entity_graph ]]]'
          line_color: '[[[ return variables.color ]]]'
          show:
            name: false
            icon: false
            legend: false
            state: false
          style: |
            ha-card {
              box-shadow: none;
              border-radius: var(--border-radius);
            }

[Galadan]

Top!!
Merci @Clemalex !
Il y a un moyen simple de désactivé l’entité de droite si jamais il y a qu’une données a afficher?