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

Always have a gauge base unit (#3229)

Browse Source
This commit is contained in:
Paulus Schoutsen 2019-05-30 08:42:02 -07:00 committed by GitHub
parent bdacd05fab
commit 4cc812c1bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -42,6 +42,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
@property() public hass?: HomeAssistant; @property() public hass?: HomeAssistant;
@property() private _baseUnit = "50px";
@property() private _config?: GaugeCardConfig; @property() private _config?: GaugeCardConfig;
private _updated?: boolean; private _updated?: boolean;
@ -99,16 +100,21 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
} }
return html` return html`
<ha-card @click="${this._handleClick}"> <ha-card
@click="${this._handleClick}"
style=${styleMap({
"--base-unit": this._baseUnit,
})}
>
<div class="container"> <div class="container">
<div class="gauge-a"></div> <div class="gauge-a"></div>
<div class="gauge-b"></div> <div class="gauge-b"></div>
<div <div
class="gauge-c" class="gauge-c"
style="${styleMap({ style=${styleMap({
transform: `rotate(${this._translateTurn(state)}turn)`, transform: `rotate(${this._translateTurn(state)}turn)`,
"background-color": this._computeSeverity(state), "background-color": this._computeSeverity(state),
})}" })}
></div> ></div>
<div class="gauge-data"> <div class="gauge-data">
<div id="percent"> <div id="percent">
@ -154,12 +160,9 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
return; return;
} }
const baseUnit = this._computeBaseUnit(); const baseUnit = this._computeBaseUnit();
if (baseUnit === "0px") { if (baseUnit !== "0px") {
return; this._baseUnit = baseUnit;
} }
(this.shadowRoot!.querySelector(
"ha-card"
)! as HTMLElement).style.setProperty("--base-unit", baseUnit);
} }
private _computeSeverity(numberValue: number): string { private _computeSeverity(numberValue: number): string {
@ -211,7 +214,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card { ha-card {
--base-unit: 50px;
height: calc(var(--base-unit) * 3); height: calc(var(--base-unit) * 3);
position: relative; position: relative;
cursor: pointer; cursor: pointer;