refactor(web): replace plotly with chart.js

Author: nakrovati

push_results.sh

@@ -1,12 +1,12 @@
 cp webdriver-ts-results/dist/index.html ../krausest.github.io/js-framework-benchmark/current.html
 cp webdriver-ts-results/dist/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
-cp webdriver-ts-results/dist/plotly*.js ../krausest.github.io/js-framework-benchmark/
+cp webdriver-ts-results/dist/chartjs*.js ../krausest.github.io/js-framework-benchmark/
 cp webdriver-ts-results/dist/index*.css ../krausest.github.io/js-framework-benchmark/
 cp webdriver-ts-results/dist/index*.js ../krausest.github.io/js-framework-benchmark/
 cd ../krausest.github.io
 git add js-framework-benchmark/current.html
 git add js-framework-benchmark/BoxPlotTable*.js
-git add js-framework-benchmark/plotly*.js
+git add js-framework-benchmark/chartjs*.js
 git add js-framework-benchmark/index*.css
 git add js-framework-benchmark/index*.js
 git commit -m "update results"

webdriver-ts-results/package-lock.json

@@ -4,10 +4,11 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@sgratzl/chartjs-chart-boxplot": "^4.2.8",
     "antd": "^5.14.2",
+    "chart.js": "^4.4.2",
     "jstat": "^1.9.6",
     "lucide-react": "^0.344.0",
-    "plotly.js-cartesian-dist": "2.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zustand": "^4.4.1"

webdriver-ts-results/package.json

@@ -1,5 +1,20 @@
 import { useRef, useEffect } from "react";
-import Plotly from "plotly.js-cartesian-dist";
+import { BoxPlotChart } from "@sgratzl/chartjs-chart-boxplot";
+import { Chart, ChartConfiguration } from "chart.js";
+
+Chart.register(BoxPlotChart);
+
+const backgroundColor = [
+  "hsl(0 80% 50%)", // Red
+  "hsl(40 80% 50%)", // Orange
+  "hsl(80 80% 50%)", // Yellow
+  "hsl(120 80% 50%)", // Green
+  "hsl(160 80% 50%)", // Cyan
+  "hsl(200 80% 50%)", // Blue
+  "hsl(240 80% 50%)", // Purple
+  "hsl(280 80% 50%)", // Magenta
+  "hsl(320 80% 50%)", // Pink
+];
 
 interface BoxPlotData {
   framework: string;
@@ -11,34 +26,54 @@ interface Props {
 }
 
 const BoxPlotTableChart = ({ traces }: Props) => {
-  const elemRef = useRef(null);
+  const chartRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const plotlTtraces = traces.map((t) => ({
-      type: "box",
-      y: t.values,
-      boxpoints: false,
-      jitter: 0.5,
-      name: t.framework,
-      boxmean: "sd",
-    }));
-
-    const layout = {
-      showlegend: false,
-      margin: {
-        l: 40,
-        r: 0,
-        b: 120,
-        t: 0,
-        pad: 0,
+    const labels: string[] = [];
+    const data: number[][] = [];
+
+    for (const trace of traces) {
+      labels.push(trace.framework);
+      data.push(trace.values);
+    }
+
+    const config: ChartConfiguration<"boxplot"> = {
+      type: "boxplot",
+      data: {
+        labels,
+        datasets: [
+          {
+            backgroundColor,
+            data,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            grid: {
+              display: false,
+            },
+          },
+          y: {
+            beginAtZero: false,
+          },
+        },
       },
     };
-    Plotly.newPlot(elemRef.current, plotlTtraces, layout, {
-      staticPlot: true,
-      editable: false,
-    });
+
+    const chart = new BoxPlotChart(chartRef.current!, config);
+
+    return () => {
+      chart.destroy();
+    };
   }, [traces]);
-  return <div ref={elemRef} style={{ height: "100%", width: "100%" }}></div>;
+
+  return (
+    <div style={{ height: "28rem" }}>
+      <canvas style={{ maxHeight: "100%" }} ref={chartRef}></canvas>
+    </div>
+  );
 };
 
 export default BoxPlotTableChart;

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx

@@ -7,7 +7,7 @@ import { benchmarks } from "@/results";
 import { useRootStore } from "@/reducer";
 import SizeResultsTable from "@/components/tables/SizeResultsTable";
 
-const BoxPlotTable = React.lazy(() => import("@/components/BoxPlotTable"));
+const BoxPlotTable = React.lazy(() => import("@/components/BoxPlotTable/BoxPlotTable"));
 
 interface Props {
   type: FrameworkType;

webdriver-ts-results/src/components/ResultTable/ResultTable.tsx

@@ -10,7 +10,7 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          plotly: ["plotly.js-cartesian-dist"],
+          chartjs: ["chart.js", "@sgratzl/chartjs-chart-boxplot"],
         },
       },
     },