[CARTE] Apexcharts-card

Pyroaction · Février 9, 2024, 9:51

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

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'

axowhite · Mars 1, 2024, 1:45

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

Merci

Hankey71 · Mars 1, 2024, 4:52

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 }}

axowhite · Mars 1, 2024, 5:16

Ultra-propre ! Ça marche impec! Merci

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…

samourai47 · Mars 9, 2024, 5:20

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

Un coup de main ou une idéee?
merci

WarC0zes · Mars 9, 2024, 6:00

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

samourai47 · Mars 10, 2024, 5:32

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é…

WarC0zes · Mars 10, 2024, 5:48

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

    statistics: 
      type: sum
      period: day
      align: end

Noris_L.K · Avril 26, 2024, 4:55

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 :

J’aimerais faires des graphiques de prédictions :

Nissa · Avril 26, 2024, 5:28

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

show:
  extremas: true

Noris_L.K · Avril 26, 2024, 7:08

Chez moi cela, affiche seulement une étiquette de donnée permanente sur le point min et max de la série.

cvfe13 · Mai 2, 2024, 7:04

Bonjour
Je viens de decouvrir la carte Apexcharts pour afficher ma consommation d’eau heure par heure pour la journée.
datalabels permet d’afficher la valeur numérique de chaque barre, mais comment masquer les ‹ 0 › lorsqu’il n’y a pas de consommation pendant cette heure ?
Merci aux utilisateurs expérimentés …

type: custom:apexcharts-card
apex_config:
  chart:
    height: 140%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 24h
span:
  start: day
header:
  show: true
  title: Conso par Heure
experimental:
  color_threshold: true
yaxis:
  - id: left
    min: ~0
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.esp_watermeter_water_meter_hourly_water_consumption
    type: column
    yaxis_id: left
    float_precision: 2
    show:
      datalabels: true
    group_by:
      func: last
      duration: 1h

jerome6994 · Mai 3, 2024, 5:17

Super carte amuse toi

pierroe · Mai 12, 2024, 9:41

Bonjour,
j’ai un soucis avec l’une de mes cartes Apexcharts pour afficher ma production solaire et les prévisions de Solcast.
Tout fonctionnait bien depuis des mois jusqu’à il y a quelques jours: les valeurs dans le header ne s’actualisent plus. elles sont bloqués sur les valeurs d’il ya 4 ou 5 jours…
Comme vous pouvez le voir ci dessous, j’ai réaffiché les valeurs des prévisions Solcast dans une autre carte et elles sont biens a jour.
ce qui est aussi troublant c’est que les données des graphiques sont elles bien mises a jour et bonnes, avec les mêmes entity:

Voici ci dessous mon code:

type: custom:apexcharts-card
header:
  show: true
  standard_format: true
  show_states: true
  colorize_states: true
apex_config:
  xaxis:
    tickPlacement: 'on'
    labels:
      formatter: |
        EVAL:function(value) {
          return new Date(value).toLocaleDateString("fr", { weekday: 'short' });
        }
      offsetX: 0
      offsetY: -3
      rotate: 0
      showDuplicates: false
      trim: true
      hideOverlappingLabels: true
      rotateAlways: false
      style:
        fontSize: 12px
  chart:
    height: 225px
  legend:
    show: false
  tooltip:
    enabled: true
    shared: true
    followCursor: true
graph_span: 3d
show:
  last_updated: true
now:
  show: true
  color: blue
span:
  start: day
  offset: '-0day'
all_series_config:
  type: area
  opacity: 0.3
  stroke_width: 1
