minify-html/bench/graph.js

const results = require('./results');
const https = require('https');

const colours = {
  'minify-html': '#041f60',
  '@minify-html/js': '#1f77b4',
  'minimize': '#ff7f0e',
  'html-minifier': '#2ca02c',
};

const COLOUR_SPEED_PRIMARY = '#2e61bd';
const COLOUR_SPEED_SECONDARY = 'rgb(188, 188, 188)';
const COLOUR_SIZE_PRIMARY = '#64acce';
const COLOUR_SIZE_SECONDARY = 'rgb(224, 224, 224)';

const breakdownChartOptions = (title) => ({
  options: {
    legend: {
      display: true,
      labels: {
        fontColor: '#000',
      },
    },
    title: {
      display: true,
      text: title,
      fontColor: '#333',
      fontSize: 24,
    },
    scales: {
      xAxes: [
        {
          barPercentage: 0.25,
          gridLines: {
            color: '#e2e2e2',
          },
          ticks: {
            fontColor: '#666',
            fontSize: 20,
          },
        },
      ],
      yAxes: [
        {
          gridLines: {
            color: '#ccc',
          },
          ticks: {
            fontColor: '#666',
            fontSize: 20,
          },
        },
      ],
    },
  },
});

const axisLabel = (fontColor, labelString) => ({
  display: true,
  fontColor,
  fontSize: 24,
  fontStyle: 'bold',
  labelString,
  padding: 16,
});

const combinedChartOptions = () => ({
  options: {
    legend: {
      display: false,
    },
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false,
          },
          ticks: {
            fontColor: '#555',
            fontSize: 24,
          },
        },
      ],
      yAxes: [
        {
          id: 'y1',
          type: 'linear',
          scaleLabel: axisLabel(COLOUR_SPEED_PRIMARY, 'Performance'),
          position: 'left',
          ticks: {
            callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
            fontColor: COLOUR_SPEED_PRIMARY,
            fontSize: 24,
          },
          gridLines: {
            color: '#eee',
          },
        },
        {
          id: 'y2',
          type: 'linear',
          scaleLabel: axisLabel(COLOUR_SIZE_PRIMARY, 'Average size reduction'),
          position: 'right',
          ticks: {
            callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
            fontColor: COLOUR_SIZE_PRIMARY,
            fontSize: 24,
          },
          gridLines: {
            display: false,
          }
        },
      ],
    },
  },
});

const renderChart = (cfg) => new Promise((resolve, reject) => {
  const req = https.request('https://quickchart.io/chart', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  req.on('error', reject);
  req.on('response', res => {
    const err = res.headers['x-quickchart-error'];
    if (res.statusCode < 200 || res.statusCode > 299 || err) {
      return reject(new Error(err || `Status ${res.statusCode}`));
    }
    const chunks = [];
    res.on('error', reject);
    res.on('data', c => chunks.push(c));
    res.on('end', () => resolve(Buffer.concat(chunks)));
  });
  req.end(JSON.stringify({
    backgroundColor: 'white',
    chart: JSON.stringify(cfg).replaceAll('"$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$"', "function(value) {return Math.round(value * 10000) / 100 + '%';}"),
    width: 1333,
    height: 768,
    format: 'png',
  }));
});

(async () => {
  const averageSpeeds = results.getSpeedResults().getAverageRelativeSpeedPerMinifier('@minify-html/js');
  const averageSizes = results.getSizeResults().getAverageRelativeSizePerMinifier();
  const averageLabels = ["minimize", "html-minifier", "@minify-html/js"];

  results.writeAverageCombinedGraph(await renderChart({
    type: 'bar',
    data: {
      labels: averageLabels,
      datasets: [
        {
          yAxisID: 'y1',
          backgroundColor: averageLabels.map((n) => n === "@minify-html/js" ? COLOUR_SPEED_PRIMARY : COLOUR_SPEED_SECONDARY),
          data: averageLabels.map((n) => averageSpeeds.get(n)),
        },
        {
          yAxisID: 'y2',
          backgroundColor: averageLabels.map((n) => n === "@minify-html/js" ? COLOUR_SIZE_PRIMARY : COLOUR_SIZE_SECONDARY),
          data: averageLabels.map((n) => 1 - averageSizes.get(n)),
        },
      ],
    },
    ...combinedChartOptions(),
  }));

  const speeds = results.getSpeedResults().getRelativeFileSpeedsPerMinifier('@minify-html/js');
  results.writeSpeedsGraph(await renderChart({
    type: 'bar',
    data: {
      labels: speeds[0][1].map(([n]) => n),
      datasets: speeds.map(([minifier, fileSpeeds]) => ({
        label: minifier,
        backgroundColor: colours[minifier],
        data: fileSpeeds.map(([_, speed]) => speed),
      })),
    },
    ...breakdownChartOptions('Operations per second (higher is better)'),
  }));

  const sizes = results.getSizeResults().getRelativeFileSizesPerMinifier();
  results.writeSizesGraph(await renderChart({
    type: 'bar',
    data: {
      labels: sizes[0][1].map(([n]) => n),
      datasets: sizes.map(([minifier, fileSizes]) => ({
        label: minifier,
        backgroundColor: colours[minifier],
        data: fileSizes.map(([_, size]) => size),
      })),
    },
    ...breakdownChartOptions('Minified size (lower is better)'),
  }));
})();