05 OEE Dashboard

Build an OEE dashboard with aggregated metrics in Grafana.

What You'll Learn

• Use the productivity-metrics POST endpoint for aggregated OEE data

• Handle the 10-minute alignment requirement for datetime ranges

• Create hidden time variables that round to valid intervals

• Build department overview tables with multiple machines

• Use gauge cells and continuous color scales for visualization

Prerequisites

• Completed Tutorials 4.1-4.4

• Understanding of Infinity POST requests

• Familiarity with dashboard variables

---

Overview

The productivity-metrics endpoint provides aggregated OEE metrics for custom time ranges:

• Productivity (OEE) – Overall Equipment Effectiveness

• Availability – Uptime vs downtime

• Performance – Actual vs theoretical output

• Quality – Good output vs scrap

When to Use Each Endpoint

Endpoint	Method	Best For
production-runs	GET	Per-run OEE, flexible time ranges
productivity-metrics	POST	Aggregated OEE over custom periods (shifts, days, weeks)

Use production-runs (Tutorial 4.2) for:

• Quick queries with ${__from:date:iso} and ${__to:date:iso}

• OEE per production run

• Simple dashboards

Use productivity-metrics (this tutorial) for:

• Aggregated metrics across shifts or custom periods

• Department-level summaries

• When you need more control over time alignment

---

The 10-Minute Alignment Requirement

Important: The productivity-metrics endpoint requires datetime ranges with 10-minute alignment:

Requirement	Valid	Invalid
Minutes	0, 10, 20, 30, 40, 50	5, 15, 23, 47
Seconds	0	30, 59
Microseconds	0	123000

Valid examples:

• 2024-01-15T08:00:00.000Z

• 2024-01-15T14:30:00.000Z

• 2024-01-15T09:10:00.000Z

Invalid examples:

• 2024-01-15T08:05:00.000Z (minutes not aligned)

• 2024-01-15T14:30:45.000Z (seconds not zero)

Why This Matters

When users select time ranges in Grafana, the values often include arbitrary seconds and milliseconds:

• User clicks "Last 8 hours" at 14:37:23 -> ${__from} = 1705323443000

• This converts to 2024-01-15T06:37:23.000Z – not 10-minute aligned!

Solution: Create hidden variables that round times to valid intervals.

---

Creating Time-Aligned Variables

Option A: Round to the Hour (Simplest)

Use Grafana's date formatting to round to full hours:

Variable	Value
Name	start_aligned
Type	Constant or Query
Value	${__from:date:YYYY-MM-DDTHH:00:00}+00:00

Result: 2024-01-15T06:00:00+00:00 (always valid)

However, constant variables don't update when the time range changes.

Option B: Round to 10-Minute Intervals (Advanced)

Create a Query variable with inline data and JSONata:

Variable: start

Setting	Value
Name	start
Type	Query
Hide	Variable (hidden)
Refresh	On time range change

Query configuration:

Setting	Value
Source	Inline
Data	{"time": ${__from}}
Root selector	See JSONata below

JSONata for 10-minute rounding:

(
  $time_millis := $number($.time);
  $time_rounded := $time_millis - ($time_millis % 600000);
  $fromMillis($time_rounded)
)

This JSONata:

1. Takes the millisecond timestamp from Grafana

2. Rounds down to the nearest 10 minutes (600000 ms = 10 min)

3. Converts back to ISO format

Variable: end

Create a second variable with the same configuration, but use ${__to} instead:

Setting	Value
Name	end
Data	{"time": ${__to}}
Root selector	Same JSONata as above

[SCREENSHOT: Hidden time variable configuration]

---

Querying Productivity Metrics

Basic POST Request

The productivity-metrics endpoint requires a POST request with datetime ranges:

URL:

machines/${machine}/productivity-metrics

Method: POST

Body:

{
  "datetime_ranges": [
    {
      "start": "${start}",
      "end": "${end}"
    }
  ]
}

Infinity Query Configuration

Setting	Value
Type	JSON
Parser	Backend
Source	URL
URL	machines/${machine}/productivity-metrics
Method	POST
Body content type	application/json
Body	See above

Root selector for extracting scores:

$map($.data, function($v) {
  {
    "productivity": $v.productivity.score,
    "availability": $v.availability.score,
    "performance": $v.performance.score,
    "quality": $exists($v.quality) ? $v.quality.score : 1
  }
})

Note: Quality may not exist for all machines, so we default to 1 if missing.

[SCREENSHOT: POST request configuration in Infinity]

---

Building a Department OEE Table

A department overview shows all machines in a table with OEE scores side-by-side.

Step 1: Create Multiple Machine Queries

For each machine, create a separate query (Query A, B, C, etc.):

Query A (Kiefel):

Setting	Value
URL	machines/141e0927-62b3-4e76-8398-ad82d20f397f/productivity-metrics
Method	POST
Body	{"datetime_ranges": [{"start": "${start}", "end": "${end}"}]}
Root selector	JSONata for scores (see above)

Add computed columns to identify the machine:

Selector	Title	Type
"141e0927-62b3-4e76-8398-ad82d20f397f"	machine_uuid	String
"Kiefel"	Machine	String

Note: The selector uses quoted string literals to add fixed values.

Query B (Macchi):

