benchmarks (#146)

* benchmarks

* full benchmarks

* don't need the title in each chart when we have the title above

Author: jasonwilliams

docusaurus.config.ts

@@ -54,7 +54,7 @@ const config: Config = {
   markdown: {
     mermaid: true,
   },
-  themes: ['@docusaurus/theme-mermaid'],
+  themes: ["@docusaurus/theme-mermaid"],
 
   themeConfig: {
     // Replace with your project's social card
@@ -86,7 +86,7 @@ const config: Config = {
           position: "right",
         },
         {
-          href: "https://boajs.dev/boa/dev/bench/",
+          href: "/benchmarks",
           label: "Benchmarks",
           position: "right",
         },
@@ -160,7 +160,7 @@ const config: Config = {
       additionalLanguages: ["rust", "toml"],
     },
     mermaid: {
-      theme: { light: 'dark', dark: 'dark' },
+      theme: { light: "dark", dark: "dark" },
     },
   } satisfies Preset.ThemeConfig,
   plugins: [
@@ -211,7 +211,7 @@ const config: Config = {
           return undefined;
         },
       },
-    ]
+    ],
   ],
 };
 

package-lock.json

@@ -27,14 +27,14 @@
     "lint": "prettier --check . && tsc && eslint ."
   },
   "dependencies": {
+    "@boa-dev/boa_wasm": "^0.18.0",
     "@docusaurus/core": "^3.1.1",
     "@docusaurus/plugin-content-pages": "^3.1.1",
     "@docusaurus/preset-classic": "^3.1.1",
     "@docusaurus/theme-mermaid": "^3.1.1",
     "@mdx-js/react": "^3.0.1",
     "@monaco-editor/react": "^4.6.0",
-    "@boa-dev/boa_wasm": "^0.18.0",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.4.2",
     "clsx": "^2.1.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",

package.json

@@ -0,0 +1,125 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import Heading from "@theme/Heading";
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Colors,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
+import React from "react";
+import { Bar, Line } from "react-chartjs-2";
+import styles from "./styles.module.css";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Colors,
+  BarElement
+);
+
+export function BenchmarkGraphs() {
+  const [data, setData] = React.useState([]);
+  const colorMode = useColorMode();
+  ChartJS.defaults.color = colorMode.colorMode === "light" ? "#666" : "white";
+
+  React.useEffect(() => {
+    Promise.all([
+      buildChartFromBenchmark("Crypto"),
+      buildChartFromBenchmark("DeltaBlue"),
+      buildChartFromBenchmark("EarleyBoyer"),
+      buildChartFromBenchmark("NavierStokes"),
+      buildChartFromBenchmark("RayTrace"),
+      buildChartFromBenchmark("RegExp"),
+      buildChartFromBenchmark("Richards"),
+      buildChartFromBenchmark("Splay"),
+      buildChartFromBenchmark("score"),
+    ]).then((charts) => setData(charts));
+  }, [colorMode.colorMode]);
+
+  return data && data.map((chart) => chart);
+}
+
+const buildChartFromBenchmark = async (name: string) => {
+  const data = await fetchData(
+    `https://raw.githubusercontent.com/boa-dev/data/main/bench/results/${name}.json`
+  );
+
+  const barData = getBarChartData(data);
+
+  return (
+    <div key={name}>
+      <div className={`card__header ${styles["benchmark-card-header"]}`}>
+        <Heading as="h2">{name}</Heading>
+      </div>
+      <div className={styles["cards-wrap"]}>
+        <div className={`card ${styles["benchmark-card"]}`}>
+          <Line data={data}></Line>
+        </div>
+        <div className={`card ${styles["benchmark-card"]}`}>
+          <Bar data={barData}></Bar>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const fetchData = async (url: string) => {
+  const response = await fetch(url);
+  const data = await response.json();
+  return {
+    labels: data.labels.map((epoch: number) =>
+      new Date(epoch).toLocaleDateString()
+    ),
+    datasets: [
+      {
+        label: "boa",
+        data: data.results["boa"],
+        fill: false,
+      },
+      {
+        label: "v8-jitless",
+        data: data.results["v8-jitless"],
+        fill: false,
+      },
+      {
+        label: "libjs",
+        data: data.results["libjs"],
+        fill: false,
+      },
+      {
+        label: "duktape",
+        data: data.results["duktape"],
+        fill: false,
+      },
+      {
+        label: "quickjs",
+        data: data.results["quickjs"],
+        fill: false,
+      },
+    ],
+  };
+};
+
+const getBarChartData = (data) => {
+  // We only want the last value from each dataset
+  return {
+    labels: [data.labels[data.labels.length - 1]],
+    datasets: data.datasets.map((dataset) => {
+      return {
+        label: dataset.label,
+        data: [dataset.data[dataset.data.length - 1]],
+      };
+    }),
+  };
+};

src/components/benchmarks/index.tsx

@@ -0,0 +1,25 @@
+.cards-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.benchmark-card-header {
+  margin-bottom: 24px;
+}
+
+.benchmark-card {
+  margin-bottom: 24px;
+  width: 44vw;
+}
+
+@media screen and (max-width: 996px) {
+  .cards-wrap {
+    display: block;
+  }
+
+  .benchmark-card {
+    margin-bottom: 24px;
+    width: 100%;
+  }
+}

src/components/benchmarks/styles.module.css

@@ -53,3 +53,7 @@ html[data-theme="dark"] {
 .footer__links {
   text-align: center;
 }
+
+.navbar--fixed-top {
+  margin-bottom: 24px;
+}

src/css/custom.css

@@ -0,0 +1,26 @@
+import Link from "@docusaurus/Link";
+import { BenchmarkGraphs } from "@site/src/components/benchmarks";
+import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
+import styles from "./styles.module.css";
+
+export default function Benchmarks() {
+  return (
+    <Layout title="Benchmarks" description="Boa Benchmarks Page">
+      <div className={styles.container}>
+        <Heading as="h1">Benchmarks</Heading>
+        <p>
+          These benchmarks are taken from the{" "}
+          <Link to="https://github.com/mozilla/arewefastyet/tree/master/benchmarks/v8-v7">
+            V8 benchmark suite V7.{" "}
+          </Link>
+          Our <Link to="https://github.com/boa-dev/data">data repo</Link> runs
+          these benchmarks against the listed engines every night using Github
+          actions.
+        </p>
+        <p>The higher the score the better.</p>
+        <BenchmarkGraphs />
+      </div>
+    </Layout>
+  );
+}

src/pages/benchmarks/index.tsx

@@ -0,0 +1,4 @@
+.container {
+  width: 90vw;
+  align-self: center;
+}