8. Card Design — Range Column
In this step, the Range Column 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 |
text |
| Chart Refresh Interval |
Data refetch period |
seconds |
Refresh Interval Recommendation for Range Column
Since Range Column is typically fed by aggregate queries, longer refresh intervals are recommended.
| Scenario |
Recommended Refresh |
| Daily min/max temperature |
300 - 600 sec |
| Shift-based pressure range |
300 sec |
| Hourly range (real-time) |
60 - 120 sec |
| Historical date analysis (fixed) |
0 (manual) |
2. Card Display
| Field |
Description |
Type |
| Card Background Color |
Card 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 documenting range definitions, threshold values, or alarm bands in Range Column widgets.
| Field |
Description |
| Show Info Card |
Whether the info card is visible |
| Info Card Content |
Markdown editor |
| Expand Editor |
Full-screen editor |
## Temperature Range
- Normal: **65 - 85 °C**
- Warning: 85 - 95 °C
- Critical: > 95 °C
> Color By: Shift (S1=blue, S2=orange, S3=green)
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.
8. Next Step
→ 09 — Display Information