Energy Period Selector Plus

Examples

Copy-pastable configs for the most common setups, each next to the card it draws.

On a card

The default buttons, on a card background.

yaml
type: custom:energy-period-selector-plus
card_background: true

Icons, compare and custom periods

A title, icon buttons for today and compare, and only month, year and custom ranges.

yaml
type: custom:energy-period-selector-plus
card_background: true
title: Energy period
today_button_type: icon
compare_button_type: icon
period_buttons: [month, year, custom]

Pick any range from the date

With date_picker, clicking the date opens HA's calendar in every period, not only in custom.

yaml
type: custom:energy-period-selector-plus
card_background: true
date_picker: true
period_buttons: [day, week, month, year, custom]

With Energy Flow Card Plus

Stack it above an Energy Flow Card Plus that follows the picked period with energy_date_selection: true.

yaml
type: vertical-stack
cards:
  - type: custom:energy-period-selector-plus
    card_background: true
  - type: custom:energy-flow-card-plus
    energy_date_selection: true
    entities:
      grid:
        entity:
          consumption: sensor.grid_consumption
          production: sensor.grid_production
      solar:
        entity: sensor.solar_energy
Try it live
Try these options in the playground, with an Energy Flow Card Plus following the period you pick.