From db55be6d330aa358dd6cfd2ede485808d3f37494 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 7 Oct 2021 21:06:18 +0200 Subject: [PATCH] Add start - end time to energy graph tooltip (#10185) --- .../cards/energy/hui-energy-gas-graph-card.ts | 19 ++++++++++++++++++- .../energy/hui-energy-solar-graph-card.ts | 19 ++++++++++++++++++- .../energy/hui-energy-usage-graph-card.ts | 19 ++++++++++++++++++- 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index 582107472e..4175f55bee 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -10,7 +10,13 @@ import { ChartOptions, ScatterDataPoint, } from "chart.js"; -import { differenceInDays, endOfToday, isToday, startOfToday } from "date-fns"; +import { + addHours, + differenceInDays, + endOfToday, + isToday, + startOfToday, +} from "date-fns"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergyGasGraphCardConfig } from "../types"; @@ -39,6 +45,7 @@ import { reduceSumStatisticsByMonth, reduceSumStatisticsByDay, } from "../../../../data/history"; +import { formatTime } from "../../../../common/datetime/format_time"; @customElement("hui-energy-gas-graph-card") export class HuiEnergyGasGraphCard @@ -180,6 +187,16 @@ export class HuiEnergyGasGraphCard tooltip: { mode: "nearest", callbacks: { + title: (datasets) => { + if (dayDifference > 0) { + return datasets[0].label; + } + const date = new Date(datasets[0].parsed.x); + return `${formatTime(date, locale)} - ${formatTime( + addHours(date, 1), + locale + )}`; + }, label: (context) => `${context.dataset.label}: ${formatNumber( context.parsed.y, diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 54b272cfd4..fb595bf124 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -10,7 +10,13 @@ import { ChartOptions, ScatterDataPoint, } from "chart.js"; -import { differenceInDays, endOfToday, isToday, startOfToday } from "date-fns"; +import { + addHours, + differenceInDays, + endOfToday, + isToday, + startOfToday, +} from "date-fns"; import { HomeAssistant } from "../../../../types"; import { LovelaceCard } from "../../types"; import { EnergySolarGraphCardConfig } from "../types"; @@ -40,6 +46,7 @@ import { reduceSumStatisticsByMonth, reduceSumStatisticsByDay, } from "../../../../data/history"; +import { formatTime } from "../../../../common/datetime/format_time"; @customElement("hui-energy-solar-graph-card") export class HuiEnergySolarGraphCard @@ -173,6 +180,16 @@ export class HuiEnergySolarGraphCard tooltip: { mode: "nearest", callbacks: { + title: (datasets) => { + if (dayDifference > 0) { + return datasets[0].label; + } + const date = new Date(datasets[0].parsed.x); + return `${formatTime(date, locale)} - ${formatTime( + addHours(date, 1), + locale + )}`; + }, label: (context) => `${context.dataset.label}: ${formatNumber( context.parsed.y, diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index db2b8a0db6..54bb09d6ff 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts @@ -1,5 +1,11 @@ import { ChartData, ChartDataset, ChartOptions } from "chart.js"; -import { startOfToday, endOfToday, isToday, differenceInDays } from "date-fns"; +import { + startOfToday, + endOfToday, + isToday, + differenceInDays, + addHours, +} from "date-fns"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -13,6 +19,7 @@ import { } from "../../../../common/color/convert-color"; import { hexBlend } from "../../../../common/color/hex"; import { labDarken } from "../../../../common/color/lab"; +import { formatTime } from "../../../../common/datetime/format_time"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import { formatNumber, @@ -168,6 +175,16 @@ export class HuiEnergyUsageGraphCard position: "nearest", filter: (val) => val.formattedValue !== "0", callbacks: { + title: (datasets) => { + if (dayDifference > 0) { + return datasets[0].label; + } + const date = new Date(datasets[0].parsed.x); + return `${formatTime(date, locale)} - ${formatTime( + addHours(date, 1), + locale + )}`; + }, label: (context) => `${context.dataset.label}: ${formatNumber( Math.abs(context.parsed.y),