termweb-dashboard 0.2.5 → 0.3.1
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/README.md +16 -5
- package/bin/cli.js +11 -1
- package/dist/app.bundle.js +32 -40
- package/dist/index.html +43 -7
- package/lib/metrics.js +540 -226
- package/lib/server.js +13 -4
- package/native/prebuilt/.gitkeep +0 -0
- package/native/prebuilt/metrics-darwin-arm64.node +0 -0
- package/native/prebuilt/metrics-darwin-x64.node +0 -0
- package/native/prebuilt/metrics-linux-arm64.node +0 -0
- package/native/prebuilt/metrics-linux-x64.node +0 -0
- package/package.json +4 -2
package/dist/index.html
CHANGED
|
@@ -6,36 +6,48 @@
|
|
|
6
6
|
<title>termweb-dashboard</title>
|
|
7
7
|
<style>
|
|
8
8
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
html {
|
|
10
|
+
height: 100%;
|
|
11
|
+
}
|
|
9
12
|
body {
|
|
13
|
+
min-height: 100%;
|
|
10
14
|
background: #1e1e1e;
|
|
11
15
|
color: #cccccc;
|
|
12
16
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
17
|
font-size: 13px;
|
|
14
18
|
}
|
|
15
19
|
#header {
|
|
20
|
+
position: sticky;
|
|
21
|
+
top: 0;
|
|
16
22
|
height: 36px;
|
|
17
23
|
background: #252526;
|
|
18
24
|
display: flex;
|
|
19
25
|
align-items: center;
|
|
20
26
|
padding: 0 16px;
|
|
21
27
|
border-bottom: 1px solid #3c3c3c;
|
|
28
|
+
z-index: 100;
|
|
22
29
|
}
|
|
23
30
|
#header h1 { font-size: 14px; font-weight: 600; flex: 1; }
|
|
24
31
|
#header .info { font-size: 11px; color: #888; }
|
|
25
32
|
|
|
33
|
+
#main-dashboard {
|
|
34
|
+
flex: 1;
|
|
35
|
+
overflow: auto;
|
|
36
|
+
min-height: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
26
39
|
#dashboard {
|
|
27
40
|
display: grid;
|
|
28
41
|
grid-template-columns: repeat(2, 1fr);
|
|
29
42
|
gap: 16px;
|
|
30
43
|
padding: 16px;
|
|
31
|
-
height: calc(100vh - 36px - 32px);
|
|
32
|
-
overflow: auto;
|
|
33
44
|
}
|
|
34
45
|
.card {
|
|
35
46
|
background: #252526;
|
|
36
47
|
border: 1px solid #3c3c3c;
|
|
37
48
|
border-radius: 6px;
|
|
38
49
|
padding: 16px;
|
|
50
|
+
min-height: 150px;
|
|
39
51
|
}
|
|
40
52
|
.card h2 {
|
|
41
53
|
font-size: 12px;
|
|
@@ -138,8 +150,11 @@
|
|
|
138
150
|
#process-fullscreen, #detail-fullscreen {
|
|
139
151
|
display: none;
|
|
140
152
|
flex-direction: column;
|
|
141
|
-
|
|
153
|
+
flex: 1;
|
|
154
|
+
min-height: 0;
|
|
142
155
|
padding: 16px;
|
|
156
|
+
overflow-y: auto;
|
|
157
|
+
-webkit-overflow-scrolling: touch;
|
|
143
158
|
}
|
|
144
159
|
.detail-header {
|
|
145
160
|
margin-bottom: 16px;
|
|
@@ -151,9 +166,11 @@
|
|
|
151
166
|
}
|
|
152
167
|
.detail-content {
|
|
153
168
|
flex: 1;
|
|
154
|
-
|
|
169
|
+
min-height: 0;
|
|
170
|
+
overflow-y: auto;
|
|
155
171
|
display: flex;
|
|
156
172
|
flex-direction: column;
|
|
173
|
+
gap: 8px;
|
|
157
174
|
}
|
|
158
175
|
.detail-chart {
|
|
159
176
|
height: 200px;
|
|
@@ -253,17 +270,33 @@
|
|
|
253
270
|
body:focus, [tabindex]:focus {
|
|
254
271
|
outline: none;
|
|
255
272
|
}
|
|
273
|
+
/* Only input elements should be focusable */
|
|
274
|
+
#detail-fullscreen *:not(input) {
|
|
275
|
+
-webkit-user-select: none;
|
|
276
|
+
user-select: none;
|
|
277
|
+
}
|
|
278
|
+
#detail-fullscreen .treemap-cell,
|
|
279
|
+
#detail-fullscreen .path-item,
|
|
280
|
+
#detail-fullscreen canvas {
|
|
281
|
+
pointer-events: auto;
|
|
282
|
+
cursor: pointer;
|
|
283
|
+
}
|
|
284
|
+
#detail-fullscreen .treemap-cell:focus,
|
|
285
|
+
#detail-fullscreen .path-item:focus,
|
|
286
|
+
#detail-fullscreen canvas:focus {
|
|
287
|
+
outline: none;
|
|
288
|
+
}
|
|
256
289
|
|
|
257
290
|
/* Treemap styles */
|
|
258
291
|
.distribution-chart {
|
|
259
292
|
flex: 1;
|
|
260
293
|
min-height: 150px;
|
|
261
|
-
margin-top:
|
|
294
|
+
margin-top: 8px;
|
|
262
295
|
}
|
|
263
296
|
.treemap-label {
|
|
264
297
|
font-size: 12px;
|
|
265
298
|
color: #888;
|
|
266
|
-
margin-bottom:
|
|
299
|
+
margin-bottom: 4px;
|
|
267
300
|
text-transform: uppercase;
|
|
268
301
|
letter-spacing: 0.5px;
|
|
269
302
|
}
|
|
@@ -339,6 +372,8 @@
|
|
|
339
372
|
|
|
340
373
|
/* Bottom hints bar */
|
|
341
374
|
#hints {
|
|
375
|
+
position: sticky;
|
|
376
|
+
bottom: 0;
|
|
342
377
|
height: 32px;
|
|
343
378
|
background: #252526;
|
|
344
379
|
border-top: 1px solid #3c3c3c;
|
|
@@ -348,6 +383,7 @@
|
|
|
348
383
|
gap: 24px;
|
|
349
384
|
font-size: 11px;
|
|
350
385
|
color: #888;
|
|
386
|
+
z-index: 100;
|
|
351
387
|
}
|
|
352
388
|
#hints span {
|
|
353
389
|
display: flex;
|
|
@@ -391,7 +427,7 @@
|
|
|
391
427
|
flex-wrap: wrap;
|
|
392
428
|
gap: 4px;
|
|
393
429
|
font-size: 13px;
|
|
394
|
-
margin-bottom:
|
|
430
|
+
margin-bottom: 0;
|
|
395
431
|
padding: 8px 12px;
|
|
396
432
|
background: #1e1e1e;
|
|
397
433
|
border-radius: 4px;
|