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.

!screenshot

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

``bash
npm i @record-evolution/widget-signal
`

Usage

`html



`

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 |

$3

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

$3

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

`json
{
"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

`bash
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