From a6f3684846e0eaf4ddc328708ac21f233ee44667 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 12 Dec 2018 09:29:46 +0100 Subject: [PATCH] Fix gauge (#2274) --- gallery/src/components/demo-card.js | 4 + src/panels/lovelace/cards/hui-gauge-card.ts | 164 ++++++++++---------- 2 files changed, 89 insertions(+), 79 deletions(-) diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js index 6cbbad8067..703f24c346 100644 --- a/gallery/src/components/demo-card.js +++ b/gallery/src/components/demo-card.js @@ -78,6 +78,10 @@ class DemoCard extends PolymerElement { hass.resources = demoResources; hass.language = "en"; hass.states = demoStates; + hass.themes = { + default_theme: "default", + themes: {}, + }; el.hass = hass; } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 0cbec4bff9..f9dc793bf8 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -5,18 +5,19 @@ import { PropertyValues, } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; +import { styleMap } from "lit-html/directives/styleMap"; -import { LovelaceCard, LovelaceCardEditor } from "../types"; +import "../../../components/ha-card"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { fireEvent } from "../../../common/dom/fire_event"; import { hasConfigOrEntityChanged } from "../common/has-changed"; - import isValidEntityId from "../../../common/entity/valid_entity_id"; import applyThemesOnElement from "../../../common/dom/apply_themes_on_element"; import computeStateName from "../../../common/entity/compute_state_name"; -import "../../../components/ha-card"; +import { LovelaceCard, LovelaceCardEditor } from "../types"; +import createErrorCardConfig from "../common/create-error-card-config"; export interface SeverityConfig { green?: number; @@ -79,16 +80,37 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { return html``; } const stateObj = this.hass.states[this._config.entity]; + let state; let error; + if (!stateObj) { error = "Entity not available: " + this._config.entity; - } else if (isNaN(Number(stateObj.state))) { - error = "Entity is non-numeric: " + this._config.entity; + } else { + state = Number(stateObj.state); + + if (isNaN(state)) { + error = "Entity is non-numeric: " + this._config.entity; + } + } + + if (error) { + const errorConfig = createErrorCardConfig( + "Entity not Found!", + this._config + ); + const element = document.createElement("hui-error-card"); + element.setConfig(errorConfig); + return html` + ${element} + `; } return html` ${this.renderStyle()} - + ${ error ? html` @@ -98,7 +120,15 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
-
+
${stateObj.state} @@ -124,40 +154,63 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } protected updated(changedProps: PropertyValues): void { - if ( - !this._config || - !this.hass || - !this.shadowRoot!.getElementById("gauge") - ) { + if (!this._config || !this.hass) { return; } - const stateObj = this.hass.states[this._config.entity]; - if (isNaN(Number(stateObj.state))) { - return; - } - - const turn = this._translateTurn(Number(stateObj.state), this._config); - - this.shadowRoot!.getElementById( - "gauge" - )!.style.cssText = `transform: rotate(${turn}turn); background-color: ${this._computeSeverity( - stateObj.state, - this._config.severity! - )}`; - - (this.shadowRoot!.querySelector( - "ha-card" - )! as HTMLElement).style.setProperty( - "--base-unit", - this._computeBaseUnit() - ); const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + if (!oldHass || oldHass.themes !== this.hass.themes) { applyThemesOnElement(this, this.hass.themes, this._config.theme); } } + private _computeSeverity(numberValue: number): string { + const sections = this._config!.severity; + + if (!sections) { + return severityMap.normal; + } + + const sectionsArray = Object.keys(sections); + const sortable = sectionsArray.map((severity) => [ + severity, + sections[severity], + ]); + + for (const severity of sortable) { + if (severityMap[severity[0]] == null || isNaN(severity[1])) { + return severityMap.normal; + } + } + sortable.sort((a, b) => a[1] - b[1]); + + if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) { + return severityMap[sortable[0][0]]; + } + if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) { + return severityMap[sortable[1][0]]; + } + if (numberValue >= sortable[2][1]) { + return severityMap[sortable[2][0]]; + } + return severityMap.normal; + } + + private _translateTurn(value: number): number { + const { min, max } = this._config!; + const maxTurnValue = Math.min(Math.max(value, min!), max!); + return (5 * (maxTurnValue - min!)) / (max! - min!) / 10; + } + + private _computeBaseUnit(): string { + return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px"; + } + + private _handleClick(): void { + fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); + } + private renderStyle(): TemplateResult { return html` `; } - - private _computeSeverity(stateValue: string, sections: object): string { - const numberValue = Number(stateValue); - - if (!sections) { - return severityMap.normal; - } - - const sectionsArray = Object.keys(sections); - const sortable = sectionsArray.map((severity) => [ - severity, - sections[severity], - ]); - - for (const severity of sortable) { - if (severityMap[severity[0]] == null || isNaN(severity[1])) { - return severityMap.normal; - } - } - sortable.sort((a, b) => a[1] - b[1]); - - if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) { - return severityMap[sortable[0][0]]; - } - if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) { - return severityMap[sortable[1][0]]; - } - if (numberValue >= sortable[2][1]) { - return severityMap[sortable[2][0]]; - } - return severityMap.normal; - } - - private _translateTurn(value: number, config: Config): number { - const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!); - return ( - (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10 - ); - } - - private _computeBaseUnit(): string { - return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px"; - } - - private _handleClick(): void { - fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); - } } declare global {