Dashboard Widget Reference Guide

Use this dashboard widget reference when you already know which widget you want and need the exact settings, use case, or payload shape.

This page helps you understand the available dashboard widget types in Twinnoverse and how each one is normally used on an operational screen.

If you are still deciding which widget family fits the use case, start with Choosing the Right Widgets.

Dashboard Widget Types #

1. KPI (Single / Double) Widget #

Use KPI widgets for one or two values that should be readable at a glance on a dashboard or TV screen.

Typical uses:

• production count
• OEE
• uptime
• scrap count

Expected payload pattern:

{
  "kpi": {
    "YOUR_LABEL": {
      "value": 1247,
      "secondaryValue": 0
    }
  }
}

{
  "kpi": {
    "YOUR_LABEL": {
      "value": 1247,
      "secondaryValue": 0
    }
  }
}

2. KPI Pie Widget #

Use KPI Pie for percentage or utilization-style values on a dashboard.

Expected payload pattern:

{
  "pie_widget": {
    "YOUR_LABEL": {
      "chartLabel": "QTE Split",
      "segments": [
        { "name": "OK", "value": 1116 },
        { "name": "NOK", "value": 84 }
      ]
    }
  }
}

{
  "pie_widget": {
    "YOUR_LABEL": {
      "chartLabel": "QTE Split",
      "segments": [
        { "name": "OK", "value": 1116 },
        { "name": "NOK", "value": 84 }
      ]
    }
  }
}

3. Sparkline Widget #

Use Sparkline when you need a compact trend line widget.

Expected payload pattern:

{
  "sparkline": {
    "YOUR_LABEL": {
     "value": 1240,
     "series": [1180, 1205, 1198, 1210, 1222, 1240]
    }
  }
}

{
  "sparkline": {
    "YOUR_LABEL": {
     "value": 1240,
     "series": [1180, 1205, 1198, 1210, 1222, 1240]
    }
  }
}

4. Progress Bar Widget #

Use Progress Bar for current-versus-total progress on a dashboard.

Expected payload pattern:

{
  "progress_bar": {
    "YOUR_LABEL": {
      "current": 22,
      "total": 100
    }
  }
}

{
  "progress_bar": {
    "YOUR_LABEL": {
      "current": 22,
      "total": 100
    }
  }
}

5. Target Actual (Vertical) Widget #

Use this widget for planned-versus-actual comparison.

Expected payload pattern:

{
  "target_actual_vertical": {
    "YOUR_LABEL": {
      "chartLabel": "Actual vs Objective",
      "bars": [
        { "label": "08:00", "value": 20, "target": 100 },
        { "label": "09:00", "value": 78, "target": 100 },
        { "label": "10:00", "value": 103, "target": 100 }
      ]
    }
  }
}

{
  "target_actual_vertical": {
    "YOUR_LABEL": {
      "chartLabel": "Actual vs Objective",
      "bars": [
        { "label": "08:00", "value": 20, "target": 100 },
        { "label": "09:00", "value": 78, "target": 100 },
        { "label": "10:00", "value": 103, "target": 100 }
      ]
    }
  }
}

6. Table List Widget #

Use Table List for ranked items, operational rows, or top-N summaries.

Use cases:

• defect list
• production ranking
• work orders
• machine rows

Expected payload pattern:

{
  "table_list": {
    "YOUR_LABEL": {
      "items": [
        ["1", "Scratch", "12"],
        ["2", "Missing part", "9"],
        ["3", "Paint issue", "6"]
      ]
    }
  }
}

{
  "table_list": {
    "YOUR_LABEL": {
      "items": [
        ["1", "Scratch", "12"],
        ["2", "Missing part", "9"],
        ["3", "Paint issue", "6"]
      ]
    }
  }
}

7. Alerts List Widget #

Use Alerts List for warnings, incidents, alarms, and issues that should look like a live queue.

Use cases:

• machine alerts
• quality incidents
• downtime reasons

Expected payload pattern:

{
  "alerts_list": {
    "YOUR_LABEL": {
      "items": [
        {
          "time": "09:00",
          "count": 1,
          "label": "Sensor anomaly",
          "severity": "warning"
        },
        {
          "time": "10:00",
          "count": 1,
          "label": "Conveyor blockage",
          "severity": "critical"
        }
      ]
    }
  }
}

{
  "alerts_list": {
    "YOUR_LABEL": {
      "items": [
        {
          "time": "09:00",
          "count": 1,
          "label": "Sensor anomaly",
          "severity": "warning"
        },
        {
          "time": "10:00",
          "count": 1,
          "label": "Conveyor blockage",
          "severity": "critical"
        }
      ]
    }
  }
}

8. Clock Widget #

Use Clock only when the time or date adds useful context to the screen.

The Clock widget is normally display-only. It does not usually need a runtime payload from your data source.

9. Text Block Widget #

Use Text Block for explanatory text, shift notes, or overlay-style messages.

This widget is also useful in campaigns and event-driven layouts.

{
  "text_block": {
    "YOUR_LABEL": {
      "title": "Message title",
      "body": "Message body"
    }
  }
}

{
  "text_block": {
    "YOUR_LABEL": {
      "title": "Message title",
      "body": "Message body"
    }
  }
}

10. Content (Image) Widget #

Use Content when the screen needs a static image, diagram, floor plan, or reference visual.