History Panel Fixes for beta

src/components/ha-target-picker.ts

@@ -42,8 +42,8 @@ import "./entity/ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-picker";
 import "./ha-icon-button";
-import "./ha-svg-icon";
 import "./ha-input-helper-text";
+import "./ha-svg-icon";
 
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -119,55 +119,68 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     if (!this._areas || !this._devices || !this._entities) {
       return html``;
     }
-    return html`<div class=${this.horizontal ? "horizontal-container" : ""}>
-      ${this.horizontal ? this._renderChips() : this._renderItems()}
-      ${this._renderPicker()}
-      ${this.horizontal ? this._renderItems() : this._renderChips()}
-    </div>`;
+    return html`
+      ${this.horizontal
+        ? html`
+            <div class="horizontal-container">
+              ${this._renderChips()} ${this._renderPicker()}
+            </div>
+            ${this._renderItems()}
+          `
+        : html`
+            <div>
+              ${this._renderItems()} ${this._renderPicker()}
+              ${this._renderChips()}
+            </div>
+          `}
+    `;
   }
 
   private _renderItems() {
-    return html`<div class="mdc-chip-set items">
-      ${this.value?.area_id
-        ? ensureArray(this.value.area_id).map((area_id) => {
-            const area = this._areas![area_id];
-            return this._renderChip(
-              "area_id",
-              area_id,
-              area?.name || area_id,
-              undefined,
-              mdiSofa
-            );
-          })
-        : ""}
-      ${this.value?.device_id
-        ? ensureArray(this.value.device_id).map((device_id) => {
-            const device = this._devices![device_id];
-            return this._renderChip(
-              "device_id",
-              device_id,
-              device ? computeDeviceName(device, this.hass) : device_id,
-              undefined,
-              mdiDevices
-            );
-          })
-        : ""}
-      ${this.value?.entity_id
-        ? ensureArray(this.value.entity_id).map((entity_id) => {
-            const entity = this.hass.states[entity_id];
-            return this._renderChip(
-              "entity_id",
-              entity_id,
-              entity ? computeStateName(entity) : entity_id,
-              entity
-            );
-          })
-        : ""}
-    </div>`;
+    return html`
+      <div class="mdc-chip-set items">
+        ${this.value?.area_id
+          ? ensureArray(this.value.area_id).map((area_id) => {
+              const area = this._areas![area_id];
+              return this._renderChip(
+                "area_id",
+                area_id,
+                area?.name || area_id,
+                undefined,
+                mdiSofa
+              );
+            })
+          : ""}
+        ${this.value?.device_id
+          ? ensureArray(this.value.device_id).map((device_id) => {
+              const device = this._devices![device_id];
+              return this._renderChip(
+                "device_id",
+                device_id,
+                device ? computeDeviceName(device, this.hass) : device_id,
+                undefined,
+                mdiDevices
+              );
+            })
+          : ""}
+        ${this.value?.entity_id
+          ? ensureArray(this.value.entity_id).map((entity_id) => {
+              const entity = this.hass.states[entity_id];
+              return this._renderChip(
+                "entity_id",
+                entity_id,
+                entity ? computeStateName(entity) : entity_id,
+                entity
+              );
+            })
+          : ""}
+      </div>
+    `;
   }
 
   private _renderChips() {
-    return html`<div class="mdc-chip-set">
+    return html`
+      <div class="mdc-chip-set">
         <div
           class="mdc-chip area_id add"
           .type=${"area_id"}
@@ -231,7 +244,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       </div>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""} `;
+        : ""}
+    `;
   }
 
   private async _showPicker(ev) {
@@ -320,51 +334,54 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   private _renderPicker() {
     switch (this._addMode) {
       case "area_id":
-        return html`<ha-area-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"area_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_area_id"
-          )}
-          no-add
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityRegFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
-          @value-changed=${this._targetPicked}
-        ></ha-area-picker>`;
+        return html`
+          <ha-area-picker
+            .hass=${this.hass}
+            id="input"
+            .type=${"area_id"}
+            .label=${this.hass.localize(
+              "ui.components.target-picker.add_area_id"
+            )}
+            no-add
+            .deviceFilter=${this.deviceFilter}
+            .entityFilter=${this.entityRegFilter}
+            .includeDeviceClasses=${this.includeDeviceClasses}
+            .includeDomains=${this.includeDomains}
+            @value-changed=${this._targetPicked}
+          ></ha-area-picker>
+        `;
       case "device_id":
-        return html`<ha-device-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"device_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_device_id"
-          )}
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityRegFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
-          @value-changed=${this._targetPicked}
-        ></ha-device-picker>`;
+        return html`
+          <ha-device-picker
+            .hass=${this.hass}
+            id="input"
+            .type=${"device_id"}
+            .label=${this.hass.localize(
+              "ui.components.target-picker.add_device_id"
+            )}
+            .deviceFilter=${this.deviceFilter}
+            .entityFilter=${this.entityRegFilter}
+            .includeDeviceClasses=${this.includeDeviceClasses}
+            .includeDomains=${this.includeDomains}
+            @value-changed=${this._targetPicked}
+          ></ha-device-picker>
+        `;
       case "entity_id":
-        return html`<ha-entity-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"entity_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_entity_id"
-          )}
-          .entityFilter=${this.entityFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          class=${this.horizontal ? "hidden-picker" : ""}
-          @value-changed=${this._targetPicked}
-          allow-custom-entity
-        ></ha-entity-picker>`;
+        return html`
+          <ha-entity-picker
+            .hass=${this.hass}
+            id="input"
+            .type=${"entity_id"}
+            .label=${this.hass.localize(
+              "ui.components.target-picker.add_entity_id"
+            )}
+            .entityFilter=${this.entityFilter}
+            .includeDeviceClasses=${this.includeDeviceClasses}
+            .includeDomains=${this.includeDomains}
+            @value-changed=${this._targetPicked}
+            allow-custom-entity
+          ></ha-entity-picker>
+        `;
     }
     return html``;
   }
@@ -553,12 +570,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
-      .hidden-picker {
-        height: 0px;
-        display: inline-block;
-        overflow: hidden;
-        position: absolute;
-      }
       .horizontal-container {
         display: flex;
         flex-wrap: wrap;

src/panels/history/ha-panel-history.ts

@@ -10,9 +10,11 @@ import {
   startOfWeek,
   startOfYesterday,
 } from "date-fns/esm";
+import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
-import { UnsubscribeFunc } from "home-assistant-js-websocket/dist/types";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
 import { navigate } from "../../common/navigate";
 import {
   createSearchParam,
@@ -20,23 +22,21 @@ import {
 } from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/chart/state-history-charts";
-import "../../components/ha-target-picker";
 import "../../components/ha-circular-progress";
 import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-menu-button";
-import { computeHistory, fetchDateWS } from "../../data/history";
-import "../../layouts/ha-app-layout";
-import { haStyle } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
+import "../../components/ha-target-picker";
 import {
   EntityRegistryEntry,
   subscribeEntityRegistry,
 } from "../../data/entity_registry";
+import { computeHistory, fetchDateWS } from "../../data/history";
+import "../../layouts/ha-app-layout";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { computeDomain } from "../../common/entity/compute_domain";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
 
 class HaPanelHistory extends SubscribeMixin(LitElement) {
   @property() hass!: HomeAssistant;
@@ -118,30 +118,22 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
               @value-changed=${this._entitiesChanged}
             ></ha-target-picker>
           </div>
-          ${this._isLoading
-            ? html`<div class="progress-wrapper">
+        </div>
+        ${!this._targetPickerValue
+          ? html`
+              <div class="start-search">
+                ${this.hass.localize("ui.panel.history.start_search")}
+              </div>
+            `
+          : this._isLoading
+          ? html`
+              <div class="progress-wrapper">
                 <ha-circular-progress
                   active
                   alt=${this.hass.localize("ui.common.loading")}
                 ></ha-circular-progress>
-              </div>`
-            : html`
-                <state-history-charts
-                  .hass=${this.hass}
-                  .historyData=${this._stateHistory}
-                  .endTime=${this._endDate}
-                  no-single
-                >
-                </state-history-charts>
-              `}
-        </div>
-        ${this._isLoading
-          ? html`<div class="progress-wrapper">
-              <ha-circular-progress
-                active
-                alt=${this.hass.localize("ui.common.loading")}
-              ></ha-circular-progress>
-            </div>`
+              </div>
+            `
           : html`
               <state-history-charts
                 virtualize
@@ -389,7 +381,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
         .filters {
           display: flex;
-          align-items: flex-end;
+          align-items: flex-start;
           padding: 8px 16px 0;
         }
 
@@ -429,6 +421,12 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
           max-width: none;
           width: 100%;
         }
+
+        .start-search {
+          padding-top: 16px;
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -4556,6 +4556,9 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Monitor individual devices"
         }
+      },
+      "history": {
+        "start_search": "Start by selecting an area, device or entity above"
       }
     },
     "tips": {