Fix issue Animation Not working as expected #36 (#56)

Author: rhadamantys

src/canvas-gauge-card.ts

@@ -120,29 +120,31 @@ export class CanvasGaugeCard extends LitElement {
 
   // Here we need to refresh the actual gauge after it has rendered
   protected updated(_) {
-    var gauge;
-    if (this._config?.gauge.type == "linear-gauge") {
-      gauge = new Gauge.LinearGauge({
-        renderTo: this._canvasElement,
-        height: this._config.gauge["height"],
-        width: this._config.gauge["width"],
-        value: 0,
-      });
-    } else if (this._config?.gauge.type == "radial-gauge") {
-      gauge = new Gauge.RadialGauge({
-        renderTo: this._canvasElement,
-        height: this._config.gauge["height"],
-        width: this._config.gauge["width"],
-        value: 0,
-      });
-    }
+    if (this._gauge == null) {
+      var gauge;
+      if (this._config?.gauge.type == "linear-gauge") {
+        gauge = new Gauge.LinearGauge({
+          renderTo: this._canvasElement,
+          height: this._config.gauge["height"],
+          width: this._config.gauge["width"],
+          value: 0,
+        });
+      } else if (this._config?.gauge.type == "radial-gauge") {
+        gauge = new Gauge.RadialGauge({
+          renderTo: this._canvasElement,
+          height: this._config.gauge["height"],
+          width: this._config.gauge["width"],
+          value: 0,
+        });
+      }
 
-    for (const key in this._config?.gauge) {
-      if (this._config?.gauge?.hasOwnProperty(key)) {
-        gauge.options[key] = this._config.gauge[key];
+      for (const key in this._config?.gauge) {
+        if (this._config?.gauge?.hasOwnProperty(key)) {
+          gauge.options[key] = this._config.gauge[key];
+        }
       }
+      this._gauge = gauge;
     }
-    this._gauge = gauge;
     var entityId = this._config?.entity;
     this._state = this.hass?.states[entityId!].state;
     this._gauge["value"] = this._state;