@vpalmisano/webrtcperf 4.4.12 → 4.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpalmisano/webrtcperf",
-  "version": "4.4.12",
+  "version": "4.4.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/vpalmisano/webrtcperf.git"
@@ -90,7 +90,7 @@
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.36.0",
     "@types/basic-auth": "^1.1.3",
     "@types/compression": "^1.8.1",
     "@types/convict": "^6.1.6",
@@ -109,7 +109,7 @@
     "@typescript-eslint/parser": "^8.44.0",
     "@vpalmisano/typedoc-cookie-consent": "^0.0.4",
     "@vpalmisano/typedoc-plugin-ga": "^1.0.6",
-    "eslint": "^9.35.0",
+    "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",

package/src/plot.ts

@@ -1,22 +1,100 @@
+import fs from 'fs'
+
 import { logger } from './utils'
+import json5 from 'json5'
 
 const log = logger('webrtcperf:plot')
 
-export type PlotData = {
-  x: (string | number)[]
-  y: number[]
-  label: string
-}
-
 export type PlotOptions = {
   type?: string
   title?: string
+  xLabel?: string
+  yLabel?: string
+  yMin?: number
+  yMax?: number
+  labels?: (string | number)[]
   filePath?: string
-  min?: number
-  max?: number
 }
 
-export async function plot(data: PlotData, options: PlotOptions) {
+export type PlotData = {
+  label: string
+  data: { x: number | string; y: number; yMin?: number; yMax?: number }[]
+}
+
+const SERIES_COLORS = [
+  'rgba(33, 150, 243, 1)',
+  'rgba(244, 67, 54, 1)',
+  'rgba(76, 175, 80, 1)',
+  'rgba(255, 193, 7, 1)',
+  'rgba(156, 39, 176, 1)',
+]
+
+export function plotConfig(options: PlotOptions, series: PlotData[]) {
+  log.debug('plotConfig')
+
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    type: (options.type || 'line') as any,
+    options: {
+      plugins: {
+        title: options.title
+          ? {
+              display: true,
+              text: options.title,
+            }
+          : undefined,
+        zoom: {
+          pan: {
+            enabled: true,
+            mode: 'x',
+            modifierKey: 'ctrl',
+          },
+          zoom: {
+            drag: {
+              enabled: true,
+            },
+            mode: 'x',
+          },
+        },
+      },
+      scales: {
+        x: {
+          type: 'category',
+          title: options.xLabel
+            ? {
+                display: true,
+                text: options.xLabel,
+              }
+            : undefined,
+        },
+        y: {
+          type: 'linear',
+          title: options.yLabel
+            ? {
+                display: true,
+                text: options.yLabel,
+              }
+            : undefined,
+          min: options.yMin,
+          max: options.yMax,
+        },
+      },
+    },
+    data: {
+      labels: options.labels,
+      datasets: series.map((s, i) => ({
+        fill: false,
+        backgroundColor: SERIES_COLORS[i % SERIES_COLORS.length],
+        borderColor: SERIES_COLORS[i % SERIES_COLORS.length],
+        borderWidth: 1,
+        pointRadius: 0,
+        ...s,
+      })),
+    },
+  }
+}
+
+export async function plot(options: PlotOptions, series: PlotData[]) {
   const {
     CategoryScale,
     Chart,
@@ -28,10 +106,8 @@ export async function plot(data: PlotData, options: PlotOptions) {
     PointElement,
     Legend,
     Title,
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-  } = require('chart.js')
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const ErrorBarsPlugin = require('chartjs-chart-error-bars')
+  } = await import('chart.js')
+  const { BarWithErrorBar, BarWithErrorBarsController } = await import('chartjs-chart-error-bars')
   Chart.register(
     CategoryScale,
     LineController,
@@ -42,44 +118,46 @@ export async function plot(data: PlotData, options: PlotOptions) {
     PointElement,
     Legend,
     Title,
-    ErrorBarsPlugin,
+    BarWithErrorBar,
+    BarWithErrorBarsController,
   )
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const { Canvas } = require('skia-canvas')
+  const { Canvas } = await import('skia-canvas')
 
   log.debug('plot')
-
+  const config = plotConfig(options, series)
   const canvas = new Canvas(1280, 720)
-  const chart = new Chart(canvas, {
-    type: options.type || 'line',
-    data: {
-      labels: data.x,
-      datasets: [
-        {
-          label: data.label,
-          data: data.y,
-          fill: false,
-          borderColor: 'rgb(0, 0, 0)',
-          borderWidth: 1,
-          pointRadius: 0,
-        },
-      ],
-    },
-    options: {
-      plugins: {
-        title: {
-          display: !!options.title,
-          text: options.title || '',
-        },
-      },
-      scales: {
-        y: {
-          min: options.min,
-          max: options.max,
-        },
-      },
-    },
-  })
+  const chart = new Chart(canvas as unknown as HTMLCanvasElement, config)
   await canvas.toFile(options.filePath || 'plot.png', { format: 'png', matte: 'white' })
   chart.destroy()
 }
+
+export async function plotHtml(options: PlotOptions, series: PlotData[]) {
+  log.debug('plotHtml')
+  const config = plotConfig(options, series)
+
+  const data = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${options.title || 'Plot'}</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars"></script>
+  <script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+</head>
+<body>
+  <div>
+    <canvas id="chart"></canvas>
+  </div>
+  <script>
+    const ctx = document.getElementById('chart');
+    const chart = new Chart(ctx, ${json5.stringify(config)});
+    chart.options.onClick = e => e.chart.resetZoom();
+    addEventListener('resize', () => chart.resize());
+  </script>
+</body>
+</html>`
+  await fs.promises.writeFile(options.filePath || 'plot.html', data)
+}

package/src/scenarios.ts

@@ -6,6 +6,7 @@ import { Config } from './config'
 import { Auth, google } from 'googleapis'
 import { logger } from './utils'
 import { sprintf } from 'sprintf-js'
+import { PlotData, plotHtml } from './plot'
 
 const log = logger('webrtcperf:scenarios')
 
@@ -155,28 +156,32 @@ export async function uploadStatsToGoogleSheet(stats: StatsSummary[], spreadshee
 
 export type ThrottleDirection = 'up' | 'down' | 'bidi'
 
-export function formatBitrate(bitrate: number | undefined, prefix = ' ') {
+export function formatBitrate(bitrate: number | undefined, prefix = ' ', pad = true) {
   if (bitrate === undefined) return ''
   let suffix = 'Kbps'
   if (bitrate >= 1000) {
     bitrate /= 1000
     suffix = 'Mbps'
   }
-  return `${prefix}${sprintf('%5.4g', bitrate)}${suffix}`
+  return `${prefix}${sprintf(`%${pad ? '5' : ''}.4g`, bitrate)}${suffix}`
 }
 
-export function formatLoss(loss: number | undefined, prefix = ' ') {
-  return loss !== undefined ? `${prefix}${loss.toFixed(0).padStart(2, ' ')}%` : ''
+export function formatLoss(loss: number | undefined, prefix = ' ', pad = true) {
+  return loss !== undefined ? `${prefix}${loss.toFixed(0).padStart(pad ? 2 : 0, ' ')}%` : ''
 }
 
-export function formatDelay(delay: number | undefined, prefix = ' ') {
-  return delay !== undefined ? `${prefix}${delay.toFixed(0).padStart(3, ' ')}ms` : ''
+export function formatDelay(delay: number | undefined, prefix = ' ', pad = true) {
+  return delay !== undefined ? `${prefix}${delay.toFixed(0).padStart(pad ? 3 : 0, ' ')}ms` : ''
 }
 
-export function formatThrottleRule(throttleRule: ThrottleRule & { direction: ThrottleDirection }, human = false) {
+export function formatThrottleRule(
+  throttleRule: ThrottleRule & { direction: ThrottleDirection },
+  human = false,
+  pad = true,
+) {
   const { rate, loss, delay, direction } = throttleRule
   return human
-    ? `${direction.padEnd(4, ' ')}${formatBitrate(rate)}${formatLoss(loss)}${formatDelay(delay)}`
+    ? `${direction.padEnd(pad ? 4 : 0, ' ')}${formatBitrate(rate, ' ', pad)}${formatLoss(loss, ' ', pad)}${formatDelay(delay, ' ', pad)}`
     : `${direction}-r${rate}-l${loss}-d${delay}`
 }
 
@@ -190,6 +195,50 @@ export function parseThrottleRule(throttleDesc: string) {
   return { direction, rate, loss, delay }
 }
 
+export async function plotStatsSummary(stats: StatsSummary[]) {
+  const labels = new Set<string>()
+  const data = {} as Record<string, Record<string, FastStats>>
+  stats.forEach(s => {
+    const { id, scenario, videoRecvBitratePerPixel } = s
+    if (!videoRecvBitratePerPixel.length) return null
+    if (!data[id]) {
+      data[id] = {}
+    }
+    const scenarioFormatted = formatThrottleRule(parseThrottleRule(scenario), true, true)
+    if (!data[id][scenarioFormatted]) {
+      data[id][scenarioFormatted] = new FastStats()
+    }
+    labels.add(scenarioFormatted)
+    data[id][scenarioFormatted].push(videoRecvBitratePerPixel.percentile(95))
+  })
+  const series: PlotData[] = []
+  Object.entries(data)
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .forEach(([id, data]) => {
+      const plotData: PlotData = { label: id, data: [] }
+      Object.entries(data)
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .forEach(([scenario, stats]) => {
+          plotData.data.push({
+            x: scenario,
+            y: stats.percentile(50),
+            yMin: stats.percentile(5),
+            yMax: stats.percentile(95),
+          })
+        })
+      series.push(plotData)
+    })
+  await plotHtml(
+    {
+      type: 'barWithErrorBars',
+      xLabel: 'Scenario',
+      yLabel: 'Video Receive Bitrate per Pixel',
+      labels: Array.from(labels).sort((a, b) => a.localeCompare(b)),
+    },
+    series,
+  )
+}
+
 /**
  * It generates a test configuration with a scenario including 2 participants.
  * The first participant sends video and the second receives it.