jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 07:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add interval duration to history tooltip (#16486)

Browse Source
This commit is contained in:
Bruno Luvizotto 2023-05-12 07:50:34 -03:00 committed by GitHub
parent 5bd49c18d1
commit 557fe33807
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/chart/state-history-chart-timeline.ts
View File

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

3
src/translations/en.json
View File

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