widget-signal

A Lit 3.x web component that displays signal indicators with configurable colors based on value conditions. Part of the IronFlock widget ecosystem.

Features

• Responsive sizing — Signals automatically scale to fit the container
• Conditional coloring — Define color mappings with exact matches or numeric comparisons
• Layout options — Arrange signals horizontally or vertically
• Shape options — Display signals as circles or squares
• Theme support — Integrates with IronFlock dashboard theming

Installation

npm i @record-evolution/widget-signal

Usage

<script type="module">
    import '@record-evolution/widget-signal'
</script>

<widget-signal-1.2.0></widget-signal-1.2.0>

Note: The element tag includes the version number (e.g., widget-signal-1.2.0).

Configuration

| Property | Type | Default | Description | | ---------- | ------------------------------ | -------------- | -------------------------------------- | | title | string | — | Optional title displayed above signals | | subTitle | string | — | Optional subtitle | | layout | "horizontal" | "vertical" | "horizontal" | Arrangement direction of signals | | shape | "circle" | "square" | "circle" | Shape of signal indicators | | signals | array | [] | Array of signal objects |

Signal Object

| Property | Type | Description | | ---------- | ------ | ------------------------------- | | value | string | The current value of the signal | | colorMap | array | Array of color mapping rules |

Color Mapping

Each color map entry has:

| Property | Type | Description | | ----------- | ------ | ---------------------------------------- | | color | string | CSS color to display (e.g., "#22c55e") | | condition | string | Condition to match the value |

Supported conditions:

• Exact string match: "ONLINE", "OK", "ERROR"
• Numeric comparisons: ">5", "<10", ">=70", "<=100", "==50", "!=0"

Example Data

{
    "title": "Device Status",
    "subTitle": "Current signal states",
    "layout": "horizontal",
    "shape": "circle",
    "signals": [
        {
            "value": "ONLINE",
            "colorMap": [
                { "color": "#22c55e", "condition": "ONLINE" },
                { "color": "#ef4444", "condition": "OFFLINE" }
            ]
        },
        {
            "value": "55",
            "colorMap": [
                { "color": "#22c55e", "condition": ">=70" },
                { "color": "#eab308", "condition": ">=40" },
                { "color": "#ef4444", "condition": "<40" }
            ]
        }
    ]
}

Development

npm install
npm run start    # Dev server at localhost:8000/demo/
npm run build    # Production build to dist/
npm run types    # Regenerate types from schema

License

MIT