mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 13:57:21 +00:00
Add start - end time to energy graph tooltip (#10185)
This commit is contained in:
parent
2dc7c1afed
commit
db55be6d33
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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),
|
||||
|
Loading…
x
Reference in New Issue
Block a user