Dynamic Dashboard
Introduction
L'objectif est de passer d'un graphique "statique" à un graphique où l'on peut modifier l'affichage. L'idée est de découvrir les possibilités offerte par HomeAssistant sans aller vers une solutions trop compliquée.
Pour résumer comment passer de ce graphique:
A ceci, ici par exemple je peux modifier l'axe des abscisses:
Pour cela, il faut créer une entité qui représentera la valeur pour la mesure de l'axe des abscisses.
Autrement dit, dans le code yaml nous avons une valeur en "dur":
Il faut donc ici remplacer cette valeur par l'entité que l'on aura créer préalablement.
Il faut donc dans un premier temps créer une entrée, puis utiliser l'entité correspondante, c'est à dire l'ajouter à une carte, pour finalement l'utiliser via du Templating.
Voici une vidéo explicative:
Ajoutons une entrée
Rendez-vous sur Paramètres/Appareils et services
Au niveau du menu (en haut), on clique sur Entrées (Helpers en anglais - la traduction est moyenne ici):
Cliquer sur le bouton (en bas de page).
Ici, nous on souhaite une liste de valeur, on selection donc Liste Déroulante:
On indique un Nome, une icone, on indique toutes les valeurs souhaitée (bouton Ajouter) et on clique sur le bouton Créer:
On retrouve bien notre Entre dans la liste:
Cliquons sur les trois petits points , puis sur Paramètres
On retrouve nos valeurs et surtout l'ID de l'entité, c'est cette valeur que l'on va utiliser ensuite: input_select.abcisse_time.
Remarque: si on modifie les options de la liste, il est conseillé de redémarrer la config. d'HomeAssistant.
Ajoutons une carte entité
Aller sur votre dashboard puis cliquer sur pour l'éditer. On va ajouter une Entité:
Cliquer sur Afficher l'éditeur de code:
Et copier/coller le YAML suivant:
type: entity
entity: input_select.abcisse_time
icon: mdi:chart-timeline-variant-shimmer
grid_options:
rows: 2
name: Sur...Soit le résultat ci-dessous, et cliquer sur enregistrer:
Extension Config Template Card
Comme expliqué dans la vidéo, nous avons deux types de templating, un pour le frontend (Lovelace) et l'autre backend (jinja2).
Le problème ici est que nous utilisons Apexcharts-card qui ne comprend pas ce templating. Il faut donc passer par un wrapper (enveloppe) qui fera le lien entre les deux.
Pour l'installer on passe par HACS:
Cliquer sur le bouton (en bas de page).
Puis, cliquer sur TÉLÉCHARGER:
Enfin, cliquer sur RECHARGER:
Il faut ensuite redémarrer HomeAssistant.
Edition du graphique
Il faut donc "envelopper" notre apexcharts-card dans un custom:config-template-card.
On indique qu'on utilisera notre entité comme variable.
Et on l'implémente. On remplace graph_span: 24h par graph_span: ${ states['input_select.abcisse_time'].state }
Ci-après le code yaml complet:
type: custom:config-template-card
entities:
- input_select.abcisse_time
card:
type: custom:apexcharts-card
graph_span: ${ states['input_select.abcisse_time'].state }
header:
show: true
title: Climat Intérieur
show_states: true
colorize_states: true
update_interval: 5min
apex_config:
chart:
height: 400
toolbar:
show: false
grid:
show: true
borderColor: "#e0e0e0"
strokeDashArray: 0
stroke:
curve: smooth
markers:
size: 0
hover:
size: 6
sizeOffset: 3
tooltip:
enabled: true
shared: true
intersect: false
x:
format: HH:mm
yaxis:
- id: temperature
min: 15
max: 30
decimals: 1
apex_config:
title:
text: Température (°C)
style:
fontSize: 12px
color: "#ff6b6b"
labels:
style:
colors: "#ff6b6b"
fontSize: 11px
- id: humidity
opposite: true
min: 20
max: 80
decimals: 0
apex_config:
title:
text: Humidité (%)
style:
fontSize: 12px
color: "#4dabf7"
labels:
style:
colors: "#4dabf7"
fontSize: 11px
series:
- entity: sensor.temperature_humidity_sensor_8e2a_temperature
name: Température
yaxis_id: temperature
color: "#ff6b6b"
type: line
stroke_width: 3
float_precision: 1
group_by:
func: avg
duration: 20min
- entity: sensor.temperature_humidity_sensor_8e2a_humidite
name: Humidité
yaxis_id: humidity
color: "#4dabf7"
type: line
stroke_width: 2
float_precision: 0
group_by:
func: avg
duration: 20minCe qui nous donne l'exemple suivant
Conclusion
Cette approche demande un peu de temps pour la mise en place, mais elle permet de créer des dashboards dynamiques avec un minimum de code. L'utilisation du templating combinée aux entrées personnalisées offre une flexibilité intéressante pour adapter l'affichage des graphiques selon vos besoins, sans multiplier les cartes.