Custom energy dashboard: how to place energy-date-selection card in header?

[boheme61]

I just jumped in this topic as i was “fiddling” with custom:header-card

In Regards to energy-data in common there are lots of “choice”, depending upon what you want to have an overview over, and how , it all comes to ones “taste” and opinion, using different cards/views and using card-mod.

as for the header-card, it will have 2 rows as shown above, another card worth mention is custom:history-explorer-card.
Works with “sensors” of different “measurements” and “graphs/staples/time-line”
For “inspiration” custom:history-explorer-card in a Panel-View mode , and as a single card “cut out of another standard-View, with 3 columns”

[tvds (Tim)]

Do you mind sharing the code for the layout you used in your custom energy dashboard? As it’s matching the standard energy dashboard ( the graphs are shown bigger). Want to do exactly the same😁. On a mobile phobe I suppose all card are behind eachother? Many thanks!

[boheme61]

Sure

1st card is in a Masonry layout, Bottom is in Panel mode

type: custom:history-explorer-card
    cardName: advanced-history
    uimode: dark
    defaultTimeRange: 1w
    decimation: false
    header: []
    graphs:
      - type: bar
        options:
          interval: daily
        entities:
          - entity: sensor.monthly_net_consumption_*******
            color: '#208020'
            state_color: true
            name: Daily Consumption

[tvds (Tim)]

Did you use the custom-layout-card for creating the layout of all cards in your dashboard? And what config? Great to have the graphs bigger than the gauge cards

[boheme61]

Standard masonry layout.

@tvds

Great to have the graphs bigger than the gauge cards

if you want a card to “span” more than 1 column, in a View/Dashboard, you can use grid
… or place gauge-cards in Horizontal stack card(1 “view/Dashboard” column) ( to make them smaller )

PS, as your questions have nothing to do with “energy-selection card in header, i suggest you search elsewhere( for i.e energy dashboards in layouts, grid or Vertical / Horizontal-stack) or open another Topic”

As the first card “seems” so big is because then i only had 2 columns i the that View, so what you need to do is decide how you want to structure your Energy-View. Dashboard, and for best “adaptive” look, i.e viewing from phone, laptop, tv, use masonry-view ( Grid can be a pain in the ass, in specific if you use px , in height/width )

[Klaneos]

Try the energy-period-selector-plus card. GitHub - flixlix/energy-period-selector-plus: An upgraded Energy Date Selection Card for Home Assistant, with added customizability, while maintaining the Energy Dashboard's original design.. Hope this provides what you need.

[Lasoul]

Thanks, great work!
I added the card and have some questions.

• Does the date selector take the locale settings into account? I am using English as language but am using the Dutch locale settings. So the date should be 31/12/2022 instead of 12/31/2022

• For some reason the compare button is placed on a separate row. In the editor it is shown on the same row als the day/week/month/year selector. I am using the sidebar layout (same as the original energy dashboard)

[scutzi128 (Jacob Scutzlas)]

I was able to get the date selector in the header by using this code:

header_cards:
  justify_content: null
  cards:
    - type: energy-date-selection
      card_mod:
        style: |
          ha-card {
            --ha-card-background: "rgba(30, 30, 30, 0.0)";
            --ha-card-border-width: 0px;
            --ha-card-border-radius: 1px
          }

[bazzio68]

The above code wasn’t working for me and this was driving me crazy for days but it turned out the solution is so simple (duh…)… Just use a vertical-stack card in header_cards, with only the energy-date-selection in it. You can style the vertical-stack card easily like most other cards.

header_cards:
  justify_content: null
  cards:
    - type: vertical-stack
      cards:
        - type: energy-date-selection
          card_mod:
            style: |
              ha-card {
              height: 35px !important;
              background: none;
              border: none;
              }

[nicmela]

Hey… sorry for the dumb question… kind of HA newbie here. Where do you exactly put this code?
I’ve tried in the view yaml but it’s ignored. Thank you!

[scutzi128 (Jacob Scutzlas)]

Go to your dashboard and edit it. Click the 3 dots in the upper right hand corner and select raw config editor.

Then paste code at the very top and save.

[Sarcastible]

Are you using the header card to filter data on your charts? If so, I would love to see how this works - I’m wanting to do the same thing without needing to use Influx and Grafana