robobyte-front-builder 1.0.26 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +65 -0
- package/README.md +57 -0
- package/docs/ReportViewer.md +581 -0
- package/docs/fetchReportData.md +379 -0
- package/docs/printLayout.md +405 -0
- package/package.json +29 -1
- package/training/00-index.md +168 -0
- package/training/01-input.md +144 -0
- package/training/02-checkbox.md +107 -0
- package/training/03-dropdown.md +135 -0
- package/training/04-datepicker.md +139 -0
- package/training/05-radio.md +123 -0
- package/training/06-number.md +133 -0
- package/training/07-textarea.md +114 -0
- package/training/08-richtext.md +112 -0
- package/training/09-tag.md +110 -0
- package/training/10-time.md +107 -0
- package/training/11-toggle.md +108 -0
- package/training/12-signature.md +107 -0
- package/training/13-autocomplete.md +134 -0
- package/training/14-button.md +168 -0
- package/training/15-label.md +138 -0
- package/training/16-header.md +128 -0
- package/training/17-divider.md +96 -0
- package/training/18-image.md +105 -0
- package/training/19-link.md +108 -0
- package/training/20-banner.md +122 -0
- package/training/21-progress-circle.md +101 -0
- package/training/22-progress-line.md +93 -0
- package/training/23-menu.md +139 -0
- package/training/24-popover.md +114 -0
- package/training/25-layout.md +116 -0
- package/training/26-layout-cell.md +143 -0
- package/training/27-card.md +87 -0
- package/training/28-wizard.md +126 -0
- package/training/29-wizard-step.md +92 -0
- package/training/30-repeater.md +123 -0
- package/training/31-dialog.md +131 -0
- package/training/32-breadcrumb.md +121 -0
- package/training/33-dataGrid.md +129 -0
- package/training/34-dataTableViewer.md +115 -0
- package/training/35-reportViewer.md +673 -0
- package/training/36-viewRenderer.md +110 -0
- package/training/37-treeView.md +170 -0
- package/training/38-kpi-metric.md +148 -0
- package/training/39-kpi-trend.md +105 -0
- package/training/40-kpi-badge.md +112 -0
- package/training/41-kpi-statusDot.md +118 -0
- package/training/42-kpi-iconBox.md +114 -0
- package/training/43-kpi-gauge.md +143 -0
- package/training/44-kpi-bulletChart.md +126 -0
- package/training/45-kpi-colorScale.md +143 -0
- package/training/46-kpi-rating.md +125 -0
- package/training/47-kpi-countdown.md +151 -0
- package/training/48-fetchReportData.md +276 -0
- package/training/49-printLayout.md +215 -0
- package/training/examples/01-login-form.json +176 -0
- package/training/examples/02-contact-form.json +141 -0
- package/training/examples/03-kpi-cards-row.json +123 -0
- package/training/examples/04-settings-toggles.json +153 -0
- package/training/examples/05-user-profile-card.json +136 -0
- package/training/examples/06-date-range-filter.json +108 -0
- package/training/examples/07-search-bar-results.json +130 -0
- package/training/examples/08-notification-settings.json +131 -0
- package/training/examples/09-employee-profile-form.json +259 -0
- package/training/examples/10-invoice-form.json +241 -0
- package/training/examples/11-dashboard-overview.json +251 -0
- package/training/examples/12-registration-wizard.json +154 -0
- package/training/examples/13-product-catalog.json +168 -0
- package/training/examples/14-data-table-with-filters.json +180 -0
- package/training/examples/15-tabbed-profile.json +92 -0
- package/training/examples/16-kpi-full-row.json +203 -0
- package/training/examples/17-tree-detail-view.json +139 -0
- package/training/examples/18-employee-management.json +233 -0
- package/training/examples/19-sales-dashboard.json +272 -0
- package/training/examples/20-checkout-wizard.json +225 -0
- package/training/examples/21-analytics-page.json +222 -0
- package/training/examples/22-hr-onboarding.json +222 -0
- package/training/examples/23-document-browser.json +241 -0
- package/training/examples/24-order-management.json +290 -0
- package/training/examples/25-crm-contact-page.json +272 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "3-step checkout wizard: cart review, shipping info, payment — with order summary KPI",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "wizard", "wizard-step", "header", "label", "input", "dropdown", "number", "checkbox", "datepicker", "kpi-metric", "divider", "button"],
|
|
4
|
+
"root": {
|
|
5
|
+
"type": "layout",
|
|
6
|
+
"props": { "cols": 1, "rowGap": 0 },
|
|
7
|
+
"children": [
|
|
8
|
+
{
|
|
9
|
+
"type": "layout-cell",
|
|
10
|
+
"props": {},
|
|
11
|
+
"style": {},
|
|
12
|
+
"children": [
|
|
13
|
+
{
|
|
14
|
+
"type": "layout",
|
|
15
|
+
"props": { "cols": 3, "gap": 24 },
|
|
16
|
+
"children": [
|
|
17
|
+
{
|
|
18
|
+
"type": "layout-cell",
|
|
19
|
+
"props": { "colSpan": 2 },
|
|
20
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "overflow": "hidden" },
|
|
21
|
+
"children": [
|
|
22
|
+
{
|
|
23
|
+
"type": "wizard",
|
|
24
|
+
"props": {
|
|
25
|
+
"key": "checkout",
|
|
26
|
+
"variant": "linear",
|
|
27
|
+
"orientation": "horizontal",
|
|
28
|
+
"showStepNumbers": false,
|
|
29
|
+
"showProgress": true,
|
|
30
|
+
"completeLabel": "Place Order",
|
|
31
|
+
"nextLabel": "Continue",
|
|
32
|
+
"backLabel": "Back"
|
|
33
|
+
},
|
|
34
|
+
"children": [
|
|
35
|
+
{
|
|
36
|
+
"type": "wizard-step",
|
|
37
|
+
"props": { "label": "Cart Review", "description": "Confirm items" },
|
|
38
|
+
"children": [
|
|
39
|
+
{
|
|
40
|
+
"type": "layout",
|
|
41
|
+
"props": { "cols": 1, "rowGap": 16 },
|
|
42
|
+
"children": [
|
|
43
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
44
|
+
{ "type": "header", "props": { "text": "Your Cart", "variant": "h5", "component": "h2", "color": "textPrimary" } }
|
|
45
|
+
]},
|
|
46
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
47
|
+
{ "type": "label", "props": { "text": "data.cart.items.length + ' items in your cart'", "variant": "body2", "color": "textSecondary" } }
|
|
48
|
+
]},
|
|
49
|
+
{ "type": "layout-cell", "props": {}, "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "gap": "8px" }, "children": [
|
|
50
|
+
{ "type": "label", "props": { "text": "data.cartSummary", "variant": "body2", "color": "textPrimary" } }
|
|
51
|
+
]},
|
|
52
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
53
|
+
{
|
|
54
|
+
"type": "dropdown",
|
|
55
|
+
"props": {
|
|
56
|
+
"key": "promoCode",
|
|
57
|
+
"label": "Promo Code (optional)",
|
|
58
|
+
"fullWidth": true,
|
|
59
|
+
"freeSolo": true,
|
|
60
|
+
"placeholder": "Enter promo code...",
|
|
61
|
+
"optionsKey": "data.savedPromoCodes",
|
|
62
|
+
"labelField": "code",
|
|
63
|
+
"valueField": "code"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
]},
|
|
67
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
68
|
+
{ "type": "checkbox", "props": { "key": "giftWrap", "label": "Add gift wrapping (+$5.00)", "labelPosition": "right" } }
|
|
69
|
+
]}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"type": "wizard-step",
|
|
76
|
+
"props": { "label": "Shipping", "description": "Where to deliver" },
|
|
77
|
+
"children": [
|
|
78
|
+
{
|
|
79
|
+
"type": "layout",
|
|
80
|
+
"props": { "cols": 2, "gap": 16, "rowGap": 16 },
|
|
81
|
+
"children": [
|
|
82
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
83
|
+
{ "type": "header", "props": { "text": "Shipping Information", "variant": "h5", "component": "h2", "color": "textPrimary" } }
|
|
84
|
+
]},
|
|
85
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
86
|
+
{ "type": "input", "props": { "key": "shipFirstName", "label": "First Name", "required": true }, "style": { "width": "100%" } }
|
|
87
|
+
]},
|
|
88
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
89
|
+
{ "type": "input", "props": { "key": "shipLastName", "label": "Last Name", "required": true }, "style": { "width": "100%" } }
|
|
90
|
+
]},
|
|
91
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
92
|
+
{ "type": "input", "props": { "key": "shipAddress1", "label": "Address Line 1", "required": true }, "style": { "width": "100%" } }
|
|
93
|
+
]},
|
|
94
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
95
|
+
{ "type": "input", "props": { "key": "shipAddress2", "label": "Address Line 2 (optional)" }, "style": { "width": "100%" } }
|
|
96
|
+
]},
|
|
97
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
98
|
+
{ "type": "input", "props": { "key": "shipCity", "label": "City", "required": true }, "style": { "width": "100%" } }
|
|
99
|
+
]},
|
|
100
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
101
|
+
{ "type": "input", "props": { "key": "shipZip", "label": "ZIP / Postal Code", "required": true }, "style": { "width": "100%" } }
|
|
102
|
+
]},
|
|
103
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
104
|
+
{
|
|
105
|
+
"type": "dropdown",
|
|
106
|
+
"props": {
|
|
107
|
+
"key": "shippingMethod",
|
|
108
|
+
"label": "Shipping Method",
|
|
109
|
+
"required": true,
|
|
110
|
+
"fullWidth": true,
|
|
111
|
+
"options": [
|
|
112
|
+
{ "label": "Standard (5-7 days) — Free", "value": "standard" },
|
|
113
|
+
{ "label": "Express (2-3 days) — $9.99", "value": "express" },
|
|
114
|
+
{ "label": "Overnight (1 day) — $24.99", "value": "overnight" }
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
]},
|
|
119
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
120
|
+
{ "type": "checkbox", "props": { "key": "saveShipping", "label": "Save this address for future orders", "labelPosition": "right" } }
|
|
121
|
+
]}
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"type": "wizard-step",
|
|
128
|
+
"props": { "label": "Payment", "description": "Secure checkout" },
|
|
129
|
+
"children": [
|
|
130
|
+
{
|
|
131
|
+
"type": "layout",
|
|
132
|
+
"props": { "cols": 2, "gap": 16, "rowGap": 16 },
|
|
133
|
+
"children": [
|
|
134
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
135
|
+
{ "type": "header", "props": { "text": "Payment Details", "variant": "h5", "component": "h2", "color": "textPrimary" } }
|
|
136
|
+
]},
|
|
137
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
138
|
+
{
|
|
139
|
+
"type": "dropdown",
|
|
140
|
+
"props": {
|
|
141
|
+
"key": "paymentMethod",
|
|
142
|
+
"label": "Payment Method",
|
|
143
|
+
"required": true,
|
|
144
|
+
"fullWidth": true,
|
|
145
|
+
"options": [
|
|
146
|
+
{ "label": "Credit Card", "value": "credit" },
|
|
147
|
+
{ "label": "Debit Card", "value": "debit" },
|
|
148
|
+
{ "label": "PayPal", "value": "paypal" }
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
]},
|
|
153
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
154
|
+
{ "type": "input", "props": { "key": "cardName", "label": "Name on Card", "required": true, "prefix": "PersonOutlined" }, "style": { "width": "100%" } }
|
|
155
|
+
]},
|
|
156
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
157
|
+
{ "type": "input", "props": { "key": "cardNumber", "label": "Card Number", "required": true, "prefix": "CreditCardOutlined", "placeholder": "•••• •••• •••• ••••" }, "style": { "width": "100%" } }
|
|
158
|
+
]},
|
|
159
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
160
|
+
{ "type": "datepicker", "props": { "key": "cardExpiry", "label": "Expiry Date", "fullWidth": true, "views": ["month", "year"], "format": "MM/YY" } }
|
|
161
|
+
]},
|
|
162
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
163
|
+
{ "type": "number", "props": { "key": "cvv", "label": "CVV", "required": true, "min": 100, "max": 9999, "placeholder": "•••" }, "style": { "width": "100%" } }
|
|
164
|
+
]},
|
|
165
|
+
{ "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
|
|
166
|
+
{ "type": "checkbox", "props": { "key": "billingIsSame", "label": "Billing address same as shipping", "labelPosition": "right" } }
|
|
167
|
+
]}
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
]
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"type": "layout-cell",
|
|
178
|
+
"props": {},
|
|
179
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
|
|
180
|
+
"children": [
|
|
181
|
+
{
|
|
182
|
+
"type": "layout",
|
|
183
|
+
"props": { "cols": 1, "rowGap": 16 },
|
|
184
|
+
"children": [
|
|
185
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
186
|
+
{ "type": "header", "props": { "text": "Order Summary", "variant": "h6", "component": "h2", "color": "textPrimary" } }
|
|
187
|
+
]},
|
|
188
|
+
{ "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
|
|
189
|
+
{ "type": "label", "props": { "text": "Subtotal", "variant": "body2", "color": "textSecondary" } },
|
|
190
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.cart.subtotal", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "15px", "fontWeight": "500", "align": "right", "labelPosition": "none" } }
|
|
191
|
+
]},
|
|
192
|
+
{ "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
|
|
193
|
+
{ "type": "label", "props": { "text": "Shipping", "variant": "body2", "color": "textSecondary" } },
|
|
194
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.shippingCost", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "15px", "fontWeight": "500", "align": "right", "labelPosition": "none" } }
|
|
195
|
+
]},
|
|
196
|
+
{ "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
|
|
197
|
+
{ "type": "label", "props": { "text": "Tax", "variant": "body2", "color": "textSecondary" } },
|
|
198
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.cart.tax", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "15px", "fontWeight": "500", "align": "right", "labelPosition": "none" } }
|
|
199
|
+
]},
|
|
200
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
201
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
202
|
+
]},
|
|
203
|
+
{ "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
|
|
204
|
+
{ "type": "label", "props": { "text": "Total", "variant": "body1", "color": "textPrimary", "fontWeight": "700" } },
|
|
205
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.cart.total", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "22px", "fontWeight": "700", "align": "right", "labelPosition": "none", "color": "primary.main" } }
|
|
206
|
+
]},
|
|
207
|
+
{ "type": "layout-cell", "props": {}, "style": { "padding": "8px 0 0 0" }, "children": [
|
|
208
|
+
{ "type": "label", "props": { "text": "🔒 Your payment is encrypted and secure", "variant": "caption", "color": "textSecondary", "align": "center" } }
|
|
209
|
+
]}
|
|
210
|
+
]
|
|
211
|
+
}
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
]
|
|
215
|
+
}
|
|
216
|
+
]
|
|
217
|
+
}
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
"dialogs": [],
|
|
221
|
+
"actions": [
|
|
222
|
+
{ "key": "onCheckoutComplete", "type": "custom", "code": "placeOrder({ cart: data.cart, shipping: { firstName: form.shipFirstName, lastName: form.shipLastName, address1: form.shipAddress1, city: form.shipCity, zip: form.shipZip, method: form.shippingMethod }, payment: { method: form.paymentMethod, cardName: form.cardName } })" }
|
|
223
|
+
],
|
|
224
|
+
"timers": []
|
|
225
|
+
}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
{
|
|
2
|
+
"description": "Analytics page with metrics, color scales, countdown to next report, tree nav, and embedded report",
|
|
3
|
+
"components_used": ["layout", "layout-cell", "header", "label", "dropdown", "button", "kpi-metric", "kpi-trend", "kpi-colorScale", "kpi-countdown", "kpi-iconBox", "treeView", "reportViewer", "divider"],
|
|
4
|
+
"root": {
|
|
5
|
+
"type": "layout",
|
|
6
|
+
"props": { "cols": 1, "rowGap": 24 },
|
|
7
|
+
"children": [
|
|
8
|
+
{
|
|
9
|
+
"type": "layout-cell",
|
|
10
|
+
"props": {},
|
|
11
|
+
"style": { "justifyContent": "space-between", "alignItems": "center" },
|
|
12
|
+
"children": [
|
|
13
|
+
{ "type": "header", "props": { "text": "Analytics Center", "variant": "h4", "component": "h1", "color": "textPrimary" } },
|
|
14
|
+
{
|
|
15
|
+
"type": "layout",
|
|
16
|
+
"props": { "cols": 1, "rowGap": 0 },
|
|
17
|
+
"children": [
|
|
18
|
+
{ "type": "layout-cell", "props": {}, "style": { "gap": "10px", "alignItems": "center" }, "children": [
|
|
19
|
+
{
|
|
20
|
+
"type": "dropdown",
|
|
21
|
+
"props": {
|
|
22
|
+
"key": "timeWindow",
|
|
23
|
+
"label": "Time Window",
|
|
24
|
+
"size": "small",
|
|
25
|
+
"options": [
|
|
26
|
+
{ "label": "Last 24 Hours", "value": "24h" },
|
|
27
|
+
{ "label": "Last 7 Days", "value": "7d" },
|
|
28
|
+
{ "label": "Last 30 Days", "value": "30d" },
|
|
29
|
+
{ "label": "Last 90 Days", "value": "90d" }
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
"actions": { "onChange": { "type": "custom", "code": "loadAnalytics(form.timeWindow)" } }
|
|
33
|
+
},
|
|
34
|
+
{ "type": "button", "props": { "label": "Export", "variant": "outlined", "color": "inherit", "size": "small", "prefix": "DownloadOutlined" } }
|
|
35
|
+
]}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"type": "layout-cell",
|
|
42
|
+
"props": {},
|
|
43
|
+
"style": {},
|
|
44
|
+
"children": [
|
|
45
|
+
{
|
|
46
|
+
"type": "layout",
|
|
47
|
+
"props": { "cols": 5, "gap": 14 },
|
|
48
|
+
"children": [
|
|
49
|
+
{
|
|
50
|
+
"type": "layout-cell",
|
|
51
|
+
"props": {},
|
|
52
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "18px" },
|
|
53
|
+
"children": [
|
|
54
|
+
{ "type": "kpi-iconBox", "props": { "valueKey": "data.pageViews", "label": "Page Views", "icon": "VisibilityOutlined", "iconSize": "28px", "format": "number", "decimals": 0, "fontSize": "24px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } },
|
|
55
|
+
{ "type": "kpi-trend", "props": { "valueKey": "data.pageViewsGrowth", "label": "vs prior", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"type": "layout-cell",
|
|
60
|
+
"props": {},
|
|
61
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "18px" },
|
|
62
|
+
"children": [
|
|
63
|
+
{ "type": "kpi-iconBox", "props": { "valueKey": "data.sessions", "label": "Sessions", "icon": "DevicesOutlined", "iconSize": "28px", "format": "number", "fontSize": "24px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } },
|
|
64
|
+
{ "type": "kpi-trend", "props": { "valueKey": "data.sessionsGrowth", "label": "vs prior", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"type": "layout-cell",
|
|
69
|
+
"props": {},
|
|
70
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "18px" },
|
|
71
|
+
"children": [
|
|
72
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.bounceRate", "label": "Bounce Rate", "format": "percent", "decimals": 1, "fontSize": "24px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } },
|
|
73
|
+
{ "type": "kpi-trend", "props": { "valueKey": "data.bounceRateDelta", "label": "vs prior", "isPercent": false, "decimals": 2, "variant": "chip", "size": "small", "showIcon": true, "invertColors": true } }
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"type": "layout-cell",
|
|
78
|
+
"props": {},
|
|
79
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "18px" },
|
|
80
|
+
"children": [
|
|
81
|
+
{ "type": "kpi-metric", "props": { "valueKey": "data.avgSessionDuration", "label": "Avg Duration", "format": "number", "decimals": 0, "suffix": " sec", "fontSize": "24px", "fontWeight": "700", "align": "left", "labelPosition": "above", "labelFontSize": "11px", "labelColor": "text.secondary" } },
|
|
82
|
+
{ "type": "kpi-trend", "props": { "valueKey": "data.durationDelta", "label": "vs prior", "isPercent": true, "decimals": 0, "variant": "chip", "size": "small", "showIcon": true } }
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"type": "layout-cell",
|
|
87
|
+
"props": {},
|
|
88
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "18px" },
|
|
89
|
+
"children": [
|
|
90
|
+
{ "type": "label", "props": { "text": "Next Report", "variant": "overline", "color": "textSecondary" } },
|
|
91
|
+
{ "type": "kpi-countdown", "props": { "targetDateKey": "data.nextReportAt", "showDays": false, "showHours": true, "showMinutes": true, "showSeconds": false, "size": "medium", "color": "primary.main" } }
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"type": "layout-cell",
|
|
100
|
+
"props": {},
|
|
101
|
+
"style": {},
|
|
102
|
+
"children": [
|
|
103
|
+
{ "type": "header", "props": { "text": "Performance Heatmap", "variant": "h6", "color": "textSecondary" } }
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"type": "layout-cell",
|
|
108
|
+
"props": {},
|
|
109
|
+
"style": {},
|
|
110
|
+
"children": [
|
|
111
|
+
{
|
|
112
|
+
"type": "layout",
|
|
113
|
+
"props": { "cols": 2, "gap": 16 },
|
|
114
|
+
"children": [
|
|
115
|
+
{
|
|
116
|
+
"type": "layout-cell",
|
|
117
|
+
"props": {},
|
|
118
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
|
|
119
|
+
"children": [
|
|
120
|
+
{ "type": "label", "props": { "text": "Page Load Time", "variant": "overline", "color": "textSecondary" } },
|
|
121
|
+
{ "type": "kpi-colorScale", "props": { "valueKey": "data.pageLoadTime", "label": "milliseconds", "min": 0, "max": 5000, "steps": 5, "format": "number", "decimals": 0, "showValue": true, "thresholds": [{ "operator": "<=", "value": 1000, "color": "success.main", "label": "Fast" }, { "operator": "<=", "value": 2000, "color": "info.main", "label": "OK" }, { "operator": "<=", "value": 3000, "color": "warning.main", "label": "Slow" }, { "operator": ">", "value": 3000, "color": "error.main", "label": "Critical" }] } }
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "layout-cell",
|
|
126
|
+
"props": {},
|
|
127
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
|
|
128
|
+
"children": [
|
|
129
|
+
{ "type": "label", "props": { "text": "Error Rate", "variant": "overline", "color": "textSecondary" } },
|
|
130
|
+
{ "type": "kpi-colorScale", "props": { "valueKey": "data.errorRatePercent", "label": "% of requests", "min": 0, "max": 10, "steps": 4, "format": "percent", "decimals": 2, "showValue": true, "thresholds": [{ "operator": "<=", "value": 0.5, "color": "success.main", "label": "Healthy" }, { "operator": "<=", "value": 2, "color": "warning.main", "label": "Warning" }, { "operator": ">", "value": 2, "color": "error.main", "label": "Critical" }] } }
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"type": "layout-cell",
|
|
139
|
+
"props": {},
|
|
140
|
+
"style": {},
|
|
141
|
+
"children": [
|
|
142
|
+
{ "type": "divider", "props": { "orientation": "horizontal" } }
|
|
143
|
+
]
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"type": "layout-cell",
|
|
147
|
+
"props": {},
|
|
148
|
+
"style": {},
|
|
149
|
+
"children": [
|
|
150
|
+
{
|
|
151
|
+
"type": "layout",
|
|
152
|
+
"props": { "cols": 3, "gap": 0 },
|
|
153
|
+
"children": [
|
|
154
|
+
{
|
|
155
|
+
"type": "layout-cell",
|
|
156
|
+
"props": {},
|
|
157
|
+
"style": { "backgroundColor": "#ffffff", "borderRadius": "12px 0 0 12px", "borderRight": "1px solid #e8e8e8", "padding": "16px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)" },
|
|
158
|
+
"children": [
|
|
159
|
+
{
|
|
160
|
+
"type": "layout",
|
|
161
|
+
"props": { "cols": 1, "rowGap": 8 },
|
|
162
|
+
"children": [
|
|
163
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
164
|
+
{ "type": "label", "props": { "text": "Reports", "variant": "overline", "color": "textSecondary" } }
|
|
165
|
+
]},
|
|
166
|
+
{ "type": "layout-cell", "props": {}, "style": {}, "children": [
|
|
167
|
+
{
|
|
168
|
+
"type": "treeView",
|
|
169
|
+
"props": {
|
|
170
|
+
"dataKey": "data.reportTree",
|
|
171
|
+
"idField": "id",
|
|
172
|
+
"labelField": "name",
|
|
173
|
+
"childrenField": "children",
|
|
174
|
+
"selectedKey": "data.selectedReportId",
|
|
175
|
+
"selectable": true,
|
|
176
|
+
"defaultIcon": "FolderOutlined",
|
|
177
|
+
"leafIcon": "BarChartOutlined",
|
|
178
|
+
"dense": true,
|
|
179
|
+
"showLines": false,
|
|
180
|
+
"height": "400px",
|
|
181
|
+
"fontSize": "13px",
|
|
182
|
+
"selectedBg": "#e3f2fd"
|
|
183
|
+
},
|
|
184
|
+
"actions": {
|
|
185
|
+
"onSelectCode": "if (selectedNode.isLeaf) setData({ selectedReportId: selectedNode.id })"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
]}
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
]
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"type": "layout-cell",
|
|
195
|
+
"props": { "colSpan": 2 },
|
|
196
|
+
"style": { "backgroundColor": "#f8f9fa", "borderRadius": "0 12px 12px 0", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
|
|
197
|
+
"children": [
|
|
198
|
+
{
|
|
199
|
+
"type": "reportViewer",
|
|
200
|
+
"props": {
|
|
201
|
+
"key": "analyticsReport",
|
|
202
|
+
"id": "data.selectedReportId",
|
|
203
|
+
"pageId": "analytics",
|
|
204
|
+
"height": "430px",
|
|
205
|
+
"refresh": true,
|
|
206
|
+
"filter": { "timeWindow": "form.timeWindow" }
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
]
|
|
210
|
+
}
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
},
|
|
217
|
+
"dialogs": [],
|
|
218
|
+
"actions": [],
|
|
219
|
+
"timers": [
|
|
220
|
+
{ "key": "analyticsRefresh", "interval": 60000, "action": { "type": "custom", "code": "loadAnalytics(form.timeWindow)" } }
|
|
221
|
+
]
|
|
222
|
+
}
|