Add a nice chart to benchmarks

Author: stevensJourney

packages/react/package.json

@@ -37,6 +37,7 @@
     "@powersync/web": "workspace:*",
     "@testing-library/react": "^15.0.2",
     "@types/react": "^18.3.1",
+    "chart.js": "^4.5.0",
     "jsdom": "^24.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

packages/react/tests/profile.test.tsx

@@ -1,5 +1,6 @@
 import * as commonSdk from '@powersync/common';
 import { PowerSyncDatabase } from '@powersync/web';
+import { Chart } from 'chart.js/auto';
 import React, { Profiler } from 'react';
 import ReactDOM from 'react-dom/client';
 import { beforeEach, describe, it, Mock, onTestFinished, vi } from 'vitest';
@@ -420,5 +421,78 @@ describe.skipIf(skipTests)('Performance', { timeout: Infinity }, () => {
     totalResults.forEach((r) => {
       console.log(Object.values(r).join(','));
     });
+
+    // Make a nice chart, these are visible when running tests with a visible browser `headless: false`
+    const chartCanvas = document.createElement('canvas');
+    document.body.appendChild(chartCanvas);
+
+    // Chart the Average incremental render times
+    const testTypes = new Set(Object.keys(totalResults[0]));
+    // Don't show this on this chart
+    testTypes.delete('differentialMemoImprovementPercentage');
+    testTypes.delete('initialDataCount');
+    new Chart(chartCanvas, {
+      type: 'line',
+      data: {
+        labels: initialDataVolumeSteps,
+        datasets: Array.from(testTypes).map((resultType) => {
+          return {
+            label: resultType,
+            data: totalResults.map((r) => r[resultType])
+          };
+        })
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: 'Average incremental render time (ms)'
+            }
+          },
+          x: {
+            title: {
+              display: true,
+              text: 'Initial count of items'
+            }
+          }
+        }
+      }
+    });
+
+    const percentCanvas = document.createElement('canvas');
+    document.body.appendChild(percentCanvas);
+
+    // Chart the Average incremental render times
+    new Chart(percentCanvas, {
+      type: 'line',
+      data: {
+        labels: initialDataVolumeSteps,
+        datasets: [
+          {
+            label: 'Percentage decrease of render time for Differential Memoized',
+            data: totalResults.map((r) => r.differentialMemoImprovementPercentage)
+          }
+        ]
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: 'Average incremental render time (ms)'
+            }
+          },
+          x: {
+            title: {
+              display: true,
+              text: 'Initial count of items'
+            }
+          }
+        }
+      }
+    });
   });
 });