8. Card Design — Stacked Cartesian
In this step, the Stacked widget's outer card appearance is configured: card background, card title, refresh interval, padding, border, info card.
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 Stacked
Since the Stacked flow is typically fed by aggregate queries, longer refresh intervals are recommended.
| Scenario | Recommended Refresh |
|---|---|
| Shift-based Stacked Column | 300 - 600 sec |
| Monthly Stacked Bar | 3600 sec (hourly) |
| Daily Stacked Area trend | 300 - 900 sec |
| 100% Stacked mixed analysis | 600 - 1800 sec |
Frequent Refresh in Stacked
Stack By categories are recalculated on every refresh. Very frequent refresh (under 5 seconds) both increases database load and can cause the stack color palette to realign unexpectedly.
2. Card Display
| Field | Description | Type |
|---|---|---|
| Card Background Color | Card background color | color |
| Card Title Position | Title alignment: 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 showing layer definitions, category descriptions, or calculation formulas in Stacked widgets.
| Field | Description |
|---|---|
| Show Info Card | Whether the info card is visible (toggle) |
| Info Card Content | Markdown editor |
| Expand Editor | Button to open the editor full screen |
## Shift × Product Distribution
- **S1**: 06:00 - 14:00
- **S2**: 14:00 - 22:00
- **S3**: 22:00 - 06:00
> Top-5 products shown; the rest are grouped as **Other**.
4. Spacing
| Field | Description | Unit |
|---|---|---|
| Padding | Card inner spacing | px |
Padding in Stacked
If the legend is outside (right/bottom), keep Padding at 12-16 px to prevent legend overflow.
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.