Allow expanding a history graph card (#19481)

* Allow expanding a history graph card

* Update styling

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -6,12 +6,14 @@ import {
   html,
   nothing,
 } from "lit";
+import { mdiChevronRight } from "@mdi/js";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/chart/state-history-charts";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import {
   HistoryResult,
   computeHistory,
@@ -23,6 +25,7 @@ import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 import { processConfigEntities } from "../common/process-config-entities";
 import { LovelaceCard } from "../types";
 import { HistoryGraphCardConfig } from "./types";
+import { createSearchParam } from "../../../common/url/search-params";
 
 export const DEFAULT_HOURS_TO_SHOW = 24;
 
@@ -192,9 +195,25 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     if (!this.hass || !this._config) {
       return nothing;
     }
+    const now = new Date();
+    now.setHours(now.getHours() - this._hoursToShow);
+    const configUrl = `/history?${createSearchParam({
+      entity_id: this._entityIds.join(","),
+      start_date: now.toISOString(),
+    })}`;
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card>
+        ${this._config.title
+          ? html`
+              <h1 class="card-header">
+                ${this._config.title}
+                <a href=${configUrl}
+                  ><ha-icon-button .path=${mdiChevronRight}></ha-icon-button
+                ></a>
+              </h1>
+            `
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
@@ -231,6 +250,15 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       ha-card {
         height: 100%;
       }
+      .card-header {
+        justify-content: space-between;
+        display: flex;
+      }
+      .card-header ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        line-height: 24px;
+        color: var(--primary-text-color);
+      }
       .content {
         padding: 16px;
       }