series:
  - entity: sensor.calcul_conso_maison
    name: Conso
    float_precision: 3
    type: line
    color: MediumAquaMarine
    opacity: 0.8
    yaxis_id: kWh
    unit: kW
    transform: return x/1000;
    extend_to: now
    show:
      legend_value: false
      in_header: false
    group_by:
      func: avg
      duration: 5m
  - entity: sensor.shellyem_244cab419883_channel_2_power
    name: Prod-PV
    float_precision: 3
    color: '#ff9800'
    yaxis_id: kWh
    unit: kW
    transform: return x/1000;
    extend_to: now
    show:
      legend_value: true
      in_header: false
    group_by:
      func: avg
      duration: 5m
  - entity: sensor.solcast_pv_forecast_forecast_today
    name: prév.Aujourd'hui
    extend_to: false
    color: grey
    opacity: 0.3
    stroke_width: 0
    yaxis_id: kWh
    show:
      legend_value: false
      in_header: false
    data_generator: |
      return entity.attributes.detailedForecast.map((entry) => {
            return [new Date(entry.period_start), entry.pv_estimate];
          });
  - entity: sensor.solcast_pv_forecast_forecast_tomorrow
    name: Solar Forecast (D2)
    float_precision: 3
    extend_to: false
    color: '#FF0000'
    opacity: 0.3
    stroke_width: 0
    yaxis_id: kWh
    show:
      legend_value: false
      in_header: false
    data_generator: |
      return entity.attributes.detailedForecast.map((entry) => {
            return [new Date(entry.period_start), entry.pv_estimate];
          });
  - entity: sensor.solcast_pv_forecast_forecast_day_3
    name: Solar Forecast (D3)
    float_precision: 3
    extend_to: false
    color: blue
    opacity: 0.3
    stroke_width: 0
    yaxis_id: kWh
    show:
      legend_value: false
      in_header: false
    data_generator: |
      return entity.attributes.detailedForecast.map((entry) => {
            return [new Date(entry.period_start), entry.pv_estimate];
          });
  - entity: sensor.solcast_pv_forecast_forecast_today
    yaxis_id: header_only
    name: prév.Aujourd'hui
    float_precision: 0
    color: grey
    show:
      legend_value: true
      in_header: true
      in_chart: false
  - entity: sensor.solcast_pv_forecast_forecast_tomorrow
    yaxis_id: header_only
    name: Demain
    float_precision: 0
    color: '#FF0000'
    show:
      legend_value: true
      in_header: true
      in_chart: false
  - entity: sensor.solcast_pv_forecast_forecast_day_3
    yaxis_id: header_only
    name: Après demain
    float_precision: 0
    color: blue
    show:
      legend_value: true
      in_header: true
      in_chart: false
  - entity: sensor.solcast_pv_forecast_api_last_polled
    yaxis_id: header_only
    name: prév.Last Update
    float_precision: 0
    color: grey
    unit: ' min.'
    transform: return ((Date.now()) - (new Date(x).getTime())) / 60 / 60 / 24
    show:
      legend_value: true
      in_header: false
      in_chart: false
yaxis:
  - id: kWh
    show: true
    min: 0
    apex_config:
      tickAmount: 5
  - id: header_only
    show: false

j’ai retéléchargé l’interface et cela na rien changé.
j’ai deux autres graphs via une carte Apexcharts et elles fonctionnent très biens. les données dans les header ou graphiques sont bien a jour.

Merci pour votre aide

pierroe · Mai 12, 2024, 2:34

Re Bonjour,
je viens de trouver l’origine du probleme, meme si je ne comprends pas pourquoi …
en faisant quelques mises a jour dans « Recorder » pour alléger ma base de donnée il y a quelques jours,
j’avais exclus dans recorder les différentes entités de Solcast et notamment les 3 utilisées:
- sensor.solcast_pv_forecast_forecast_today
- sensor.solcast_pv_forecast_forecast_tomorrow
- sensor.solcast_pv_forecast_forecast_day_3

je viens de les supprimer de "Recorder / Exclude " et cela refonctionne.
meme si je n’ai pas compris pourquoi … que ça impact uniquement les valeurs a afficher dans le Header alors que celles pour les graphiques fonctionnent bien…

Merci de vos lumières

