8. Card Design — DataGrid (Table)
In this step, the DataGrid widget's outer card appearance is configured.
Wizard route: /cartography/add/carddesign
1. General Settings
| Field | Description | Unit |
|---|---|---|
| Chart Name | Title shown at the top of the card (e.g., "Active Alarms") | text |
| Chart Refresh Interval | Data refetch period | seconds |
Refresh Interval Recommendation for DataGrid
| Scenario | Recommended Refresh |
|---|---|
| Active alarm list | 15 - 30 sec |
| Shift production log | 60 - 300 sec |
| Maintenance history | 300 - 600 sec |
| Recipe parameters (static) | 0 (manual) |
| Last sensor reading | 30 - 60 sec |
Too-Frequent Refresh
DataGrid may reset page position, sort order, and filters on every refresh. To avoid disrupting user interaction with the table during refresh, a Refresh Interval ≥ 30 sec is recommended.
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
## Active Alarms
- 🔴 **High**: Stop the line, call maintenance
- 🟡 **Medium**: End-of-shift report
- ⚪ **Low**: Informational only
> Last 24 hours, max 500 rows
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible |
| Info Card Content | Markdown editor |
| Expand Editor | Full-screen editor |
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing | px |
DataGrid Padding
Because DataGrid has many columns, keep Padding at 8-12 px so the table has maximum room.
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.