8. Card Design — Standard Cartesian
In this step, the widget's outer card appearance is configured: card background, card title, refresh interval, padding, border, shadow, and info card (Markdown).
On the left is the form, on the right is the live card preview.
Wizard route: /cartography/add/carddesign
1. General Settings
| Field | Description | Unit / Type |
|---|---|---|
| Chart Name | Title shown at the top of the card | text |
| Chart Refresh Interval | Data refetch period | seconds |
Refresh Interval Recommendation for Standard Cartesian
| Data Source | Recommended Refresh | Rationale |
|---|---|---|
| MQTT (live) | 0 |
Real-time stream is already coming — unnecessary fetch |
| SQL — hourly trend | 30 - 60 sec |
Data usually changes within minutes |
| SQL — shift-based | 300 sec |
Checking once every 5 minutes is sufficient |
| REST API (ERP / MES) | 300 - 900 sec |
Depending on cache policy |
| Excel Offline | 0 |
Manual update; refresh is not meaningful |
Below 5 seconds
Chart Refresh Interval < 5 seconds increases database load and unnecessarily inflates network traffic. Combine with MQTT or use TimescaleDB continuous aggregation on the backend.
2. Card Display
| Field | Description | Type |
|---|---|---|
| Card Background Color | Card background color | color |
| Card Title Position | Title alignment | Left / Center / Right |
| Card Title Color | Title text color | color |
| Card Title Font Size | Title font size | px |
Card Title vs Chart Title
The card title appears at the outer top of the widget card (e.g., listed in the dashboard). The chart title (step 7) is on the chart drawing area. The two are different; you do not have to fill in both.
3. Info Card
The info card is used to add additional explanation, formula, or operator note to the widget. It is written in Markdown format.
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible (toggle) |
| Info Card Content | Markdown editor — supports headings, lists, links, bold/italic |
| Expand Editor | Button to open the editor full screen |
Info Card Use Cases for Standard Cartesian
- In a trend chart explain the formula: "OEE = Availability × Performance × Quality"
- In a Shift Column show shift definitions (S1: 06-14, S2: 14-22, S3: 22-06)
- Threshold values warning in a Line chart: "≥ 85 °C → schedule maintenance"
## Line-3 Temperature Trend
- Target: ≤ 85 °C
- Operator note: Report values above 90 °C
> Hourly average; data comes from TimescaleDB with 5 min continuous agg.
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing (between card edge and chart) | px |
Padding in a Dense Dashboard
If 6+ widgets are side by side on a Horizon dashboard, keep Padding at 8-12 px; let the chart area be at maximum.
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)
In some theme versions, a shadow area is also visible:
| 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 and you proceed to the final step.