Voici, je sais pas si c’est très optimisé comme code mais ça fonctionne.
La carte
- type: custom:button-card
template: "custom_card_apexcharts_elec"
variables:
graph_span: "7d"
entity_1:
entity_id: "sensor.myelectricaldata_yesterday"
icon: 'mdi:flash'
name: "Hier"
color: "blue"
entity_2:
entity_id: "sensor.myelectricaldata_current_week"
icon: 'mdi:flash'
name: "Semaine"
color: "yellow"
entity_3:
entity_id: "sensor.myelectricaldata_current_month"
icon: 'mdi:flash'
name: "Mois"
color: "green"
entity_4:
entity_id: "sensor.myelectricaldata_current_year"
icon: 'mdi:flash'
name: "Année"
color: "pink"
entity_5:
entity_id: "sensor.myelectricaldata_last_update"
icon: 'mdi:calendar'
name: "Mise à jour"
color: "purple"
Le template
custom_card_apexcharts_elec:
variables:
entity_1:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_2:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_3:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_4:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_5:
entity_id:
icon: "[[[ return entity.attributes.icon ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
color: >
[[[
var colors = ['yellow', 'blue', 'red','green'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
color: "auto"
variable: "spin"
spin: false
show_name: false
show_state: false
show_label: false
show_icon: false
show_last_changed: true
show_entity_picture: false
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'radial'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
card:
- border-radius: "var(--border-radius)"
- padding: "5px"
custom_fields:
item1:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_1.entity_id ]]]"
name: "[[[ return variables.entity_1.name ]]]"
icon: "[[[ return variables.entity_1.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_1.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_1.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_2.entity_id ]]]"
name: "[[[ return variables.entity_2.name ]]]"
icon: "[[[ return variables.entity_2.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_2.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_2.entity_id].state + " KWh";
]]]
item3:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_3.entity_id ]]]"
name: "[[[ return variables.entity_3.name ]]]"
icon: "[[[ return variables.entity_3.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_3.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_3.entity_id].state + " KWh";
]]]
item2:
card:
type: custom:button-card
template: list_2_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_4.entity_id ]]]"
name: "[[[ return variables.entity_4.name ]]]"
icon: "[[[ return variables.entity_4.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_icon: "[[[ return variables.entity_4.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_4.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_5.entity_id ]]]"
name: "[[[ return variables.entity_5.name ]]]"
icon: "[[[ return variables.entity_5.icon ]]]"
template:
- "icon_info_bg"
#variables:
# ulm_card_generic_swap_name: "[[[ return variables.entity_5.name ]]]"
# ulm_card_generic_swap_icon: "[[[ return variables.entity_5.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_5.entity_id].state;
]]]
radial:
card:
type: custom:apexcharts-card
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: true
title: Consommations des 7 derniers jours
show_states: true
colorize_states: true
series:
- entity: sensor.myelectricaldata_XXX
name: Conso
unit: kWh
color: deepskyblue
type: column
group_by:
duration: 1d
func: max
opacity: 0.8
stroke_width: 4
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index) =>
{
return [new Date(dailyweek).getTime(), entity.attributes.daily[index]];
});
- entity: sensor.myelectricaldata_XXXX
name: Coût
unit: €
color: orange
type: column
group_by:
duration: 1d
func: max
opacity: 0.8
stroke_width: 4
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index) =>
{
return [new Date(dailyweek).getTime(), entity.attributes.dailyweek_cost[index]];
});
apex_config:
xaxis:
labels:
show: true
yaxis:
labels:
show: true
legend:
show: false
Les sensors
- platform: template
sensors:
myelectricaldata_daily_cost:
friendly_name: "Coût d'hier"
unit_of_measurement: '€'
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.daily_cost }}"
myelectricaldata_yesterday:
friendly_name: "Hier"
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.yesterday }}"
unit_of_measurement: "kWh"
myelectricaldata_current_week:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.current_week }}"
friendly_name: "Conso de la semaine"
unit_of_measurement: "KWh"
myelectricaldata_current_month:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.current_month }}"
friendly_name: "Conso du mois"
unit_of_measurement: "KWh"
myelectricaldata_current_year:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.current_year }}"
friendly_name: "Conso de l'année'"
unit_of_measurement: "KWh"
myelectricaldata_last_week:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.last_week }}"
friendly_name: "Conso semaine dernière"
unit_of_measurement: "KWh"
myelectricaldata_last_month:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.last_month }}"
friendly_name: "Conso du mois dernier"
unit_of_measurement: "KWh"
myelectricaldata_last_year:
value_template: "{{ states.sensor.myelectricaldata_XXX.attributes.last_year }}"
friendly_name: "Conso de l'année dernière'"
unit_of_measurement: "KWh"
myelectricaldata_last_update:
value_template: "{{ as_timestamp(states.sensor.myelectricaldata_XXX.attributes.lastUpdate,0) | timestamp_custom('%d-%m-%Y %H:%M',local=True)}}"
friendly_name: "Date Mise à Jour"
myelectricaldata_last_week_cost:
value_template: "{{'%.2f'|format((states('sensor.myelectricaldata_last_week')|float) * 0.17096)}}"
friendly_name: "Coût dernière semaine'"
unit_of_measurement: "€"
myelectricaldata_last_month_cost:
value_template: "{{'%.2f'|format((states('sensor.myelectricaldata_last_month')|float) * 0.17096)}}"
friendly_name: "Coût du mois dernier'"
unit_of_measurement: "€"
myelectricaldata_last_year_cost:
value_template: "{{'%.2f'|format((states('sensor.myelectricaldata_last_year')|float) * 0.17096)}}"
friendly_name: "Coût de l'année dernière'"
unit_of_measurement: "€"
Voila, en espérant que ça vous aide/inspire 
P.S: Attention, avec la nouvelle version (0.8.12) les sensors on changé de nom 