@vpalmisano/webrtcperf 4.4.11 → 4.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpalmisano/webrtcperf",
-  "version": "4.4.11",
+  "version": "4.4.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/vpalmisano/webrtcperf.git"
@@ -130,7 +130,8 @@
   },
   "optionalDependencies": {
     "chart.js": "^4.5.0",
-    "skia-canvas": "^2.0.2",
+    "chartjs-chart-error-bars": "^4.4.4",
+    "skia-canvas": "^3.0.7",
     "zeromq": "^6.5.0"
   }
 }

package/src/index.ts

@@ -9,3 +9,4 @@ export * from './stats'
 export * from './utils'
 export * from './vmaf'
 export * from './scenarios'
+export * from './plot'

package/src/plot.ts

@@ -0,0 +1,85 @@
+import { logger } from './utils'
+
+const log = logger('webrtcperf:plot')
+
+export type PlotData = {
+  x: (string | number)[]
+  y: number[]
+  label: string
+}
+
+export type PlotOptions = {
+  type?: string
+  title?: string
+  filePath?: string
+  min?: number
+  max?: number
+}
+
+export async function plot(data: PlotData, options: PlotOptions) {
+  const {
+    CategoryScale,
+    Chart,
+    LinearScale,
+    LineController,
+    BarController,
+    LineElement,
+    BarElement,
+    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')
+  Chart.register(
+    CategoryScale,
+    LineController,
+    LineElement,
+    BarController,
+    LinearScale,
+    BarElement,
+    PointElement,
+    Legend,
+    Title,
+    ErrorBarsPlugin,
+  )
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { Canvas } = require('skia-canvas')
+
+  log.debug('plot')
+
+  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,
+        },
+      },
+    },
+  })
+  await canvas.toFile(options.filePath || 'plot.png', { format: 'png', matte: 'white' })
+  chart.destroy()
+}

package/src/scenarios.ts

@@ -5,6 +5,7 @@ import { ThrottleConfig, ThrottleRule } from '@vpalmisano/throttler'
 import { Config } from './config'
 import { Auth, google } from 'googleapis'
 import { logger } from './utils'
+import { sprintf } from 'sprintf-js'
 
 const log = logger('webrtcperf:scenarios')
 
@@ -154,21 +155,21 @@ export async function uploadStatsToGoogleSheet(stats: StatsSummary[], spreadshee
 
 export type ThrottleDirection = 'up' | 'down' | 'bidi'
 
-function formatBitrate(bitrate: number | undefined, prefix = ' ') {
+export function formatBitrate(bitrate: number | undefined, prefix = ' ') {
   if (bitrate === undefined) return ''
   let suffix = 'Kbps'
-  if (bitrate >= 10000) {
+  if (bitrate >= 1000) {
     bitrate /= 1000
     suffix = 'Mbps'
   }
-  return `${prefix}${bitrate.toFixed(0)}${suffix}`.padStart(8, ' ')
+  return `${prefix}${sprintf('%5.4g', bitrate)}${suffix}`
 }
 
-function formatLoss(loss: number | undefined, prefix = ' ') {
+export function formatLoss(loss: number | undefined, prefix = ' ') {
   return loss !== undefined ? `${prefix}${loss.toFixed(0).padStart(2, ' ')}%` : ''
 }
 
-function formatDelay(delay: number | undefined, prefix = ' ') {
+export function formatDelay(delay: number | undefined, prefix = ' ') {
   return delay !== undefined ? `${prefix}${delay.toFixed(0).padStart(3, ' ')}ms` : ''
 }