GenerateChart.ts

import { Canvas } from "canvas";
import groupBy from "lodash.groupby";
import { writeFile } from "node:fs/promises";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import { parse as vegaParse, Spec, View as VegaView } from "vega";
import { ChartResult } from "./reporters/ChartReporter.js";

// config
const width = 500;
const singleResultLineHeightPX = 12;
const padding = 5;
const colors: { bestWorst: string; meanMinusStdMeanPlusStd: string }[] = [
  {
    bestWorst: "#6c8ebf",
    meanMinusStdMeanPlusStd: "#dae8fc",
    // TODO: maybe make mean also configurable per group, instead of just black for all
  },
  {
    bestWorst: "#d6b656",
    meanMinusStdMeanPlusStd: "#fff2cc",
  },
];

const __dirname = dirname(fileURLToPath(import.meta.url));

export const getChartVegaSpec = (results: ChartResult[]): Spec => {
  const height =
    Object.keys(
      groupBy(results, (result) => {
        return [result.projectName, result.commandName, result.groupByValue];
      })
    ).length * singleResultLineHeightPX;

  return {
    $schema: "https://vega.github.io/schema/vega/v5.json",
    description:
      "Benchmark generated by https://github.com/Maxim-Mazurok/dev-bench",
    width,
    height,
    padding,
    config: {
      axisBand: { bandPosition: 1, tickExtra: true, tickOffset: 0 },
    },
    data: [
      {
        name: "results",
        values: results,
      },
      {
        name: "temp_results",
        source: "results",
        transform: [
          {
            type: "aggregate",
            groupby: ["projectName", "commandName", "groupByValue"],
            fields: [
              "totalInSeconds",
              "totalInSeconds",
              "totalInSeconds",
              "totalInSeconds",
            ],
            ops: ["mean", "stdev", "min", "max"],
            as: ["mean", "stdev", "min", "max"],
          },
        ],
      },
      {
        name: "minmax",
        source: "results",
        transform: [
          {
            type: "aggregate",
            groupby: ["projectName", "commandName", "groupByValue"],
            fields: [
              "totalInSeconds",
              "totalInSeconds",
              "totalInSeconds",
              "totalInSeconds",
            ],
            ops: ["mean", "min", "max", "stdev"],
            as: ["mean", "min", "max", "stdev"],
          },
          {
            type: "formula",
            as: "stdev0",
            expr: "datum.mean - datum.stdev",
          },
          {
            type: "formula",
            as: "stdev1",
            expr: "datum.mean + datum.stdev",
          },
        ],
      },
    ],
    scales: [
      {
        name: "y_scale_project",
        type: "band",
        range: "height",
        domain: { data: "temp_results", field: "projectName" },
      },
      {
        name: "x_scale",
        type: "linear",
        range: "width",
        round: true,
        domain: {
          data: "minmax",
          fields: ["stdev0", "stdev1", "min", "max"],
        },
        zero: false,
        nice: true,
      },
      {
        name: "group_by_value_mean_color",
        type: "ordinal",
        domain: { data: "temp_results", field: "groupByValue" },
        range: colors.map((x) => x.meanMinusStdMeanPlusStd),
      },
      {
        name: "group_by_value_minmax_color",
        type: "ordinal",
        domain: { data: "temp_results", field: "groupByValue" },
        range: colors.map((x) => x.bestWorst),
      },
    ],
    legends: [
      {
        orient: "left",
        stroke: "group_by_value_minmax_color",
        fill: "group_by_value_mean_color",
        symbolStrokeWidth: 3,
      },
    ],
    axes: [
      {
        orient: "bottom",
        scale: "x_scale",
        zindex: 1,
        title: "Duration, seconds",
        grid: true,
        gridOpacity: 0.1,
        gridColor: "#000",
      },
      {
        orient: "right",
        scale: "y_scale_project",
        zindex: 1,
        grid: true,
        gridColor: "#000",
      },
    ],
    marks: [
      {
        type: "group",
        from: {
          facet: {
            data: "temp_results",
            name: "facet_projects",
            groupby: "projectName",
          },
        },
        encode: {
          enter: { y: { scale: "y_scale_project", field: "projectName" } },
        },
        signals: [{ name: "height", update: "bandwidth('y_scale_project')" }],
        scales: [
          {
            name: "projects_scale",
            type: "band",
            range: "height",
            paddingOuter: 0.2,
            domain: { data: "facet_projects", field: "projectName" },
          },
          {
            name: "y_scale_command",
            type: "band",
            range: "height",
            domain: { data: "facet_projects", field: "commandName" },
          },
        ],
        axes: [
          {
            orient: "left",
            scale: "y_scale_command",
            zindex: 1,
            grid: true,
            gridColor: "#000",
          },
        ],
        marks: [
          {
            type: "group",
            from: {
              facet: {
                data: "facet_projects",
                name: "facet_command",
                groupby: "commandName",
              },
            },
            encode: {
              enter: { y: { scale: "y_scale_command", field: "commandName" } },
            },
            signals: [
              { name: "height", update: "bandwidth('y_scale_command')" },
            ],
            scales: [
              {
                name: "group_by_value_scale",
                type: "band",
                range: "height",
                paddingOuter: 0.2,
                domain: { data: "facet_command", field: "groupByValue" },
              },
            ],
            marks: [
              {
                name: "stdevs",
                type: "rect",
                from: { data: "facet_command" },
                encode: {
                  enter: {
                    fill: {
                      scale: "group_by_value_mean_color",
                      field: "groupByValue",
                    },
                    height: { scale: "group_by_value_scale", band: 1 },
                    y: { scale: "group_by_value_scale", field: "groupByValue" },
                    x: {
                      scale: "x_scale",
                      signal: "datum.mean - datum.stdev",
                    },
                    x2: {
                      scale: "x_scale",
                      signal: "datum.mean + datum.stdev",
                    },
                  },
                },
              },
              {
                name: "minmaxes",
                type: "rect",
                from: { data: "facet_command" },
                encode: {
                  enter: {
                    fill: {
                      scale: "group_by_value_minmax_color",
                      field: "groupByValue",
                    },
                    height: { scale: "group_by_value_scale", band: 0.2 },
                    y: {
                      scale: "group_by_value_scale",
                      field: "groupByValue",
                      offset: { scale: "group_by_value_scale", band: 0.4 },
                    },
                    x: { scale: "x_scale", field: "min" },
                    x2: { scale: "x_scale", field: "max" },
                  },
                },
              },
              {
                name: "means",
                type: "rect",
                from: { data: "facet_command" },
                encode: {
                  enter: {
                    fill: { value: "black" },
                    height: { scale: "group_by_value_scale", band: 1 },
                    width: { scale: "group_by_value_scale", band: 0.2 },
                    y: { scale: "group_by_value_scale", field: "groupByValue" },
                    xc: { scale: "x_scale", field: "mean" },
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  };
};

export const saveVegaToFile = async (spec: Spec, fileName: string) => {
  const view = new VegaView(vegaParse(spec), {
    renderer: "none",
  }).initialize();

  return writeFile(
    join(__dirname, fileName),
    ((await view.toCanvas()) as unknown as Canvas).toBuffer()
  );
};