Apexcharts-card - Problèmes (bug) ou configuration

Entraide Home Assistant
, ,
1

Bonjour,

J’utilise la carte ApexChart qui est super mais franchement au vu de tous les bug rencontrés je me demande si je ne vais pas changer ou abandonner l’idée.

Le but est d’afficher la consommation de ma Green’Up (conso + tarif) par jour / semaine / mois / année.
1er problème : j’aimerais que pour la semaine, il m’affiche, sur l’axe horizontal, chaque jour de la semaine, là je n’ai que 5 jours, pourtant il a de la place pour s’afficher !
Déjà, le lundi avec « end: isoWeek » la consommation est affiché sur plusieurs jours. On ne le voit pas ici, on est mardi mais il y a un gros bug.
Et en plus il ne prend que 30% de la place disponible, pourquoi ?
Il y a un moyen d’étendre la plage du graphique pour qu’il s’étende sur toute la largeur ?

type: custom:apexcharts-card
apex_config:
  legend:
    position: top
  chart:
    height: 300px
graph_span: 1week
span:
  end: isoWeek
yaxis:
  - id: left
    decimals: 2
    min: ~0
    max: ~5
    opposite: false
  - id: cumulativeconso
    min: 0
    max: 0
    show: false
  - id: cumulativeprice
    min: 0
    max: 0
    show: false
  - id: right
    decimals: 2
    opposite: true
    min: ~0
    max: ~5.0
header:
  show: true
  title: Consommation / Coût de la Green'Up (semaine)
  show_states: true
  colorize_states: true
series:
  - entity: sensor.consommation_de_la_greenup
    name: Consommation
    yaxis_id: left
    unit: " kWh"
    float_precision: 2
    color: orange
    type: column
    group_by:
      func: diff
      duration: 1day
  - entity: sensor.cout_de_la_consommation_de_la_greenup
    name: Coût
    yaxis_id: right
    color: darkblue
    unit: " €"
    float_precision: 2
    type: column
    group_by:
      func: diff
      duration: 1day
  - entity: sensor.consommation_de_la_greenup
    name: Consommation totale
    yaxis_id: cumulativeconso
    unit: " kWh"
    float_precision: 2
    type: column
    color: red
    group_by:
      func: diff
      duration: 1week
    show:
      in_chart: false
      datalabels: false
      legend_value: false
  - entity: sensor.cout_de_la_consommation_de_la_greenup
    name: Prix totale
    yaxis_id: cumulativeprice
    unit: " €"
    float_precision: 2
    type: column
    color: green
    group_by:
      func: diff
      duration: 1week
    show:
      in_chart: false
      datalabels: false
      legend_value: false

image
image2727×619 29 KB

2

Bonjour,
Pas facile à utiliser, il faut prendre des bouts de code dans les différents posts et surtout bien lire la notice de configuration, on fini par y arriver.
Commence par cela pour tes jours : 7d, à la place de 1week

type: custom:apexcharts-card
graph_span: 7d
3

J’ai espéré, mais ça ne change rien. J’espère en effet y arriver parce que ça me permet de voir les données sur plusieurs périodes sans utiliser de capteurs spécifiques qui se remettent à 0 régulièrement (genre compteur de service public).
Mais je suis partagé : il semble pas mal bogué et d’un autre côté tellement utilisé que je pense que le problème est entre la chaise et clavier (moi).

4

Peut-être

graph_span: 7d
span:
  start: isoWeek
apex_config:
  plotOptions:
    bar:
      columnWidth: 30
5

Pour l’utiliser de manière intensive, Apex charts fonctionne très bien.
En revanche, comme le souligne @Jeffodilo , l’outil est pas facile à prendre en main et il y a énormément de subtilités de syntax.

Attention également pour les graphiques sur de longues périodes. Il faut activer l’attribut « long term statistics » sinon vous n’aurez que 30 à 45 jours de données affichées.

Pour ton histoire de graph qui commence en début de cycle (jour/semaine/mois) voici ce qu’il faut ajouter

# pour afficher chaque jour de la semaine
graph_span: 7d
span:
  start: isoWeek

Et ajout l’option ci-dessous. Ça va étendre le graph en largeur. Tu peux jouer sur la valeur pour que ça corresponde au mieux.

apex_config:
  plotOptions:
    bar:
      columnWidth: 30
6

Pour columnWidth: 30, c’est cool sur un écran 4K mais sur téléphone c’est pas beau, trop large !
Pour le isoWeek il y a un bug pour la première journée, un des graphes est sur plusieurs jours, c’est moche.

Et pour le moment ça ne règle pas pourquoi le graphe ne prend pas toute la place en largeur !

Il y a aussi tickPlacement: between qui doivent permettre de mettre les labels entre les ticks. Ça permettrait de voir les 7 jours au lieu de 6. Mais ça n’a pas l’air de fonctionner.

apex_config:
  xaxis:
    tickPlacement: between
7

Avec ces options je n’ai aucun soucis sur écran ou mobile… je ne peux plus t’aider qu’avec ça

8

Tu as combien de jours (et donc de bar graph) ?
J’ai l’impression qu’en courbe ça doit mieux fonctionner.

9

image
image1122×836 37.6 KB

10

Ah oui ça rend bien. Moi avec 2 données :

image
image777×609 21.7 KB

Et sur mobile, les deux barres oranges sont collée, et la première barre bleu est sous la deuxième barre orange. Bref c’est caca.

Mais c’est vrai que ton graphique a toi est vraiment chouette.
Tu pourrais mettre ton code en texte (avec </>) ça serait sympa et je pourrais tout voir et faire des copier / coller.

