[CARTE] Apexcharts-card

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
176

C’est dans la docu d’Apex…ajoute par entity:

    show:
      in_header: false
1 « J'aime »
177

Arff pourtant j’y ai passé 3h dans la doc…
Merci!
Et pour la customisation de la forme des barres pour le type « column », Une idee?

178

Je ne sais pas…et pas du tout dans mon intérêt … donc… il faut chercher les forums

179

Bonjour,
pour le border-radius des bars.

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  chart:
    stacked: true
  dataLabels:
    background:
      borderWidth: 0
      opacity: 0
      foreColor: '#03A9F4'
  plotOptions:
    bar:
      borderRadius: 5
      dataLabels:
        position: center
180

Topissime.
Merci Les gars!
J’abuse encore un peu de vous; ce thread comporte plus de 3000 messages difficile de retrouver les infos…

  • possible de faire apparaitre les unités dans les dataLables?
  • comment faire pour avoir la couleur de la courbe qui passe « au dessus » de celle des barres?
    image
181

Hello, tu as fait comment pour avoir ta courbe de soleil ? (avec l’autre le midi solaire…)
Merci :slight_smile:

ok j’ai trouvé en cherchant… ^^ [CARTE] Home assistant Sun card - pour les phases du soleil

182

Bonjour,

Est il possible de rendre cliquable un graf « RadialBar » ?
J’aimerais en effet pouvoir cliquer sur le cercle pour ouvrir le graphique du capteur

1

J’ai utilisé le

header_actions:
      tap_action:
        action: more-info

Ca ne fonctionne pas… Je le place au bon endroit?

type: custom:apexcharts-card
header:
  show: false
  title: Qualité de l'air
  show_states: true
  colorize_states: true
chart_type: radialBar
experimental:
  color_threshold: true
apex_config:
  chart:
    height: 140px
  legend:
    onItemHover:
      highlightDataSeries: false
    show: false
  plotOptions:
    radialBar:
      startAngle: 0
      endAngle: 360
      dataLabels:
        name:
          offsetY: -5
        value:
          offsetY: -1
  stroke:
    dashArray: 2
    lineCap: butt
series:
  - entity: sensor.qualite_de_l_air_en
    header_actions:
      tap_action:
        action: more-info
    name: 🍃
    group_by:
      duration: 10min
      func: last
    color_threshold:
      - value: 60
        color: rouge
      - value: 88
        color: orange
      - value: 96
        color: green
      - value: 98.7
        color: blue

Merci beaucoup ! :+1:

184

Salut :slight_smile: quel code pour les boutons qui permettent de modifier la graph_span ?

185

Bonjour

Il serait bon que tu crées ton propre sujet avec le bon tag car là ton message est noyé dans un échange autre.
Si tu veux plus de réponse et réactivité je pense que c’est préférable
Merci à toi

1 « J'aime »
186

Bonjour,
Petite contribution de ma part grâce à toutes les infos trouvées sur ce sujet et celui du forum anglais. Merci à ceux qui partagent leur code, c’est donc à mon tour !

Une double carte sur ma consommation électrique (à partir du Zlinky) et en utilisant tabbed-card (pour une utilisation optimale sur mobile) :

Capture d'écran 2024-02-09 100523
Capture d'écran 2024-02-09 100523639×511 16.6 KB

Capture d'écran 2024-02-09 100534
Capture d'écran 2024-02-09 100534634×501 20.6 KB

Code 
        - type: custom:tabbed-card
          options:
            defaultTabIndex: 1
          styles:
            '--mdc-theme-primary': null
            '--mdc-tab-text-label-color-default': grey
          tabs:
            - card:
                type: custom:apexcharts-card
                header:
                  show: true
                  title: Consommation journalière /T°
                  show_states: true
                  colorize_states: true
                update_interval: 15min
                graph_span: 7d
                span:
                  end: day
                apex_config:
                  chart:
                    height: 200
                  legend:
                    show: false
                  xaxis:
                    labels:
                      format: ddd
                yaxis:
                  - id: first
                    decimals: 0
                    min: 0
                    apex_config:
                      tickAmount: 4
                  - id: second
                    opposite: true
                    show: false
                    apex_config:
                      forceNiceScale: true
                series:
                  - entity: sensor.electricite_compteur_journalier
                    name: Consommation du jour
                    color: dodgerblue
                    yaxis_id: first
                    type: column
                    group_by:
                      func: diff
                      duration: 1d
                  - entity: sensor.temperature_exterieure_securite
                    name: T° max
                    color: '#fcc200'
                    yaxis_id: second
                    show:
                      datalabels: true
                    group_by:
                      func: max
                      duration: 1d
                    stroke_width: 3
              attributes:
                label: Conso /T°
            - card:
                type: custom:apexcharts-card
                header:
                  show: true
                  title: Consommation journalière /prix
                  show_states: true
                  colorize_states: true
                update_interval: 15min
                graph_span: 7d
                span:
                  end: day
                apex_config:
                  chart:
                    height: 200
                  legend:
                    show: false
                  xaxis:
                    labels:
                      format: ddd
                yaxis:
                  - id: first
                    decimals: 0
                    min: 0
                    apex_config:
                      tickAmount: 4
                  - id: second
                    opposite: true
                    show: false
                    decimals: 0
                    min: 0
                    apex_config:
                      tickAmount: 4
                series:
                  - entity: sensor.electricite_compteur_journalier
                    name: Consommation du jour
                    color: dodgerblue
                    yaxis_id: first
                    type: column
                    group_by:
                      func: diff
                      duration: 1d
                  - entity: sensor.electricite_prix_du_jour
                    name: Prix du jour
                    color: crimson
                    yaxis_id: second
                    show:
                      datalabels: true
                    group_by:
                      func: last
                      duration: 1d
                    stroke_width: 0
              attributes:
                label: Conso /€

