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

Add tooltips to the gauges (#9676)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-08-02 05:21:41 -07:00 committed by GitHub
parent 83460a34f4
commit f19f2ff321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
View File

@ -1,3 +1,5 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -5,6 +7,7 @@ import { styleMap } from "lit/directives/style-map";
import { round } from "../../../../common/number/round";
import "../../../../components/ha-card";
import "../../../../components/ha-gauge";
import "../../../../components/ha-svg-icon";
import {
EnergyData,
energySourcesByType,
@ -118,8 +121,14 @@ class HuiEnergyCarbonGaugeCard
}
return html`
<ha-card
>${value !== undefined
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents how much of the energy consumed by your home was
generated using non-fossil fuels like solar, wind and nuclear.
</paper-tooltip>
${value !== undefined
? html` <ha-gauge
min="0"
max="100"
@ -176,6 +185,18 @@ class HuiEnergyCarbonGaugeCard
font-size: 15px;
margin-top: 8px;
}
ha-svg-icon {
position: absolute;
right: 4px;
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
}
`;
}
}

22
src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
View File

@ -1,8 +1,11 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { formatNumber } from "../../../../common/string/format_number";
import "../../../../components/ha-card";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-gauge";
import type { LevelDefinition } from "../../../../components/ha-gauge";
import {
@ -91,6 +94,13 @@ class HuiEnergyGridGaugeCard
return html`
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents your energy dependency. If it's green, it means
you produced more energy than that you consumed from the grid. If it's
in the red, it means that you relied on the grid for part of your
home's energy consumption.
</paper-tooltip>
${value !== undefined
? html`<ha-gauge
min="-1"
@ -142,6 +152,18 @@ class HuiEnergyGridGaugeCard
font-size: 15px;
margin-top: 8px;
}
ha-svg-icon {
position: absolute;
right: 4px;
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
}
`;
}
}

22
src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
View File

@ -1,9 +1,12 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import "../../../../components/ha-card";
import "../../../../components/ha-gauge";
import "../../../../components/ha-svg-icon";
import {
EnergyData,
energySourcesByType,
@ -81,6 +84,13 @@ class HuiEnergySolarGaugeCard
return html`
<ha-card>
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
This card represents how much of the solar energy was not used by your
home and was returned to the grid. If you frequently return a lot, try
to conserve this energy by installing a battery or buying an electric
car to charge.
</paper-tooltip>
${value !== undefined
? html`<ha-gauge
min="0"
@ -137,6 +147,18 @@ class HuiEnergySolarGaugeCard
font-size: 15px;
margin-top: 8px;
}
ha-svg-icon {
position: absolute;
right: 4px;
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip {
width: 80%;
max-width: 250px;
margin-top: 10%;
}
`;
}
}