feat: graph to million site

benchmarks/main.jsx

@@ -2,6 +2,60 @@ import 'kumiko/dist/kumiko.css';
 import './style.css';
 
 import { createElement, patch } from '../src/index';
+import {
+  Chart,
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  BubbleController,
+  DoughnutController,
+  LineController,
+  PieController,
+  PolarAreaController,
+  RadarController,
+  ScatterController,
+  CategoryScale,
+  LinearScale,
+  LogarithmicScale,
+  RadialLinearScale,
+  TimeScale,
+  TimeSeriesScale,
+  Decimation,
+  Filler,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
+} from 'chart.js';
+
+Chart.register(
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  BubbleController,
+  DoughnutController,
+  LineController,
+  PieController,
+  PolarAreaController,
+  RadarController,
+  ScatterController,
+  CategoryScale,
+  LinearScale,
+  LogarithmicScale,
+  RadialLinearScale,
+  TimeScale,
+  TimeSeriesScale,
+  Decimation,
+  Filler,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
+);
 import appendManyRowsToLargeTable from './suites/appendManyRowsToLargeTable';
 import clearRows from './suites/clearRows';
 import createManyRows from './suites/createManyRows';
@@ -12,6 +66,15 @@ import replaceAllRows from './suites/replaceAllRows';
 import selectRow from './suites/selectRow';
 import swapRows from './suites/swapRows';
 
+const cumulative = {
+  million: 0,
+  'tiny-vdom': 0,
+  'simple-virtual-dom': 0,
+  'virtual-dom': 0,
+  snabbdom: 0,
+  DOM: 0,
+  innerHTML: 0,
+};
 const logs = [];
 const history = localStorage.logs && localStorage.logs.length ? JSON.parse(localStorage.logs) : [];
 let disabled = false;
@@ -40,33 +103,47 @@ const suites = [
 );
 const vnode = () => (
   <div>
-    {suites.map((suite) => {
-      const [name, description] = suite.name.split('(');
-      return (
-        <button
-          onclick={() => {
-            disabled = name;
-            logs.unshift([]);
-            log(`Running: ${suite.name} - ${new Date().toLocaleString()}`);
-            suite.run({ async: true });
-            patch(el, vnode());
-          }}
-          style={{ margin: '5px', opacity: disabled && disabled !== name ? 0.25 : 1 }}
-          disabled={disabled}
-          title={description.slice(0, -1)}
-        >{`${disabled === name ? '☑️ ' : ''}${name}`}</button>
-      );
-    })}
-    <details open={!!logs.length} style={{ paddingTop: '20px' }}>
+    <div>
+      {suites.map((suite) => {
+        const [name, description] = suite.name.split('(');
+        return (
+          <button
+            onclick={() => {
+              disabled = name;
+              logs.unshift([]);
+              log(`Running: ${suite.name} - ${new Date().toLocaleString()}`);
+              suite.run({ async: true });
+              patch(el, vnode());
+            }}
+            style={{ margin: '5px', opacity: disabled && disabled !== name ? 0.25 : 1 }}
+            disabled={disabled}
+            title={description.slice(0, -1)}
+          >{`${disabled === name ? '☑️ ' : ''}${name}`}</button>
+        );
+      })}
+    </div>
+
+    <br />
+
+    <details open>
+      <summary>Graph (Cumulative)</summary>
+      <canvas id="viz" width="400" height="200"></canvas>
+    </details>
+
+    <br />
+
+    <details open={!!logs.length}>
       <summary key="logs">Logs</summary>
 
       <div style={{ paddingTop: '20px' }}>
         {logs.map((logGroup) => logGroup.length && <pre>{logGroup.join('\n')}</pre>)}
       </div>
     </details>
 
+    <br />
+
     {history.length ? (
-      <details style={{ paddingTop: '20px', opacity: 0.5 }}>
+      <details style={{ opacity: 0.5 }}>
         <summary key="history">History</summary>
 
         <div>{history.map((logGroup) => logGroup.length && <pre>{logGroup.join('\n')}</pre>)}</div>
@@ -80,9 +157,52 @@ const vnode = () => (
 const el = createElement(vnode());
 
 const log = (message) => {
+  if (message.name) cumulative[message.name] += Math.round(message.hz);
   logs[0].push(String(message));
   patch(el, vnode());
   console.log(String(message));
+  const sortedKeys = Object.keys(cumulative).sort((a, b) => cumulative[b] - cumulative[a]);
+  const sortedValues = sortedKeys.map((key) => cumulative[key]);
+  const sortedBgColors = sortedKeys.map((key) =>
+    key === 'million' ? 'rgba(255, 82, 76, 0.5)' : 'rgba(78, 35, 114, 0.5)',
+  );
+  const sortedBorderColors = sortedKeys.map((key) =>
+    key === 'million' ? 'rgba(255, 82, 76, 1)' : 'rgba(78, 35, 114, 1)',
+  );
+  chart.data.labels = sortedKeys;
+  chart.data.datasets[0].data = sortedValues;
+  chart.data.datasets[0].backgroundColor = sortedBgColors;
+  chart.data.datasets[0].borderColor = sortedBorderColors;
+  chart.update();
 };
 
 document.body.appendChild(el);
+
+const ctx = document.getElementById('viz');
+const chart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: Object.keys(cumulative),
+    datasets: [
+      {
+        label: 'operations/second',
+        data: Object.values(cumulative),
+        backgroundColor: Object.keys(cumulative).map((key) =>
+          key === 'million' ? 'rgba(255, 82, 76, 0.5)' : 'rgba(78, 35, 114, 0.5)',
+        ),
+        borderColor: Object.keys(cumulative).map((key) =>
+          key === 'million' ? 'rgba(255, 82, 76, 1)' : 'rgba(78, 35, 114, 1)',
+        ),
+        borderWidth: 1,
+      },
+    ],
+  },
+  options: {
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+  },
+});
+chart.options.animation = false;

package.json

@@ -84,6 +84,7 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "benchmark": "^2.1.4",
+    "chart.js": "^3.6.0",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "glob": "^7.2.0",