8. Card Design — Circular
In this step, the Circular 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 Circular
| Scenario | Recommended Refresh |
|---|---|
| Shift-based share (instant) | 60 - 120 sec |
| Daily distribution | 300 - 600 sec |
| Monthly summary | 3600 sec |
| Radial Bar — OEE machine tracking | 30 - 60 sec |
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
In Circular, the info card is ideal for category definitions, calculation description, or share-based formulas.
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible |
| Info Card Content | Markdown editor |
| Expand Editor | Full-screen editor |
## Shift Production Share
- **S1**: 06:00-14:00
- **S2**: 14:00-22:00
- **S3**: 22:00-06:00
> Top-3 shifts shown; the rest are grouped as **Other**.
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing | px |
Pie/Doughnut Padding
Circular cards are often used alongside other widgets. Keep Padding at 12-16 px; legend and slices won't press against the card edge.
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.