Maybe a bit off-topic but i think my energie-card fits perfectly to my mushroom-cards dashboard, so here is my
Energy-Dashboard-Card
For this you will need:
- Mushroom-Card (HACS)
- Button-Card
- Apexcharts-Card (HACS)
- Sankey-Card (HACS)
- Stack in a Card (HACS)
- Energy Period Selector Plus (Custom HACS)
This Icons has a link to another Tab in Home Assistant with a full-screen-view of the Apex-Charts-Card
These Chip-Cards Link to Subviews for Electrical Energy, Gas and Water-Usage.
type: grid
columns: 1
square: false
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: Energie
icon: mdi:home-import-outline
tap_action: none
card_mod:
style: |
ha-card {
padding: 0px !important;
border: none !important;
box-shadow: none !important;
font-size: 3.5rem !important;
background: none !important;
}
- type: template
content: Strom
icon: mdi:lightning-bolt-circle
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace/energie-dashboard
- type: template
content: Wasser
icon: mdi:waves
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace/wasser
- type: template
content: Gas
icon: mdi:gas-burner
icon_color: purple
tap_action:
action: navigate
navigation_path: /lovelace/gas
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
margin-bottom: -15px;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 120px
legend:
show: false
tooltip:
items:
display: flex
title:
text: Stromverbrauch
align: center
margin: 0
offsetX: 0
offsetY: 15
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
yaxis:
- min: ~0
max: ~500
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
title:
text: W
rotate: 0
all_series_config:
stroke_width: 2
float_precision: 0
show:
in_header: raw
legend_value: false
type: area
opacity: 0.2
statistics:
type: mean
period: 5minute
span:
end: minute
graph_span: 24h
header:
show: false
title: ''
show_states: true
colorize_states: true
standard_format: true
floating: true
series:
- entity: sensor.senec_house_power
name: Haus
color: grey
- entity: sensor.senec_solar_generated_power
name: Solar
color: var(--energy-solar-color)
- entity: sensor.senec_grid_imported_power
name: aus Netz
color: var(--energy-grid-consumption-color)
- entity: sensor.senec_battery_import_power
name: in Speicher
color: var(--energy-battery-out-color)
invert: true
- entity: sensor.senec_battery_export_power
name: aus Speicher
color: var(--energy-battery-in-color)
- entity: sensor.senec_grid_exported_power
name: ins Netz
color: var(--energy-grid-return-color)
invert: true
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/energie-aktuell
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:sankey-chart
show_names: true
show_icons: false
wide: true
round: 0
height: 70
show_units: true
min_box_height: 10
card_mod:
style: |
ha-card {
background: var(card-background-color);
padding: 0px;
#border-radius: 0px;
font-size: 0.8rem;
font-weight: bold;
border: none;
box-shadow: none;
overflow-x: clip !important;
}
.container {
padding: 0px !important;
}
sections:
- entities:
- entity_id: sensor.senec_solar_generated_power
color: var(--energy-solar-color)
name: Solar
children:
- sensor.senec_solar_house_used_power
- sensor.produced_power_produktionsueberschuss
- entity_id: sensor.senec_grid_imported_power
color: var(--energy-grid-consumption-color)
name: Netz
children:
- sensor.senec_grid_house_used_power
- entity_id: sensor.senec_battery_export_power
color: var(--energy-battery-out-color)
name: Speicher
children:
- sensor.senec_battery_house_used_power
- sensor.senec_grid_exported_power
- entities:
- entity_id: sensor.senec_solar_house_used_power
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.senec_grid_house_used_power
type: passthrough
color: var(--energy-grid-consumption-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.senec_battery_house_used_power
type: passthrough
color: var(--energy-battery-out-color)
name: Haus
children:
- sensor.senec_house_power
- sensor.shelly_pool_energy_power
- entity_id: sensor.produced_power_produktionsueberschuss
color: var(--energy-solar-color)
name: Gewinn
children:
- sensor.senec_grid_exported_power
- sensor.senec_battery_import_power
- entities:
- entity_id: sensor.senec_house_power
color: grey
subtract_entities:
- sensor.shelly_pool_energy_power
- entity_id: sensor.shelly_pool_energy_power
color: grey
- entity_id: sensor.senec_grid_exported_power
color: var(--energy-grid-return-color)
name: Netz
- entity_id: sensor.senec_battery_import_power
color: var(--energy-battery-in-color)
name: Speicher
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
margin-bottom: -15px;
}
#state__value > #state {
font-size: 1.2em !important;
}
.apexcharts-tooltip-series-group {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
display: none;
text-align: left;
justify-content: left;
align-items: center;
}
#header {
padding: 3px !important;
}
yaxis:
- id: first
decimals: 0
min: -2500
max: 2500
apex_config:
tickAmount: 4
forceNiceScale: false
title:
text: W
rotate: 0
labels:
style:
colors:
- var(--energy-battery-out-color)
- var(--energy-battery-out-color)
- grey
- var(--energy-battery-in-color)
- var(--energy-battery-in-color)
- id: second
opposite: true
decimals: 0
min: 0
max: 100
apex_config:
tickAmount: 4
title:
text: '%'
rotate: 0
labels:
style:
colors: grey
apex_config:
chart:
height: 120px
legend:
show: false
title:
text: Senec Batteriespeicher
align: center
margin: 10
offsetX: 0
offsetY: 10
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
span:
end: minute
graph_span: 24h
header:
show: false
title: ' '
show_states: true
colorize_states: true
all_series_config:
statistics:
type: mean
period: 5minute
show:
in_header: raw
opacity: 0.2
type: area
stroke_width: 2
series:
- entity: sensor.senec_battery_charge_power
yaxis_id: first
name: Ladung
color: var(--energy-battery-in-color)
- entity: sensor.senec_battery_charge_percent
yaxis_id: second
name: FĆ¼llstand
color: grey
- entity: sensor.senec_battery_discharge_power
yaxis_id: first
invert: true
name: Entladung
color: var(--energy-battery-out-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/senec-speicher
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:mushroom-template-card
entity: sensor.senec_battery_charge_percent
primary: Speicher-Status
multiline_secondary: true
secondary: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
{{ states(entity, with_unit=True) }} - Speicher wird mit {{ states("sensor.senec_battery_import_power", with_unit=True) }} geladen
{% elif state == 'ABSORPTION PHASE' %}
{{ states(entity, with_unit=True) }} - Nachlade-Phase
{% elif state == 'BATTERY FULL' %}
{{ states(entity, with_unit=True) }} - Speicher vollstƤndig geladen
{% elif state == 'OWN CONSUMPTION' %}
{{ states(entity, with_unit=True) }} - Selbstverbrauch von Solarenergie
{% elif state == 'DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Speicher wird mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'BATTERY EMPTY' %}
{{ states(entity, with_unit=True) }} - Speicher ist leer
{% elif state == 'PV + DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Solarstrom und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'GRID + DISCHARGE' %}
{{ states(entity, with_unit=True) }} - Strom aus dem Netz und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
{% elif state == 'BATTERY DIAGNOSIS' %}
{{ states(entity, with_unit=True) }} - Speicher im Diagnosemodus
{% elif state == 'PASSIVE' %}
{{ states(entity, with_unit=True) }} - Speicher im Standby-Modus
{% elif state == 'EMERGANCY CHARGE' %}
{{ states(entity, with_unit=True) }} - Notladung
{% else %}
{{ states('sensor.senec_battery_charge_percent') }}% - Status nicht bekannt
{% endif %}
icon: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
mdi:battery-arrow-up
{% elif state == 'ABSORPTION PHASE' %}
mdi:battery-arrow-up
{% elif state == 'BATTERY FULL' %}
mdi:battery
{% elif state == 'OWN CONSUMPTION' %}
mdi:recycle
{% elif state == 'DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'BATTERY EMPTY' %}
mdi:battery-10
{% elif state == 'PV + DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'GRID + DISCHARGE' %}
mdi:battery-arrow-down
{% elif state == 'BATTERY DIAGNOSIS' %}
mdi:progress-question
{% elif state == 'PASSIVE' %}
mdi:sleep
{% elif state == 'EMERGANCY CHARGE' %}
mdi:alert
{% else %}
mdi:progress-question
{% endif %}
icon_color: |-
{% set state = states('sensor.senec_system_state') %}
{% if state == 'CHARGE' %}
green
{% elif state == 'ABSORPTION PHASE' %}
blue
{% elif state == 'BATTERY FULL' %}
green
{% elif state == 'OWN CONSUMPTION' %}
orange
{% elif state == 'DISCHARGE' %}
red
{% elif state == 'BATTERY EMPTY' %}
red
{% elif state == 'PV + DISCHARGE' %}
red
{% elif state == 'GRID + DISCHARGE' %}
red
{% elif state == 'BATTERY DIAGNOSIS' %}
blue
{% elif state == 'PASSIVE' %}
blue
{% elif state == 'EMERGANCY CHARGE' %}
red
{% else %}
blue
{% endif %}
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.05) !important;
padding: 3px !important;
#border: none !important;
#box-shadow: none !important;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px;
}
mode: vertical
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: true
cards:
- type: horizontal-stack
cards:
- type: custom:apexcharts-card
stacked: true
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
border: none;
box-shadow: none;
}
#state__value > #state {
font-size: 1.2em !important;
}
#header {
padding: 3px !important;
}
apex_config:
chart:
height: 120px
legend:
show: false
tooltip:
shared: true
title:
text: Energieverbrauch heute
align: center
margin: 0
offsetX: 0
offsetY: 15
floating: true
style:
fontSize: 1rem
fontWeight: bold
color: var(--primary-text-color)
span:
start: day
graph_span: 1d
header:
show: false
title: ''
show_states: true
colorize_states: true
standard_format: true
floating: false
yaxis:
- min: ~0
max: ~1
apex_config:
tickAmount: 3
forceNiceScale: true
title:
text: kWh
all_series_config:
stroke_width: 2
opacity: 0.2
float_precision: 1
show:
in_header: raw
legend_value: false
type: column
statistics:
type: sum
group_by:
func: diff
start_with_last: true
duration: 1hour
series:
- entity: sensor.grid_imported_daily
name: aus Netz
color: var(--energy-grid-consumption-color)
- entity: sensor.battery_charged_daily
invert: true
name: in Speicher
color: var(--energy-battery-in-color)
- entity: sensor.battery_discharged_daily
name: aus Speicher
color: var(--energy-battery-out-color)
- entity: sensor.solar_produced_daily
name: Solar
color: var(--energy-solar-color)
- entity: sensor.grid_exported_daily
invert: true
name: ins Netz
color: var(--energy-grid-return-color)
- entity: sensor.house_consumed_daily
type: area
opacity: 0.2
name: Haus
color: grey
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /energy
icon: mdi:magnify-expand
styles:
card:
- width: 3.5rem
- border: none
- box-shadow: none
- margin-left: '-40px'
- type: custom:sankey-chart
energy_date_selection: true
show_names: true
show_icons: false
wide: true
unit_prefix: k
round: 1
height: 70
show_units: true
min_box_height: 10
card_mod:
style: |
ha-card {
background: var(card-background-color);
#color: rgb(50,50,50);
# --primary-text-color: rgb(50,50,50);
# --secondary-text-color: rgb(50,50,50);
padding: 0px;
#border-radius: 0px;
font-size: 0.8rem;
font-weight: bold;
border: none;
box-shadow: none;
overflow-x: clip !important;
}
.container {
padding: 0px !important;
}
sections:
- entities:
- entity_id: sensor.senec_solar_total_generated
color: var(--energy-solar-color)
name: Solar
children:
- sensor.senec_grid_total_export
- sensor.senec_battery_total_charged
- sensor.whatever
- entity_id: sensor.senec_grid_total_import
color: var(--energy-grid-consumption-color)
name: Netz
children:
- sensor.senec_grid_total_import
- entity_id: sensor.senec_battery_total_discharged
color: var(--energy-battery-out-color)
name: Speicher
children:
- sensor.senec_battery_total_discharged
- entities:
- entity_id: sensor.senec_grid_total_export
type: passthrough
name: Gewinn
color: var(--energy-solar-color)
children:
- sensor.senec_grid_total_export
- entity_id: sensor.senec_battery_total_charged
type: passthrough
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_battery_total_charged
- entity_id: sensor.whatever
type: remaining_parent_state
color: var(--energy-solar-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entity_id: sensor.senec_grid_total_import
type: passthrough
color: var(--energy-grid-consumption-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entity_id: sensor.senec_battery_total_discharged
type: passthrough
color: var(--energy-battery-out-color)
name: Haus
children:
- sensor.senec_house_total_consumption
- entities:
- entity_id: sensor.senec_grid_total_export
color: var(--energy-grid-return-color)
name: Netz
- entity_id: sensor.senec_battery_total_charged
color: var(--energy-battery-in-color)
name: Speicher
- entity_id: sensor.senec_house_total_consumption
color: var(--energy-grid-consumption-color)
name: Haus
- type: custom:energy-period-selector-plus
card_background: false
today_button: true
prev_next_buttons: true
compare_button_type: ''
today_button_type: icon
custom_period_label: Custom
compare_button_label: Daten vergleichen
period_buttons:
- day
- month
- year