Layochi · Juillet 14, 2024, 9:33

Bonjour à tous,
Je débute avec apexcharts et j’ai donc un problème qui pour moi ressemble à un bug. Voici le sensor que j’essaye de mettre en forme.

Mais voici ce que j’obtient… En plus d’avoir un problème d’affichage, les données les plus vielles ne sont pas affichées.

Voici ma config de carte :

type: custom:apexcharts-card
graph_span: 31d
header:
  show: true
  title: Température (dernier mois)
  show_states: false
series:
  - entity: sensor.moyenne_temperature_piscine
    name: Température
    type: area
apex_config:
  chart:
    type: line
  yaxis:
    show: true
    min: 0
    decimalsInFloat: 0
    tickAmount: 5
  stroke:
    show: true
    width: 1
    colors:
      - '#00C0EF'
  markers:
    show: false
  fill:
    type: gradient
    gradient:
      shade: dark
      type: horizontal
      shadeIntensity: 0.5
      gradientToColors:
        - '#ABE5A1'
      inverseColors: true
      opacityFrom: 1
      opacityTo: 1
      stops:
        - 0
        - 100
card_mod:
  style: |
    ha-card {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: #e0e0e0;
      padding: 16px;
    }

Comment faire ?
Je vous remercie

WarC0zes · Juillet 15, 2024, 3:27

Bonjour,
c’est normal, les données plus clair sont des données a long terme. Pour les afficher dans apex_chart il faut ajouter l’option:

`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` `state` or `change`
`period`	string	`hour`	v2.0.0	Period of statistics to pull. Can be one of `5minute`, `hour`, `day`, `week` 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

T’avais la solution, quelque messages plus haut:

Layochi · Juillet 27, 2024, 11:49

Super, tout fonctionne merci beaucoup !

J’ai maintenant un deuxième problème… Voici à quoi ressemble mon dashboard.

Je ne comprend pas pourquoi mon graphique en bas à droite ne permet pas de faire la moyenne du taux d’usage par mois pour ainsi faire un graphique sur l’année en cours.

Voici le code de la carte :

type: custom:apexcharts-card
graph_span: 1y
header:
  show: true
  title: Taux d'usage solaire (sur 1 an)
  show_states: false
series:
  - entity: input_number.historique_taux_d_usage_solaire
    name: Taux d'usage solaire
    type: area
    statistics:
      type: mean
      period: month
      align: end
apex_config:
  xaxis:
    chart:
      type: datetime
    labels:
      formatter: |
        EVAL:function(value, timestamp) {
          const options = { month: 'long' };
          return new Date(timestamp).toLocaleDateString('fr-FR', options).replace(/^\w/, c => c.toUpperCase());
        }
  yaxis:
    min: 0
    max: 100
  tooltip:
    x:
      formatter: |
        EVAL:function(value, timestamp) {
          const options = { month: 'long' };
          return new Date(timestamp).toLocaleDateString('fr-FR', options).replace(/^\w/, c => c.toUpperCase());
        }
  stroke:
    width: 1
  fill:
    type: gradient
    gradient:
      shade: light
      type: vertical
      shadeIntensity: 0.2
      gradientToColors:
        - '#FFD700'
      stops:
        - 0
        - 100

Sylvain_G · Octobre 6, 2024, 10:02

Bonjour à tous,

J’essaie d’afficher la consommation de 3 prises sur un intervalle de 1 min avec Apexcharts-card mais j’ai un retour un peu bizarre :

Auriez-vous une idée de pourquoi le graph affiche comme des colonnes alors que j’ai demandé des lignes ?

WarC0zes · Octobre 6, 2024, 5:01

Salut,
tu utilises la version 2.1.2 ?
elle comporte des bugs, reviens a la version 2.0.4 et dit nous si c’est mieux ?

[CARTE] Apexcharts-card

statistics options

statistics options

`statistics` options

`statistics` options