@vpalmisano/webrtcperf 4.5.1 → 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/plot.d.ts +10 -0
- package/build/src/plot.js +11 -0
- package/build/src/plot.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/plot.ts +12 -0
package/build/src/plot.d.ts
CHANGED
|
@@ -78,4 +78,14 @@ export declare function plotConfig(options: PlotOptions, series: PlotData[]): {
|
|
|
78
78
|
};
|
|
79
79
|
export declare function plot(options: PlotOptions, series: PlotData[]): Promise<void>;
|
|
80
80
|
export declare function plotHtml(options: PlotOptions, series: PlotData[]): Promise<void>;
|
|
81
|
+
/**
|
|
82
|
+
* It plots a detailed stats dashboard from a CSV file.
|
|
83
|
+
* @param statsFile The path to the CSV file containing the detailed stats.
|
|
84
|
+
* @param outFile The path to the output HTML file.
|
|
85
|
+
* @returns A promise that resolves when the plot is complete.
|
|
86
|
+
* @example
|
|
87
|
+
* ```bash
|
|
88
|
+
* webrtcperf --plot logs/detailed-stats.csv plot.html
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
81
91
|
export declare function plotDetailedStatsDashboard(statsFile: string, outFile?: string): Promise<void>;
|
package/build/src/plot.js
CHANGED
|
@@ -136,7 +136,18 @@ function groupByParticipant(rows) {
|
|
|
136
136
|
}
|
|
137
137
|
return m;
|
|
138
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
|
+
*/
|
|
139
149
|
async function plotDetailedStatsDashboard(statsFile, outFile = 'plot.html') {
|
|
150
|
+
log.info(`Plotting detailed stats from ${statsFile} to ${outFile}`);
|
|
140
151
|
const rows = await (0, scenarios_1.parseStatsFile)(statsFile);
|
|
141
152
|
if (rows.length === 0) {
|
|
142
153
|
log.warn('No stats found');
|
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'\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\nexport async function plotDetailedStatsDashboard(statsFile: string, outFile = 'plot.html') {\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"]}
|
|
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"]}
|