@kubex/zinc 1.0.106 → 1.0.107
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/dist/custom-elements.json +183 -83
- package/dist/vscode.html-custom-data.json +19 -10
- package/dist/web-types.json +56 -45
- package/dist/zn.d.ts +66 -34
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +1006 -1907
- package/docs/pages/components/chart.md +134 -8
- package/docs/pages/components/simple-chart.md +20 -5
- package/docs/pages/components/stat.md +531 -401
- package/package.json +5 -6
- package/src/components/chart/builders.test.ts +211 -0
- package/src/components/chart/builders.ts +221 -0
- package/src/components/chart/chart.component.ts +182 -173
- package/src/components/chart/chart.scss +0 -1
- package/src/components/chart/chart.test.ts +48 -4
- package/src/components/editor/modules/context-menu/context-menu.ts +2 -1
- package/src/components/rating/rating.component.ts +2 -1
- package/src/components/simple-chart/simple-chart.component.ts +72 -180
|
@@ -6,7 +6,11 @@ layout: component
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
```html:preview
|
|
9
|
-
<zn-
|
|
9
|
+
<zn-cols>
|
|
10
|
+
<zn-panel>
|
|
11
|
+
<zn-stat caption="Total Revenue" description="This month" amount="48250" previous="42100" currency="$" show-delta></zn-stat>
|
|
12
|
+
</zn-panel>
|
|
13
|
+
</zn-cols>
|
|
10
14
|
```
|
|
11
15
|
|
|
12
16
|
## Examples
|
|
@@ -16,7 +20,11 @@ layout: component
|
|
|
16
20
|
A basic stat displays a caption, description, and amount.
|
|
17
21
|
|
|
18
22
|
```html:preview
|
|
19
|
-
<zn-
|
|
23
|
+
<zn-cols>
|
|
24
|
+
<zn-panel>
|
|
25
|
+
<zn-stat caption="Total Users" description="Active accounts" amount="1247"></zn-stat>
|
|
26
|
+
</zn-panel>
|
|
27
|
+
</zn-cols>
|
|
20
28
|
```
|
|
21
29
|
|
|
22
30
|
### Currency Formatting
|
|
@@ -25,9 +33,15 @@ Use the `currency` attribute to automatically format monetary values with proper
|
|
|
25
33
|
|
|
26
34
|
```html:preview
|
|
27
35
|
<zn-cols>
|
|
28
|
-
<zn-
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
<zn-panel>
|
|
37
|
+
<zn-stat caption="Monthly Revenue" description="January 2026" amount="125750.50" currency="$" color="success"></zn-stat>
|
|
38
|
+
</zn-panel>
|
|
39
|
+
<zn-panel>
|
|
40
|
+
<zn-stat caption="Total Sales" description="This quarter" amount="487999.99" currency="$" color="info"></zn-stat>
|
|
41
|
+
</zn-panel>
|
|
42
|
+
<zn-panel>
|
|
43
|
+
<zn-stat caption="Outstanding Balance" description="Accounts receivable" amount="23450" currency="$" color="warning"></zn-stat>
|
|
44
|
+
</zn-panel>
|
|
31
45
|
</zn-cols>
|
|
32
46
|
```
|
|
33
47
|
|
|
@@ -37,9 +51,15 @@ Use `type="percent"` to display percentage metrics.
|
|
|
37
51
|
|
|
38
52
|
```html:preview
|
|
39
53
|
<zn-cols>
|
|
40
|
-
<zn-
|
|
41
|
-
|
|
42
|
-
|
|
54
|
+
<zn-panel>
|
|
55
|
+
<zn-stat caption="Conversion Rate" description="Last 30 days" amount="4.8" type="percent" color="success"></zn-stat>
|
|
56
|
+
</zn-panel>
|
|
57
|
+
<zn-panel>
|
|
58
|
+
<zn-stat caption="Bounce Rate" description="Website visitors" amount="32.5" type="percent" color="warning"></zn-stat>
|
|
59
|
+
</zn-panel>
|
|
60
|
+
<zn-panel>
|
|
61
|
+
<zn-stat caption="Growth" description="Year over year" amount="127.3" type="percent" color="info"></zn-stat>
|
|
62
|
+
</zn-panel>
|
|
43
63
|
</zn-cols>
|
|
44
64
|
```
|
|
45
65
|
|
|
@@ -49,9 +69,15 @@ Use `type="time"` to display time values in seconds, which will be formatted as
|
|
|
49
69
|
|
|
50
70
|
```html:preview
|
|
51
71
|
<zn-cols>
|
|
52
|
-
<zn-
|
|
53
|
-
|
|
54
|
-
|
|
72
|
+
<zn-panel>
|
|
73
|
+
<zn-stat caption="Avg. Session Time" description="User engagement" amount="245" type="time" color="info"></zn-stat>
|
|
74
|
+
</zn-panel>
|
|
75
|
+
<zn-panel>
|
|
76
|
+
<zn-stat caption="Processing Time" description="Last job" amount="3665" type="time" color="success"></zn-stat>
|
|
77
|
+
</zn-panel>
|
|
78
|
+
<zn-panel>
|
|
79
|
+
<zn-stat caption="Response Time" description="API average" amount="45" type="time" color="primary"></zn-stat>
|
|
80
|
+
</zn-panel>
|
|
55
81
|
</zn-cols>
|
|
56
82
|
```
|
|
57
83
|
|
|
@@ -61,9 +87,15 @@ Use the `show-delta` attribute with `previous` to show the percentage change fro
|
|
|
61
87
|
|
|
62
88
|
```html:preview
|
|
63
89
|
<zn-cols>
|
|
64
|
-
<zn-
|
|
65
|
-
|
|
66
|
-
|
|
90
|
+
<zn-panel>
|
|
91
|
+
<zn-stat caption="New Users" description="This week" amount="324" previous="280" show-delta color="success"></zn-stat>
|
|
92
|
+
</zn-panel>
|
|
93
|
+
<zn-panel>
|
|
94
|
+
<zn-stat caption="Revenue" description="This month" amount="45600" previous="52300" currency="$" show-delta color="error"></zn-stat>
|
|
95
|
+
</zn-panel>
|
|
96
|
+
<zn-panel>
|
|
97
|
+
<zn-stat caption="Conversion Rate" description="Last 30 days" amount="3.2" previous="3.2" type="percent" show-delta color="neutral"></zn-stat>
|
|
98
|
+
</zn-panel>
|
|
67
99
|
</zn-cols>
|
|
68
100
|
```
|
|
69
101
|
|
|
@@ -73,12 +105,24 @@ Use the `color` attribute to set the semantic color of the stat. Available color
|
|
|
73
105
|
|
|
74
106
|
```html:preview
|
|
75
107
|
<zn-cols>
|
|
76
|
-
<zn-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<zn-
|
|
80
|
-
|
|
81
|
-
|
|
108
|
+
<zn-panel>
|
|
109
|
+
<zn-stat caption="Active" description="Status" amount="99.8" type="percent" color="primary"></zn-stat>
|
|
110
|
+
</zn-panel>
|
|
111
|
+
<zn-panel>
|
|
112
|
+
<zn-stat caption="Critical Errors" description="Last hour" amount="3" color="error"></zn-stat>
|
|
113
|
+
</zn-panel>
|
|
114
|
+
<zn-panel>
|
|
115
|
+
<zn-stat caption="Notifications" description="Unread" amount="24" color="info"></zn-stat>
|
|
116
|
+
</zn-panel>
|
|
117
|
+
<zn-panel>
|
|
118
|
+
<zn-stat caption="Warnings" description="System alerts" amount="7" color="warning"></zn-stat>
|
|
119
|
+
</zn-panel>
|
|
120
|
+
<zn-panel>
|
|
121
|
+
<zn-stat caption="Completed" description="Tasks today" amount="42" color="success"></zn-stat>
|
|
122
|
+
</zn-panel>
|
|
123
|
+
<zn-panel>
|
|
124
|
+
<zn-stat caption="Pending" description="In queue" amount="156" color="neutral"></zn-stat>
|
|
125
|
+
</zn-panel>
|
|
82
126
|
</zn-cols>
|
|
83
127
|
```
|
|
84
128
|
|
|
@@ -88,44 +132,52 @@ A common use case is displaying multiple KPIs in a dashboard layout.
|
|
|
88
132
|
|
|
89
133
|
```html:preview
|
|
90
134
|
<zn-cols>
|
|
91
|
-
<zn-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
135
|
+
<zn-panel>
|
|
136
|
+
<zn-stat
|
|
137
|
+
caption="Total Revenue"
|
|
138
|
+
description="All time"
|
|
139
|
+
amount="2847500"
|
|
140
|
+
previous="2650000"
|
|
141
|
+
currency="$"
|
|
142
|
+
show-delta
|
|
143
|
+
color="success">
|
|
144
|
+
</zn-stat>
|
|
145
|
+
</zn-panel>
|
|
146
|
+
|
|
147
|
+
<zn-panel>
|
|
148
|
+
<zn-stat
|
|
149
|
+
caption="Active Customers"
|
|
150
|
+
description="Current subscribers"
|
|
151
|
+
amount="4582"
|
|
152
|
+
previous="4201"
|
|
153
|
+
show-delta
|
|
154
|
+
color="info">
|
|
155
|
+
</zn-stat>
|
|
156
|
+
</zn-panel>
|
|
157
|
+
|
|
158
|
+
<zn-panel>
|
|
159
|
+
<zn-stat
|
|
160
|
+
caption="Avg Order Value"
|
|
161
|
+
description="Last 30 days"
|
|
162
|
+
amount="127.50"
|
|
163
|
+
previous="115.80"
|
|
164
|
+
currency="$"
|
|
165
|
+
show-delta
|
|
166
|
+
color="primary">
|
|
167
|
+
</zn-stat>
|
|
168
|
+
</zn-panel>
|
|
169
|
+
|
|
170
|
+
<zn-panel>
|
|
171
|
+
<zn-stat
|
|
172
|
+
caption="Satisfaction Rate"
|
|
173
|
+
description="Customer feedback"
|
|
174
|
+
amount="94.7"
|
|
175
|
+
previous="92.3"
|
|
176
|
+
type="percent"
|
|
177
|
+
show-delta
|
|
178
|
+
color="success">
|
|
179
|
+
</zn-stat>
|
|
180
|
+
</zn-panel>
|
|
129
181
|
</zn-cols>
|
|
130
182
|
```
|
|
131
183
|
|
|
@@ -135,41 +187,49 @@ Display sales-related statistics with currency formatting.
|
|
|
135
187
|
|
|
136
188
|
```html:preview
|
|
137
189
|
<zn-cols>
|
|
138
|
-
<zn-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
190
|
+
<zn-panel>
|
|
191
|
+
<zn-stat
|
|
192
|
+
caption="Today's Sales"
|
|
193
|
+
description="Updated 5 min ago"
|
|
194
|
+
amount="12450.75"
|
|
195
|
+
currency="$"
|
|
196
|
+
color="success">
|
|
197
|
+
</zn-stat>
|
|
198
|
+
</zn-panel>
|
|
199
|
+
|
|
200
|
+
<zn-panel>
|
|
201
|
+
<zn-stat
|
|
202
|
+
caption="This Week"
|
|
203
|
+
description="7 day total"
|
|
204
|
+
amount="84922"
|
|
205
|
+
previous="78100"
|
|
206
|
+
currency="$"
|
|
207
|
+
show-delta
|
|
208
|
+
color="info">
|
|
209
|
+
</zn-stat>
|
|
210
|
+
</zn-panel>
|
|
211
|
+
|
|
212
|
+
<zn-panel>
|
|
213
|
+
<zn-stat
|
|
214
|
+
caption="This Month"
|
|
215
|
+
description="Month to date"
|
|
216
|
+
amount="342678.50"
|
|
217
|
+
previous="298450"
|
|
218
|
+
currency="$"
|
|
219
|
+
show-delta
|
|
220
|
+
color="primary">
|
|
221
|
+
</zn-stat>
|
|
222
|
+
</zn-panel>
|
|
223
|
+
|
|
224
|
+
<zn-panel>
|
|
225
|
+
<zn-stat
|
|
226
|
+
caption="Annual Goal"
|
|
227
|
+
description="78% complete"
|
|
228
|
+
amount="3847250"
|
|
229
|
+
currency="$"
|
|
230
|
+
color="warning">
|
|
231
|
+
</zn-stat>
|
|
232
|
+
</zn-panel>
|
|
173
233
|
</zn-cols>
|
|
174
234
|
```
|
|
175
235
|
|
|
@@ -179,41 +239,49 @@ Track system or application performance indicators.
|
|
|
179
239
|
|
|
180
240
|
```html:preview
|
|
181
241
|
<zn-cols>
|
|
182
|
-
<zn-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
242
|
+
<zn-panel>
|
|
243
|
+
<zn-stat
|
|
244
|
+
caption="Uptime"
|
|
245
|
+
description="Last 30 days"
|
|
246
|
+
amount="99.97"
|
|
247
|
+
type="percent"
|
|
248
|
+
color="success">
|
|
249
|
+
</zn-stat>
|
|
250
|
+
</zn-panel>
|
|
251
|
+
|
|
252
|
+
<zn-panel>
|
|
253
|
+
<zn-stat
|
|
254
|
+
caption="API Response"
|
|
255
|
+
description="Average latency"
|
|
256
|
+
amount="127"
|
|
257
|
+
type="time"
|
|
258
|
+
color="info">
|
|
259
|
+
</zn-stat>
|
|
260
|
+
</zn-panel>
|
|
261
|
+
|
|
262
|
+
<zn-panel>
|
|
263
|
+
<zn-stat
|
|
264
|
+
caption="Error Rate"
|
|
265
|
+
description="Last 24 hours"
|
|
266
|
+
amount="0.08"
|
|
267
|
+
previous="0.12"
|
|
268
|
+
type="percent"
|
|
269
|
+
show-delta
|
|
270
|
+
color="success">
|
|
271
|
+
</zn-stat>
|
|
272
|
+
</zn-panel>
|
|
273
|
+
|
|
274
|
+
<zn-panel>
|
|
275
|
+
<zn-stat
|
|
276
|
+
caption="Queue Time"
|
|
277
|
+
description="Processing delay"
|
|
278
|
+
amount="43"
|
|
279
|
+
previous="28"
|
|
280
|
+
type="time"
|
|
281
|
+
show-delta
|
|
282
|
+
color="warning">
|
|
283
|
+
</zn-stat>
|
|
284
|
+
</zn-panel>
|
|
217
285
|
</zn-cols>
|
|
218
286
|
```
|
|
219
287
|
|
|
@@ -223,43 +291,51 @@ Display user-related metrics and engagement statistics.
|
|
|
223
291
|
|
|
224
292
|
```html:preview
|
|
225
293
|
<zn-cols>
|
|
226
|
-
<zn-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
294
|
+
<zn-panel>
|
|
295
|
+
<zn-stat
|
|
296
|
+
caption="Page Views"
|
|
297
|
+
description="Last 7 days"
|
|
298
|
+
amount="847523"
|
|
299
|
+
previous="792100"
|
|
300
|
+
show-delta
|
|
301
|
+
color="info">
|
|
302
|
+
</zn-stat>
|
|
303
|
+
</zn-panel>
|
|
304
|
+
|
|
305
|
+
<zn-panel>
|
|
306
|
+
<zn-stat
|
|
307
|
+
caption="Unique Visitors"
|
|
308
|
+
description="This week"
|
|
309
|
+
amount="34782"
|
|
310
|
+
previous="31245"
|
|
311
|
+
show-delta
|
|
312
|
+
color="success">
|
|
313
|
+
</zn-stat>
|
|
314
|
+
</zn-panel>
|
|
315
|
+
|
|
316
|
+
<zn-panel>
|
|
317
|
+
<zn-stat
|
|
318
|
+
caption="Avg. Session"
|
|
319
|
+
description="User engagement"
|
|
320
|
+
amount="342"
|
|
321
|
+
previous="298"
|
|
322
|
+
type="time"
|
|
323
|
+
show-delta
|
|
324
|
+
color="primary">
|
|
325
|
+
</zn-stat>
|
|
326
|
+
</zn-panel>
|
|
327
|
+
|
|
328
|
+
<zn-panel>
|
|
329
|
+
<zn-stat
|
|
330
|
+
caption="Return Rate"
|
|
331
|
+
description="Returning users"
|
|
332
|
+
amount="64.8"
|
|
333
|
+
previous="62.1"
|
|
334
|
+
type="percent"
|
|
335
|
+
show-delta
|
|
336
|
+
color="success">
|
|
337
|
+
</zn-stat>
|
|
338
|
+
</zn-panel>
|
|
263
339
|
</zn-cols>
|
|
264
340
|
```
|
|
265
341
|
|
|
@@ -269,42 +345,50 @@ A complete e-commerce metrics dashboard.
|
|
|
269
345
|
|
|
270
346
|
```html:preview
|
|
271
347
|
<zn-cols>
|
|
272
|
-
<zn-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
348
|
+
<zn-panel>
|
|
349
|
+
<zn-stat
|
|
350
|
+
caption="Orders Today"
|
|
351
|
+
description="Real-time"
|
|
352
|
+
amount="147"
|
|
353
|
+
previous="132"
|
|
354
|
+
show-delta
|
|
355
|
+
color="primary">
|
|
356
|
+
</zn-stat>
|
|
357
|
+
</zn-panel>
|
|
358
|
+
|
|
359
|
+
<zn-panel>
|
|
360
|
+
<zn-stat
|
|
361
|
+
caption="Cart Abandonment"
|
|
362
|
+
description="Last 24 hours"
|
|
363
|
+
amount="28.4"
|
|
364
|
+
previous="31.7"
|
|
365
|
+
type="percent"
|
|
366
|
+
show-delta
|
|
367
|
+
color="success">
|
|
368
|
+
</zn-stat>
|
|
369
|
+
</zn-panel>
|
|
370
|
+
|
|
371
|
+
<zn-panel>
|
|
372
|
+
<zn-stat
|
|
373
|
+
caption="Inventory Value"
|
|
374
|
+
description="Current stock"
|
|
375
|
+
amount="487250"
|
|
376
|
+
currency="$"
|
|
377
|
+
color="info">
|
|
378
|
+
</zn-stat>
|
|
379
|
+
</zn-panel>
|
|
380
|
+
|
|
381
|
+
<zn-panel>
|
|
382
|
+
<zn-stat
|
|
383
|
+
caption="Refund Rate"
|
|
384
|
+
description="This month"
|
|
385
|
+
amount="2.3"
|
|
386
|
+
previous="1.8"
|
|
387
|
+
type="percent"
|
|
388
|
+
show-delta
|
|
389
|
+
color="warning">
|
|
390
|
+
</zn-stat>
|
|
391
|
+
</zn-panel>
|
|
308
392
|
</zn-cols>
|
|
309
393
|
```
|
|
310
394
|
|
|
@@ -314,43 +398,51 @@ Display financial metrics with appropriate formatting.
|
|
|
314
398
|
|
|
315
399
|
```html:preview
|
|
316
400
|
<zn-cols>
|
|
317
|
-
<zn-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
401
|
+
<zn-panel>
|
|
402
|
+
<zn-stat
|
|
403
|
+
caption="Net Profit"
|
|
404
|
+
description="Q4 2025"
|
|
405
|
+
amount="847500.25"
|
|
406
|
+
previous="792340.50"
|
|
407
|
+
currency="$"
|
|
408
|
+
show-delta
|
|
409
|
+
color="success">
|
|
410
|
+
</zn-stat>
|
|
411
|
+
</zn-panel>
|
|
412
|
+
|
|
413
|
+
<zn-panel>
|
|
414
|
+
<zn-stat
|
|
415
|
+
caption="Operating Costs"
|
|
416
|
+
description="This quarter"
|
|
417
|
+
amount="234890"
|
|
418
|
+
previous="248750"
|
|
419
|
+
currency="$"
|
|
420
|
+
show-delta
|
|
421
|
+
color="success">
|
|
422
|
+
</zn-stat>
|
|
423
|
+
</zn-panel>
|
|
424
|
+
|
|
425
|
+
<zn-panel>
|
|
426
|
+
<zn-stat
|
|
427
|
+
caption="Profit Margin"
|
|
428
|
+
description="After expenses"
|
|
429
|
+
amount="28.4"
|
|
430
|
+
previous="26.7"
|
|
431
|
+
type="percent"
|
|
432
|
+
show-delta
|
|
433
|
+
color="primary">
|
|
434
|
+
</zn-stat>
|
|
435
|
+
</zn-panel>
|
|
436
|
+
|
|
437
|
+
<zn-panel>
|
|
438
|
+
<zn-stat
|
|
439
|
+
caption="Cash Flow"
|
|
440
|
+
description="Monthly average"
|
|
441
|
+
amount="142750"
|
|
442
|
+
currency="$"
|
|
443
|
+
color="info">
|
|
444
|
+
</zn-stat>
|
|
445
|
+
</zn-panel>
|
|
354
446
|
</zn-cols>
|
|
355
447
|
```
|
|
356
448
|
|
|
@@ -360,44 +452,52 @@ Key metrics for SaaS businesses.
|
|
|
360
452
|
|
|
361
453
|
```html:preview
|
|
362
454
|
<zn-cols>
|
|
363
|
-
<zn-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
455
|
+
<zn-panel>
|
|
456
|
+
<zn-stat
|
|
457
|
+
caption="MRR"
|
|
458
|
+
description="Monthly recurring revenue"
|
|
459
|
+
amount="284750"
|
|
460
|
+
previous="267890"
|
|
461
|
+
currency="$"
|
|
462
|
+
show-delta
|
|
463
|
+
color="success">
|
|
464
|
+
</zn-stat>
|
|
465
|
+
</zn-panel>
|
|
466
|
+
|
|
467
|
+
<zn-panel>
|
|
468
|
+
<zn-stat
|
|
469
|
+
caption="Churn Rate"
|
|
470
|
+
description="Customer attrition"
|
|
471
|
+
amount="3.2"
|
|
472
|
+
previous="4.1"
|
|
473
|
+
type="percent"
|
|
474
|
+
show-delta
|
|
475
|
+
color="success">
|
|
476
|
+
</zn-stat>
|
|
477
|
+
</zn-panel>
|
|
478
|
+
|
|
479
|
+
<zn-panel>
|
|
480
|
+
<zn-stat
|
|
481
|
+
caption="CAC"
|
|
482
|
+
description="Customer acquisition cost"
|
|
483
|
+
amount="127.50"
|
|
484
|
+
previous="142.80"
|
|
485
|
+
currency="$"
|
|
486
|
+
show-delta
|
|
487
|
+
color="success">
|
|
488
|
+
</zn-stat>
|
|
489
|
+
</zn-panel>
|
|
490
|
+
|
|
491
|
+
<zn-panel>
|
|
492
|
+
<zn-stat
|
|
493
|
+
caption="LTV:CAC"
|
|
494
|
+
description="Lifetime value ratio"
|
|
495
|
+
amount="4.8"
|
|
496
|
+
previous="4.2"
|
|
497
|
+
show-delta
|
|
498
|
+
color="info">
|
|
499
|
+
</zn-stat>
|
|
500
|
+
</zn-panel>
|
|
401
501
|
</zn-cols>
|
|
402
502
|
```
|
|
403
503
|
|
|
@@ -407,44 +507,52 @@ Track marketing campaign performance.
|
|
|
407
507
|
|
|
408
508
|
```html:preview
|
|
409
509
|
<zn-cols>
|
|
410
|
-
<zn-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
510
|
+
<zn-panel>
|
|
511
|
+
<zn-stat
|
|
512
|
+
caption="Impressions"
|
|
513
|
+
description="Campaign reach"
|
|
514
|
+
amount="1847523"
|
|
515
|
+
previous="1592340"
|
|
516
|
+
show-delta
|
|
517
|
+
color="info">
|
|
518
|
+
</zn-stat>
|
|
519
|
+
</zn-panel>
|
|
520
|
+
|
|
521
|
+
<zn-panel>
|
|
522
|
+
<zn-stat
|
|
523
|
+
caption="Click Rate"
|
|
524
|
+
description="CTR"
|
|
525
|
+
amount="3.8"
|
|
526
|
+
previous="2.9"
|
|
527
|
+
type="percent"
|
|
528
|
+
show-delta
|
|
529
|
+
color="success">
|
|
530
|
+
</zn-stat>
|
|
531
|
+
</zn-panel>
|
|
532
|
+
|
|
533
|
+
<zn-panel>
|
|
534
|
+
<zn-stat
|
|
535
|
+
caption="Cost Per Click"
|
|
536
|
+
description="Average CPC"
|
|
537
|
+
amount="1.42"
|
|
538
|
+
previous="1.68"
|
|
539
|
+
currency="$"
|
|
540
|
+
show-delta
|
|
541
|
+
color="success">
|
|
542
|
+
</zn-stat>
|
|
543
|
+
</zn-panel>
|
|
544
|
+
|
|
545
|
+
<zn-panel>
|
|
546
|
+
<zn-stat
|
|
547
|
+
caption="ROAS"
|
|
548
|
+
description="Return on ad spend"
|
|
549
|
+
amount="487"
|
|
550
|
+
previous="412"
|
|
551
|
+
type="percent"
|
|
552
|
+
show-delta
|
|
553
|
+
color="primary">
|
|
554
|
+
</zn-stat>
|
|
555
|
+
</zn-panel>
|
|
448
556
|
</zn-cols>
|
|
449
557
|
```
|
|
450
558
|
|
|
@@ -454,44 +562,52 @@ Display customer support metrics.
|
|
|
454
562
|
|
|
455
563
|
```html:preview
|
|
456
564
|
<zn-cols>
|
|
457
|
-
<zn-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
565
|
+
<zn-panel>
|
|
566
|
+
<zn-stat
|
|
567
|
+
caption="Open Tickets"
|
|
568
|
+
description="Requires attention"
|
|
569
|
+
amount="47"
|
|
570
|
+
previous="62"
|
|
571
|
+
show-delta
|
|
572
|
+
color="success">
|
|
573
|
+
</zn-stat>
|
|
574
|
+
</zn-panel>
|
|
575
|
+
|
|
576
|
+
<zn-panel>
|
|
577
|
+
<zn-stat
|
|
578
|
+
caption="Avg Response Time"
|
|
579
|
+
description="First reply"
|
|
580
|
+
amount="892"
|
|
581
|
+
previous="1247"
|
|
582
|
+
type="time"
|
|
583
|
+
show-delta
|
|
584
|
+
color="success">
|
|
585
|
+
</zn-stat>
|
|
586
|
+
</zn-panel>
|
|
587
|
+
|
|
588
|
+
<zn-panel>
|
|
589
|
+
<zn-stat
|
|
590
|
+
caption="Resolution Rate"
|
|
591
|
+
description="First contact"
|
|
592
|
+
amount="78.4"
|
|
593
|
+
previous="73.2"
|
|
594
|
+
type="percent"
|
|
595
|
+
show-delta
|
|
596
|
+
color="info">
|
|
597
|
+
</zn-stat>
|
|
598
|
+
</zn-panel>
|
|
599
|
+
|
|
600
|
+
<zn-panel>
|
|
601
|
+
<zn-stat
|
|
602
|
+
caption="Satisfaction"
|
|
603
|
+
description="CSAT score"
|
|
604
|
+
amount="94.7"
|
|
605
|
+
previous="92.1"
|
|
606
|
+
type="percent"
|
|
607
|
+
show-delta
|
|
608
|
+
color="success">
|
|
609
|
+
</zn-stat>
|
|
610
|
+
</zn-panel>
|
|
495
611
|
</zn-cols>
|
|
496
612
|
```
|
|
497
613
|
|
|
@@ -501,34 +617,42 @@ Simple status indicators without delta comparisons.
|
|
|
501
617
|
|
|
502
618
|
```html:preview
|
|
503
619
|
<zn-cols>
|
|
504
|
-
<zn-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
620
|
+
<zn-panel>
|
|
621
|
+
<zn-stat
|
|
622
|
+
caption="System Status"
|
|
623
|
+
description="All systems operational"
|
|
624
|
+
amount="100"
|
|
625
|
+
type="percent"
|
|
626
|
+
color="success">
|
|
627
|
+
</zn-stat>
|
|
628
|
+
</zn-panel>
|
|
629
|
+
|
|
630
|
+
<zn-panel>
|
|
631
|
+
<zn-stat
|
|
632
|
+
caption="Active Sessions"
|
|
633
|
+
description="Current users"
|
|
634
|
+
amount="1847"
|
|
635
|
+
color="info">
|
|
636
|
+
</zn-stat>
|
|
637
|
+
</zn-panel>
|
|
638
|
+
|
|
639
|
+
<zn-panel>
|
|
640
|
+
<zn-stat
|
|
641
|
+
caption="Queue Length"
|
|
642
|
+
description="Pending jobs"
|
|
643
|
+
amount="23"
|
|
644
|
+
color="warning">
|
|
645
|
+
</zn-stat>
|
|
646
|
+
</zn-panel>
|
|
647
|
+
|
|
648
|
+
<zn-panel>
|
|
649
|
+
<zn-stat
|
|
650
|
+
caption="Failed Jobs"
|
|
651
|
+
description="Requires intervention"
|
|
652
|
+
amount="2"
|
|
653
|
+
color="error">
|
|
654
|
+
</zn-stat>
|
|
655
|
+
</zn-panel>
|
|
532
656
|
</zn-cols>
|
|
533
657
|
```
|
|
534
658
|
|
|
@@ -538,27 +662,33 @@ Stats automatically format large numbers with currency symbols.
|
|
|
538
662
|
|
|
539
663
|
```html:preview
|
|
540
664
|
<zn-cols>
|
|
541
|
-
<zn-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
665
|
+
<zn-panel>
|
|
666
|
+
<zn-stat
|
|
667
|
+
caption="Total Valuation"
|
|
668
|
+
description="Company worth"
|
|
669
|
+
amount="12500000"
|
|
670
|
+
currency="$"
|
|
671
|
+
color="primary">
|
|
672
|
+
</zn-stat>
|
|
673
|
+
</zn-panel>
|
|
674
|
+
|
|
675
|
+
<zn-panel>
|
|
676
|
+
<zn-stat
|
|
677
|
+
caption="Total Users"
|
|
678
|
+
description="Platform wide"
|
|
679
|
+
amount="8472831"
|
|
680
|
+
color="info">
|
|
681
|
+
</zn-stat>
|
|
682
|
+
</zn-panel>
|
|
683
|
+
|
|
684
|
+
<zn-panel>
|
|
685
|
+
<zn-stat
|
|
686
|
+
caption="Transactions"
|
|
687
|
+
description="All time"
|
|
688
|
+
amount="24789532"
|
|
689
|
+
color="success">
|
|
690
|
+
</zn-stat>
|
|
691
|
+
</zn-panel>
|
|
562
692
|
</zn-cols>
|
|
563
693
|
```
|
|
564
694
|
|