et une carte pour connaitre la répartition électrique de mes gros appareils électriques :
Capture d'écran 2024-02-09 100900

Code 
type: custom:apexcharts-card
header:
  show: true
  title: Répartition électrique hier
  show_states: false
  colorize_states: true
chart_type: donut
update_interval: 15min
apex_config:
  chart:
    height: 350
  dataLabels:
    formatter: |
      EVAL:function(value) {
        return value.toFixed(0) + " %";
      }
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: TOTAL
            formatter: |
              EVAL:function(w) {
                return w.globals.seriesTotals.reduce((a, b) => {return (a + b)} , 0).toFixed(1) + " kWh"
                }
graph_span: 24h
span:
  start: day
  offset: '-1d'
series:
  - entity: sensor.electricite_compteur_test_3_radiateur_salle_a_manger
    name: Rad. Salle à manger
    color: '#a33d63'
    group_by:
      func: diff
      duration: 1d
  - entity: sensor.electricite_compteur_test_3_radiateur_sejour
    name: Rad. Séjour
    color: '#b30d32'
    group_by:
      func: diff
      duration: 1d
  - entity: sensor.electricite_compteur_test_3_radiateur_salon
    name: Rad. Salon
    color: '#cf1025'
    group_by:
      func: diff
      duration: 1d
  - entity: sensor.electricite_compteur_test_3_seche_serviette
    name: Sèche serviette
    unit: kWh
    color: '#f08080'
    transform: return x / 1000;
    group_by:
      duration: 1d
  - entity: sensor.electricite_compteur_test_3_chauffe_eau
    name: Chauffe eau
    unit: kWh
    color: '#4169e1'
    transform: return x / 1000;
    group_by:
      duration: 1d
  - entity: sensor.electricite_reste
    name: Reste
    color: '#545454'
    group_by:
      duration: 1d

Subtilité pour avoir le reste : un template qui utilise la consommation totale ‹ moins › celles de mes différents appareils.

1 « J'aime »
187

Bonne idée le template pour calculer la valeur restante.

image

Pour ma part, j’utilise la fonction « transform » et je soustrais la consommation de chaque élément de la consommation totale :

- entity: sensor.teleinformation_energy_daily
    name: Autre
    color: white
    transform: >-
      return parseFloat(x) -
      parseFloat(hass.states['sensor.washing_machine_energy_daily'].state)-
      parseFloat(hass.states['sensor.dryer_energy_daily'].state)- 
      parseFloat(hass.states['sensor.freezer_energy_daily'].state)- 
      parseFloat(hass.states['sensor.fridge2_energy_daily'].state)- 
      parseFloat(hass.states['sensor.towel_dryer_bathroom_energy_daily'].state)-
      parseFloat(hass.states['sensor.towel_dryer_shower_room_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_first_floor_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_antonin_energy_daily'].state)-
      parseFloat(hass.states['sensor.internet_nas_tv_energy_daily'].state)-
      parseFloat(hass.states['sensor.printer_3d_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_office_energy_daily'].state)-
      parseFloat(hass.states['sensor.dishwasher_energy_daily'].state)-
      parseFloat(hass.states['sensor.climatisation_energy_daily'].state)-
      parseFloat(hass.states['sensor.pool_energy_daily'].state)-
      parseFloat(hass.states['sensor.vacuum_energy_daily'].state)-
      parseFloat(hass.states['sensor.microwave_energy_daily'].state)-
      parseFloat(hass.states['sensor.fridge_energy_daily'].state)
    unit: ' kWh'

Code complet:

type: custom:apexcharts-card
chart_type: donut
header:
  show: true
  show_states: false
  colorize_states: true
  title: Consommation par jour (kWh)