Same configuration with:

• URL: machines/cc0d2dcb-564b-48cd-a342-71765a536058/productivity-metrics

• Computed columns: "cc0d2dcb-..." and "Macchi"

Repeat for all machines in the department.

[SCREENSHOT: Multiple queries with computed columns]

Step 2: Add Merge Transformation

Transformations combine the multiple query results:

1. Click Transform tab

2. Add transformation -> Merge

This combines all machine queries into a single table.

[SCREENSHOT: Merge transformation result]

Step 3: Organize Columns

Add another transformation to clean up the table:

1. Add transformation -> Organize fields

2. Hide: machine_uuid (keep only for filtering)

3. Rename:

   • productivity -> OEE

   • availability -> Availability

   • performance -> Performance

   • quality -> Quality

4. Reorder: Machine, OEE, Availability, Performance, Quality

[SCREENSHOT: Organize fields configuration]

---

Visual Styling

Gauge Cells for OEE Columns

Make each score column display as a gauge:

1. Open Field overrides

2. Add override -> Fields with name -> OEE

3. Add property -> Cell type -> Gauge

4. Set Mode -> Basic

Repeat for Availability, Performance, and Quality.

Continuous Color Scale

Use a red-yellow-green gradient for instant visual feedback:

1. In Defaults (Standard options):

   • Color scheme -> Continuous - RdYlGr (From thresholds)

   • Or use field overrides for specific columns

2. Set Min = 0, Max = 1

3. Configure thresholds if using threshold-based colors:

   • 0: Red

   • 0.6: Yellow

   • 0.8: Green

[SCREENSHOT: Color scale configuration]

Unit Configuration

Set the unit to display as percentages:

Setting	Value
Unit	Percent (0.0-1.0)
Decimals	1
Min	0
Max	1

Table Footer with Averages

Show department averages in the table footer:

1. In Table options:

   • Show table footer -> On

   • Calculation -> Mean

This displays the average OEE across all machines at the bottom.

[SCREENSHOT: Table with gauge cells and footer]

---

Complete Example: Department Overview

Variables

Name	Type	Configuration
site	Query	Sites endpoint, display name/uuid
start	Query (hidden)	Inline with 10-min rounding JSONata
end	Query (hidden)	Inline with 10-min rounding JSONata

Panel Configuration

Visualization: Table

Queries: One per machine with computed columns for name

Transformations:

1. Merge

2. Organize fields (hide uuid, rename columns)

Field Config:

• Unit: percentunit

• Color mode: continuous-RdYlGr

• Min: 0, Max: 1

Overrides:

• OEE, Availability, Performance, Quality: Cell type = Gauge

Options:

• Footer: Show with Mean calculation

• Cell height: Small

• Sort: By Machine name (ascending)

---

Comparison: Production Runs vs Productivity Metrics

Feature	production-runs	productivity-metrics
Method	GET	POST
Time format	Any ISO datetime	10-minute aligned
OEE level	Per production run	Aggregated over time range
Setup complexity	Simple	Requires aligned time variables
Multiple time ranges	Not supported	Supported (array of ranges)
Best for	Quick dashboards	Shift reports, daily summaries

When to use each:

• Simple dashboards with time picker: Use production-runs with ${__from:date:iso}

• Shift-based reports: Use productivity-metrics with aligned time variables

• Historical comparisons: Use productivity-metrics with multiple datetime_ranges

---

Practical Exercise

Build a department OEE dashboard with:

1. Variables:

   • Site dropdown

   • Hidden start and end variables with 10-minute rounding

2. OEE Table:

   • Queries for 5 machines (Kiefel, Macchi, Alpine, Reifenhauser, W&H Varex)

   • Merge transformation

   • Gauge cells with RdYlGr color scale

   • Footer with mean averages

3. Summary Stats:

   • Department average OEE (single stat panel)

   • Calculated using same queries with Reduce transformation

---

Summary

You've learned to build OEE dashboards with aggregated metrics:

• The productivity-metrics endpoint requires 10-minute aligned datetime ranges

• Create hidden variables with JSONata to round times automatically

• Use multiple queries with computed columns for multi-machine tables

• Apply Merge transformation to combine results

• Style with gauge cells and continuous color scales

• Show department averages with table footers

---

What's Next?

Continue with:

• Downtime Reporting – Analyse machine downtime data

---

Quick Reference

10-Minute Rounding JSONata

(
  $time_millis := $number($.time);
  $time_rounded := $time_millis - ($time_millis % 600000);
  $fromMillis($time_rounded)
)

POST Request Body

{
  "datetime_ranges": [
    {
      "start": "${start}",
      "end": "${end}"
    }
  ]
}

JSONata for OEE Extraction

$map($.data, function($v) {
  {
    "productivity": $v.productivity.score,
    "availability": $v.availability.score,
    "performance": $v.performance.score,
    "quality": $exists($v.quality) ? $v.quality.score : 1
  }
})

Computed Column for Machine Name

Selector	Title	Type
"Machine Name Here"	Machine	String

Field Overrides for Gauge Cells

{
  "matcher": { "id": "byName", "options": "OEE" },
  "properties": [
    {
      "id": "custom.cellOptions",
      "value": { "mode": "basic", "type": "gauge" }
    }
  ]
}