Merge pull request #172 from gisce/69649/tag-field-color

Tag: allow colorField to define color for tag

src/Field.ts

@@ -147,13 +147,19 @@ class Field extends Widget {
     super.readOnly = value;
   }
 
+  _raw_props: any;
+  get raw_props(): any {
+    return this._raw_props;
+  }
+
   constructor(props: any) {
     super(props);
 
     // Activated by default
     this._activated = true;
 
     if (props) {
+      this._raw_props = props;
       if (props.name) {
         this._id = props.name;
       }

src/Tag.ts

@@ -7,6 +7,10 @@ class Tag extends Selection {
   get colors(): any | "auto" {
     return this._parsedWidgetProps.colors || {};
   }
+
+  get colorField(): string | null {
+    return this._parsedWidgetProps?.colorField || null;
+  }
 }
 
 export default Tag;

src/spec/Tag.spec.ts

@@ -44,4 +44,26 @@ describe("A Tag widget", () => {
       expect(widget.colors).toStrictEqual("auto");
     });
   });
+
+  describe("colorField property", () => {
+    it("should have default colorField to null", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colorField).toBeNull();
+    });
+    it("should parse colorField property", () => {
+      const widgetFactory = new WidgetFactory();
+      const props = {
+        name: "status",
+        widget_props: '{"colorField": "color"}',
+      };
+      const widget = widgetFactory.createWidget("tag", props);
+
+      expect(widget.colorField).toBe("color");
+    });
+  });
 });