@vpalmisano/webrtcperf 4.4.14 → 4.5.2
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/app.min.js +1 -1
- package/build/src/app.js +12 -0
- package/build/src/app.js.map +1 -1
- package/build/src/config.js +2 -1
- package/build/src/config.js.map +1 -1
- package/build/src/docker.js +1 -0
- package/build/src/docker.js.map +1 -1
- package/build/src/plot.d.ts +11 -0
- package/build/src/plot.js +401 -0
- package/build/src/plot.js.map +1 -1
- package/build/src/scenarios.d.ts +2 -1
- package/build/src/scenarios.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -8
- package/src/app.ts +12 -0
- package/src/config.ts +2 -1
- package/src/docker.ts +1 -0
- package/src/plot.ts +413 -0
- package/src/scenarios.ts +8 -9
package/build/src/plot.js
CHANGED
|
@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.plotConfig = plotConfig;
|
|
7
7
|
exports.plot = plot;
|
|
8
8
|
exports.plotHtml = plotHtml;
|
|
9
|
+
exports.plotDetailedStatsDashboard = plotDetailedStatsDashboard;
|
|
9
10
|
const fs_1 = __importDefault(require("fs"));
|
|
10
11
|
const utils_1 = require("./utils");
|
|
11
12
|
const json5_1 = __importDefault(require("json5"));
|
|
13
|
+
const scenarios_1 = require("./scenarios");
|
|
14
|
+
const path_1 = __importDefault(require("path"));
|
|
12
15
|
const log = (0, utils_1.logger)('webrtcperf:plot');
|
|
13
16
|
const SERIES_COLORS = [
|
|
14
17
|
'rgba(33, 150, 243, 1)',
|
|
@@ -121,4 +124,402 @@ async function plotHtml(options, series) {
|
|
|
121
124
|
</html>`;
|
|
122
125
|
await fs_1.default.promises.writeFile(options.filePath || 'plot.html', data);
|
|
123
126
|
}
|
|
127
|
+
function groupByParticipant(rows) {
|
|
128
|
+
const m = new Map();
|
|
129
|
+
for (const r of rows) {
|
|
130
|
+
if (!r.participantName)
|
|
131
|
+
continue;
|
|
132
|
+
const p = r.participantName;
|
|
133
|
+
if (!m.has(p))
|
|
134
|
+
m.set(p, []);
|
|
135
|
+
m.get(p).push(r);
|
|
136
|
+
}
|
|
137
|
+
return m;
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* It plots a detailed stats dashboard from a CSV file.
|
|
141
|
+
* @param statsFile The path to the CSV file containing the detailed stats.
|
|
142
|
+
* @param outFile The path to the output HTML file.
|
|
143
|
+
* @returns A promise that resolves when the plot is complete.
|
|
144
|
+
* @example
|
|
145
|
+
* ```bash
|
|
146
|
+
* webrtcperf --plot logs/detailed-stats.csv plot.html
|
|
147
|
+
* ```
|
|
148
|
+
*/
|
|
149
|
+
async function plotDetailedStatsDashboard(statsFile, outFile = 'plot.html') {
|
|
150
|
+
log.info(`Plotting detailed stats from ${statsFile} to ${outFile}`);
|
|
151
|
+
const rows = await (0, scenarios_1.parseStatsFile)(statsFile);
|
|
152
|
+
if (rows.length === 0) {
|
|
153
|
+
log.warn('No stats found');
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
const byParticipant = groupByParticipant(rows);
|
|
157
|
+
const participants = Array.from(byParticipant.keys()).sort();
|
|
158
|
+
const charts = [];
|
|
159
|
+
const build = (id, title, yLabel, processValue, width) => {
|
|
160
|
+
const series = [];
|
|
161
|
+
if (!id.startsWith('_')) {
|
|
162
|
+
for (const [participant, rows] of byParticipant.entries()) {
|
|
163
|
+
const dataPerTrack = new Map();
|
|
164
|
+
for (const r of rows) {
|
|
165
|
+
const trackId = r.trackId || '';
|
|
166
|
+
if (!dataPerTrack.has(trackId))
|
|
167
|
+
dataPerTrack.set(trackId, []);
|
|
168
|
+
const data = dataPerTrack.get(trackId);
|
|
169
|
+
const v = r[id];
|
|
170
|
+
if (v !== undefined)
|
|
171
|
+
data.push({ x: r.datetime, y: processValue ? processValue(v) : v });
|
|
172
|
+
}
|
|
173
|
+
dataPerTrack.forEach((data, trackId) => {
|
|
174
|
+
if (data.length)
|
|
175
|
+
series.push({ label: `${participant}${trackId ? ` (${trackId})` : ''}`, data: data });
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
charts.push({ id, title, yLabel, datasets: series, width });
|
|
180
|
+
};
|
|
181
|
+
const kbps = (v) => v / 1000;
|
|
182
|
+
const percent = (v) => v * 100;
|
|
183
|
+
const ms = (v) => v * 1000;
|
|
184
|
+
[
|
|
185
|
+
{ id: '_throttle', title: 'Throttle settings' },
|
|
186
|
+
{ id: 'throttleUpRate', title: 'Throttle up rate', yLabel: 'Kbps', processValue: kbps, width: 2 },
|
|
187
|
+
{ id: 'throttleUpDelay', title: 'Throttle up delay', yLabel: 'ms', width: 2 },
|
|
188
|
+
{ id: 'throttleUpLoss', title: 'Throttle up loss', yLabel: '%', width: 2 },
|
|
189
|
+
{ id: 'throttleDownRate', title: 'Throttle down rate', yLabel: 'Kbps', processValue: kbps, width: 2 },
|
|
190
|
+
{ id: 'throttleDownDelay', title: 'Throttle down delay', yLabel: 'ms', width: 2 },
|
|
191
|
+
{ id: 'throttleDownLoss', title: 'Throttle down loss', yLabel: '%', width: 2 },
|
|
192
|
+
// Performance / Connectivity
|
|
193
|
+
{ id: '_performance', title: 'Performance / Connectivity' },
|
|
194
|
+
{ id: 'pageCpu', title: 'Page CPU', yLabel: '%' },
|
|
195
|
+
{ id: 'pageMemory', title: 'Page memory', yLabel: 'MB' },
|
|
196
|
+
{ id: 'peerConnectionConnectionTime', title: 'Peer connection connection time', yLabel: 's' },
|
|
197
|
+
{ id: 'peerConnectionDisconnectionTime', title: 'Peer connection disconnection time', yLabel: 's' },
|
|
198
|
+
// Sent audio
|
|
199
|
+
{ id: '_sentAudio', title: 'Sent audio' },
|
|
200
|
+
{ id: 'audioSentBitrates', title: 'Sent audio bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
201
|
+
{ id: 'audioSentPacketsLossRate', title: 'Send audio loss', yLabel: '%', processValue: percent },
|
|
202
|
+
{ id: 'audioSentRoundTripTime', title: 'Send audio RTT', yLabel: 'ms', processValue: ms },
|
|
203
|
+
{ id: 'audioSentJitter', title: 'Send audio jitter', yLabel: 'ms', processValue: ms },
|
|
204
|
+
// Sent video
|
|
205
|
+
{ id: '_sentVideo', title: 'Sent video' },
|
|
206
|
+
{ id: 'videoSentBitrates', title: 'Sent video bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
207
|
+
{ id: 'videoSentPacketsLossRate', title: 'Send video loss', yLabel: '%', processValue: percent },
|
|
208
|
+
{ id: 'videoSentRoundTripTime', title: 'Send video RTT', yLabel: 'ms', processValue: ms },
|
|
209
|
+
{ id: 'videoSentJitter', title: 'Send video jitter', yLabel: 'ms', processValue: ms },
|
|
210
|
+
{ id: 'videoSentWidth', title: 'Send video width', yLabel: 'px' },
|
|
211
|
+
{ id: 'videoSentHeight', title: 'Send video height', yLabel: 'px' },
|
|
212
|
+
{ id: 'videoSentFps', title: 'Send video framerate', yLabel: 'fps' },
|
|
213
|
+
{
|
|
214
|
+
id: 'transportSentAvailableOutgoingBitrate',
|
|
215
|
+
title: 'Send available bitrate',
|
|
216
|
+
yLabel: 'Kbps',
|
|
217
|
+
processValue: kbps,
|
|
218
|
+
},
|
|
219
|
+
{ id: 'videoQualityLimitationCpu', title: 'Send video CPU limitation', yLabel: '%' },
|
|
220
|
+
{ id: 'videoQualityLimitationBandwidth', title: 'Send video bandwidth limitation', yLabel: '%' },
|
|
221
|
+
{ id: 'videoFirCountReceived', title: 'Send video FIR count', yLabel: 'count' },
|
|
222
|
+
{ id: 'videoPliCountReceived', title: 'Send video PLI count', yLabel: 'count' },
|
|
223
|
+
// Sent screen
|
|
224
|
+
{ id: '_sentScreen', title: 'Sent screen' },
|
|
225
|
+
{ id: 'screenSentBitrates', title: 'Sent screen bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
226
|
+
{ id: 'screenSentPacketsLossRate', title: 'Send screen loss', yLabel: '%', processValue: percent },
|
|
227
|
+
{ id: 'screenSentRoundTripTime', title: 'Send screen RTT', yLabel: 'ms', processValue: ms },
|
|
228
|
+
{ id: 'screenSentJitter', title: 'Send screen jitter', yLabel: 'ms', processValue: ms },
|
|
229
|
+
{ id: 'screenSentWidth', title: 'Send screen width', yLabel: 'px' },
|
|
230
|
+
{ id: 'screenSentHeight', title: 'Send screen height', yLabel: 'px' },
|
|
231
|
+
{ id: 'screenSentFps', title: 'Send screen framerate', yLabel: 'fps' },
|
|
232
|
+
{ id: '' },
|
|
233
|
+
{ id: 'screenQualityLimitationCpu', title: 'Send screen CPU limitation', yLabel: '%' },
|
|
234
|
+
{ id: 'screenQualityLimitationBandwidth', title: 'Send screen bandwidth limitation', yLabel: '%' },
|
|
235
|
+
{ id: 'screenFirCountReceived', title: 'Send screen FIR count', yLabel: 'count' },
|
|
236
|
+
{ id: 'screenPliCountReceived', title: 'Send screen PLI count', yLabel: 'count' },
|
|
237
|
+
// Recv audio
|
|
238
|
+
{ id: '_recvAudio', title: 'Recv audio' },
|
|
239
|
+
{ id: 'audioRecvBitrates', title: 'Recv audio bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
240
|
+
{ id: 'audioRecvPacketsLossRate', title: 'Recv audio loss', yLabel: '%', processValue: percent },
|
|
241
|
+
{ id: 'audioRecvJitter', title: 'Recv audio jitter', yLabel: 'ms', processValue: ms },
|
|
242
|
+
{ id: 'audioRecvAvgJitterBufferDelay', title: 'Recv audio jitter buffer', yLabel: 'ms', processValue: ms },
|
|
243
|
+
{ id: 'audioRecvLevel', title: 'Recv audio level', yLabel: 'db' },
|
|
244
|
+
{ id: 'audioRecvConcealmentEvents', title: 'Recv audio concealment events', yLabel: 'count' },
|
|
245
|
+
{
|
|
246
|
+
id: 'audioRecvInsertedSamplesForDeceleration',
|
|
247
|
+
title: 'Recv audio inserted samples',
|
|
248
|
+
yLabel: 'count',
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
id: 'audioRecvRemovedSamplesForAcceleration',
|
|
252
|
+
title: 'Recv audio removed samples',
|
|
253
|
+
yLabel: 'count',
|
|
254
|
+
},
|
|
255
|
+
{ id: 'audioRecvEndToEndDelay', title: 'Recv audio end to end delay', yLabel: 'ms', processValue: ms },
|
|
256
|
+
// Recv video
|
|
257
|
+
{ id: '_recvVideo', title: 'Recv video' },
|
|
258
|
+
{ id: 'videoRecvBitrates', title: 'Recv video bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
259
|
+
{ id: 'videoRecvPacketsLossRate', title: 'Recv video loss', yLabel: '%', processValue: percent },
|
|
260
|
+
{ id: 'videoRecvJitter', title: 'Recv video jitter', yLabel: 'ms', processValue: ms },
|
|
261
|
+
{ id: 'videoRecvAvgJitterBufferDelay', title: 'Recv video jitter buffer', yLabel: 'ms', processValue: ms },
|
|
262
|
+
{ id: 'videoRecvWidth', title: 'Recv video width', yLabel: 'px' },
|
|
263
|
+
{ id: 'videoRecvHeight', title: 'Recv video height', yLabel: 'px' },
|
|
264
|
+
{ id: 'videoRecvFps', title: 'Recv video framerate', yLabel: 'fps' },
|
|
265
|
+
{ id: 'videoTotalFreezesDuration', title: 'Recv video freezes', yLabel: 'count' },
|
|
266
|
+
{ id: 'videoFirCountSent', title: 'Recv video FIR sent', yLabel: 'count' },
|
|
267
|
+
{ id: 'videoPliCountSent', title: 'Recv video PLI sent', yLabel: 'count' },
|
|
268
|
+
{ id: 'videoRecvEndToEndDelay', title: 'Recv video end to end delay', yLabel: 'ms', processValue: ms },
|
|
269
|
+
{ id: '' },
|
|
270
|
+
// Recv screen
|
|
271
|
+
{ id: '_recvScreen', title: 'Recv screen' },
|
|
272
|
+
{ id: 'screenRecvBitrates', title: 'Recv screen bitrate', yLabel: 'Kbps', processValue: kbps },
|
|
273
|
+
{ id: 'screenRecvPacketsLossRate', title: 'Recv screen loss', yLabel: '%', processValue: percent },
|
|
274
|
+
{ id: 'screenRecvJitter', title: 'Recv screen jitter', yLabel: 'ms', processValue: ms },
|
|
275
|
+
{ id: 'screenRecvAvgJitterBufferDelay', title: 'Recv screen jitter buffer', yLabel: 'ms', processValue: ms },
|
|
276
|
+
{ id: 'screenRecvWidth', title: 'Recv screen width', yLabel: 'px' },
|
|
277
|
+
{ id: 'screenRecvHeight', title: 'Recv screen height', yLabel: 'px' },
|
|
278
|
+
{ id: 'screenRecvFps', title: 'Recv screen framerate', yLabel: 'fps' },
|
|
279
|
+
{ id: 'screenTotalFreezesDuration', title: 'Recv screen freezes', yLabel: 'count' },
|
|
280
|
+
{ id: 'screenFirCountSent', title: 'Recv screen FIR sent', yLabel: 'count' },
|
|
281
|
+
{ id: 'screenPliCountSent', title: 'Recv screen PLI sent', yLabel: 'count' },
|
|
282
|
+
{ id: 'screenRecvEndToEndDelay', title: 'Recv screen end to end delay', yLabel: 'ms', processValue: ms },
|
|
283
|
+
{ id: '' },
|
|
284
|
+
].forEach(graph => {
|
|
285
|
+
build(graph.id, graph.title, graph.yLabel, graph.processValue, graph.width);
|
|
286
|
+
});
|
|
287
|
+
const [_, id, scenario] = path_1.default.basename(path_1.default.dirname(statsFile)).split('_');
|
|
288
|
+
const description = (0, scenarios_1.formatThrottleRule)((0, scenarios_1.parseThrottleRule)(scenario), true, false);
|
|
289
|
+
const data = `\
|
|
290
|
+
<!DOCTYPE html>
|
|
291
|
+
<html lang="en">
|
|
292
|
+
<head>
|
|
293
|
+
<meta charset="UTF-8">
|
|
294
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
295
|
+
<title>${id} (${description})</title>
|
|
296
|
+
<link rel="icon" href="https://raw.githubusercontent.com/vpalmisano/webrtcperf/devel/media/logo.svg">
|
|
297
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
298
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars"></script>
|
|
299
|
+
<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
|
|
300
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
|
|
301
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
|
302
|
+
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
|
|
303
|
+
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.css" rel="stylesheet">
|
|
304
|
+
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.js"></script>
|
|
305
|
+
</head>
|
|
306
|
+
<body>
|
|
307
|
+
<div id="app">
|
|
308
|
+
<v-app>
|
|
309
|
+
<v-main>
|
|
310
|
+
<v-app-bar color="primary" density="compact">
|
|
311
|
+
<v-app-bar-title><b>${id}</b> (${description})</v-app-bar-title>
|
|
312
|
+
<template v-slot:append>
|
|
313
|
+
<v-select color="primary" :items="participants" v-model="selected" density="compact" variant="solo" hide-details="auto"></v-select>
|
|
314
|
+
</template>
|
|
315
|
+
</v-app-bar>
|
|
316
|
+
<v-container fluid>
|
|
317
|
+
<v-row dense>
|
|
318
|
+
<v-col v-for="c in charts" :key="c.id" cols="12" :md="isExpanded(c.id) ? 12 : c.width || 3">
|
|
319
|
+
<template v-if="c.id">
|
|
320
|
+
<v-card color="primary" :variant="c.id.startsWith('_') ? 'tonal' : 'text'">
|
|
321
|
+
<v-card-title class="text-subtitle-1 d-flex align-center flex-nowrap" @click="toggleExpanded(c)" style="cursor: pointer;">
|
|
322
|
+
<span class="text-truncate">{{ c.title }}</span>
|
|
323
|
+
</v-card-title>
|
|
324
|
+
<v-card-text v-if="!c.id.startsWith('_')" style="min-height: 250px;">
|
|
325
|
+
<canvas :id="c.id"></canvas>
|
|
326
|
+
</v-card-text>
|
|
327
|
+
</v-card>
|
|
328
|
+
</template>
|
|
329
|
+
<template v-else>
|
|
330
|
+
<div class="empty-slot"></div>
|
|
331
|
+
</template>
|
|
332
|
+
</v-col>
|
|
333
|
+
</v-row>
|
|
334
|
+
</v-container>
|
|
335
|
+
<v-footer color="primary" density="compact">
|
|
336
|
+
<v-btn class="text-none" variant="text" density="compact" size="small" href="https://github.com/vpalmisano/webrtcperf" target="_blank">Generated with webrtcperf</v-btn>
|
|
337
|
+
</v-footer>
|
|
338
|
+
</v-main>
|
|
339
|
+
</v-app>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
<script>
|
|
343
|
+
const { createApp, onMounted, nextTick, watch, ref } = Vue;
|
|
344
|
+
const vuetify = Vuetify.createVuetify();
|
|
345
|
+
const PARTICIPANTS = ${json5_1.default.stringify(['All', ...participants])};
|
|
346
|
+
const CHARTS = ${json5_1.default.stringify(charts)};
|
|
347
|
+
const SERIES_COLORS = ${json5_1.default.stringify(SERIES_COLORS)};
|
|
348
|
+
|
|
349
|
+
function fmtTime(v) {
|
|
350
|
+
const d = new Date(Number(v));
|
|
351
|
+
if (!isFinite(d.getTime())) return v;
|
|
352
|
+
const pad = n => String(n).padStart(2, '0');
|
|
353
|
+
return pad(d.getHours()) + ':' + pad(d.getMinutes())
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
function buildDatasets(datasets, selected) {
|
|
357
|
+
const filtered = selected === 'All' ? datasets : datasets.filter(d => d.label.startsWith(selected));
|
|
358
|
+
return filtered.map((s, i) => ({
|
|
359
|
+
label: s.label,
|
|
360
|
+
data: s.data,
|
|
361
|
+
fill: false,
|
|
362
|
+
backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],
|
|
363
|
+
borderColor: SERIES_COLORS[i % SERIES_COLORS.length],
|
|
364
|
+
borderWidth: 1,
|
|
365
|
+
pointRadius: 0,
|
|
366
|
+
}));
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
createApp({
|
|
370
|
+
setup() {
|
|
371
|
+
const participants = ref(PARTICIPANTS);
|
|
372
|
+
const selected = ref('All');
|
|
373
|
+
const charts = ref(CHARTS);
|
|
374
|
+
const chartInstances = new Map();
|
|
375
|
+
const expanded = ref(new Set());
|
|
376
|
+
|
|
377
|
+
function onPanZoom({ chart }) {
|
|
378
|
+
const x = chart.scales.x;
|
|
379
|
+
if (!x) return;
|
|
380
|
+
// Sync zoom level across all charts
|
|
381
|
+
for (const { chart: otherChart } of chartInstances.values()) {
|
|
382
|
+
if (otherChart !== chart) {
|
|
383
|
+
const otherX = otherChart.scales.x;
|
|
384
|
+
if (otherX) {
|
|
385
|
+
otherX.options.min = x.min;
|
|
386
|
+
otherX.options.max = x.max;
|
|
387
|
+
otherChart.update('none');
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
function createPanel(chartSpec) {
|
|
394
|
+
const canvas = document.getElementById(chartSpec.id);
|
|
395
|
+
if (!canvas) return;
|
|
396
|
+
const ctx = canvas.getContext('2d');
|
|
397
|
+
const chart = new Chart(ctx, {
|
|
398
|
+
type: 'line',
|
|
399
|
+
options: {
|
|
400
|
+
maintainAspectRatio: false,
|
|
401
|
+
animation: false,
|
|
402
|
+
layout: {
|
|
403
|
+
padding: 0,
|
|
404
|
+
},
|
|
405
|
+
interaction: {
|
|
406
|
+
intersect: false,
|
|
407
|
+
mode: 'x',
|
|
408
|
+
},
|
|
409
|
+
plugins: {
|
|
410
|
+
tooltip: {
|
|
411
|
+
callbacks: {
|
|
412
|
+
title: (context) => {
|
|
413
|
+
if (context[0].parsed.x !== null) {
|
|
414
|
+
return fmtTime(context[0].parsed.x);
|
|
415
|
+
}
|
|
416
|
+
return '';
|
|
417
|
+
},
|
|
418
|
+
label: (context) => {
|
|
419
|
+
return context.parsed.y;
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
},
|
|
423
|
+
legend: {
|
|
424
|
+
display: true,
|
|
425
|
+
position: 'bottom',
|
|
426
|
+
align: 'start',
|
|
427
|
+
maxHeight: 50,
|
|
428
|
+
labels: {
|
|
429
|
+
boxWidth: 8,
|
|
430
|
+
boxHeight: 8,
|
|
431
|
+
font: {
|
|
432
|
+
size: 8,
|
|
433
|
+
lineHeight: 1,
|
|
434
|
+
},
|
|
435
|
+
},
|
|
436
|
+
},
|
|
437
|
+
zoom: {
|
|
438
|
+
pan: {
|
|
439
|
+
enabled: true,
|
|
440
|
+
mode: 'x',
|
|
441
|
+
modifierKey: 'ctrl',
|
|
442
|
+
onPan: onPanZoom,
|
|
443
|
+
},
|
|
444
|
+
zoom: {
|
|
445
|
+
drag: { enabled: true },
|
|
446
|
+
mode: 'x',
|
|
447
|
+
onZoom: onPanZoom,
|
|
448
|
+
},
|
|
449
|
+
},
|
|
450
|
+
},
|
|
451
|
+
scales: {
|
|
452
|
+
x: {
|
|
453
|
+
type: 'linear',
|
|
454
|
+
title: { display: false, text: 'Time' },
|
|
455
|
+
ticks: { display: true, callback: (value) => fmtTime(value) },
|
|
456
|
+
},
|
|
457
|
+
y: {
|
|
458
|
+
type: 'linear',
|
|
459
|
+
title: { display: true, text: chartSpec.yLabel },
|
|
460
|
+
min: 0,
|
|
461
|
+
},
|
|
462
|
+
},
|
|
463
|
+
},
|
|
464
|
+
data: { datasets: buildDatasets(chartSpec.datasets, selected.value) },
|
|
465
|
+
});
|
|
466
|
+
chartInstances.set(chartSpec.id, { chart, spec: chartSpec });
|
|
467
|
+
|
|
468
|
+
canvas.addEventListener('contextmenu', e => {
|
|
469
|
+
e.preventDefault();
|
|
470
|
+
resetZoom();
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
function rebuildCharts() {
|
|
475
|
+
for (const { chart } of chartInstances.values()) chart.destroy();
|
|
476
|
+
chartInstances.clear();
|
|
477
|
+
nextTick(() => charts.value.forEach(createPanel));
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
function applyFilter() {
|
|
481
|
+
for (const { chart, spec } of chartInstances.values()) {
|
|
482
|
+
chart.data.datasets = buildDatasets(spec.datasets, selected.value);
|
|
483
|
+
chart.update();
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
function resetZoom() {
|
|
488
|
+
for (const { chart } of chartInstances.values()) {
|
|
489
|
+
chart.resetZoom('none');
|
|
490
|
+
if (chart.scales.x) {
|
|
491
|
+
chart.scales.x.options.min = undefined;
|
|
492
|
+
chart.scales.x.options.max = undefined;
|
|
493
|
+
}
|
|
494
|
+
chart.update('none');
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
function toggleExpanded(c) {
|
|
499
|
+
const id = c.id;
|
|
500
|
+
const s = new Set(expanded.value);
|
|
501
|
+
if (s.has(id)) s.delete(id); else s.add(id);
|
|
502
|
+
expanded.value = s;
|
|
503
|
+
nextTick(() => { const entry = chartInstances.get(id); entry?.chart?.resize(); });
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
function isExpanded(id) {
|
|
507
|
+
return id.startsWith('_') || expanded.value.has(id);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
onMounted(() => {
|
|
511
|
+
nextTick(() => charts.value.forEach(createPanel));
|
|
512
|
+
window.addEventListener('resize', () => { for (const { chart } of chartInstances.values()) chart.resize(); });
|
|
513
|
+
});
|
|
514
|
+
|
|
515
|
+
watch(selected, () => applyFilter());
|
|
516
|
+
|
|
517
|
+
return { participants, selected, charts, resetZoom, toggleExpanded, isExpanded };
|
|
518
|
+
}
|
|
519
|
+
}).use(vuetify).mount('#app');
|
|
520
|
+
</script>
|
|
521
|
+
</body>
|
|
522
|
+
</html>`;
|
|
523
|
+
await fs_1.default.promises.writeFile(outFile, data);
|
|
524
|
+
}
|
|
124
525
|
//# sourceMappingURL=plot.js.map
|
package/build/src/plot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plot.js","sourceRoot":"","sources":["../../src/plot.ts"],"names":[],"mappings":"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","sourcesContent":["import fs from 'fs'\n\nimport { logger } from './utils'\nimport json5 from 'json5'\n\nconst log = logger('webrtcperf:plot')\n\nexport type PlotOptions = {\n type?: string\n title?: string\n xLabel?: string\n yLabel?: string\n yMin?: number\n yMax?: number\n labels?: (string | number)[]\n filePath?: string\n}\n\nexport type PlotData = {\n label: string\n data: { x: number | string; y: number; yMin?: number; yMax?: number }[]\n}\n\nconst SERIES_COLORS = [\n 'rgba(33, 150, 243, 1)',\n 'rgba(244, 67, 54, 1)',\n 'rgba(76, 175, 80, 1)',\n 'rgba(255, 193, 7, 1)',\n 'rgba(156, 39, 176, 1)',\n]\n\nexport function plotConfig(options: PlotOptions, series: PlotData[]) {\n log.debug('plotConfig')\n\n return {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type: (options.type || 'line') as any,\n options: {\n plugins: {\n title: options.title\n ? {\n display: true,\n text: options.title,\n }\n : undefined,\n zoom: {\n pan: {\n enabled: true,\n mode: 'x',\n modifierKey: 'ctrl',\n },\n zoom: {\n drag: {\n enabled: true,\n },\n mode: 'x',\n },\n },\n },\n scales: {\n x: {\n type: 'category',\n title: options.xLabel\n ? {\n display: true,\n text: options.xLabel,\n }\n : undefined,\n },\n y: {\n type: 'linear',\n title: options.yLabel\n ? {\n display: true,\n text: options.yLabel,\n }\n : undefined,\n min: options.yMin,\n max: options.yMax,\n },\n },\n },\n data: {\n labels: options.labels,\n datasets: series.map((s, i) => ({\n fill: false,\n backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderWidth: 1,\n pointRadius: 0,\n ...s,\n })),\n },\n }\n}\n\nexport async function plot(options: PlotOptions, series: PlotData[]) {\n const {\n CategoryScale,\n Chart,\n LinearScale,\n LineController,\n BarController,\n LineElement,\n BarElement,\n PointElement,\n Legend,\n Title,\n } = await import('chart.js')\n const { BarWithErrorBar, BarWithErrorBarsController } = await import('chartjs-chart-error-bars')\n Chart.register(\n CategoryScale,\n LineController,\n LineElement,\n BarController,\n LinearScale,\n BarElement,\n PointElement,\n Legend,\n Title,\n BarWithErrorBar,\n BarWithErrorBarsController,\n )\n const { Canvas } = await import('skia-canvas')\n\n log.debug('plot')\n const config = plotConfig(options, series)\n const canvas = new Canvas(1280, 720)\n const chart = new Chart(canvas as unknown as HTMLCanvasElement, config)\n await canvas.toFile(options.filePath || 'plot.png', { format: 'png', matte: 'white' })\n chart.destroy()\n}\n\nexport async function plotHtml(options: PlotOptions, series: PlotData[]) {\n log.debug('plotHtml')\n const config = plotConfig(options, series)\n\n const data = `\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${options.title || 'Plot'}</title>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/hammerjs\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom\"></script>\n</head>\n<body>\n <div>\n <canvas id=\"chart\"></canvas>\n </div>\n <script>\n const ctx = document.getElementById('chart');\n const chart = new Chart(ctx, ${json5.stringify(config)});\n chart.options.onClick = e => e.chart.resetZoom();\n addEventListener('resize', () => chart.resize());\n </script>\n</body>\n</html>`\n await fs.promises.writeFile(options.filePath || 'plot.html', data)\n}\n"]}
|
|
1
|
+
{"version":3,"file":"plot.js","sourceRoot":"","sources":["../../src/plot.ts"],"names":[],"mappings":"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","sourcesContent":["import fs from 'fs'\n\nimport { logger } from './utils'\nimport json5 from 'json5'\nimport { formatThrottleRule, parseStatsFile, parseThrottleRule, StatsRow } from './scenarios'\nimport path from 'path'\n\nconst log = logger('webrtcperf:plot')\n\nexport type PlotOptions = {\n type?: string\n title?: string\n xLabel?: string\n yLabel?: string\n yMin?: number\n yMax?: number\n labels?: (string | number)[]\n filePath?: string\n}\n\nexport type PlotData = {\n label: string\n data: { x: number | string; y: number; yMin?: number; yMax?: number }[]\n}\n\nconst SERIES_COLORS = [\n 'rgba(33, 150, 243, 1)',\n 'rgba(244, 67, 54, 1)',\n 'rgba(76, 175, 80, 1)',\n 'rgba(255, 193, 7, 1)',\n 'rgba(156, 39, 176, 1)',\n]\n\nexport function plotConfig(options: PlotOptions, series: PlotData[]) {\n log.debug('plotConfig')\n\n return {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n type: (options.type || 'line') as any,\n options: {\n plugins: {\n title: options.title\n ? {\n display: true,\n text: options.title,\n }\n : undefined,\n zoom: {\n pan: {\n enabled: true,\n mode: 'x',\n modifierKey: 'ctrl',\n },\n zoom: {\n drag: {\n enabled: true,\n },\n mode: 'x',\n },\n },\n },\n scales: {\n x: {\n type: 'category',\n title: options.xLabel\n ? {\n display: true,\n text: options.xLabel,\n }\n : undefined,\n },\n y: {\n type: 'linear',\n title: options.yLabel\n ? {\n display: true,\n text: options.yLabel,\n }\n : undefined,\n min: options.yMin,\n max: options.yMax,\n },\n },\n },\n data: {\n labels: options.labels,\n datasets: series.map((s, i) => ({\n fill: false,\n backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderWidth: 1,\n pointRadius: 0,\n ...s,\n })),\n },\n }\n}\n\nexport async function plot(options: PlotOptions, series: PlotData[]) {\n const {\n CategoryScale,\n Chart,\n LinearScale,\n LineController,\n BarController,\n LineElement,\n BarElement,\n PointElement,\n Legend,\n Title,\n } = await import('chart.js')\n const { BarWithErrorBar, BarWithErrorBarsController } = await import('chartjs-chart-error-bars')\n Chart.register(\n CategoryScale,\n LineController,\n LineElement,\n BarController,\n LinearScale,\n BarElement,\n PointElement,\n Legend,\n Title,\n BarWithErrorBar,\n BarWithErrorBarsController,\n )\n const { Canvas } = await import('skia-canvas')\n\n log.debug('plot')\n const config = plotConfig(options, series)\n const canvas = new Canvas(1280, 720)\n const chart = new Chart(canvas as unknown as HTMLCanvasElement, config)\n await canvas.toFile(options.filePath || 'plot.png', { format: 'png', matte: 'white' })\n chart.destroy()\n}\n\nexport async function plotHtml(options: PlotOptions, series: PlotData[]) {\n log.debug('plotHtml')\n const config = plotConfig(options, series)\n\n const data = `\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${options.title || 'Plot'}</title>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/hammerjs\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom\"></script>\n</head>\n<body>\n <div>\n <canvas id=\"chart\"></canvas>\n </div>\n <script>\n const ctx = document.getElementById('chart');\n const chart = new Chart(ctx, ${json5.stringify(config)});\n chart.options.onClick = e => e.chart.resetZoom();\n addEventListener('resize', () => chart.resize());\n </script>\n</body>\n</html>`\n await fs.promises.writeFile(options.filePath || 'plot.html', data)\n}\n\nfunction groupByParticipant(rows: StatsRow[]) {\n const m = new Map<string, StatsRow[]>()\n for (const r of rows) {\n if (!r.participantName) continue\n const p = r.participantName as string\n if (!m.has(p)) m.set(p, [])\n m.get(p)!.push(r)\n }\n return m\n}\n\n/**\n * It plots a detailed stats dashboard from a CSV file.\n * @param statsFile The path to the CSV file containing the detailed stats.\n * @param outFile The path to the output HTML file.\n * @returns A promise that resolves when the plot is complete.\n * @example\n * ```bash\n * webrtcperf --plot logs/detailed-stats.csv plot.html\n * ```\n */\nexport async function plotDetailedStatsDashboard(statsFile: string, outFile = 'plot.html') {\n log.info(`Plotting detailed stats from ${statsFile} to ${outFile}`)\n\n const rows = await parseStatsFile(statsFile)\n if (rows.length === 0) {\n log.warn('No stats found')\n return\n }\n\n const byParticipant = groupByParticipant(rows)\n const participants = Array.from(byParticipant.keys()).sort()\n\n type ChartSpec = { id: string; title?: string; yLabel?: string; datasets?: PlotData[]; width?: number }\n const charts: ChartSpec[] = []\n\n const build = (\n id: string,\n title?: string,\n yLabel?: string,\n processValue?: (value: number) => number,\n width?: number,\n ) => {\n const series: PlotData[] = []\n if (!id.startsWith('_')) {\n for (const [participant, rows] of byParticipant.entries()) {\n const dataPerTrack = new Map<string, { x: number; y: number }[]>()\n for (const r of rows) {\n const trackId = (r.trackId as string) || ''\n if (!dataPerTrack.has(trackId)) dataPerTrack.set(trackId, [])\n const data = dataPerTrack.get(trackId)!\n const v = r[id] as number\n if (v !== undefined) data.push({ x: r.datetime as number, y: processValue ? processValue(v) : v })\n }\n dataPerTrack.forEach((data, trackId) => {\n if (data.length) series.push({ label: `${participant}${trackId ? ` (${trackId})` : ''}`, data: data })\n })\n }\n }\n charts.push({ id, title, yLabel, datasets: series, width })\n }\n\n const kbps = (v: number) => v / 1000\n const percent = (v: number) => v * 100\n const ms = (v: number) => v * 1000\n\n ;[\n { id: '_throttle', title: 'Throttle settings' },\n { id: 'throttleUpRate', title: 'Throttle up rate', yLabel: 'Kbps', processValue: kbps, width: 2 },\n { id: 'throttleUpDelay', title: 'Throttle up delay', yLabel: 'ms', width: 2 },\n { id: 'throttleUpLoss', title: 'Throttle up loss', yLabel: '%', width: 2 },\n { id: 'throttleDownRate', title: 'Throttle down rate', yLabel: 'Kbps', processValue: kbps, width: 2 },\n { id: 'throttleDownDelay', title: 'Throttle down delay', yLabel: 'ms', width: 2 },\n { id: 'throttleDownLoss', title: 'Throttle down loss', yLabel: '%', width: 2 },\n // Performance / Connectivity\n { id: '_performance', title: 'Performance / Connectivity' },\n { id: 'pageCpu', title: 'Page CPU', yLabel: '%' },\n { id: 'pageMemory', title: 'Page memory', yLabel: 'MB' },\n { id: 'peerConnectionConnectionTime', title: 'Peer connection connection time', yLabel: 's' },\n { id: 'peerConnectionDisconnectionTime', title: 'Peer connection disconnection time', yLabel: 's' },\n // Sent audio\n { id: '_sentAudio', title: 'Sent audio' },\n { id: 'audioSentBitrates', title: 'Sent audio bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'audioSentPacketsLossRate', title: 'Send audio loss', yLabel: '%', processValue: percent },\n { id: 'audioSentRoundTripTime', title: 'Send audio RTT', yLabel: 'ms', processValue: ms },\n { id: 'audioSentJitter', title: 'Send audio jitter', yLabel: 'ms', processValue: ms },\n // Sent video\n { id: '_sentVideo', title: 'Sent video' },\n { id: 'videoSentBitrates', title: 'Sent video bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'videoSentPacketsLossRate', title: 'Send video loss', yLabel: '%', processValue: percent },\n { id: 'videoSentRoundTripTime', title: 'Send video RTT', yLabel: 'ms', processValue: ms },\n { id: 'videoSentJitter', title: 'Send video jitter', yLabel: 'ms', processValue: ms },\n { id: 'videoSentWidth', title: 'Send video width', yLabel: 'px' },\n { id: 'videoSentHeight', title: 'Send video height', yLabel: 'px' },\n { id: 'videoSentFps', title: 'Send video framerate', yLabel: 'fps' },\n {\n id: 'transportSentAvailableOutgoingBitrate',\n title: 'Send available bitrate',\n yLabel: 'Kbps',\n processValue: kbps,\n },\n { id: 'videoQualityLimitationCpu', title: 'Send video CPU limitation', yLabel: '%' },\n { id: 'videoQualityLimitationBandwidth', title: 'Send video bandwidth limitation', yLabel: '%' },\n { id: 'videoFirCountReceived', title: 'Send video FIR count', yLabel: 'count' },\n { id: 'videoPliCountReceived', title: 'Send video PLI count', yLabel: 'count' },\n // Sent screen\n { id: '_sentScreen', title: 'Sent screen' },\n { id: 'screenSentBitrates', title: 'Sent screen bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'screenSentPacketsLossRate', title: 'Send screen loss', yLabel: '%', processValue: percent },\n { id: 'screenSentRoundTripTime', title: 'Send screen RTT', yLabel: 'ms', processValue: ms },\n { id: 'screenSentJitter', title: 'Send screen jitter', yLabel: 'ms', processValue: ms },\n { id: 'screenSentWidth', title: 'Send screen width', yLabel: 'px' },\n { id: 'screenSentHeight', title: 'Send screen height', yLabel: 'px' },\n { id: 'screenSentFps', title: 'Send screen framerate', yLabel: 'fps' },\n { id: '' },\n { id: 'screenQualityLimitationCpu', title: 'Send screen CPU limitation', yLabel: '%' },\n { id: 'screenQualityLimitationBandwidth', title: 'Send screen bandwidth limitation', yLabel: '%' },\n { id: 'screenFirCountReceived', title: 'Send screen FIR count', yLabel: 'count' },\n { id: 'screenPliCountReceived', title: 'Send screen PLI count', yLabel: 'count' },\n // Recv audio\n { id: '_recvAudio', title: 'Recv audio' },\n { id: 'audioRecvBitrates', title: 'Recv audio bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'audioRecvPacketsLossRate', title: 'Recv audio loss', yLabel: '%', processValue: percent },\n { id: 'audioRecvJitter', title: 'Recv audio jitter', yLabel: 'ms', processValue: ms },\n { id: 'audioRecvAvgJitterBufferDelay', title: 'Recv audio jitter buffer', yLabel: 'ms', processValue: ms },\n { id: 'audioRecvLevel', title: 'Recv audio level', yLabel: 'db' },\n { id: 'audioRecvConcealmentEvents', title: 'Recv audio concealment events', yLabel: 'count' },\n {\n id: 'audioRecvInsertedSamplesForDeceleration',\n title: 'Recv audio inserted samples',\n yLabel: 'count',\n },\n {\n id: 'audioRecvRemovedSamplesForAcceleration',\n title: 'Recv audio removed samples',\n yLabel: 'count',\n },\n { id: 'audioRecvEndToEndDelay', title: 'Recv audio end to end delay', yLabel: 'ms', processValue: ms },\n // Recv video\n { id: '_recvVideo', title: 'Recv video' },\n { id: 'videoRecvBitrates', title: 'Recv video bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'videoRecvPacketsLossRate', title: 'Recv video loss', yLabel: '%', processValue: percent },\n { id: 'videoRecvJitter', title: 'Recv video jitter', yLabel: 'ms', processValue: ms },\n { id: 'videoRecvAvgJitterBufferDelay', title: 'Recv video jitter buffer', yLabel: 'ms', processValue: ms },\n { id: 'videoRecvWidth', title: 'Recv video width', yLabel: 'px' },\n { id: 'videoRecvHeight', title: 'Recv video height', yLabel: 'px' },\n { id: 'videoRecvFps', title: 'Recv video framerate', yLabel: 'fps' },\n { id: 'videoTotalFreezesDuration', title: 'Recv video freezes', yLabel: 'count' },\n { id: 'videoFirCountSent', title: 'Recv video FIR sent', yLabel: 'count' },\n { id: 'videoPliCountSent', title: 'Recv video PLI sent', yLabel: 'count' },\n { id: 'videoRecvEndToEndDelay', title: 'Recv video end to end delay', yLabel: 'ms', processValue: ms },\n { id: '' },\n // Recv screen\n { id: '_recvScreen', title: 'Recv screen' },\n { id: 'screenRecvBitrates', title: 'Recv screen bitrate', yLabel: 'Kbps', processValue: kbps },\n { id: 'screenRecvPacketsLossRate', title: 'Recv screen loss', yLabel: '%', processValue: percent },\n { id: 'screenRecvJitter', title: 'Recv screen jitter', yLabel: 'ms', processValue: ms },\n { id: 'screenRecvAvgJitterBufferDelay', title: 'Recv screen jitter buffer', yLabel: 'ms', processValue: ms },\n { id: 'screenRecvWidth', title: 'Recv screen width', yLabel: 'px' },\n { id: 'screenRecvHeight', title: 'Recv screen height', yLabel: 'px' },\n { id: 'screenRecvFps', title: 'Recv screen framerate', yLabel: 'fps' },\n { id: 'screenTotalFreezesDuration', title: 'Recv screen freezes', yLabel: 'count' },\n { id: 'screenFirCountSent', title: 'Recv screen FIR sent', yLabel: 'count' },\n { id: 'screenPliCountSent', title: 'Recv screen PLI sent', yLabel: 'count' },\n { id: 'screenRecvEndToEndDelay', title: 'Recv screen end to end delay', yLabel: 'ms', processValue: ms },\n { id: '' },\n ].forEach(graph => {\n build(graph.id, graph.title, graph.yLabel, graph.processValue, graph.width)\n })\n\n const [_, id, scenario] = path.basename(path.dirname(statsFile)).split('_')\n const description = formatThrottleRule(parseThrottleRule(scenario), true, false)\n\n const data = `\\\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${id} (${description})</title>\n <link rel=\"icon\" href=\"https://raw.githubusercontent.com/vpalmisano/webrtcperf/devel/media/logo.svg\">\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/hammerjs\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom\"></script>\n <script src=\"https://unpkg.com/vue@3/dist/vue.global.prod.js\"></script>\n <link href=\"https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css\" rel=\"stylesheet\">\n <link href=\"https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.css\" rel=\"stylesheet\">\n <script src=\"https://cdn.jsdelivr.net/npm/vuetify@3.7.2/dist/vuetify.min.js\"></script>\n</head>\n<body>\n <div id=\"app\">\n <v-app>\n <v-main>\n <v-app-bar color=\"primary\" density=\"compact\">\n <v-app-bar-title><b>${id}</b> (${description})</v-app-bar-title>\n <template v-slot:append>\n <v-select color=\"primary\" :items=\"participants\" v-model=\"selected\" density=\"compact\" variant=\"solo\" hide-details=\"auto\"></v-select>\n </template>\n </v-app-bar>\n <v-container fluid>\n <v-row dense>\n <v-col v-for=\"c in charts\" :key=\"c.id\" cols=\"12\" :md=\"isExpanded(c.id) ? 12 : c.width || 3\">\n <template v-if=\"c.id\">\n <v-card color=\"primary\" :variant=\"c.id.startsWith('_') ? 'tonal' : 'text'\">\n <v-card-title class=\"text-subtitle-1 d-flex align-center flex-nowrap\" @click=\"toggleExpanded(c)\" style=\"cursor: pointer;\">\n <span class=\"text-truncate\">{{ c.title }}</span>\n </v-card-title>\n <v-card-text v-if=\"!c.id.startsWith('_')\" style=\"min-height: 250px;\">\n <canvas :id=\"c.id\"></canvas>\n </v-card-text>\n </v-card>\n </template>\n <template v-else>\n <div class=\"empty-slot\"></div>\n </template>\n </v-col>\n </v-row>\n </v-container>\n <v-footer color=\"primary\" density=\"compact\">\n <v-btn class=\"text-none\" variant=\"text\" density=\"compact\" size=\"small\" href=\"https://github.com/vpalmisano/webrtcperf\" target=\"_blank\">Generated with webrtcperf</v-btn>\n </v-footer>\n </v-main>\n </v-app>\n </div>\n\n <script>\n const { createApp, onMounted, nextTick, watch, ref } = Vue;\n const vuetify = Vuetify.createVuetify();\n const PARTICIPANTS = ${json5.stringify(['All', ...participants])};\n const CHARTS = ${json5.stringify(charts)};\n const SERIES_COLORS = ${json5.stringify(SERIES_COLORS)};\n\n function fmtTime(v) {\n const d = new Date(Number(v));\n if (!isFinite(d.getTime())) return v;\n const pad = n => String(n).padStart(2, '0');\n return pad(d.getHours()) + ':' + pad(d.getMinutes())\n }\n\n function buildDatasets(datasets, selected) {\n const filtered = selected === 'All' ? datasets : datasets.filter(d => d.label.startsWith(selected));\n return filtered.map((s, i) => ({\n label: s.label,\n data: s.data,\n fill: false,\n backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderColor: SERIES_COLORS[i % SERIES_COLORS.length],\n borderWidth: 1,\n pointRadius: 0,\n }));\n }\n\n createApp({\n setup() {\n const participants = ref(PARTICIPANTS);\n const selected = ref('All');\n const charts = ref(CHARTS);\n const chartInstances = new Map();\n const expanded = ref(new Set());\n\n function onPanZoom({ chart }) {\n const x = chart.scales.x;\n if (!x) return;\n // Sync zoom level across all charts\n for (const { chart: otherChart } of chartInstances.values()) {\n if (otherChart !== chart) {\n const otherX = otherChart.scales.x;\n if (otherX) {\n otherX.options.min = x.min;\n otherX.options.max = x.max;\n otherChart.update('none');\n }\n }\n }\n }\n\n function createPanel(chartSpec) {\n const canvas = document.getElementById(chartSpec.id);\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n const chart = new Chart(ctx, {\n type: 'line',\n options: {\n maintainAspectRatio: false,\n animation: false,\n layout: {\n padding: 0,\n },\n interaction: {\n intersect: false,\n mode: 'x',\n },\n plugins: {\n tooltip: {\n callbacks: {\n title: (context) => {\n if (context[0].parsed.x !== null) {\n return fmtTime(context[0].parsed.x);\n }\n return '';\n },\n label: (context) => {\n return context.parsed.y;\n }\n },\n },\n legend: { \n display: true,\n position: 'bottom',\n align: 'start',\n maxHeight: 50,\n labels: {\n boxWidth: 8,\n boxHeight: 8,\n font: {\n size: 8,\n lineHeight: 1,\n },\n },\n },\n zoom: {\n pan: {\n enabled: true,\n mode: 'x',\n modifierKey: 'ctrl',\n onPan: onPanZoom,\n },\n zoom: {\n drag: { enabled: true },\n mode: 'x',\n onZoom: onPanZoom,\n },\n },\n },\n scales: {\n x: { \n type: 'linear',\n title: { display: false, text: 'Time' },\n ticks: { display: true, callback: (value) => fmtTime(value) },\n },\n y: {\n type: 'linear',\n title: { display: true, text: chartSpec.yLabel },\n min: 0,\n },\n },\n },\n data: { datasets: buildDatasets(chartSpec.datasets, selected.value) },\n });\n chartInstances.set(chartSpec.id, { chart, spec: chartSpec });\n\n canvas.addEventListener('contextmenu', e => {\n e.preventDefault();\n resetZoom();\n });\n }\n\n function rebuildCharts() {\n for (const { chart } of chartInstances.values()) chart.destroy();\n chartInstances.clear();\n nextTick(() => charts.value.forEach(createPanel));\n }\n\n function applyFilter() {\n for (const { chart, spec } of chartInstances.values()) {\n chart.data.datasets = buildDatasets(spec.datasets, selected.value);\n chart.update();\n }\n }\n\n function resetZoom() {\n for (const { chart } of chartInstances.values()) {\n chart.resetZoom('none');\n if (chart.scales.x) {\n chart.scales.x.options.min = undefined;\n chart.scales.x.options.max = undefined;\n }\n chart.update('none');\n }\n }\n\n function toggleExpanded(c) {\n const id = c.id;\n const s = new Set(expanded.value);\n if (s.has(id)) s.delete(id); else s.add(id);\n expanded.value = s;\n nextTick(() => { const entry = chartInstances.get(id); entry?.chart?.resize(); });\n }\n\n function isExpanded(id) {\n return id.startsWith('_') || expanded.value.has(id);\n }\n\n onMounted(() => {\n nextTick(() => charts.value.forEach(createPanel));\n window.addEventListener('resize', () => { for (const { chart } of chartInstances.values()) chart.resize(); });\n });\n\n watch(selected, () => applyFilter());\n\n return { participants, selected, charts, resetZoom, toggleExpanded, isExpanded };\n }\n }).use(vuetify).mount('#app');\n </script>\n</body>\n</html>`\n\n await fs.promises.writeFile(outFile, data)\n}\n"]}
|
package/build/src/scenarios.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { FastStats } from './stats';
|
|
2
2
|
import { ThrottleRule } from '@vpalmisano/throttler';
|
|
3
|
+
export type StatsRow = Record<string, string | number>;
|
|
3
4
|
/**
|
|
4
5
|
* It parses a CSV stats file and returns an array of objects representing each row.
|
|
5
6
|
* @param filePath The path to the CSV stats file.
|
|
6
7
|
* @returns An array of objects where each object represents a row in the CSV file with keys as column headers.
|
|
7
8
|
*/
|
|
8
|
-
export declare function parseStatsFile(filePath: string): Promise<
|
|
9
|
+
export declare function parseStatsFile(filePath: string): Promise<StatsRow[]>;
|
|
9
10
|
export type StatsSummary = {
|
|
10
11
|
timestamp: number;
|
|
11
12
|
id: string;
|