From 4cc812c1bf32bd0281c6521a4f6f6b2f753f758e Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 30 May 2019 08:42:02 -0700
Subject: [PATCH] Always have a gauge base unit (#3229)

---
 src/panels/lovelace/cards/hui-gauge-card.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

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