apex_config:
  plotOptions:
    pie:
      donut:
        labels:
          show: true
          total:
            show: true
            label: Total
            formatter: >
              EVAL:function(w) { return w.globals.seriesTotals.reduce((a, b) =>
              {return (a + b)} , 0).toFixed(1) + " kWh" }
series:
  - entity: sensor.vmc_energy_daily
    name: VMC
    type: column
    unit: ' kWh'
    color: Green
  - entity: sensor.washing_machine_energy_daily
    name: Lave-linge
    type: column
    unit: ' kWh'
    color: Purple
  - entity: sensor.dryer_energy_daily
    name: Sèche-linge
    type: column
    unit: ' kWh'
    color: Purple
  - entity: sensor.freezer_energy_daily
    name: Congélateur
    type: column
    unit: ' kWh'
    color: rgb(181,20,123)
  - entity: sensor.fridge2_energy_daily
    name: Frigo (Sous-sol)
    type: column
    unit: ' kWh'
    color: rgb(141,139,197)
  - entity: sensor.dishwasher_energy_daily
    name: Lave-vaisselle
    type: column
    unit: ' kWh'
    color: Blue
  - entity: sensor.fridge_energy_daily
    name: Frigo
    type: column
    unit: kWh
    color: rgb(90,71,164)
  - entity: sensor.microwave_energy_daily
    name: Micro-ondes
    type: column
    unit: ' kWh'
    color: rgb(112,107,249)
  - entity: sensor.towel_dryer_bathroom_energy_daily
    name: Sèches-serviette
    transform: >-
      return parseFloat(x) +
      parseFloat(hass.states['sensor.towel_dryer_shower_room_energy_daily'].state)
    unit: ' kWh'
    color: Red
  - entity: sensor.computer_antonin_energy_daily
    name: Informatique
    transform: >-
      return parseFloat(x) + 
      parseFloat(hass.states['sensor.computer_first_floor_energy_daily'].state)
      + parseFloat(hass.states['sensor.computer_office_energy_daily'].state)
    unit: ' kWh'
    color: rgb(132,97,108)
  - entity: sensor.internet_nas_tv_energy_daily
    name: Internet, NAS, TV
    type: column
    unit: ' kWh'
    color: rgb(132,104,134)
  - entity: sensor.printer_3d_energy_daily
    name: Imprimante 3D
    type: column
    unit: ' kWh'
    color: rgb(92,77,56)
  - entity: sensor.vacuum_energy_daily
    name: Aspirateur
    type: column
    unit: ' kWh'
    color: rgb(80,252,226)
  - entity: sensor.pool_energy_daily
    name: Piscine
    type: column
    unit: ' kWh'
    color: Darkturquoise
  - entity: sensor.climatisation_energy_daily
    name: Climatisation
    type: column
    unit: ' kWh'
    color: Lightgreen
  - entity: sensor.teleinformation_energy_daily
    name: Autre
    color: white
    transform: >-
      return parseFloat(x) -
      parseFloat(hass.states['sensor.washing_machine_energy_daily'].state)-
      parseFloat(hass.states['sensor.dryer_energy_daily'].state)- 
      parseFloat(hass.states['sensor.freezer_energy_daily'].state)- 
      parseFloat(hass.states['sensor.fridge2_energy_daily'].state)- 
      parseFloat(hass.states['sensor.towel_dryer_bathroom_energy_daily'].state)-
      parseFloat(hass.states['sensor.towel_dryer_shower_room_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_first_floor_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_antonin_energy_daily'].state)-
      parseFloat(hass.states['sensor.internet_nas_tv_energy_daily'].state)-
      parseFloat(hass.states['sensor.printer_3d_energy_daily'].state)-
      parseFloat(hass.states['sensor.computer_office_energy_daily'].state)-
      parseFloat(hass.states['sensor.dishwasher_energy_daily'].state)-
      parseFloat(hass.states['sensor.climatisation_energy_daily'].state)-
      parseFloat(hass.states['sensor.pool_energy_daily'].state)-
      parseFloat(hass.states['sensor.vacuum_energy_daily'].state)-
      parseFloat(hass.states['sensor.microwave_energy_daily'].state)-
      parseFloat(hass.states['sensor.fridge_energy_daily'].state)
    unit: ' kWh'
2 « J'aime »
188

Merci pour ta carte !
Comment as tu obtenu le capteur « sensor.electricite_prix_du_jour » ?

Merci :+1:

189

Salut @axowhite !
Petit calcul dans un template avec « consommation » * « prix du kWh » + « prix abonnement au mois » / « le nombre de jours dans le mois » :

{{ ((states('sensor.electricite_compteur_journalier')|float(0) * states('input_number.electricite_prix_variable_par_kwh')|float(0)) + (states('input_number.electricite_prix_fixe_par_mois')|float(0) / states('sensor.nombre_de_jour_dans_le_mois')|float(0))) |round(2) }}

