8. Card Design — Radial Gauge
In this step, the Radial Gauge widget's outer card appearance is configured. Because the gauge displays live values, a short refresh interval matters.
Wizard route: /cartography/add/carddesign
Prerequisite
Steps 1, 2, 3, and 4 of the Radial Gauge flow must be completed (5, 6, 7 are skipped).
1. General Settings
| Field | Description | Unit |
|---|---|---|
| Chart Name | Title shown at the top of the card (e.g., "Line-3 OEE") | text |
| Chart Refresh Interval | Data refetch period | seconds |
Refresh Interval Recommendation for Radial Gauge
Because the gauge displays instantaneous values, a short refresh is important.
| Data Source | Recommended Refresh |
|---|---|
| MQTT (live) | 0 (instant stream) |
| SQL — sensor data | 5 - 10 sec |
| SQL — OEE calculation | 30 - 60 sec |
| REST API | 60 - 300 sec |
Too-Frequent Refresh
Chart Refresh Interval < 5 seconds increases database load. Providing live data via MQTT is the best approach.
2. Card Display
| Field | Description | Type |
|---|---|---|
| Card Background Color | Background color | color |
| Card Title Position | Left / Center / Right | enum |
| Card Title Color | Title text color | color |
| Card Title Font Size | Title font size | px |
3. Info Card
The info card is ideal for gauges to explain threshold definitions, calculation formulas, or target values.
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible |
| Info Card Content | Markdown editor |
| Expand Editor | Full-screen editor |
## OEE Calculation
- **Availability** × **Performance** × **Quality**
- Target: ≥ 85%
Color Codes:
- 🔴 0-60: Critical
- 🟡 60-85: Warning
- 🟢 85-100: Target
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing | px |
5. Border
| Field | Description | Unit |
|---|---|---|
| Border Color | Card border color | color |
| Border Radius | Corner rounding radius | px |
| Border Width | Border thickness | px |
6. Shadow (if available)
| Field | Description |
|---|---|
| Shadow Blur | Shadow softness |
| Shadow Offset X / Y | Shadow direction offset |
| Shadow Opacity | Shadow transparency |
7. Confirmation
When you click the Next button at the top right, flow.hasCardDesign = true is marked.