Merge pull request #178 from gisce/70676/indicator-dynamic-conditions

Indicator: allow dynamic icon and color

src/Indicator.ts

@@ -1,4 +1,5 @@
 import Selection from "./Selection";
+import { replaceEntities } from "./helpers/attributeParser";
 
 class Indicator extends Selection {
   _nolabel: boolean = true;
@@ -30,6 +31,11 @@ class Indicator extends Selection {
     this._suffix = value;
   }
 
+  _color: string = "";
+  get color(): string {
+    return this._color;
+  }
+
   /**
    * Action id
    */
@@ -58,8 +64,9 @@ class Indicator extends Selection {
     this._suffix = "";
     if (this._parsedWidgetProps) {
       this._card = this._parsedWidgetProps.card || false;
-      this._icon = this._parsedWidgetProps.icon || "";
+      this._icon = replaceEntities(this._parsedWidgetProps.icon) || "";
       this._suffix = this._parsedWidgetProps.suffix || "";
+      this._color = replaceEntities(this._parsedWidgetProps.color) || "";
     }
     if (props) {
       if (props.action_id) {

src/spec/Indicator.spec.ts

@@ -43,4 +43,20 @@ describe("An Indicator", () => {
     const widget = widgetFactory.createWidget("indicator", props);
     expect(widget.card).toBe(false);
   });
+  it("should allow conditions in icon widget props", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      widget_props: "{'icon': 'alert-triange:value>10;wallet:value==0'}",
+    };
+    const widget = widgetFactory.createWidget("indicator", props);
+    expect(widget.icon).toBe("alert-triange:value>10;wallet:value==0");
+  });
+  it("should allow color in widget props", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      widget_props: "{'color': 'red'}",
+    };
+    const widget = widgetFactory.createWidget("indicator", props);
+    expect(widget.color).toBe("red");
+  });
 });