add benchmarks from api (boa-dev#196)

* add benchmarks from api

Author: jasonwilliams

src/components/benchmarks/index.tsx

@@ -12,7 +12,7 @@ import {
   Title,
   Tooltip,
 } from "chart.js";
-import React from "react";
+import { useEffect, useState } from "react";
 import { Bar, Line } from "react-chartjs-2";
 import styles from "./styles.module.css";
 
@@ -30,6 +30,7 @@ ChartJS.register(
 
 interface BenchmarkGraphsProps {
   selectedEngines: string[];
+  range: string;
 }
 
 const ChartOptions = {
@@ -42,75 +43,50 @@ const ChartOptions = {
 
 export const BenchmarkGraphs: React.FC<BenchmarkGraphsProps> = ({
   selectedEngines,
+  range
 }) => {
   // Control the state of which engines are displayed using a Set
 
-  const [data, setData] = React.useState([]);
+  const [charts, setCharts] = useState([]);
+  const [data, setData] = useState({});
   const colorMode = useColorMode();
   ChartJS.defaults.color = colorMode.colorMode === "light" ? "#666" : "white";
 
-  React.useEffect(() => {
-    Promise.all([
-      buildChartFromBenchmark("Crypto", selectedEngines),
-      buildChartFromBenchmark("DeltaBlue", selectedEngines),
-      buildChartFromBenchmark("EarleyBoyer", selectedEngines),
-      buildChartFromBenchmark("NavierStokes", selectedEngines),
-      buildChartFromBenchmark("RayTrace", selectedEngines),
-      buildChartFromBenchmark("RegExp", selectedEngines),
-      buildChartFromBenchmark("Richards", selectedEngines),
-      buildChartFromBenchmark("Splay", selectedEngines),
-      buildChartFromBenchmark("score", selectedEngines),
-    ]).then((charts) => setData(charts));
-  }, [selectedEngines]);
-
-  return data && data.map((chart) => chart);
-};
 
-const buildChartFromBenchmark = async (name: string, engines: string[]) => {
-  const data = await fetchData(
-    `https://raw.githubusercontent.com/boa-dev/data/main/bench/results/${name}.json`,
-    engines,
-  );
+  useEffect(() => {
+    fetch(`https://boa-api.jason-williams.co.uk/benchmarks?months=${range}&engines=${selectedEngines.join(',')}`).then(
+      (res) => res.json())
+    .then(respData => {
+      setData(respData)      
+    });
+  }, [selectedEngines, range]);
 
-  const barData = getBarChartData(data);
+  useEffect(() => {
+    setCharts(buildChartFromBenchmark(data));
+  }, [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} options={ChartOptions}></Line>
-        </div>
-        <div className={`card ${styles["benchmark-card"]}`}>
-          <Bar data={barData} options={ChartOptions}></Bar>
-        </div>
-      </div>
-    </div>
-  );
+
+  return charts && charts.map((chart) => chart);
 };
 
-const fetchData = async (url: string, engines: string[]) => {
-  const response = await fetch(url);
-  const data = await response.json();
-  // Add the dataset if the engine is enabled
+const normalizeBenchmarkData = (benchmarkData: any[]) => {
+  const labels = benchmarkData.map((entry: any) =>
+    new Date(entry.date).toLocaleDateString(),
+  );
+
+  const engines = Object.keys(benchmarkData[0]).filter(key => key != "date");
+
   return {
-    labels: data.labels.map((epoch: number) =>
-      new Date(epoch).toLocaleDateString(),
-    ),
-    datasets: Object.keys(data.results)
-      .filter((engine) => engines.includes(engine))
-      .map((engine) => {
-        return {
-          label: engine,
-          data: data.results[engine],
-          fill: false,
-        };
-      }),
+    labels,
+    datasets: engines.map(engine => ({
+      label: engine,
+      data: benchmarkData.map(entry => entry[engine]),
+      fill: false
+    })),
   };
 };
 
+
 const getBarChartData = (data) => {
   // We only want the last value from each dataset
   return {
@@ -123,3 +99,33 @@ const getBarChartData = (data) => {
     }),
   };
 };
+
+const buildChartFromBenchmark = (data: any): any[] => {
+
+  let charts = [];
+  for (const benchmark in data) {
+    const normalizedData = normalizeBenchmarkData(data[benchmark])
+    const barData = getBarChartData(normalizedData);
+    charts.push((
+      <div key={benchmark}>
+        <div className={`card__header ${styles["benchmark-card-header"]}`}>
+          <Heading as="h2">{benchmark}</Heading>
+        </div>
+        <div className={styles["cards-wrap"]}>
+          <div className={`card ${styles["benchmark-card"]}`}>
+            <Line data={normalizedData} options={ChartOptions}></Line>
+          </div>
+          <div className={`card ${styles["benchmark-card"]}`}>
+            <Bar data={barData} options={ChartOptions}></Bar>
+          </div>
+        </div>
+      </div>
+    ));
+  };
+
+  return charts;
+};
+
+
+
+

src/pages/benchmarks/index.tsx

@@ -24,14 +24,20 @@ export default function Benchmarks() {
     "quickjs",
   ]);
 
-  const handleCheckboxChange = (engine: string) => {
+  const [range, setRange] = useState<string>("6");
+
+  const handleEngineCheckboxChange = (engine: string) => {
     if (selectedEngines.includes(engine)) {
       setSelectedEngines(selectedEngines.filter((e) => e !== engine));
     } else {
       setSelectedEngines([...selectedEngines, engine]);
     }
   };
 
+  const handleRangeCheckboxChange = (evt: any) => {
+    setRange(evt.target.value);
+  };
+
   return (
     <Layout title="Benchmarks" description="Boa Benchmarks Page">
       <div className={styles.container}>
@@ -54,15 +60,51 @@ export default function Benchmarks() {
                   type="checkbox"
                   value={engine}
                   checked={selectedEngines.includes(engine)}
-                  onChange={() => handleCheckboxChange(engine)}
+                  onChange={() => handleEngineCheckboxChange(engine)}
                 />
                 {engine}
               </label>
             </div>
           ))}
         </div>
-        <BenchmarkGraphs selectedEngines={selectedEngines} />
+
+
+        <form>
+          <fieldset className={styles.benchmarkControls}>
+            <legend>Select rolling range</legend>
+            <div className={styles.benchmarkLabelWrap}>
+              <input
+                type="radio"
+                value={1}
+                checked={range === "1"}
+                onChange={handleRangeCheckboxChange}
+              />
+              1 Month
+            </div>
+
+            <div className={styles.benchmarkLabelWrap}>
+              <input
+                type="radio"
+                value={6}
+                checked={range === "6"}
+                onChange={handleRangeCheckboxChange}
+              />
+              6 Month
+            </div>
+
+            <div className={styles.benchmarkLabelWrap}>
+              <input
+                type="radio"
+                value={12}
+                checked={range === "12"}
+                onChange={handleRangeCheckboxChange}
+              />
+              12 Month
+            </div>
+          </fieldset>
+        </form>
+        <BenchmarkGraphs selectedEngines={selectedEngines} range={range}/>
       </div>
-    </Layout>
+    </Layout >
   );
 }