From 18fee10d81c1d6856ec9530d4c88222822c08e57 Mon Sep 17 00:00:00 2001
From: Aiden Bai <aiden.bai05@gmail.com>
Date: Wed, 24 Nov 2021 12:14:31 -0800
Subject: [PATCH] feat: graph to million site

---
 benchmarks/main.jsx | 158 ++++++++++++++++++++++++++++++++++++++------
 package.json        |   1 +
 pnpm-lock.yaml      |   6 ++
 3 files changed, 146 insertions(+), 19 deletions(-)

diff --git a/benchmarks/main.jsx b/benchmarks/main.jsx
index 739d30a3cd..a252245d8f 100644
--- a/benchmarks/main.jsx
+++ b/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,24 +103,36 @@ 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' }}>
@@ -65,8 +140,10 @@ const vnode = () => (
       </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;
diff --git a/package.json b/package.json
index 9eea809737..3cc8c084c6 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3325f1f9d8..0e8f46c2b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,7 @@ specifiers:
   '@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
@@ -56,6 +57,7 @@ devDependencies:
   '@typescript-eslint/eslint-plugin': 5.4.0_5c8ff4cecd5a55e744866c0654edac32
   '@typescript-eslint/parser': 5.4.0_eslint@8.3.0+typescript@4.5.2
   benchmark: 2.1.4
+  chart.js: 3.6.0
   eslint: 8.3.0
   eslint-config-prettier: 8.3.0_eslint@8.3.0
   glob: 7.2.0
@@ -3020,6 +3022,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /chart.js/3.6.0:
+    resolution: {integrity: sha512-iOzzDKePL+bj+ccIsVAgWQehCXv8xOKGbaU2fO/myivH736zcx535PGJzQGanvcSGVOqX6yuLZsN3ygcQ35UgQ==}
+    dev: true
+
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}