Improve graphs

README.md

@@ -15,6 +15,8 @@ Available as:
 
 ## Performance
 
+Speed and effectiveness of Node.js version compared to other JS minifiers.
+
 ![Chart showing speed of HTML minifiers](./bench/speed.png) ![Chart showing effectiveness of HTML minifiers](./bench/minification.png)
 
 ## Usage

bench/bench.js

@@ -15,7 +15,7 @@ const tests = fs.readdirSync(testsDir).map(name => ({
 }));
 
 const programs = {
-  'hyperbuild-nodejs': content => hyperbuild.minify(Buffer.from(content)),
+  'hyperbuild-nodejs': content => hyperbuild.minify_in_place(Buffer.from(content)),
   'html-minifier': content => htmlMinifier.minify(content, {
     caseSensitive: false,
     collapseBooleanAttributes: true,
@@ -67,10 +67,7 @@ const colours = [
     borderColor: '#4bc0c0',
   },
 ];
-const renderChart = async (file, title, cfg) => {
+const chartOptions = (title, displayLegend, yTick = t => t) => ({
-  const chart = new chartjs(435, 320);
-  await chart.drawChart({
-    ...cfg,
   options: {
     title: {
       display: true,
@@ -91,18 +88,23 @@ const renderChart = async (file, title, cfg) => {
           color: '#666',
         },
         ticks: {
+          callback: yTick,
           fontColor: '#222',
         },
       }],
     },
     legend: {
+      display: displayLegend,
       labels: {
         fontFamily: 'Ubuntu, sans-serif',
         fontColor: '#000',
       },
     },
   },
-  });
+});
+const renderChart = async (file, cfg) => {
+  const chart = new chartjs(435, 320);
+  await chart.drawChart(cfg);
   await chart.writeImageToFile('image/png', path.join(__dirname, `${file}.png`));
 };
 
@@ -154,21 +156,21 @@ suite
       count: b.count,
       ops: b.hz,
     })).sort((a, b) => a.hz - b.hz);
-    await renderChart('speed', 'Minification speed', {
+    await renderChart('speed', {
       type: 'bar',
       data: {
         labels: speedResults.map(r => r.name),
         datasets: [{
-          label: 'Operations per second',
           ...colours[0],
           data: speedResults.map(r => r.ops),
         }],
       },
+      ...chartOptions('Operations per second (higher is better)', false),
     });
 
     const testNames = Object.keys(sizes);
     const programNames = Object.keys(programs);
-    await renderChart('minification', 'Relative minified HTML file size', {
+    await renderChart('minification', {
       type: 'bar',
       scaleFontColor: 'red',
       data: {
@@ -176,9 +178,10 @@ suite
         datasets: programNames.map((program, i) => ({
           label: program,
           ...colours[i],
-          data: testNames.map(test => sizes[test][program].relative),
+          data: testNames.map(test => sizes[test][program].relative * 100),
         })),
       },
+      ...chartOptions('Relative minified HTML file size (lower is better)', true, tick => `${tick}%`),
     });
   })
   .run({'async': true});