@gisce/ooui 2.40.0-alpha.2 → 2.40.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "2.40.0-alpha.2",
+  "version": "2.40.0-alpha.4",
   "engines": {
     "node": "20.5.0"
   },

package/src/Graph/GraphIndicator.ts

@@ -23,6 +23,11 @@ export class GraphIndicator extends Graph {
     return this._showPercent;
   }
 
+  _progressbar: boolean = false;
+  get progressbar(): boolean {
+    return this._progressbar;
+  }
+
   _suffix: string | null = null;
   get suffix(): string | null {
     return this._suffix;
@@ -43,5 +48,6 @@ export class GraphIndicator extends Graph {
     this._suffix = element.attributes.suffix || null;
     this._totalDomain = replaceEntities(element.attributes.totalDomain) || null;
     this._showPercent = parseBoolAttribute(element.attributes.showPercent);
+    this._progressbar = parseBoolAttribute(element.attributes.progressbar);
   }
 }

package/src/Icon.ts

@@ -0,0 +1,59 @@
+import Field from "./Field";
+
+class Icon extends Field {
+  /**
+   * Icon name
+   */
+  _name: string = "";
+  get name(): string {
+    return this._name;
+  }
+
+  set name(value: string) {
+    this._name = value;
+  }
+
+  /**
+   * Icon size
+   */
+  _size: number = 16;
+  get size(): number {
+    return this._size;
+  }
+
+  set size(value: number) {
+    this._size = value;
+  }
+
+  /**
+   * Icon color
+   */
+  _color: string = "";
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._color = value;
+  }
+
+  constructor(props?: any) {
+    super({ ...props, nolabel: true });
+
+    if (props) {
+      if (props.name) {
+        this._name = props.name;
+      }
+
+      if (props.size) {
+        this._size = props.size;
+      }
+
+      if (props.color) {
+        this._color = props.color;
+      }
+    }
+  }
+}
+
+export default Icon;

package/src/WidgetFactory.ts

@@ -25,6 +25,7 @@ import Separator from "./Separator";
 import Reference from "./Reference";
 import Binary from "./Binary";
 import Image from "./Image";
+import Icon from "./Icon";
 import FiberGrid from "./FiberGrid";
 import Timeline from "./Timeline";
 import Indicator from "./Indicator";
@@ -141,6 +142,9 @@ class WidgetFactory {
       case "image":
         this._widgetClass = Image;
         break;
+      case "icon":
+        this._widgetClass = Icon;
+        break;
       case "fiber_grid":
         this._widgetClass = FiberGrid;
         break;

package/src/index.ts

@@ -32,6 +32,7 @@ import ActionButtons from "./ActionButtons";
 import Reference from "./Reference";
 import Binary from "./Binary";
 import Image from "./Image";
+import Icon from "./Icon";
 import { parseContext, parseContextFields } from "./helpers/contextParser";
 import {
   transformDomainForChildWidget,
@@ -113,6 +114,7 @@ export {
   Reference,
   Binary,
   Image,
+  Icon,
   parseContext,
   parseContextFields,
   transformDomainForChildWidget,

package/src/spec/Graph.spec.ts

@@ -55,6 +55,31 @@ describe("A Graph", () => {
     expect(graph.field).toBe("potencia");
     expect(graph.operator).toBe("+");
   });
+  it("should parse progressbar and showPercent attributes", () => {
+    const xml1 = `<?xml version="1.0"?>
+    <graph string="My indicator" type="indicator" progressbar="1" />
+    `;
+
+    const graph1 = parseGraph(xml1) as GraphIndicator;
+    expect(graph1.progressbar).toBe(true);
+    expect(graph1.showPercent).toBe(false);
+
+    const xml2 = `<?xml version="1.0"?>
+    <graph string="My indicator" type="indicator" showPercent="1" />
+    `;
+
+    const graph2 = parseGraph(xml2) as GraphIndicator;
+    expect(graph2.showPercent).toBe(true);
+    expect(graph2.progressbar).toBe(false);
+
+    const xml3 = `<?xml version="1.0"?>
+    <graph string="My indicator" type="indicator" />
+    `;
+
+    const graph3 = parseGraph(xml3) as GraphIndicator;
+    expect(graph3.showPercent).toBe(false);
+    expect(graph3.progressbar).toBe(false);
+  });
   it("should parse a graph with timerange parameter", () => {
     const xml = `<?xml version="1.0"?>
     <graph type="line" timerange="day">

package/src/spec/Icon.spec.ts

@@ -0,0 +1,93 @@
+import WidgetFactory from "../WidgetFactory";
+import { it, expect, describe } from "vitest";
+
+describe("An Icon", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.id).toBe("icon1");
+  });
+
+  it("should properly have nolabel as true by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.nolabel).toBe(true);
+  });
+
+  it("should properly set name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    widget.name = "home";
+    expect(widget.name).toBe("home");
+  });
+
+  it("should properly set size", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      size: 24,
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.size).toBe(24);
+  });
+
+  it("should have default size of 16", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.size).toBe(16);
+  });
+
+  it("should properly set color", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      color: "#FF0000",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.color).toBe("#FF0000");
+  });
+
+  it("should have empty color by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    expect(widget.color).toBe("");
+  });
+
+  it("should properly parse all props together", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "icon1",
+      size: 32,
+      color: "blue",
+    };
+    const widget = widgetFactory.createWidget("icon", props);
+
+    widget.name = "star";
+    expect(widget.name).toBe("star");
+    expect(widget.size).toBe(32);
+    expect(widget.color).toBe("blue");
+  });
+});