Add interval duration to history tooltip (#16486)

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

@@ -2,6 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
 import { fireEvent } from "../../common/dom/fire_event";
 import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -173,10 +174,16 @@ export class StateHistoryChartTimeline extends LitElement {
             beforeBody: (context) => context[0].dataset.label || "",
             label: (item) => {
               const d = item.dataset.data[item.dataIndex] as TimeLineData;
+              const durationInMs = d.end.getTime() - d.start.getTime();
+              const formattedDuration = `${this.hass.localize(
+                "ui.components.history_charts.duration"
+              )}: ${millisecondsToDuration(durationInMs)}`;
+
               return [
                 d.label || "",
                 formatDateTimeWithSeconds(d.start, this.hass.locale),
                 formatDateTimeWithSeconds(d.end, this.hass.locale),
+                formattedDuration,
               ];
             },
             labelColor: (item) => ({

src/translations/en.json

@@ -513,7 +513,8 @@
         "history_disabled": "History integration disabled",
         "loading_history": "Loading state history…",
         "no_history_found": "No state history found.",
-        "error": "Unable to load history"
+        "error": "Unable to load history",
+        "duration": "Duration"
       },
       "map": {
         "error": "Unable to load map"