I created a custom energy dashboard with more detailed information. I would like to replicate the energy- date-selection card in the header (as it is displayed in the energy dashboard). Maybe I missed something in the configuration but I can’t find the option to tell the card to display itself in the header.
New energy dashboard
Existing energy dashboard
mate this is great, any chance in sharing the code for this??
Sure no problem. I presume that you are interested in the new graphs and the used sensors.
I have three solar installations (14 panels, 7 panels and 3 panels). I created separate sensors for those installations and am using forecast.solar for retrieving the forecast for those installations.
Sensor definition:
template:
- sensor:
- name: "Current total solar power production"
unique_id: current_total_solar_power_production
unit_of_measurement: "W"
state: "{{ ((states('sensor.pv_14_meter_electric_consumption_w') | int) + (states('sensor.pv_7_meter_electric_consumption_w') | int) + (states('sensor.pv_3_meter_electric_consumption_w') | int)) | abs }}"
icon: mdi:solar-power
- sensor:
- name: "Current solar power production PV 3"
unique_id: current_solar_power_production_pv_3
unit_of_measurement: "W"
state: "{{ ((states('sensor.pv_3_meter_electric_consumption_w') | int)) | abs }}"
icon: mdi:solar-power
- sensor:
- name: "Current solar power production PV 7"
unique_id: current_solar_power_production_pv_7
unit_of_measurement: "W"
state: "{{ ((states('sensor.pv_7_meter_electric_consumption_w') | int)) | abs }}"
icon: mdi:solar-power
- sensor:
- name: "Current solar power production PV 14"
unique_id: current_solar_power_production_pv_14
unit_of_measurement: "W"
state: "{{ ((states('sensor.pv_14_meter_electric_consumption_w') | int)) | abs }}"
icon: mdi:solar-power
- sensor:
- name: "Forecast total solar power production"
unique_id: forecast_total_solar_power_production
unit_of_measurement: "Wh"
state: "OK"
attributes:
watt_hours_14p: "{{ state_attr('sensor.solar_forecast_hours_14p','watt_hours') }}"
watt_hours_7p: "{{ state_attr('sensor.solar_forecast_hours_7p','watt_hours') }}"
watt_hours_3p: "{{ state_attr('sensor.solar_forecast_hours_3p','watt_hours') }}"
icon: mdi:solar-power
rest:
- scan_interval: 3610
resource: https://api.forecast.solar/estimate/52.167400/6.734021/40/45/4.34
method: GET
sensor:
- name: "Solar Forecast Watt 14p"
json_attributes_path: "$.result"
json_attributes:
- watts
value_template: 'OK'
- name: "Solar Forecast Hours 14p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours
value_template: 'OK'
- name: "Solar Forecast Hours Day 14p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours_day
value_template: 'OK'
- scan_interval: 3620
resource: https://api.forecast.solar/estimate/52.167400/6.734021/40/45/2.555
method: GET
sensor:
- name: "Solar Forecast Watt 7p"
json_attributes_path: "$.result"
json_attributes:
- watts
value_template: 'OK'
- name: "Solar Forecast Hours 7p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours
value_template: 'OK'
- name: "Solar Forecast Hours Day 7p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours_day
value_template: 'OK'
- scan_interval: 3630
resource: https://api.forecast.solar/estimate/52.167400/6.734021/25/-45/1.08
method: GET
sensor:
- name: "Solar Forecast Watt 3p"
json_attributes_path: "$.result"
json_attributes:
- watts
value_template: 'OK'
- name: "Solar Forecast Hours 3p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours
value_template: 'OK'
- name: "Solar Forecast Hours Day 3p"
json_attributes_path: "$.result"
json_attributes:
- watt_hours_day
value_template: 'OK'
Graph: Current solar power production
This graph uses the custom apexcharts card. This card can be installed via HACS.
type: custom:apexcharts-card
apex_config:
chart:
type: area
height: 350px
legend:
show: false
fill:
type:
- gradient
- gradient
- gradient
- gradient
gradient:
shadeIntensity: 1
inverseColors: false
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 100
- 100
- 100
stroke:
show: true
curve: smooth
yaxis:
min: 0
max: 7400
forceNiceScale: false
responsive:
- breakpoint: 769
options:
chart:
height: 350px
- breakpoint: 1025
options:
chart:
height: 250px
- breakpoint: 10000
options:
chart:
height: 350px
graph_span: 17h
span:
start: day
offset: +5h
header:
show: true
title: Current solar power production
standard_format: true
show_states: true
colorize_states: true
now:
show: true
all_series_config:
unit: W
series:
- entity: sensor.current_total_solar_power_production
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
- entity: sensor.current_solar_power_production_pv_14
name: PV 14
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
- entity: sensor.current_solar_power_production_pv_7
name: PV 7
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
- entity: sensor.current_solar_power_production_pv_3
name: PV 3
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
Graph: Forecast total solar power production
This graph uses the custom apexcharts card. This card can be installed via HACS.
type: custom:apexcharts-card
apex_config:
chart:
type: area
height: 350px
legend:
show: false
fill:
type:
- gradient
- gradient
- gradient
- gradient
gradient:
shadeIntensity: 1
inverseColors: false
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 100
- 100
- 100
stroke:
show: true
curve: smooth
yaxis:
min: 0
max: 50
forceNiceScale: false
responsive:
- breakpoint: 769
options:
chart:
height: 350px
- breakpoint: 1025
options:
chart:
height: 250px
- breakpoint: 10000
options:
chart:
height: 350px
graph_span: 17h
span:
start: day
offset: +5h
header:
show: true
title: Forecast total solar power production
standard_format: true
show_states: true
colorize_states: true
now:
show: true
all_series_config:
unit: kWh
series:
- entity: sensor.forecast_total_solar_power_production
name: Forecast total solar power production
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
data_generator: >
let res = []; let today = new Date().getDay(); for (const [key, value] of
Object.entries(entity.attributes.watt_hours_14p)) {
let itemDate = new Date(key.replace(/-/g, '\/').replace(/T.+/, ''));
if (itemDate.getDay() == today) {
res.push([itemDate.getTime(), (value + entity.attributes.watt_hours_7p[key] + entity.attributes.watt_hours_3p[key]) / 1000]);
}
} return res;
- entity: sensor.solar_forecast_hours_14p
name: PV 14
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
data_generator: |
let res = [];
let today = new Date().getDay();
for (const [key, value] of Object.entries(entity.attributes.watt_hours)) {
let itemDate = new Date(key.replace(/-/g, '\/').replace(/T.+/, ''));
if (itemDate.getDay() == today) {
res.push([itemDate.getTime(), value / 1000]);
}
}
return res;
- entity: sensor.solar_forecast_hours_7p
name: PV 7
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
data_generator: |
let res = [];
let today = new Date().getDay();
for (const [key, value] of Object.entries(entity.attributes.watt_hours)) {
let itemDate = new Date(key.replace(/-/g, '\/').replace(/T.+/, ''));
if (itemDate.getDay() == today) {
res.push([itemDate.getTime(), value / 1000]);
}
}
return res;
- entity: sensor.solar_forecast_hours_3p
name: PV 3
type: area
stroke_width: 2
extend_to_end: false
show:
legend_value: false
data_generator: |
let res = [];
let today = new Date().getDay();
for (const [key, value] of Object.entries(entity.attributes.watt_hours)) {
let itemDate = new Date(key.replace(/-/g, '\/').replace(/T.+/, ''));
if (itemDate.getDay() == today) {
res.push([itemDate.getTime(), value / 1000]);
}
}
return res;
thanks for this!
Just wondering what automations you have made with Solar that have made a difference on saving money??
I don’t have any specific automations yet to save money because in the Netherlands I can still cross out the usage of electric power during the night against the power I generated during the day. So there is no real reason yet to charge my car or use my dishwasher or dryer during the day.
This will change in the future and then I am planning to use some automations that will send me notifications to charge my car or use the dishwasher during the day when there is enough “solar power” or “predicted solar power”.
Do you use the Custom:Header-Card ? (Download via HACS)
My example ( of some of my Header-Into )
header_cards:
justify_content: space-between
cards:
- type: entities
entities:
- type: custom:template-entity-row
name: Uptime
Thanks for the suggestion.
With Header-Card I can put the card in the header but the card does not change it’s layout from two rows in one row. I checked the source code of the energy dash-board and apparently the card is hard coded in the header of the energy dashboard 
It checks whether enough room is available and then displays it in one row.
and you can’t use another card, inside the header-card, to force 1 row ?, as i in showed example, using "
custom:template-entity-row "
… you can basically use any card within header-cards, and even use card-mod
card is hard coded in the header
[/quote]
Is it in javascript, or where do you see this “card/code” ?
PS: i did have some “problems” getting it right, because of the “limited” space in header(so it wouldn’t cover the cards below), i used card-mod to change font-size(and “fiddled” with different cards i think, to get the weather right also), but as i haven’t looked at the source-code you refers to, and haven’t tried to get that particular “info” fit into Header, i really don’t know what i would try to do, in your case
PS: just had a short look at the “Header” in Energy … they use Font-Size 20px, and the “buttons”(Day-weekly/etc) are .mdc-icons 26px … in my Laptop-Browser … noted: i have never been a fan of “hard-coded” size of either columns, pics, icons etc. … but i do see on my phone-app, they use “line break” for the “Header”, so in phone-app, it looks “different”, they trow “Today” under week/month/year … regardless if i keep it horizontal/vertical … and it “pops” down another row(awfully) … You could say that the Header, in Energy dashboard, and the “Header” in common seems to be an “neglected” UI area in HA 
I unfortunately can’t use another card because the energy selection date card also handles the update of the other energy cards.
I think I should give card-mod a try
Sorry forgot the location of the hardcoded solution in the Home Assistant frontend. The used component is the hui-energy-period-selector which is used when there is enough room (not narrow) (line 76). But if I display the component in the header it still thinks that it has limited space and therefore displays itself in two rows.
Ok, yes i see, but it’s still a HA-Element ( ha-menu-button )
, so should be possible to “adapt” with either Card-Mod or other cards
Did you share this “card” above ?, i didn’t notice any “select” sections in above … only a template and 2 apexs-card
It is the “Energy date picker” card. Did you mean that?
yep, haven’t looked that much into Energy, as i only have 2 Sensors there from my grid-provider, showing all …
But on that page there’s only short examples … not the “whole” ( Energy date selection card. ) you made for your own Energy-Dashboard
Edit: Ahhh i get it, i just created a “energy-date-selection” card on a test-view i have … will take a deeper look later …
( as there is no “visible” entities, in this, i assume it’s “picked” in the card.js(from Energy Dashboard), ?
PS: thou i still don’t see where/how in your “View” code you placed this “energy-date-selection” card ?
If you have “header-cards” installed, try to place this in top of your “view” ( Raw Configuration editor ) above views:
header_cards:
justify_content: null
cards:
- type: energy-date-selection
card_mod:
style: |
ha-card {
font-size: 18px; color: #ffffff; border-radius: 0px; box-shadow: none;
}
PS: ofcause you also need “Card-Mod”
I have both header-cards and card-mod installed but unfortunately it doesn’t work. I checked some more in the chrome inspector and the card has some “issues” before it can be used with card-mod.
It is not a ha-card which can be solved to wrap the card in a card-mod card which will “inject” the ha-card section the other one is that it uses “shadow-root”.
The two rows visualization is realized by the flex-direction: column-reverse on the div class row.
Yes i know it’s still showing 2 row, in above example, but still within the “boundaries” of the “Header Row High” , in my browser atleats , but i was currently looking into “force on row” ( without fiddling in.js )
Thou i think i looks ok with “2 rows” orig Energy “breaks row” awfully in my android phone, not at all like this
Yes but that seems to be at the “text container”
hui-energy-period-selector , where you find “energy-date-selection” or maybe it’s the other way around 
Edit: But you are right, card-mod doesn’t do anything here, i just noticed
Don’t know if this would change anything. ( DOM Navigation )
Did you ever get this working? If so, would you mind sharing how? I am trying to do the same.
Was there any success realized since the last post? This is a very valuable thread.
Unfortunately not.
In the end I gave up on the idea.
