Update to Chart.js 4 and use my own chartjs-node-canvas (#190)

package.json

@@ -12,49 +12,55 @@
   "dependencies": {
     "@octokit/auth-app": "4.0.13",
     "@octokit/rest": "19.0.13",
-    "chart.js": "^3.5.1",
-    "chartjs-node-canvas": "4.1.6",
-    "@sgratzl/chartjs-chart-boxplot": "^3.10.0",
-    "chartjs-plugin-annotation": "2.2.1",
-    "sharp": "0.32.6",
-    "join-images": "1.1.5",
+    "@sgratzl/chartjs-chart-boxplot": "4.3.0",
+    "canvas": "2.11.2",
+    "chart.js": "4.4.2",
+    "chartjs-plugin-annotation": "3.0.1",
     "decimal.js": "10.4.3",
     "ejs": "3.1.9",
-    "koa": "2.15.1",
+    "join-images": "1.1.5",
+    "koa": "2.15.2",
     "koa-body": "6.0.1",
     "koa-router": "12.0.1",
     "pg": "8.11.3",
     "promisify-child-process": "4.1.2",
+    "sharp": "0.33.3",
     "tslog": "4.9.2",
     "uplot": "1.6.30"
   },
+  "overrides": {
+    "join-images": {
+      "sharp": "$sharp"
+    }
+  },
   "engines": {
     "node": ">=21.0.0"
   },
   "devDependencies": {
     "@octokit/types": "9.2.3",
-    "@types/jquery": "3.5.29",
     "@types/ejs": "3.1.5",
+    "@types/jquery": "3.5.29",
     "@types/koa": "2.15.0",
     "@types/koa-router": "7.4.8",
-    "@types/pg": "8.11.2",
+    "@types/pg": "8.11.4",
     "@types/pixelmatch": "5.2.6",
     "@types/pngjs": "6.0.4",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "ajv": "8.12.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "27.9.0",
     "eslint-plugin-prettier": "5.1.3",
     "jest": "29.7.0",
     "nodemon": "3.1.0",
+    "patch-package": "8.0.0",
     "pixelmatch": "5.3.0",
     "prettier": "3.2.5",
     "source-map-support": "0.5.21",
     "terser": "5.29.2",
     "ts-jest": "29.1.2",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "typescript-json-schema": "0.63.0"
   },
   "jest": {
@@ -98,7 +104,7 @@
     ]
   },
   "scripts": {
-    "postinstall": "if [ -z \"${SKIP_COMPILE}\" ]; then npm run compile; fi",
+    "postinstall": "if [ -z \"${SKIP_COMPILE}\" ]; then npm run compile; fi; patch-package",
     "precompile": "npm run prep-folders && npm run compile-uplot",
     "prep-folders": "mkdir -p tmp/interm tmp/knit resources/reports resources/exp-data",
     "compile-uplot": "terser --module --ecma 2018 --compress --mangle -o ./resources/uPlot.esm.min.js -- node_modules/uplot/dist/uPlot.esm.js",

patches/@sgratzl+chartjs-chart-boxplot+4.3.0.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/@sgratzl/chartjs-chart-boxplot/build/index.js b/node_modules/@sgratzl/chartjs-chart-boxplot/build/index.js
+index 29e5b08..203670f 100644
+--- a/node_modules/@sgratzl/chartjs-chart-boxplot/build/index.js
++++ b/node_modules/@sgratzl/chartjs-chart-boxplot/build/index.js
+@@ -71,7 +71,7 @@ function determineStatsOptions(options) {
+     };
+ }
+ function boxplotStats(arr, options) {
+-    const vs = window.Float64Array != null && !(arr instanceof Float32Array || arr instanceof Float64Array)
++    const vs = typeof Float64Array !== 'undefined' && !(arr instanceof Float32Array || arr instanceof Float64Array)
+         ? Float64Array.from(arr)
+         : arr;
+     const r = boxplot(vs, determineStatsOptions(options));
+@@ -104,7 +104,7 @@ function violinStats(arr, options) {
+     if (arr.length === 0) {
+         return undefined;
+     }
+-    const vs = window.Float64Array != null && !(arr instanceof Float32Array || arr instanceof Float64Array)
++    const vs = typeof Float64Array !== 'undefined' && !(arr instanceof Float32Array || arr instanceof Float64Array)
+         ? Float64Array.from(arr)
+         : arr;
+     const stats = boxplot(vs, determineStatsOptions(options));

src/backend/compare/charts.ts

@@ -1,10 +1,11 @@
 import { writeFileSync } from 'fs';
 import { joinImages } from 'join-images';
+import ChartJsAnnotations from 'chartjs-plugin-annotation';
 
 import {
   ChartJSNodeCanvas,
   ChartJSNodeCanvasOptions
-} from 'chartjs-node-canvas';
+} from '../../vendored/chartjs-node-canvas/src/index.js';
 import { ByGroupChangeData, ChangeData } from './prep-data.js';
 import {
   ViolinController,
@@ -15,6 +16,7 @@ import {
 import { medianUnsorted } from '../../shared/stats.js';
 import { robustPath } from '../util.js';
 import { siteAesthetics } from '../../shared/aesthetics.js';
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
 
 const fullyTransparent = 'rgba(0, 0, 0, 0)';
 
@@ -23,6 +25,10 @@ const marginTopWithTitle = 34;
 const marginBottom = 28;
 const perEntryHeight = 34;
 
+export function initChartJS(): void {
+  Chart.register(...registerables);
+}
+
 function calculatePlotHeight(title: string | null, data: ChangeData): number {
   const result = marginBottom + data.labels.length * perEntryHeight;
   if (title) {
@@ -176,13 +182,11 @@ export interface CanvasSettings {
 }
 
 export function createCanvas(settings: CanvasSettings): ChartJSNodeCanvas {
-  const plugins: any[] = ['chartjs-plugin-annotation'];
-
   const canvasOptions: ChartJSNodeCanvasOptions = {
     width: settings.width,
     height: settings.height,
     backgroundColour: siteAesthetics.backgroundColor,
-    plugins: { modern: plugins },
+    plugins: { modern: [ChartJsAnnotations] },
     chartCallback: (ChartJS) => {
       ChartJS.defaults.font.family = 'Roboto';
 
@@ -240,7 +244,7 @@ async function renderDataOnCanvas(
   const plotTypeConst =
     plotType === 'boxplot' ? ('boxplot' as const) : ('violin' as const);
 
-  const configuration = {
+  const configuration: ChartConfiguration = {
     type: plotTypeConst,
     data: {
       labels: data.labels,
@@ -252,16 +256,17 @@ async function renderDataOnCanvas(
       plugins: {
         legend: { display: false },
         annotation: getFivePercentLineAnnotations()
-      },
+      } as any,
       scales: {
         x: {
           suggestedMin: 0,
           suggestedMax: 2,
+          border: { display: false },
           grid: {
             drawOnChartArea: false,
             drawTicks: true,
             tickLength,
-            drawBorder: false,
+            display: true,
             tickColor: '#000'
           },
           ticks: {
@@ -271,21 +276,19 @@ async function renderDataOnCanvas(
           }
         },
         y: {
-          grid: {
-            display: false,
-            drawBorder: false
-          }
+          border: { display: false },
+          grid: { display: false }
         }
       }
     }
   };
 
   if (!showYAxisLabels) {
-    (<any>configuration.options.scales.y).ticks = { display: false };
+    configuration.options!.scales!.y!.ticks = { display: false };
   }
 
   if (title) {
-    (<any>configuration.options.plugins).title = {
+    configuration.options!.plugins!.title = {
       text: title,
       display: true
     };

src/backend/compare/prep-data.ts

@@ -1,5 +1,6 @@
 import { mkdirSync } from 'node:fs';
-import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
+// eslint-disable-next-line max-len
+import { ChartJSNodeCanvas } from '../../vendored/chartjs-node-canvas/src/index.js';
 
 import {
   ComparisonStatistics,

src/index.ts

@@ -55,6 +55,7 @@ import {
 } from './backend/rebench/results.js';
 import { setTimeout } from 'node:timers/promises';
 import { reportConnectionRefused } from './shared/errors.js';
+import { initChartJS } from './backend/compare/charts.js';
 
 log.info('Starting ReBenchDB Version ' + rebenchVersion);
 
@@ -217,6 +218,7 @@ async function tryToConnect(n: number): Promise<boolean> {
   }
 
   await initPerfTracker(db);
+  initChartJS();
 
   log.info(`Starting server on http://localhost:${siteConfig.port}`);
   app.listen(siteConfig.port);

src/vendored/chartjs-node-canvas/src/backgroundColourPlugin.ts

@@ -0,0 +1,20 @@
+import { Chart as ChartJS, Plugin as ChartJSPlugin } from 'chart.js';
+
+export class BackgroundColourPlugin implements ChartJSPlugin {
+  public readonly id: string =
+    'chartjs-plugin-chartjs-node-canvas-background-colour';
+
+  public constructor(
+    private readonly _width: number,
+    private readonly _height: number,
+    private readonly _fillStyle: string
+  ) {}
+
+  public beforeDraw(chart: ChartJS): boolean | void {
+    const ctx = chart.ctx;
+    ctx.save();
+    ctx.fillStyle = this._fillStyle;
+    ctx.fillRect(0, 0, this._width, this._height);
+    ctx.restore();
+  }
+}