Energy Period Selector Plus

Goal

The main goal of this card is to expand the functionality and customizability of the official Energy Date Picker Card from Home Assistant.

The goal is to deliver a card that fits in the overall design of the Energy Dashboard, while providing more features.

Features & Bugfixes

• UI Editor
• Change style or hide Compare Button.
• Use Background to fit other cards.
• Choose which Periods are shown.
• Make Compare work.

Install

HACS (recommended)

This card is direclty available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box. To install this:

• Go to HACS
• Click on Frontend
• Search for Energy Period Selector Plus
• Install via UI

Manual Install

1. Download and copy energy-period-selector-plus.js from the latest release into your config/www directory.

2. Add the resource reference as decribed below.

Add resource reference

If you configure Dashboards via YAML, add a reference to energy-period-selector-plus.js inside your configuration.yaml:

resources:
  - url: /local/energy-period-selector-plus.js
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Settings -> Dashboards
3. Click three dot icon
4. Select Resources
5. Hit (+ ADD RESOURCE) icon
6. Enter URL /local/energy-period-selector-plus.js and select type "JavaScript Module". (Use /hacsfiles/energy-period-selector-plus/energy-period-selector-plus.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Using the card

To configure this card, only the type is required, making it very easy to get started.

In addition to that, I developed a UI Editor, making it even easier to change the card according to your preferences. 🥳

The UI Editor looks like this:

Options

Card options

Name	Type	Default	Description
type	string	required	custom:energy-period-selector-plus.
card_background	boolean	false	If set to true, a card will be added to the background of the card.
title	string	undefined	If set, a title will be added to the card.
today_button_type	boolean	true	If set to true, a button will be added to select today.
prev_next_buttons	boolean	true	If set to true, buttons will be added to control the previous and next period.
compare_button_type	string	undefined	If set, a button will be added to toggle the compare mode. Supported values are icon and text.
period_buttons	array	undefined	If set, only buttons inside this array will be displayed. Supported values are day, week, month, year and custom. Order of your array will be applied.
custom_period_label	string	undefined	If set, the label of the custom period button will be changed to this value. Otherwise will be synced to your HA language (If not, consider submitting a PR, adding your language to the localize function.)

Example Configurations

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

---

type: custom:energy-period-selector-plus
card_background: true
title: No Previous or Next Controls
prev_next_buttons: false

---

type: custom:energy-period-selector-plus
card_background: true
title: No Today Button
today_button_type: false

---

type: custom:energy-period-selector-plus
card_background: true
title: Text Compare Button
compare_button_type: text

---

type: custom:energy-period-selector-plus
card_background: true
title: Icon Compare Button
compare_button_type: icon

---

type: custom:energy-period-selector-plus
card_background: true
title: No Week Button
period_buttons:
  - day
  - month
  - year

---

type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom

---

type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom
custom_period_label: </|\>

---

Real world Demo