ApexChartsYesterdayTodayTomorrow
This sets up a card showing today's energy graph by default. You can swipe left for yesterday's energy graph and swipe right for tomorrow's energy graph.
-
RomRider/apexcharts-card to render the graphs.
-
bramkragten/swipe-card (optional) to allow swiping between the graphs. If this is not installed then each
type: custom:apexcharts-cardshould be added separately in the dashboard. -
BJReplay/ha-solcast-solar for the solar forecast.
-
Additional sensors not provided by OMIE Home Assistant:
-
sensor.MY_SOLAR_AC_POWER: solar panels production (W). -
sensor.MY_HOME_CONSUMPTION: your home's electricity consumption (W). -
sensor.MY_ELECTRICITY_PURCHASE_PRICE: electricity purchase price (€/MWh). Examples in Tarifários Portugal. -
sensor.MY_ELECTRICITY_SALE_PRICE: electricity purchase price (€/MWh). Examples in Tarifários Portugal. -
sensor.sensor.solcast_forecast_today: provided by BJReplay/ha-solcast-solar -
sensor.sensor.solcast_forecast_tomorrow: provided by BJReplay/ha-solcast-solar
All are optional but you will have to remove any missing sensors from the YAML.
-
type: custom:swipe-card
start_card: 2
cards:
- type: custom:apexcharts-card
update_interval: 1h
header:
show: true
title: Yesterday
span:
start: day
offset: '-1d'
graph_span: 1d
all_series_config:
extend_to: false
stroke_width: 1
group_by:
func: avg
duration: 15m
apex_config:
dataLabels:
enabled: true
dropShadow:
enabled: true
series:
- entity: sensor.MY_SOLAR_AC_POWER
name: Solar
yaxis_id: power
type: area
fill_raw: 'null'
transform: return x / 1000
unit: kW
show:
legend_value: false
- entity: sensor.MY_HOME_CONSUMPTION
name: Load
yaxis_id: power
type: area
fill_raw: zero
transform: return x / 1000
unit: kW
show:
legend_value: false
- entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
name: Buy
yaxis_id: price
type: line
curve: stepline
stroke_width: 0.5
show:
extremas: true
legend_value: false
- entity: sensor.MY_ELECTRICITY_SALE_PRICE
name: Sell
yaxis_id: price
type: line
curve: stepline
fill_raw: 'null'
show:
extremas: true
legend_value: false
yaxis:
- id: power
align_to: 0.5
- id: price
opposite: true
align_to: 1
min: '|-10|'
max: '|10|'
- type: custom:apexcharts-card
update_interval: 5m
header:
show: true
span:
start: day
graph_span: 1d
all_series_config:
type: area
extend_to: false
stroke_width: 1
group_by:
func: avg
duration: 15m
series:
- entity: sensor.MY_SOLAR_AC_POWER
name: Solar
yaxis_id: power
fill_raw: 'null'
transform: return x / 1000
unit: kW
show:
legend_value: false
- entity: sensor.MY_HOME_CONSUMPTION
name: Load
yaxis_id: power
fill_raw: zero
transform: return x / 1000
unit: kW
show:
legend_value: false
- entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
name: Buy
yaxis_id: price
type: line
curve: stepline
data_generator: |
return Object.entries(entity.attributes.today_hours)
.map(([dateString, price]) => [ new Date(dateString), price ])
show:
extremas: true
legend_value: false
- entity: sensor.MY_ELECTRICITY_SALE_PRICE
name: Sell
yaxis_id: price
type: line
curve: stepline
fill_raw: 'null'
data_generator: |
return ((hours) =>
Object.keys(hours)
.map((dateString) => [ new Date(dateString), hours[dateString]])
.map(([date, price]) => [ date, (date.getHours() > 6 && date.getHours() < 21) ? price : null])
)(entity.attributes.today_hours)
show:
extremas: true
legend_value: false
- entity: sensor.solcast_pv_forecast_forecast_today
name: Forecast
yaxis_id: power
type: line
curve: smooth
fill_raw: 'null'
data_generator: |
return (() => {
const to_pair = ({period_start,pv_estimate}) => ([
new Date(period_start),
pv_estimate
])
const has_solar = ([,kWh]) => kWh !== 0
return entity.attributes.detailedForecast
.map(to_pair)
.filter(has_solar)
})()
show:
legend_value: false
yaxis:
- id: power
align_to: 0.5
- id: price
opposite: true
min: '|-5|'
max: '|5|'
align_to: 1
- type: custom:apexcharts-card
update_interval: 1h
header:
title: Tomorrow
show: true
span:
start: day
offset: +1d
graph_span: 1d
all_series_config:
type: area
extend_to: false
stroke_width: 1
group_by:
func: avg
duration: 15m
series:
- entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
name: Buy
yaxis_id: price
type: line
curve: stepline
color: '#E74C3C'
data_generator: >
return ((hs) => Object.keys(hs).map((dt) => [ new Date(dt), hs[dt]
]))(entity.attributes.tomorrow_hours)
show:
extremas: true
legend_value: false
- entity: sensor.MY_ELECTRICITY_SALE_PRICE
name: Sell
yaxis_id: price
type: line
curve: stepline
color: purple
fill_raw: 'null'
data_generator: |
return ((hours) => {
return Object.keys(hours)
.map((dateString) => [ new Date(dateString), hours[dateString]])
.map(([date, price]) => [ date, (date.getHours() > 6 && date.getHours() < 21) ? price : null])
})(entity.attributes.tomorrow_hours)
show:
extremas: true
legend_value: false
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Forecast
yaxis_id: power
type: line
curve: smooth
color: '#F1C40F'
fill_raw: 'null'
data_generator: |
return (() => {
const to_pair = ({period_start,pv_estimate}) => ([
new Date(period_start),
pv_estimate
])
const has_solar = ([,kW]) => kW !== 0
const is_future = ([datetime,]) => datetime.getTime() > Date.now()
return entity.attributes.detailedHourly
.map(to_pair)
.filter(has_solar)
})()
group_by:
func: raw
duration: 1h
show:
legend_value: false
yaxis:
- id: power
align_to: 0.5
- id: price
opposite: true
min: '|-5|'
max: '|5|'
align_to: 1