Bravo @Galadan pour ta carte…C’est clair, net et efficace 
2 « J'aime »
On peut lentement dire qu’on a plus besoin d’une carte comme Saniho (linky content card).
Le pouvoir pour creer ces propres cartes a fortement augmentés … surtout avec tes (et autres) exemples.
2 « J'aime »
Merci!
Je me suis beaucoup inspiré de la carte de Saniho et des infos qu’il proposais dessus mais je voulais un truc qui s’intègre plus au theme.
Je mettrais le code dans la semaine pour ceux que cela intéresse.
Je suis en cour de dev sur la carte des conso d’eau, dans le meme principe.
2 « J'aime »
C’est vraiment top ! ca serait vraiment fun de pouvoir changer de semaine ( et du coup d’afficher la valeur du mois, d’année qui lui correspond)
Hello,
Voici le code de ma page conso énergies:
Carte
- type: custom:button-card
name: Energies
template: card_title
- type: custom:button-card
label: |
[[[
return "Electricité - Mise à jour le " + states['sensor.myelectricaldata_last_update'].state;
]]]
template: card_title
- type: custom:button-card
template: "custom_card_apexcharts_elec"
variables:
graph_span: "7d"
entity_1:
entity_id: "sensor.myelectricaldata_yesterday"
icon: 'mdi:calendar-today'
name: "Hier"
color: "blue"
entity_2:
entity_id: "sensor.myelectricaldata_daily_cost"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_3:
entity_id: "sensor.myelectricaldata_yesterday_evolution"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_4:
entity_id: "sensor.myelectricaldata_current_week"
icon: 'mdi:calendar-week'
name: "Semaine"
color: "pink"
entity_5:
entity_id: "sensor.myelectricaldata_current_week_cost"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_6:
entity_id: "sensor.myelectricaldata_current_week_evolution"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_7:
entity_id: "sensor.myelectricaldata_current_month"
icon: 'mdi:calendar-month'
name: "Mois"
color: "green"
entity_8:
entity_id: "sensor.myelectricaldata_current_month_cost"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_9:
entity_id: "sensor.myelectricaldata_current_month_evolution"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_10:
entity_id: "sensor.myelectricaldata_current_year"
icon: 'mdi:calendar-end'
name: "Année"
color: "purple"
entity_11:
entity_id: "sensor.myelectricaldata_current_year_cost"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_12:
entity_id: "sensor.myelectricaldata_current_year_evolution"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_13:
entity_id: "input_number.edf_daily_cost"
icon: 'mdi:currency-eur'
name: "Coût du KWh"
color: "yellow"
entity_14:
entity_id: "input_number.edf_abo_cost"
icon: 'mdi:currency-eur'
name: "Coût Abo"
color: "yellow"
entity_15:
entity_id: ""
icon: 'mdi:'
name: ""
color: "red"
- type: custom:button-card
label: Eau
template: title
- type: custom:button-card
template: "custom_card_apexcharts_water"
variables:
graph_span: "7d"
entity_1:
entity_id: "sensor.daily_water"
icon: 'mdi:calendar-today'
name: "Aujourd'hui"
color: "blue"
entity_2:
entity_id: "sensor.water_cost_daily"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_3:
entity_id: "sensor.water_evolution_daily"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_4:
entity_id: "sensor.water_week_m3"
icon: 'mdi:calendar-week'
name: "Semaine"
color: "pink"
entity_5:
entity_id: "sensor.water_cost_week"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_6:
entity_id: "sensor.water_evolution_weekly"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_7:
entity_id: "sensor.water_month_m3"
icon: 'mdi:calendar-month'
name: "Mois"
color: "green"
entity_8:
entity_id: "sensor.water_cost_month"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_9:
entity_id: "sensor.water_evolution_monthly"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_10:
entity_id: "sensor.water_year_m3"
icon: 'mdi:calendar-month'
name: "Année"
color: "purple"
entity_11:
entity_id: "sensor.water_cost_year"
icon: 'mdi:currency-eur'
name: "Coût"
color: "yellow"
entity_12:
entity_id: "sensor.water_evolution_yearly"
icon: 'mdi:chart-line'
name: "Evolution"
color: "red"
entity_13:
entity_id: "input_number.smea_daily_cost"
icon: 'mdi:currency-eur'
name: "Coût du L"
color: "yellow"
entity_14:
entity_id: "input_number.smea_abo_cost"
icon: 'mdi:currency-eur'
name: "Coût Abo"
color: "yellow"
entity_15:
entity_id: "input_datetime.filter_date"
icon: 'mdi:chart-line'
name: "Chgmt filtre"
color: "red"
Template Elec
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;
]]]
entity_6:
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_7:
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_8:
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_9:
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_10:
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_11:
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_12:
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_13:
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_14:
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_15:
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' 'item3' 'item4' 'item5' 'radial'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content 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"
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_custom"
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 + " €";
]]]
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_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_3.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_3.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_3.entity_id].state + " %";
]]]
item2:
card:
type: custom:button-card
template: list_3_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"
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_custom"
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 + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_6.entity_id ]]]"
name: "[[[ return variables.entity_6.name ]]]"
icon: "[[[ return variables.entity_6.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_6.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_6.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_6.entity_id].state + " %";
]]]
item3:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_7.entity_id ]]]"
name: "[[[ return variables.entity_7.name ]]]"
icon: "[[[ return variables.entity_7.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_7.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_8.entity_id ]]]"
name: "[[[ return variables.entity_8.name ]]]"
icon: "[[[ return variables.entity_8.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_8.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_8.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_8.entity_id].state + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_9.entity_id ]]]"
name: "[[[ return variables.entity_9.name ]]]"
icon: "[[[ return variables.entity_9.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_9.entity_id].state + " %";
]]]
item4:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_10.entity_id ]]]"
name: "[[[ return variables.entity_10.name ]]]"
icon: "[[[ return variables.entity_10.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_10.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_10.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_10.entity_id].state + " KWh";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_11.entity_id ]]]"
name: "[[[ return variables.entity_11.name ]]]"
icon: "[[[ return variables.entity_11.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_11.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_11.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_11.entity_id].state + " €";
]]]
# item3:
# card:
# type: "custom:button-card"
# tap_action:
# action: "more-info"
# entity: "[[[ return variables.entity_12.entity_id ]]]"
# name: "[[[ return variables.entity_12.name ]]]"
# icon: "[[[ return variables.entity_12.icon ]]]"
# template:
# - "icon_info_custom"
# styles:
# icon:
# - color: "[[[ return `rgba(var(--color-${variables.entity_12.color}), 1)`;]]]"
# img_cell:
# - background-color: "[[[ return `rgba(var(--color-${variables.entity_12.color}), 0.20)`;]]]"
# card:
# - box-shadow: "none"
# - border-radius: "none"
# - width: "auto"
# - padding: "5px"
# label: |
# [[[
# return states[variables.entity_12.entity_id].state + " %";
# ]]]
item5:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_13.entity_id ]]]"
name: "[[[ return variables.entity_13.name ]]]"
icon: "[[[ return variables.entity_13.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_13.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_13.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_13.entity_id].state + " €/KWh";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_14.entity_id ]]]"
name: "[[[ return variables.entity_14.name ]]]"
icon: "[[[ return variables.entity_14.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_14.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_14.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_14.entity_id].state + " €/an";
]]]
# item3:
# card:
# type: "custom:button-card"
# tap_action:
# action: "more-info"
# entity: "[[[ return variables.entity_15.entity_id ]]]"
# name: "[[[ return variables.entity_15.name ]]]"
# icon: "[[[ return variables.entity_15.icon ]]]"
# template:
# - "icon_info_bg"
# styles:
# icon:
# - color: |
# [[[
# if (states['sensor.adou_filtre_time_rest'].state < '0') return 'rgb(255,0,0,1)';
# else return 'rgb(0,128,0,1)';
# ]]]
# img_cell:
# - background-color: |
# [[[
# if (states['sensor.adou_filtre_time_rest'].state < '0') return 'rgb(255,0,0,0.20)';
# else return 'rgb(0,128,0,0.20)';
# ]]]
# card:
# - box-shadow: "none"
# - border-radius: "none"
# - width: "auto"
# - padding: "5px"
# label: |
# [[[
# return states['sensor.adou_filtre_time'].state + "<br/>dans " + states['sensor.adou_filtre_time_rest'].state + " jours";
# ]]]
radial:
card:
type: custom:apexcharts-card
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: false
title: Consommations des 7 derniers jours
show_states: true
colorize_states: true
series:
- entity: sensor.myelectricaldata_consumption_XXXX
name: Conso d'hier
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_consumption_XXXX
name: Coût d'hier
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: {
format: 'ddd',
}
}
yaxis:
labels:
show: true
legend:
show: false
Template Eau
---
custom_card_apexcharts_water:
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;
]]]
entity_6:
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_7:
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_8:
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_9:
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_10:
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_11:
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_12:
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_13:
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_14:
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_15:
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' 'item3' 'item4' 'item5' 'radial'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content 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"
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 + " L";
]]]
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_custom"
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 + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_3.entity_id ]]]"
name: "[[[ return variables.entity_3.name ]]]"
icon: "[[[ return variables.entity_3.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_3.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_3.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_3.entity_id].state + " %";
]]]
item2:
card:
type: custom:button-card
template: list_3_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"
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 + " m3";
]]]
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_custom"
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 + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_6.entity_id ]]]"
name: "[[[ return variables.entity_6.name ]]]"
icon: "[[[ return variables.entity_6.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_6.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_6.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_6.entity_id].state + " %";
]]]
item3:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_7.entity_id ]]]"
name: "[[[ return variables.entity_7.name ]]]"
icon: "[[[ return variables.entity_7.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_7.entity_id].state + " m3";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_8.entity_id ]]]"
name: "[[[ return variables.entity_8.name ]]]"
icon: "[[[ return variables.entity_8.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_8.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_8.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_8.entity_id].state + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_9.entity_id ]]]"
name: "[[[ return variables.entity_9.name ]]]"
icon: "[[[ return variables.entity_9.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_9.entity_id].state + " %";
]]]
item4:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_10.entity_id ]]]"
name: "[[[ return variables.entity_10.name ]]]"
icon: "[[[ return variables.entity_10.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_10.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_10.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_10.entity_id].state + " m3";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_11.entity_id ]]]"
name: "[[[ return variables.entity_11.name ]]]"
icon: "[[[ return variables.entity_11.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_11.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_11.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_11.entity_id].state + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_12.entity_id ]]]"
name: "[[[ return variables.entity_12.name ]]]"
icon: "[[[ return variables.entity_12.icon ]]]"
template:
- "icon_info_custom"
styles:
icon:
- color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states[variables.entity_9.entity_id].state > '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_12.entity_id].state + " %";
]]]
item5:
card:
type: custom:button-card
template: list_3_items
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return variables.entity_13.entity_id ]]]"
name: "[[[ return variables.entity_13.name ]]]"
icon: "[[[ return variables.entity_13.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_13.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_13.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_13.entity_id].state + " m3";
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_14.entity_id ]]]"
name: "[[[ return variables.entity_14.name ]]]"
icon: "[[[ return variables.entity_14.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity_14.color}), 1)`;]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity_14.color}), 0.20)`;]]]"
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states[variables.entity_14.entity_id].state + " €";
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "more-info"
entity: "[[[ return variables.entity_15.entity_id ]]]"
name: "[[[ return variables.entity_15.name ]]]"
icon: "[[[ return variables.entity_15.icon ]]]"
template:
- "icon_info_bg"
styles:
icon:
- color: |
[[[
if (states['sensor.adou_filtre_time_rest'].state < '0') return 'rgb(255,0,0,1)';
else return 'rgb(0,128,0,1)';
]]]
img_cell:
- background-color: |
[[[
if (states['sensor.adou_filtre_time_rest'].state < '0') return 'rgb(255,0,0,0.20)';
else return 'rgb(0,128,0,0.20)';
]]]
card:
- box-shadow: "none"
- border-radius: "none"
- width: "auto"
- padding: "5px"
label: |
[[[
return states['sensor.adou_filtre_time'].state + "<br/>dans " + states['sensor.adou_filtre_time_rest'].state + " jours";
]]]
radial:
card:
type: "custom:apexcharts-card"
graph_span: 7d
span:
end: day
header:
show: false
title: Consommations des 7 derniers jours
show_states: true
colorize_states: true
apex_config:
xaxis:
labels:
show: true
yaxis:
labels:
show: true
legend:
show: false
series:
- entity: sensor.daily_water
name: Conso
unit: L
color: deepskyblue
type: column
group_by:
func: diff
duration: 24h
opacity: 0.8
stroke_width: 4
show:
datalabels: true
- entity: sensor.water_cost_daily
name: Coût
unit: €
color: orange
type: column
group_by:
func: diff
duration: 1d
opacity: 0.8
stroke_width: 4
show:
datalabels: true
Attention, j’utilise le thème Minimalist, il y a donc des template générique associé à ce thème.
3 « J'aime »
Top et merci !! Tu peux partager ce sensor
sensor.myelectricaldata_yesterday_evolution
Le voici:
myelectricaldata_yesterday_evolution:
value_template: "{{ states.sensor.myelectricaldata_consumption_XXXXX.attributes.yesterday_evolution }}"
friendly_name: "Evolution avant-hier"
unit_of_measurement: "%"
1 « J'aime »
Super Taff ! Bravo simple, concis et clair j’adore.
Peux-tu partager tous les templates de sensors que tu utilises ?
Pardon j’ai pas tout lu…
C’était le poste de FROlCi qu’il fallait lire avant 
Comment calculez-vous ces 3 sensors:
myelectricaldata_current_week_cost
myelectricaldata_current_month_cost
myelectricaldata_current_year_evolution
?
merci
@Galadan Merci ! Zut j’ai du le louper en cherchant dans la partie consumption…
et @RDMCH il s’agit d’un calcul réalisé depuis ta conso * par ton cout au kwh.
@ClassicRed a donné qques exemples un peu plus haut également 
Je cite ^^:
- name: "Electricité Coût Année / Abo"
unit_of_measurement: 'EUR'
state: >
{{ (states.sensor.myelectricaldata_consumption_2121xxxxxx342249.attributes.current_year|float*0.1740+136.32)|float|round(2) }}
icon: "mdi:flash"
device_class: "monetary"
state_class: "total_increasing"
- name: "Electricité Coût Semaine / Abo"
unit_of_measurement: 'EUR'
state: >
{{ (states.sensor.myelectricaldata_consumption_2121xxxxxx42249.attributes.current_week|float*0.1740+2.84)|float|round(2) }}
icon: "mdi:flash"
device_class: "monetary"
state_class: "total_increasing"
En gros tu créée le sensor myelectricaldata_current_week_cost en utilisant comme point d’entrée :
myelectricaldata_last_week * cout de ton kwh
1 « J'aime »
D’ac merci j’étais pas sur.
Bon je suis en HC / HP, je vais chercher plus profond.
Le coût à l’année me parait compliqué à avoir par contre.
Utility meter marche bien aussi, tu peux en creer 6h 12h day week /etc.
Ah oui!!!
Je confirme je viens de découvrir et utilise pour suivre les KMs de ma voiture (c.f. intégration PSA) - et ce serait encore plus facile! Merci encore @vingerha !
Yes je vais partir la dessus. Merci !
Hello
Pour les amateurs de mushroom card, voici ma dernière version pour myelectrical :
Pour la partie mushroom-template-card :
Tap_action :
Code
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: EDF
secondary: ''
icon: mdi:flash
entity: input_select.carburant
layout: vertical
icon_color: blue
badge_color: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin-top: 0em;
}
mode: vertical
cards:
- type: custom:content-card-linky
entity: sensor.myelectricaldata_consumption_xxx
nbJoursAffichage: '7'
showPeakOffPeak: false
- type: divider
style:
height: 10px
width: 100%
margin-left: auto
margin-right: auto
background: var(--card-background-color)
- type: custom:apexcharts-card
color_list:
- deepskyblue
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: true
title: Suivi Consommation
show_states: false
series:
- entity: sensor.myelectricaldata_consumption_xxx
type: column
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek,
index) => {
return [new Date(dailyweek).getTime(), entity.attributes.daily[index]];
});
apex_config:
xaxis:
labels:
show: true
yaxis:
labels:
show: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: none
icon: ''
icon_color: orange
content: >-
{{ states('sensor.myelectricaldata_consumption_xxx')}}
KWh
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 0px;
}
- type: custom:apexcharts-card
color_list:
- deepskyblue
graph_span: 4d
span:
start: day
offset: '-4d'
header:
show: true
show_states: false
series:
- entity: sensor.myelectricaldata_consumption_xxx
type: column
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index) =>
{
return [new Date(dailyweek).getTime(), entity.attributes.daily[index]];
});
apex_config:
xaxis:
labels:
show: false
yaxis:
labels:
show: false
card_mod:
style: |
ha-card {
box-shadow: none !important;
margin: 0px -10px;
padding: 0px 20px 0px 0px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Coût
secondary: ''
icon: mdi:currency-eur
layout: vertical
badge_color: ''
icon_color: orange
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
size: large
content:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin-top: 0em;
}
mode: vertical
cards:
- type: entities
title: Coûts
entities:
- entity: sensor.myelectricaldata_consumption_xxx
type: custom:multiple-entity-row
name: Semaine
show_state: false
secondary_info: null
entities:
- entity: sensor.myelectricaldata_current_week
name: En cours
- entity: sensor.myelectricaldata_last_week
name: Dernière
- entity: sensor.myelectricaldata_last_week_cost
name: Coût
- entity: sensor.myelectricaldata_consumption_xxx
type: custom:multiple-entity-row
name: Mois
show_state: false
secondary_info: null
entities:
- entity: sensor.myelectricaldata_current_month
name: En cours
- entity: sensor.myelectricaldata_last_month
name: Dernière
- entity: sensor.myelectricaldata_last_month_cost
name: Coût
- entity: sensor.myelectricaldata_consumption_xxx
type: custom:multiple-entity-row
name: Année
show_state: false
secondary_info: null
entities:
- entity: sensor.myelectricaldata_current_year
name: En cours
- entity: sensor.myelectricaldata_last_year
name: Dernière
- entity: sensor.myelectricaldata_last_year_cost
name: Coût
- entity: sensor.myelectricaldata_last_update
type: custom:multiple-entity-row
name: Mise à jour
icon: mdi:update
- type: custom:apexcharts-card
color_list:
- orange
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: true
title: Journalier
show_states: false
series:
- entity: sensor.myelectricaldata_consumption_xxx
name: Coût
type: column
unit: €
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
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
- type: custom:mushroom-chips-card
chips:
- type: template
entity: none
icon: ''
icon_color: orange
content: '{{ states("sensor.myelectricaldata_yesterday_cost") }} €'
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 0px;
}
- type: custom:apexcharts-card
color_list:
- orange
graph_span: 4d
span:
start: day
offset: '-4d'
header:
show: true
show_states: false
series:
- entity: sensor.myelectricaldata_consumption_xxx
name: Coût
type: column
unit: €
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
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: false
yaxis:
labels:
show: false
card_mod:
style: |
ha-card {
box-shadow: none !important;
margin: 0px -10px;
padding: 0px 20px 0px 0px;
}
Pour compléter, les chip card :
Tap_action chip card « Détails » :
Code
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.myelectricaldata_current_month
icon: mdi:chart-line-variant
content: >-
{% if
'states.sensor.myelectricaldata_consumption_xxx.attributes.current_month_evolution'
== '0' %}
Mois: Pas de données
{% else %}
Mois: {{ state_attr('sensor.myelectricaldata_consumption_xxx', 'current_month_evolution') }} %
{% endif %}
icon_color: green
tap_action:
action: none
- type: template
entity: sensor.myelectricaldata_current_week
tap_action:
action: none
icon: mdi:chart-line-variant
content: >-
{% if
'states.sensor.myelectricaldata_consumption_xxx.attributes.current_week_evolution'
== '0' %}
Semaine: Pas de données
{% else %}
Semaine: {{ state_attr('sensor.myelectricaldata_consumption_xxx', 'current_week_evolution') }} %
{% endif %}
icon_color: green
- type: template
content: Détails
icon: mdi:poll
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-background-color: transperant;
--popup-border-radius: 15px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
size: normal
content:
type: custom:apexcharts-card
graph_span: 7d
span:
start: day
offset: '-7d'
header:
show: true
title: Détails
show_states: false
series:
- entity: sensor.myelectricaldata_consumption_xxx
name: Conso
type: column
color: deepskyblue
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
show:
datalabels: true
data_generator: >
return entity.attributes.dailyweek.map((dailyweek, index)
=> {
return [new Date(dailyweek).getTime(), entity.attributes.daily[index]];
});
- entity: sensor.myelectricaldata_consumption_xxx
name: Coût
unit: €
color: orange
type: column
group_by:
duration: 1d
func: max
opacity: 0.7
stroke_width: 2
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: true
alignment: center
3 « J'aime »
Autant pour moi, j’ai oublié que j’avais bidouillé un template
Voici le code:
---
### Icon Info Custom ###
icon_info_custom:
color: "var(--google-grey)"
show_icon: true
show_label: true
show_name: false
state:
- value: "unavailable"
styles:
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "38px"
- top: "8px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: "center"
- align-self: "center"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
state:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- place-self: "center"
- width: "42px"
- height: "42px"
grid:
- grid-template-areas: "'i l' 'i l'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
notification: >
[[[
if (entity.state =="unavailable"){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
size: "20px"
1 « J'aime »
Merci
il est plus bon ton prix/kwh,… 
Il me semble qu’il y des entité pour gérer des tarifs non ?