Add start - end time to energy graph tooltip (#10185)

This commit is contained in:
Bram Kragten 2021-10-07 21:06:18 +02:00 committed by GitHub
parent 2dc7c1afed
commit db55be6d33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 3 deletions

View File

@ -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,

View File

@ -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,

View File

@ -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),