stats-gl 0.3.0 → 1.0.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 +65 -27
- package/dist/main.cjs +7 -5
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +7 -5
- package/dist/main.js.map +1 -1
- package/dist/panel.cjs +2 -1
- package/dist/panel.cjs.map +1 -1
- package/dist/panel.js +2 -1
- package/dist/panel.js.map +1 -1
- package/dist/stats-gl.d.ts +3 -1
- package/lib/main.ts +9 -5
- package/lib/panel.ts +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,32 +1,31 @@
|
|
|
1
|
-
# stats-gl
|
|
1
|
+
# 📈 stats-gl
|
|
2
|
+
[](https://www.npmjs.com/package/stats-gl)
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
WebGL Performance Monitor tool.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
🔗 [Live Demo](https://stats.renaudrohlinger.com/)
|
|
6
7
|
|
|
7
|
-
## Table of Contents
|
|
8
|
-
- [Description](#description)
|
|
9
|
-
- [Installation](#installation)
|
|
10
|
-
- [Example Usage](#example-usage)
|
|
11
|
-
- [Parameters](#parameters)
|
|
12
|
-
- [Contributing](#contributing)
|
|
13
|
-
- [License](#license)
|
|
14
8
|
|
|
15
|
-
|
|
9
|
+
https://github.com/RenaudRohlinger/stats-gl/assets/15867665/3fdafff4-1357-4872-9baf-0629dbaf9d8c
|
|
16
10
|
|
|
17
|
-
|
|
11
|
+
|
|
12
|
+
### ❗📢 Note: GPU Monitoring will be available on Safari after the v17 release.
|
|
13
|
+
|
|
14
|
+
## 📚 Description
|
|
15
|
+
|
|
16
|
+
`stats-gl` is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension.
|
|
18
17
|
|
|
19
18
|
In addition to logging real-time performance data, the class also provides methods to calculate and display average performance metrics over a specified interval.
|
|
20
19
|
|
|
21
|
-
## Installation
|
|
20
|
+
## ⬇️ Installation
|
|
22
21
|
|
|
23
|
-
Stats
|
|
22
|
+
Stats-gl is available as an npm package. You can install it using the following command:
|
|
24
23
|
|
|
25
24
|
```bash
|
|
26
25
|
npm install stats-gl
|
|
27
26
|
```
|
|
28
27
|
|
|
29
|
-
## Example Usage
|
|
28
|
+
## 🧑💻 Example Usage
|
|
30
29
|
|
|
31
30
|
Below is an example of how you can use this class in your code:
|
|
32
31
|
```js
|
|
@@ -38,6 +37,7 @@ const stats = new Stats({
|
|
|
38
37
|
samplesLog: 100,
|
|
39
38
|
samplesGraph: 10,
|
|
40
39
|
precision: 2,
|
|
40
|
+
horizontal: true,
|
|
41
41
|
minimal: false,
|
|
42
42
|
mode: 0
|
|
43
43
|
});
|
|
@@ -52,24 +52,62 @@ stats.begin();
|
|
|
52
52
|
stats.end();
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
|
|
56
|
+
Quick start with threejs:
|
|
57
|
+
```js
|
|
58
|
+
import * as THREE from 'three';
|
|
59
|
+
|
|
60
|
+
import Stats from 'https://www.unpkg.com/stats-gl';
|
|
61
|
+
|
|
62
|
+
const container = document.getElementById( 'container' );
|
|
63
|
+
|
|
64
|
+
const stats = new Stats();
|
|
65
|
+
container.appendChild( stats.container );
|
|
66
|
+
|
|
67
|
+
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
68
|
+
container.appendChild( renderer.domElement );
|
|
69
|
+
|
|
70
|
+
const scene = new THREE.Scene();
|
|
71
|
+
|
|
72
|
+
stats.init( renderer.domElement );
|
|
73
|
+
|
|
74
|
+
scene.onBeforeRender = function () {
|
|
75
|
+
|
|
76
|
+
stats.begin();
|
|
77
|
+
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
scene.onAfterRender = function () {
|
|
81
|
+
|
|
82
|
+
stats.end();
|
|
83
|
+
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## ⚙️ Parameters
|
|
56
89
|
The constructor for the Stats class accepts an options object with the following properties:
|
|
57
90
|
|
|
58
|
-
- logsPerSecond
|
|
59
|
-
- samplesLog
|
|
60
|
-
- samplesGraph
|
|
61
|
-
- precision
|
|
62
|
-
- minimal
|
|
63
|
-
- mode
|
|
91
|
+
- `logsPerSecond`: How often to log performance data, in logs per second.
|
|
92
|
+
- `samplesLog`: Number of recent log samples to keep for computing averages.
|
|
93
|
+
- `samplesGraph`: Number of recent graph samples to keep for computing averages.
|
|
94
|
+
- `precision`: Precision of the data, in number of decimal places (only affects CPU and GPU).
|
|
95
|
+
- `minimal`: A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.
|
|
96
|
+
- `mode`: Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).
|
|
97
|
+
- `horizontal`: Display the canvases on the X axis, set to align on vertical axis.
|
|
64
98
|
|
|
65
99
|
All the parameters are optional and have default values. The class also provides other methods such as begin(), end(), init(canvas), etc. which can be used based on the requirement.
|
|
66
100
|
|
|
67
|
-
Note: The init(canvas) method is used to start the GPU monitoring and must be called with a canvas context before begin().
|
|
68
101
|
|
|
69
|
-
## Contributing
|
|
70
|
-
|
|
102
|
+
## 🤝 Contributing
|
|
103
|
+
Contributions to Stats-gl are welcome.
|
|
71
104
|
|
|
72
105
|
Please report any issues or bugs you encounter.
|
|
73
106
|
|
|
74
|
-
## License
|
|
75
|
-
This project is licensed under the MIT License.
|
|
107
|
+
## 📜 License
|
|
108
|
+
This project is licensed under the MIT License.
|
|
109
|
+
|
|
110
|
+
## 🧑🎨 Maintainers :
|
|
111
|
+
|
|
112
|
+
- [`twitter 🐈⬛ @onirenaud`](https://twitter.com/onirenaud)
|
|
113
|
+
- [`twitter @utsuboco`](https://twitter.com/utsuboco)
|
package/dist/main.cjs
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const panel = require("./panel.cjs");
|
|
3
3
|
class Stats {
|
|
4
|
-
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {}) {
|
|
4
|
+
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
5
5
|
this.mode = mode;
|
|
6
|
+
this.horizontal = horizontal;
|
|
6
7
|
this.container = document.createElement("div");
|
|
7
8
|
this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
|
|
8
9
|
if (minimal) {
|
|
@@ -50,16 +51,17 @@ class Stats {
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
resizePanel(panel2, offset) {
|
|
54
|
+
panel2.canvas.style.position = "absolute";
|
|
53
55
|
if (this.minimal) {
|
|
54
56
|
panel2.canvas.style.display = "none";
|
|
55
57
|
} else {
|
|
56
58
|
panel2.canvas.style.display = "block";
|
|
57
|
-
if (
|
|
58
|
-
panel2.canvas.style.left = "0px";
|
|
59
|
-
panel2.canvas.style.top = offset * panel2.HEIGHT / panel2.PR + "px";
|
|
60
|
-
} else {
|
|
59
|
+
if (this.horizontal) {
|
|
61
60
|
panel2.canvas.style.top = "0px";
|
|
62
61
|
panel2.canvas.style.left = offset * panel2.WIDTH / panel2.PR + "px";
|
|
62
|
+
} else {
|
|
63
|
+
panel2.canvas.style.left = "0px";
|
|
64
|
+
panel2.canvas.style.top = offset * panel2.HEIGHT / panel2.PR + "px";
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
}
|
package/dist/main.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":";;AAQA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":"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"}
|
package/dist/main.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import Panel from "./panel.js";
|
|
2
2
|
class Stats {
|
|
3
|
-
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {}) {
|
|
3
|
+
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
4
4
|
this.mode = mode;
|
|
5
|
+
this.horizontal = horizontal;
|
|
5
6
|
this.container = document.createElement("div");
|
|
6
7
|
this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
|
|
7
8
|
if (minimal) {
|
|
@@ -49,16 +50,17 @@ class Stats {
|
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
52
|
resizePanel(panel, offset) {
|
|
53
|
+
panel.canvas.style.position = "absolute";
|
|
52
54
|
if (this.minimal) {
|
|
53
55
|
panel.canvas.style.display = "none";
|
|
54
56
|
} else {
|
|
55
57
|
panel.canvas.style.display = "block";
|
|
56
|
-
if (
|
|
57
|
-
panel.canvas.style.left = "0px";
|
|
58
|
-
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + "px";
|
|
59
|
-
} else {
|
|
58
|
+
if (this.horizontal) {
|
|
60
59
|
panel.canvas.style.top = "0px";
|
|
61
60
|
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + "px";
|
|
61
|
+
} else {
|
|
62
|
+
panel.canvas.style.left = "0px";
|
|
63
|
+
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + "px";
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
66
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":";AAQA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/panel.cjs
CHANGED
|
@@ -17,6 +17,7 @@ class Panel {
|
|
|
17
17
|
this.canvas.width = 90 * this.PR;
|
|
18
18
|
this.canvas.height = 48 * this.PR;
|
|
19
19
|
this.canvas.style.width = "90px";
|
|
20
|
+
this.canvas.style.position = "absolute";
|
|
20
21
|
this.canvas.style.height = "48px";
|
|
21
22
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
22
23
|
this.context = this.canvas.getContext("2d");
|
|
@@ -49,7 +50,7 @@ class Panel {
|
|
|
49
50
|
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
|
|
50
51
|
this.context.fillStyle = this.bg;
|
|
51
52
|
this.context.globalAlpha = 0.9;
|
|
52
|
-
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR,
|
|
53
|
+
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
|
|
53
54
|
}
|
|
54
55
|
}
|
|
55
56
|
;
|
package/dist/panel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,WAAW;AACxB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;;"}
|
package/dist/panel.js
CHANGED
|
@@ -16,6 +16,7 @@ class Panel {
|
|
|
16
16
|
this.canvas.width = 90 * this.PR;
|
|
17
17
|
this.canvas.height = 48 * this.PR;
|
|
18
18
|
this.canvas.style.width = "90px";
|
|
19
|
+
this.canvas.style.position = "absolute";
|
|
19
20
|
this.canvas.style.height = "48px";
|
|
20
21
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
21
22
|
this.context = this.canvas.getContext("2d");
|
|
@@ -48,7 +49,7 @@ class Panel {
|
|
|
48
49
|
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
|
|
49
50
|
this.context.fillStyle = this.bg;
|
|
50
51
|
this.context.globalAlpha = 0.9;
|
|
51
|
-
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR,
|
|
52
|
+
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
;
|
package/dist/panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,WAAW;AACxB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;"}
|
package/dist/stats-gl.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ declare class Stats {
|
|
|
25
25
|
mode: number;
|
|
26
26
|
container: HTMLDivElement;
|
|
27
27
|
minimal: boolean;
|
|
28
|
+
horizontal: boolean;
|
|
28
29
|
beginTime: number;
|
|
29
30
|
prevTime: number;
|
|
30
31
|
prevCpuTime: number;
|
|
@@ -46,12 +47,13 @@ declare class Stats {
|
|
|
46
47
|
query: WebGLQuery | null;
|
|
47
48
|
disjoint: any;
|
|
48
49
|
ns: any;
|
|
49
|
-
constructor({ logsPerSecond, samplesLog, samplesGraph, precision, minimal, mode }?: {
|
|
50
|
+
constructor({ logsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: {
|
|
50
51
|
logsPerSecond?: number | undefined;
|
|
51
52
|
samplesLog?: number | undefined;
|
|
52
53
|
samplesGraph?: number | undefined;
|
|
53
54
|
precision?: number | undefined;
|
|
54
55
|
minimal?: boolean | undefined;
|
|
56
|
+
horizontal?: boolean | undefined;
|
|
55
57
|
mode?: number | undefined;
|
|
56
58
|
});
|
|
57
59
|
resizePanel(panel: Panel, offset: number): void;
|
package/lib/main.ts
CHANGED
|
@@ -10,6 +10,7 @@ class Stats {
|
|
|
10
10
|
mode: number;
|
|
11
11
|
container: HTMLDivElement;
|
|
12
12
|
minimal: boolean;
|
|
13
|
+
horizontal: boolean;
|
|
13
14
|
beginTime: number;
|
|
14
15
|
prevTime: number;
|
|
15
16
|
prevCpuTime: number;
|
|
@@ -32,9 +33,10 @@ class Stats {
|
|
|
32
33
|
disjoint: any;
|
|
33
34
|
ns: any;
|
|
34
35
|
|
|
35
|
-
constructor( { logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {} ) {
|
|
36
|
+
constructor( { logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {} ) {
|
|
36
37
|
|
|
37
38
|
this.mode = mode;
|
|
39
|
+
this.horizontal = horizontal;
|
|
38
40
|
this.container = document.createElement( 'div' );
|
|
39
41
|
this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
|
|
40
42
|
|
|
@@ -103,6 +105,8 @@ class Stats {
|
|
|
103
105
|
|
|
104
106
|
resizePanel( panel: Panel, offset: number) {
|
|
105
107
|
|
|
108
|
+
panel.canvas.style.position = 'absolute';
|
|
109
|
+
|
|
106
110
|
if ( this.minimal ) {
|
|
107
111
|
|
|
108
112
|
panel.canvas.style.display = 'none';
|
|
@@ -110,13 +114,13 @@ class Stats {
|
|
|
110
114
|
} else {
|
|
111
115
|
|
|
112
116
|
panel.canvas.style.display = 'block';
|
|
113
|
-
if (
|
|
117
|
+
if (this.horizontal) {
|
|
118
|
+
panel.canvas.style.top = '0px';
|
|
119
|
+
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
|
|
120
|
+
} else {
|
|
114
121
|
panel.canvas.style.left = '0px';
|
|
115
122
|
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
|
|
116
123
|
|
|
117
|
-
} else {
|
|
118
|
-
panel.canvas.style.top = '0px';
|
|
119
|
-
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
|
|
120
124
|
}
|
|
121
125
|
}
|
|
122
126
|
}
|
package/lib/panel.ts
CHANGED
|
@@ -34,6 +34,7 @@ class Panel {
|
|
|
34
34
|
this.canvas.width = 90 * this.PR;
|
|
35
35
|
this.canvas.height = 48 * this.PR;
|
|
36
36
|
this.canvas.style.width = '90px';
|
|
37
|
+
this.canvas.style.position = 'absolute';
|
|
37
38
|
this.canvas.style.height = '48px';
|
|
38
39
|
this.canvas.style.cssText = 'width:90px;height:48px';
|
|
39
40
|
|
|
@@ -78,7 +79,8 @@ class Panel {
|
|
|
78
79
|
|
|
79
80
|
this.context.fillStyle = this.bg;
|
|
80
81
|
this.context.globalAlpha = 0.9;
|
|
81
|
-
|
|
82
|
+
|
|
83
|
+
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, ((1 - (valueGraph / maxGraph))) * this.GRAPH_HEIGHT);
|
|
82
84
|
}
|
|
83
85
|
};
|
|
84
86
|
|