11

image
image1123×798 39.3 KB

J’ai mes group_by par 1day et pas par 1week…pourquoi tu groupe par semaine pour ensuite les montrer par jour?

12

Je te conseille de mettre les barres en ˋstacked: trueˋ pour que ça soit plus compact.

13

Il se met à quel endroit ce stacked ? Et j’ai essayé (à plusieurs endroits) et ça ne me change pas grand chose.
Ensuite, pour l’explication :
j’ai 2 capteurs d’intégrales :

  • un pour le nombre kWh de ma Green’Up
  • un autre qui fait le calcul préalable (kW instantanné * coût au kWh instantané) et intègre ce calcul. Ce qui me donne le prix en temps réel en tenant compte des jours bleu / blanc / rouge / HP / HC.
    Ensuite, pour le graphe sur une semaine, j’ai 4 données :
  • Une donnée consommation en kWh groupé en jour qui donne la consommation / jour
  • Une donnée consommation en kWh groupé en semaine qui donne le cumul de la consommation sur cette semaine (cette courbe n’est pas affichée, seul la valeur permet de voir le cumul, je ne sais pas s’il y a un autre moyen de faire ça).
  • Une donnée prix en € groupé en jour qui donne le prix / jour
  • Une donnée prix en € groupé en semaine qui le cumul sur cettte semaine (cette courbe n’est pas affichée, seul la valeur permet de voir le cumul, je ne sais pas s’il y a un autre moyen de faire ça).

Déjà, j’ai mis columnWidth: 15 et c’est plus joli je trouve.

vingerha : tu ne fais que des captures d’écran, tu ne met pas le texte.

14

Copier le texte ne sert à rien car c’est q’un démo et je en change pas…le copier n’à aucun valeur, juste essayer et appliequer (ou non) mes idées :slight_smile:

15

Merci à tous pour vos réponses. Il est bizarre ce graphique !!!
Alors, en effet, le columnWidth: 15 permet d’étendre le graphe sur la largeur (pourquoi je sais pas) au lieu qu’il soit tout ramasser au centre.
Par contre, j’ai du mal avec les graduations de l’axe des X, pas de dimanche mais 2 lundi et deux mardi !!! C’est n’importe quoi ! Sinon ça serais presque bien.

type: custom:apexcharts-card
apex_config:
  legend:
    position: top
  chart:
    stacked: true
    height: 300px
  plotOptions:
    bar:
      columnWidth: 15
  xaxis:
    labels:
      formatter: |
        EVAL:function(value) {
          return new Date(value).toLocaleDateString("fr-AU", { weekday: 'long' });
        }
    tooltip:
      enabled: false
graph_span: 7day
span:
  end: isoWeek
yaxis:
  - id: left
    decimals: 2
    min: ~0
    max: ~5
    opposite: false
  - id: cumulativeconso
    min: 0
    max: 0
    show: false
  - id: cumulativeprice
    min: 0
    max: 0
    show: false
  - id: right
    decimals: 2
    opposite: true
    min: ~0
    max: ~5.0
header:
  show: true
  title: Consommation / Coût (semaine)
  show_states: true
  colorize_states: true
series:
  - entity: sensor.consommation_de_la_greenup
    name: Consommation
    yaxis_id: left
    unit: " kWh"
    float_precision: 2
    color: orange
    type: column
    group_by:
      func: diff
      duration: 1day
  - entity: sensor.cout_de_la_consommation_de_la_greenup
    name: Coût
    yaxis_id: right
    color: darkblue
    unit: " €"
    float_precision: 2
    type: column
    group_by:
      func: diff
      duration: 1day
  - entity: sensor.consommation_de_la_greenup
    name: Consommation totale
    yaxis_id: cumulativeconso
    unit: " kWh"
    float_precision: 2
    type: column
    color: red
    group_by:
      func: diff
      duration: 7day
    show:
      in_chart: false
      datalabels: false
      legend_value: false
  - entity: sensor.cout_de_la_consommation_de_la_greenup
    name: Prix totale
    yaxis_id: cumulativeprice
    unit: " €"
    float_precision: 2
    type: column
    color: green
    group_by:
      func: diff
      duration: 7day
    show:
      in_chart: false
      datalabels: false
      legend_value: false

image
image1324×607 25 KB

J’ai mis (voir ci dessous) mais j’ai deux lundi et pas de dimanche :

apex_config:
  xaxis:
    tickAmount: 7

EDIT : en mettant 6, j’ai tous les jours de la semaine, le dimanche n’est pas représenté MAIS il y a le tick (et la place) mais le libellé ne s’affiche pas. Dommage, il y a largement la place !!!

image
image1269×617 24.5 KB

16

L’attribut stacked: true se met en indentation 0. Mais j’avais pas vu que tes deux colonnes étaient avec des unités différentes (kWh et €). C’est moins pertinent du coup.

Pour l’axe des abscisses, ton code de formattage pour avoir le nom des jours de la semaine est un peu trop lourd. Tu peux le simplifier de la sorte

  xaxis:
    labels:
      format: dddd
17

Bonjour,
Merci pour ce code, encore une amélioration pour mes graphs.

18

En effet, c’est plus simple, j’ai modifié mon code. Merci

19

Quelle amélioration ?

20

Celle du format des labels x ce qui m’a permis de mettre à jour mon graph visible ici dans ce post
C’est en glanant des astuces qu’on arrive à faire ce qu’on souhaite, ce que je disais plus haut, il faut parcourir les posts, lire et récupérer des bouts de code