Let user set default period

Enables dashboard to load as past 24h or past week or past month, rather
than just day since midnight.

README.md

@@ -90,6 +90,7 @@ The UI Editor looks like this:
 | 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. |
+| default_period | `string` | `day` | Period that will be pre-selected upon loading page. Supported values are `day`, `week`, `month`, and `year`. Respects the state of `rolling_periods`. |
 | rolling_periods | `boolean` | false | If set to `true`, Today will refer to the _past_ e.g. day (last 24 hours), otherwise it refers to the _current_ e.g. day (starting from midnight). |
 | 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.) |
 

src/energy-period-selector-plus-base.ts

@@ -57,9 +57,15 @@ export class EnergyPeriodSelectorBase extends SubscribeMixin(LitElement) {
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
+    this._period = this._config?.default_period || 'day';
+    const startDate = this._beginningOfPeriod(new Date());
+    const endDate = this._endOfPeriod(startDate);
+
     return [
       getEnergyDataCollection(this.hass, {
         key: this.collectionKey,
+        start: startDate,
+        end: endDate,
       }).subscribe(data => this._updateDates(data)),
     ];
   }

src/energy-period-selector-plus-config.ts

@@ -8,6 +8,7 @@ export interface EnergyPeriodSelectorPlusConfig extends LovelaceCardConfig, Ener
   compare_button_label?: string;
   today_button_type?: string | boolean;
   period_buttons?: string[];
+  default_period?: 'day' | 'week' | 'month' | 'year' | 'custom';
   rolling_periods?: boolean;
   custom_period_label?: string;
 }

src/energy/index.ts

@@ -515,7 +515,7 @@ const clearEnergyCollectionPreferences = (hass: HomeAssistant) => {
   });
 };
 
-export const getEnergyDataCollection = (hass: HomeAssistant, options: { prefs?: EnergyPreferences; key?: string } = {}): EnergyCollection => {
+export const getEnergyDataCollection = (hass: HomeAssistant, options: { prefs?: EnergyPreferences; key?: string; start?: Date, end?: Date } = {}): EnergyCollection => {
   let key = '_energy';
   if (options.key) {
     if (!options.key.startsWith('energy_')) {
@@ -576,8 +576,8 @@ export const getEnergyDataCollection = (hass: HomeAssistant, options: { prefs?:
   collection.prefs = options.prefs;
   const now = new Date();
   // Set start to start of today if we have data for today, otherwise yesterday
-  collection.start = now.getHours() > 0 ? startOfToday() : startOfYesterday();
-  collection.end = now.getHours() > 0 ? endOfToday() : endOfYesterday();
+  collection.start = options.start || (now.getHours() > 0 ? startOfToday() : startOfYesterday());
+  collection.end = options.end || (now.getHours() > 0 ? endOfToday() : endOfYesterday());
 
   const scheduleUpdatePeriod = () => {
     collection._updatePeriodTimeout = window.setTimeout(

src/localize/languages/de.json

@@ -29,6 +29,7 @@
   "text": "Text"
   },
   "period_buttons": "Zeitraumschaltflächen",
+  "default_period": "Standardzeitraum",
   "rolling_periods": "Rollen Zeitraum",
   "today_button_type": "Heutiger Schaltflächentyp",
   "compare_button_label": "Beschriftung der Vergleichsschaltfläche",

src/localize/languages/en.json

@@ -29,6 +29,7 @@
         "text": "Text"
       },
       "period_buttons": "Period Buttons",
+      "default_period": "Default Period",
       "rolling_periods": "Rolling periods",
       "today_button_type": "Today Button Type",
       "compare_button_label": "Compare Button Label",

src/localize/languages/es.json

@@ -29,6 +29,7 @@
                 "text": "Texto"
             },
             "period_buttons": "Botones de período",
+            "default_period": "Período predeterminado",
             "rolling_periods": "Periodos rodantes",
             "today_button_type": "Tipo de botón Hoy",
             "compare_button_label": "Etiqueta del botón de comparación",

src/localize/languages/pt-PT.json

@@ -29,6 +29,7 @@
                 "text": "Texto"
             },
             "period_buttons": "Botões de Período",
+            "default_period": "Período padrão",
             "rolling_periods": "Períodos contínuos",
             "today_button_type": "Tipo de Botão Hoje",
             "compare_button_label": "Rótulo do Botão Comparar",

src/ui-editor/ui-editor.ts

@@ -41,6 +41,7 @@ export class EnergyPeriodSelectorEditor extends LitElement implements LovelaceCa
           compare_button_type: optional(string()),
           today_button_type: optional(any()),
           period_buttons: optional(any()),
+          default_period: optional(any()),
           rolling_periods: optional(any()),
           custom_period_label: optional(string()),
           compare_button_label: optional(string()),
@@ -116,6 +117,20 @@ export class EnergyPeriodSelectorEditor extends LitElement implements LovelaceCa
             },
           },
         },
+        {
+          name: 'default_period',
+          selector: {
+            select: {
+              options: [
+                { value: 'day', label: localize('editor.fields.period_buttons_options.day') },
+                { value: 'week', label: localize('editor.fields.period_buttons_options.week') },
+                { value: 'month', label: localize('editor.fields.period_buttons_options.month') },
+                { value: 'year', label: localize('editor.fields.period_buttons_options.year') },
+              ],
+              mode: 'dropdown',
+            },
+          },
+        },
         {
           type: 'grid',
           name: '',
@@ -157,6 +172,7 @@ export class EnergyPeriodSelectorEditor extends LitElement implements LovelaceCa
       compare_button_type: this._config.compare_button_type ?? '',
       today_button_type: this._config.today_button_type ?? 'text',
       period_buttons: this._config.period_buttons ?? ['day', 'week', 'month', 'year'],
+      default_period: this._config.default_period ?? 'day',
       rolling_periods: this._config.rolling_periods ?? false,
     };