stats-gl 1.0.5 → 1.0.7
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 +15 -1
- package/dist/main.cjs +17 -6
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +17 -6
- package/dist/main.js.map +1 -1
- package/dist/stats-gl.d.ts +1 -2
- package/lib/main.ts +90 -76
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,7 +85,7 @@ scene.onAfterRender = function () {
|
|
|
85
85
|
|
|
86
86
|
};
|
|
87
87
|
```
|
|
88
|
-
Quick start with [@react-three/fiber](https://github.com/pmndrs/fiber). A `<StatsGl />` component is
|
|
88
|
+
Quick start with [@react-three/fiber](https://github.com/pmndrs/fiber). A `<StatsGl />` component is available through [@react-three/drei](https://github.com/pmndrs/drei):
|
|
89
89
|
```jsx
|
|
90
90
|
import { Canvas } from '@react-three/fiber'
|
|
91
91
|
import { StatsGl } from '@react-three/drei'
|
|
@@ -97,6 +97,20 @@ const Scene = () => (
|
|
|
97
97
|
)
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
+
Quick start with [Tresjs](https://tresjs.org/) for Vue developers. A `<StatsGl />` component is available through [cientos](https://cientos.tresjs.org/guide/misc/stats-gl.html):
|
|
101
|
+
|
|
102
|
+
```vue
|
|
103
|
+
<script setup lang="ts">
|
|
104
|
+
import { TresCanvas } from '@tresjs/core'
|
|
105
|
+
import { StatsGl } from '@tresjs/cientos'
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<template>
|
|
109
|
+
<TresCanvas>
|
|
110
|
+
<StatsGl />
|
|
111
|
+
</TresCanvas>
|
|
112
|
+
</template>
|
|
113
|
+
```
|
|
100
114
|
## ⚙️ Parameters
|
|
101
115
|
The constructor for the Stats class accepts an options object with the following properties:
|
|
102
116
|
|
package/dist/main.cjs
CHANGED
|
@@ -9,7 +9,6 @@ const _Stats = class _Stats {
|
|
|
9
9
|
if (minimal) {
|
|
10
10
|
this.container.style.cssText += "cursor:pointer";
|
|
11
11
|
}
|
|
12
|
-
this.canvasGpu = null;
|
|
13
12
|
this.gl = null;
|
|
14
13
|
this.query = null;
|
|
15
14
|
this.minimal = minimal;
|
|
@@ -79,12 +78,24 @@ const _Stats = class _Stats {
|
|
|
79
78
|
}
|
|
80
79
|
this.mode = id;
|
|
81
80
|
}
|
|
82
|
-
init(
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
init(canvasOrGL) {
|
|
82
|
+
if (!canvasOrGL) {
|
|
83
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
85
84
|
return;
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
}
|
|
86
|
+
if (canvasOrGL instanceof WebGL2RenderingContext) {
|
|
87
|
+
this.gl = canvasOrGL;
|
|
88
|
+
} else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
89
|
+
this.gl = canvasOrGL.getContext("webgl2");
|
|
90
|
+
if (!this.gl) {
|
|
91
|
+
console.error("Stats: Unable to obtain WebGL2 context.");
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
} else {
|
|
95
|
+
console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
|
|
88
99
|
if (this.ext) {
|
|
89
100
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
|
90
101
|
}
|
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,SAAN,MAAM,OAAM;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
|
@@ -8,7 +8,6 @@ const _Stats = class _Stats {
|
|
|
8
8
|
if (minimal) {
|
|
9
9
|
this.container.style.cssText += "cursor:pointer";
|
|
10
10
|
}
|
|
11
|
-
this.canvasGpu = null;
|
|
12
11
|
this.gl = null;
|
|
13
12
|
this.query = null;
|
|
14
13
|
this.minimal = minimal;
|
|
@@ -78,12 +77,24 @@ const _Stats = class _Stats {
|
|
|
78
77
|
}
|
|
79
78
|
this.mode = id;
|
|
80
79
|
}
|
|
81
|
-
init(
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
init(canvasOrGL) {
|
|
81
|
+
if (!canvasOrGL) {
|
|
82
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
84
83
|
return;
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
}
|
|
85
|
+
if (canvasOrGL instanceof WebGL2RenderingContext) {
|
|
86
|
+
this.gl = canvasOrGL;
|
|
87
|
+
} else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
88
|
+
this.gl = canvasOrGL.getContext("webgl2");
|
|
89
|
+
if (!this.gl) {
|
|
90
|
+
console.error("Stats: Unable to obtain WebGL2 context.");
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
|
|
87
98
|
if (this.ext) {
|
|
88
99
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
|
89
100
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":";AAQA,MAAM,SAAN,MAAM,OAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/stats-gl.d.ts
CHANGED
|
@@ -41,7 +41,6 @@ declare class Stats {
|
|
|
41
41
|
samplesGraph: number;
|
|
42
42
|
logsPerSecond: number;
|
|
43
43
|
precision: number;
|
|
44
|
-
canvasGpu: HTMLCanvasElement | null;
|
|
45
44
|
gl: WebGL2RenderingContext | null;
|
|
46
45
|
ext: any;
|
|
47
46
|
query: WebGLQuery | null;
|
|
@@ -59,7 +58,7 @@ declare class Stats {
|
|
|
59
58
|
resizePanel(panel: Panel, offset: number): void;
|
|
60
59
|
addPanel(panel: Panel, offset: number): Panel;
|
|
61
60
|
showPanel(id: number): void;
|
|
62
|
-
init(
|
|
61
|
+
init(canvasOrGL: HTMLCanvasElement | OffscreenCanvas | WebGL2RenderingContext): void;
|
|
63
62
|
begin(): void;
|
|
64
63
|
end(): void;
|
|
65
64
|
endInternal(): number;
|
package/lib/main.ts
CHANGED
|
@@ -26,33 +26,31 @@ class Stats {
|
|
|
26
26
|
samplesGraph: number;
|
|
27
27
|
logsPerSecond: number;
|
|
28
28
|
precision: number;
|
|
29
|
-
canvasGpu: HTMLCanvasElement | null;
|
|
30
29
|
gl: WebGL2RenderingContext | null;
|
|
31
30
|
ext: any;
|
|
32
31
|
query: WebGLQuery | null;
|
|
33
32
|
disjoint: any;
|
|
34
33
|
ns: any;
|
|
35
34
|
|
|
36
|
-
constructor(
|
|
35
|
+
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
37
36
|
|
|
38
37
|
this.mode = mode;
|
|
39
38
|
this.horizontal = horizontal;
|
|
40
|
-
this.container = document.createElement(
|
|
39
|
+
this.container = document.createElement('div');
|
|
41
40
|
this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
|
|
42
41
|
|
|
43
|
-
if (
|
|
42
|
+
if (minimal) {
|
|
44
43
|
|
|
45
44
|
this.container.style.cssText += 'cursor:pointer';
|
|
46
45
|
|
|
47
46
|
}
|
|
48
47
|
|
|
49
|
-
this.canvasGpu = null;
|
|
50
48
|
this.gl = null;
|
|
51
|
-
this.query =
|
|
49
|
+
this.query = null;
|
|
52
50
|
|
|
53
51
|
this.minimal = minimal;
|
|
54
52
|
|
|
55
|
-
this.beginTime = (
|
|
53
|
+
this.beginTime = (performance || Date).now();
|
|
56
54
|
this.prevTime = this.beginTime;
|
|
57
55
|
this.prevCpuTime = this.beginTime;
|
|
58
56
|
this.frames = 0;
|
|
@@ -67,8 +65,8 @@ class Stats {
|
|
|
67
65
|
|
|
68
66
|
this.queryCreated = false;
|
|
69
67
|
|
|
70
|
-
this.fpsPanel = this.addPanel(
|
|
71
|
-
this.msPanel = this.addPanel(
|
|
68
|
+
this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'), 0);
|
|
69
|
+
this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'), 1);
|
|
72
70
|
this.gpuPanel = null;
|
|
73
71
|
|
|
74
72
|
this.samplesLog = samplesLog;
|
|
@@ -76,38 +74,38 @@ class Stats {
|
|
|
76
74
|
this.precision = precision;
|
|
77
75
|
this.logsPerSecond = logsPerSecond;
|
|
78
76
|
|
|
79
|
-
if (
|
|
77
|
+
if (this.minimal) {
|
|
80
78
|
|
|
81
|
-
this.container.addEventListener(
|
|
79
|
+
this.container.addEventListener('click', (event) => {
|
|
82
80
|
|
|
83
81
|
event.preventDefault();
|
|
84
|
-
this.showPanel(
|
|
82
|
+
this.showPanel(++this.mode % this.container.children.length);
|
|
85
83
|
|
|
86
|
-
}, false
|
|
84
|
+
}, false);
|
|
87
85
|
|
|
88
86
|
this.mode = mode;
|
|
89
|
-
this.showPanel(
|
|
87
|
+
this.showPanel(this.mode);
|
|
90
88
|
|
|
91
89
|
} else {
|
|
92
90
|
|
|
93
|
-
window.addEventListener('resize', () =>{
|
|
94
|
-
|
|
95
|
-
this.resizePanel(
|
|
96
|
-
this.resizePanel(
|
|
97
|
-
|
|
91
|
+
window.addEventListener('resize', () => {
|
|
92
|
+
|
|
93
|
+
this.resizePanel(this.fpsPanel, 0);
|
|
94
|
+
this.resizePanel(this.msPanel, 1);
|
|
95
|
+
|
|
98
96
|
if (this.gpuPanel) {
|
|
99
|
-
this.resizePanel(
|
|
97
|
+
this.resizePanel(this.gpuPanel, 2);
|
|
100
98
|
}
|
|
101
99
|
})
|
|
102
100
|
}
|
|
103
101
|
|
|
104
102
|
}
|
|
105
103
|
|
|
106
|
-
resizePanel(
|
|
104
|
+
resizePanel(panel: Panel, offset: number) {
|
|
107
105
|
|
|
108
106
|
panel.canvas.style.position = 'absolute';
|
|
109
107
|
|
|
110
|
-
if (
|
|
108
|
+
if (this.minimal) {
|
|
111
109
|
|
|
112
110
|
panel.canvas.style.display = 'none';
|
|
113
111
|
|
|
@@ -119,18 +117,18 @@ class Stats {
|
|
|
119
117
|
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
|
|
120
118
|
} else {
|
|
121
119
|
panel.canvas.style.left = '0px';
|
|
122
|
-
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR
|
|
120
|
+
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
|
|
123
121
|
|
|
124
122
|
}
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
|
-
|
|
125
|
+
|
|
128
126
|
addPanel(panel: Panel, offset: number) {
|
|
129
127
|
|
|
130
|
-
if(panel.canvas) {
|
|
128
|
+
if (panel.canvas) {
|
|
131
129
|
|
|
132
130
|
this.container.appendChild(panel.canvas);
|
|
133
|
-
|
|
131
|
+
|
|
134
132
|
this.resizePanel(panel, offset);
|
|
135
133
|
|
|
136
134
|
}
|
|
@@ -139,9 +137,9 @@ class Stats {
|
|
|
139
137
|
|
|
140
138
|
}
|
|
141
139
|
|
|
142
|
-
showPanel(
|
|
140
|
+
showPanel(id: number) {
|
|
143
141
|
|
|
144
|
-
for (
|
|
142
|
+
for (let i = 0; i < this.container.children.length; i++) {
|
|
145
143
|
const child = this.container.children[i] as HTMLElement;
|
|
146
144
|
|
|
147
145
|
child.style.display = i === id ? 'block' : 'none';
|
|
@@ -152,46 +150,62 @@ class Stats {
|
|
|
152
150
|
|
|
153
151
|
}
|
|
154
152
|
|
|
155
|
-
init(
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
this.ext = this.gl ? this.gl.getExtension( 'EXT_disjoint_timer_query_webgl2' ) : null;
|
|
161
|
-
if ( this.ext ) {
|
|
162
|
-
|
|
163
|
-
this.gpuPanel = this.addPanel( new Stats.Panel( 'GPU', '#ff0', '#220' ), 2 );
|
|
153
|
+
init(canvasOrGL: HTMLCanvasElement | OffscreenCanvas | WebGL2RenderingContext) {
|
|
154
|
+
if (!canvasOrGL) {
|
|
155
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
164
158
|
|
|
159
|
+
// Check if canvasOrGL is already a WebGL2RenderingContext
|
|
160
|
+
if (canvasOrGL instanceof WebGL2RenderingContext) {
|
|
161
|
+
this.gl = canvasOrGL;
|
|
162
|
+
}
|
|
163
|
+
// Handle HTMLCanvasElement and OffscreenCanvas
|
|
164
|
+
else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
165
|
+
this.gl = canvasOrGL.getContext('webgl2') as WebGL2RenderingContext;
|
|
166
|
+
if (!this.gl) {
|
|
167
|
+
console.error('Stats: Unable to obtain WebGL2 context.');
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
} else {
|
|
171
|
+
console.error('Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.');
|
|
172
|
+
return;
|
|
165
173
|
}
|
|
166
174
|
|
|
175
|
+
// Get the extension
|
|
176
|
+
this.ext = this.gl.getExtension('EXT_disjoint_timer_query_webgl2');
|
|
177
|
+
if (this.ext) {
|
|
178
|
+
this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
|
|
179
|
+
}
|
|
167
180
|
}
|
|
168
181
|
|
|
182
|
+
|
|
169
183
|
begin() {
|
|
170
184
|
|
|
171
|
-
this.beginProfiling(
|
|
172
|
-
if (
|
|
185
|
+
this.beginProfiling('cpu-started');
|
|
186
|
+
if (!this.gl || !this.ext) return;
|
|
173
187
|
|
|
174
188
|
|
|
175
|
-
if (
|
|
189
|
+
if (this.query) {
|
|
176
190
|
|
|
177
|
-
const available = this.gl.getQueryParameter(
|
|
178
|
-
this.disjoint = this.gl.getParameter(
|
|
191
|
+
const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
|
|
192
|
+
this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
|
|
179
193
|
|
|
180
|
-
if (
|
|
194
|
+
if (available && !this.disjoint) {
|
|
181
195
|
|
|
182
|
-
this.ns = this.gl.getQueryParameter(
|
|
196
|
+
this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
|
|
183
197
|
const ms = this.ns * 1e-6;
|
|
184
198
|
|
|
185
|
-
if (
|
|
199
|
+
if (available || this.disjoint) {
|
|
186
200
|
|
|
187
|
-
this.gl.deleteQuery(
|
|
201
|
+
this.gl.deleteQuery(this.query);
|
|
188
202
|
this.query = null;
|
|
189
203
|
|
|
190
204
|
}
|
|
191
205
|
|
|
192
|
-
if (
|
|
206
|
+
if (available) {
|
|
193
207
|
|
|
194
|
-
this.addToAverage(
|
|
208
|
+
this.addToAverage(ms, this.averageGpu);
|
|
195
209
|
|
|
196
210
|
}
|
|
197
211
|
|
|
@@ -199,13 +213,13 @@ class Stats {
|
|
|
199
213
|
|
|
200
214
|
}
|
|
201
215
|
|
|
202
|
-
if (
|
|
216
|
+
if (!this.query) {
|
|
203
217
|
|
|
204
218
|
this.queryCreated = true;
|
|
205
219
|
this.query = this.gl.createQuery();
|
|
206
220
|
|
|
207
|
-
if (
|
|
208
|
-
this.gl.beginQuery(
|
|
221
|
+
if (this.query) {
|
|
222
|
+
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
|
|
209
223
|
}
|
|
210
224
|
|
|
211
225
|
}
|
|
@@ -216,14 +230,14 @@ class Stats {
|
|
|
216
230
|
|
|
217
231
|
this.beginTime = this.endInternal()
|
|
218
232
|
|
|
219
|
-
this.endProfiling(
|
|
233
|
+
this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration', this.averageCpu);
|
|
220
234
|
|
|
221
|
-
if (
|
|
235
|
+
if (!this.gl || !this.ext) return;
|
|
222
236
|
|
|
223
237
|
|
|
224
|
-
if (
|
|
238
|
+
if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
|
|
225
239
|
|
|
226
|
-
this.gl.endQuery(
|
|
240
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
227
241
|
|
|
228
242
|
}
|
|
229
243
|
|
|
@@ -232,19 +246,19 @@ class Stats {
|
|
|
232
246
|
|
|
233
247
|
endInternal() {
|
|
234
248
|
|
|
235
|
-
this.frames
|
|
236
|
-
const time = (
|
|
249
|
+
this.frames++;
|
|
250
|
+
const time = (performance || Date).now();
|
|
237
251
|
|
|
238
252
|
if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
|
|
239
|
-
this.updatePanel(
|
|
240
|
-
this.updatePanel(
|
|
253
|
+
this.updatePanel(this.msPanel, this.averageCpu);
|
|
254
|
+
this.updatePanel(this.gpuPanel, this.averageGpu);
|
|
241
255
|
|
|
242
256
|
this.prevCpuTime = time;
|
|
243
257
|
}
|
|
244
258
|
|
|
245
|
-
if (
|
|
259
|
+
if (time >= this.prevTime + 1000) {
|
|
246
260
|
|
|
247
|
-
const fps = (
|
|
261
|
+
const fps = (this.frames * 1000) / (time - this.prevTime);
|
|
248
262
|
|
|
249
263
|
this.fpsPanel.update(fps, fps, 100, 100, 0);
|
|
250
264
|
|
|
@@ -257,17 +271,17 @@ class Stats {
|
|
|
257
271
|
|
|
258
272
|
}
|
|
259
273
|
|
|
260
|
-
addToAverage(
|
|
274
|
+
addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
|
|
261
275
|
|
|
262
|
-
averageArray.logs.push(
|
|
263
|
-
if (
|
|
276
|
+
averageArray.logs.push(value);
|
|
277
|
+
if (averageArray.logs.length > this.samplesLog) {
|
|
264
278
|
|
|
265
279
|
averageArray.logs.shift();
|
|
266
280
|
|
|
267
281
|
}
|
|
268
282
|
|
|
269
|
-
averageArray.graph.push(
|
|
270
|
-
if (
|
|
283
|
+
averageArray.graph.push(value);
|
|
284
|
+
if (averageArray.graph.length > this.samplesGraph) {
|
|
271
285
|
|
|
272
286
|
averageArray.graph.shift();
|
|
273
287
|
|
|
@@ -275,29 +289,29 @@ class Stats {
|
|
|
275
289
|
|
|
276
290
|
}
|
|
277
291
|
|
|
278
|
-
beginProfiling(
|
|
292
|
+
beginProfiling(marker: string) {
|
|
279
293
|
|
|
280
|
-
if (
|
|
294
|
+
if (window.performance) {
|
|
281
295
|
|
|
282
|
-
window.performance.mark(
|
|
296
|
+
window.performance.mark(marker);
|
|
283
297
|
|
|
284
298
|
}
|
|
285
299
|
|
|
286
300
|
}
|
|
287
301
|
|
|
288
|
-
endProfiling(
|
|
302
|
+
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string, averageArray: { logs: number[], graph: number[] }) {
|
|
289
303
|
|
|
290
|
-
if (
|
|
304
|
+
if (window.performance && endMarker) {
|
|
291
305
|
|
|
292
|
-
window.performance.mark(
|
|
293
|
-
const cpuMeasure = performance.measure(
|
|
294
|
-
this.addToAverage(
|
|
306
|
+
window.performance.mark(endMarker);
|
|
307
|
+
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
|
|
308
|
+
this.addToAverage(cpuMeasure.duration, averageArray);
|
|
295
309
|
|
|
296
310
|
}
|
|
297
311
|
|
|
298
312
|
}
|
|
299
313
|
|
|
300
|
-
updatePanel(panel: { update: any; } | null, averageArray: {logs: number[], graph: number[]}) {
|
|
314
|
+
updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }) {
|
|
301
315
|
|
|
302
316
|
if (averageArray.logs.length > 0) {
|
|
303
317
|
|
|
@@ -327,7 +341,7 @@ class Stats {
|
|
|
327
341
|
}
|
|
328
342
|
|
|
329
343
|
if (panel) {
|
|
330
|
-
panel.update(sumLog / Math.min(averageArray.logs.length,this.samplesLog), sumGraph / Math.min(averageArray.graph.length,this.samplesGraph), max, maxGraph, this.precision);
|
|
344
|
+
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
|
|
331
345
|
}
|
|
332
346
|
|
|
333
347
|
}
|