Avec :

  • sensor.electricite_compteur_journalier = Une entrée de type « compteur de services publics » qui surveille ma consommation (provenant de mon Zlinky TIC) et qui se remet à zéro tous les jours.
  • input_number.electricite_prix_variable_par_kwh = Une entrée de type « nombre » où je rentre mon prix du kWh TTC.
  • input_number.electricite_prix_fixe_par_mois = Une entrée de type « nombre » où je rentre mon prix de l’abonnement /mois TTC
  • sensor.nombre_de_jour_dans_le_mois = Une entrée de type « template » ou j’ai rajouté ce code :
{{ ((now().replace(day=1) + timedelta(days = 32)).replace(day=1) - timedelta(days=1)).day }}
190

Ultra-propre ! Ça marche impec! Merci :+1:

J’étais en train de faire un sensor relativement semblable, mais je n’avais pas pris en compte le cout de l’abonnement et le nombre de jours dans le mois… :sweat_smile:

1 « J'aime »
191

hello
J’avais un graph qui marchait imperc sur 7 jours
J’ai fais une modif du recorder de 7 jours à 3 jours
Toutefois ce sont des entite energy mais je n’ai plus l’affichage que de 3 jours plus le jours en cours
Bizarre j’essaye de voir s’il y a des trucs a changer mais je ne vois pas…

type: custom:apexcharts-card
cache: false
update_interval: 1h
header:
  standard_format: true
  show: false
  title: Consommation HP/HC
  show_states: true
span:
  end: day
graph_span: 7d
stacked: true
apex_config:
  fill:
    opacity: 1
    type: gradient
    gradient:
      shade: light
      type: horizontal
  grid:
    show: true
  xaxis:
    axisBorder:
      show: false
    axisTicks:
      show: false
  yaxis:
    show: true
series:
  - entity: sensor.zlinky_metering_hc
    type: column
    name: HC
    color: 5A6FE7
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true
  - entity: sensor.zlinky_metering_hp
    type: column
    name: HP
    color: EA4234
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true

image

Un coup de main ou une idéee?
merci

192

Salut,
c’est normal de 7 jours de retention tu passe a 3 jours. Tu n’aura que 3 jours d’historique, apres c’est des statistiques a long terme a partir du 3eme jours.
Faut configurer l’entité dans apex-chart pour utiliser les statistique long terme.

statistics options

Name Type Default Since Description
type string mean v2.0.0 Type of long term statistic to pull. Can be one of min, max, mean, sum or state
period string hour v2.0.0 Period of statistics to pull. Can be one of 5minute, hour, day or month
align string middle v2.0.0 Align the data points to the start, end or middle of the period of the statistics

exemple:

type: custom:apexcharts-card
series:
  - entity: sensor.temperature_salon
    type: column
    statistics: 
      type: mean 
      period: month
      align: end
graph_span: 30d
span:
  end: week
1 « J'aime »
193

hello
j’ai rajoute ca dans ma carte initiale sur chacune des deux series

    statictics:
      type: mean 
      period: month
      align: end

type: custom:apexcharts-card
cache: false
update_interval: 1h
header:
  standard_format: true
  show: false
  title: Consommation HP/HC
  show_states: true
span:
  end: day
graph_span: 7d
stacked: true
apex_config:
  fill:
    opacity: 1
    type: gradient
    gradient:
      shade: light
      type: horizontal
  grid:
    show: true
  xaxis:
    axisBorder:
      show: false
    axisTicks:
      show: false
  yaxis:
    show: true
series:
  - entity: sensor.zlinky_metering_hc
    type: column
    statictics:
      type: mean 
      period: month
      align: end
    name: HC
    color: 5A6FE7
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true
  - entity: sensor.zlinky_metering_hp
    type: column
    statictics:
      type: mean 
      period: month
      align: end
    name: HP
    color: EA4234
    opacity: 1
    group_by:
      duration: 1d
      func: diff
    show:
      datalabels: true

PAr contre j’ai ce message d’erreur. Je pense qu’il faut revoir le code en totalité…

/// apexcharts-card version 2.0.4 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].statictics is extraneous value.series[0].statictics is extraneous

C’est pas gagné…

194

Salut,
Faut essayer d’autres options, peu être:

    statistics: 
      type: sum
      period: day
      align: end
195

Bonjour,

L’un de vous a-t-il réussi ou sais-t-il faire sur APEX des graphiques avec des min et max autour de la courbe principale comme présenté ici :

968×494 44.5 KB

J’aimerais faires des graphiques de prédictions :

900×450 23.5 KB

:grinning:

196

Bonjour,
L’option extremas permet d’avoir les extrêmes sur une journée

show:
  extremas: true