Added entity_id to history graph tooltip (#7310)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/entity/ha-chart-base.js

@@ -85,6 +85,10 @@ class HaChartBase extends mixinBehaviors(
           text-align: center;
           font-weight: 500;
         }
+        .chartTooltip .beforeBody {
+          text-align: center;
+          font-weight: 300;
+        }
         .chartLegend li {
           display: inline-block;
           padding: 0 6px;
@@ -139,6 +143,9 @@ class HaChartBase extends mixinBehaviors(
           style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"
         >
           <div class="title">[[tooltip.title]]</div>
+          <template is="dom-if" if="[[tooltip.beforeBody]]">
+            <div class="beforeBody">[[tooltip.beforeBody]]</div>
+          </template>
           <div>
             <ul>
               <template is="dom-repeat" items="[[tooltip.lines]]">
@@ -270,6 +277,10 @@ class HaChartBase extends mixinBehaviors(
     const title = tooltip.title ? tooltip.title[0] || "" : "";
     this.set(["tooltip", "title"], title);
 
+    if (tooltip.beforeBody) {
+        this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
+    }
+
     const bodyLines = tooltip.body.map((n) => n.lines);
 
     // Set Text

src/components/state-history-chart-timeline.js

@@ -159,7 +159,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
       if (prevState !== null) {
         dataRow.push([prevLastChanged, endTime, locState, prevState]);
       }
-      datasets.push({ data: dataRow });
+      datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
       labels.push(entityDisplay);
     });
 
@@ -173,12 +173,22 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
       return [state, start, end];
     };
 
+    const formatTooltipBeforeBody = (item, data) => {
+      if (!this.hass.userData || !this.hass.userData.showAdvanced || !item[0]) {
+        return "";
+      }
+      // Extract the entity ID from the dataset.
+      const values = data.datasets[item[0].datasetIndex];
+      return values.entity_id || "";
+    };
+
     const chartOptions = {
       type: "timeline",
       options: {
         tooltips: {
           callbacks: {
             label: formatTooltipLabel,
+            beforeBody: formatTooltipBeforeBody,
           },
         },
         scales: {