Allow adding card from history panel (#19582)

* Allow adding card from history panel

* Better empty entities check

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

@@ -1,4 +1,10 @@
-import { mdiDownload, mdiFilterRemove } from "@mdi/js";
+import {
+  mdiDotsVertical,
+  mdiDownload,
+  mdiFilterRemove,
+  mdiImagePlus,
+} from "@mdi/js";
+import { ActionDetail } from "@material/mwc-list";
 import { differenceInHours } from "date-fns";
 import {
   HassServiceTarget,
@@ -23,6 +29,8 @@ import type { StateHistoryCharts } from "../../components/chart/state-history-ch
 import "../../components/ha-circular-progress";
 import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
+import "../../components/ha-button-menu";
+import "../../components/ha-list-item";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
 import "../../components/ha-target-picker";
@@ -49,6 +57,7 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
+import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
 
 class HaPanelHistory extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
@@ -144,13 +153,23 @@ class HaPanelHistory extends LitElement {
               ></ha-icon-button>
             `
           : ""}
-        <ha-icon-button
+        <ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
-          slot="actionItems"
+          <ha-icon-button
-          @click=${this._downloadHistory}
+            slot="trigger"
-          .disabled=${this._isLoading}
+            .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDownload}
+            .path=${mdiDotsVertical}
-          .label=${this.hass.localize("ui.panel.history.download_data")}
+          ></ha-icon-button>
-        ></ha-icon-button>
+
+          <ha-list-item graphic="icon" .disabled=${this._isLoading}>
+            ${this.hass.localize("ui.panel.history.download_data")}
+            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
+          </ha-list-item>
+
+          <ha-list-item graphic="icon" .disabled=${this._isLoading}>
+            ${this.hass.localize("ui.panel.history.add_card")}
+            <ha-svg-icon slot="graphic" .path=${mdiImagePlus}></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
 
         <div class="flex content">
           <div class="filters">
@@ -633,6 +652,17 @@ class HaPanelHistory extends LitElement {
     navigate(`/history?${createSearchParam(params)}`, { replace: true });
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._downloadHistory();
+        break;
+      case 1:
+        this._suggestCard();
+        break;
+    }
+  }
+
   private _downloadHistory() {
     // Make a copy because getEntityIDs is memoized and sort works in-place
     const entities = [...this._getEntityIds()].sort();
@@ -726,6 +756,41 @@ class HaPanelHistory extends LitElement {
     fileDownload(url, "history.csv");
   }
 
+  private _suggestCard() {
+    const entities = this._getEntityIds();
+    if (entities.length === 0 || !this._mungedStateHistory) {
+      showAlertDialog(this, {
+        title: this.hass.localize("ui.panel.history.add_card_error"),
+        text: this.hass.localize("ui.panel.history.error_no_data"),
+        warning: true,
+      });
+      return;
+    }
+
+    // If you pick things like "This week", the end date can be in the future
+    const endDateTime = Math.min(this._endDate.getTime(), Date.now());
+    const cards = [
+      {
+        title: this.hass.localize("panel.history"),
+        type: "history-graph",
+        hours_to_show: Math.round(
+          (endDateTime - this._startDate.getTime()) / 1000 / 60 / 60
+        ),
+        entities,
+      },
+    ];
+    addEntitiesToLovelaceView(
+      this,
+      this.hass,
+      cards,
+      {
+        title: this.hass.localize("panel.history"),
+        cards,
+      },
+      entities
+    );
+  }
+
   static get styles() {
     return [
       haStyle,

src/translations/en.json

@@ -6949,6 +6949,8 @@
         "remove_all": "Remove all selections",
         "download_data": "Download data",
         "download_data_error": "Unable to download data",
+        "add_card": "Add current view as card",
+        "add_card_error": "Unable to add card",
         "error_no_data": "You need to select data first."
       }
     },