Create combined graph

bench/graph.js

@@ -8,8 +8,19 @@ const colours = {
   'html-minifier': '#2ca02c',
 };
 
-const chartOptions = (title, displayLegend) => ({
+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,
@@ -41,11 +52,56 @@ const chartOptions = (title, displayLegend) => ({
         },
       ],
     },
+  },
+});
+
+const combinedChartOptions = () => ({
+  options: {
     legend: {
-      display: displayLegend,
+      display: false,
-      labels: {
+    },
-        fontColor: '#000',
+    scales: {
-      },
+      xAxes: [
+        {
+          gridLines: {
+            display: false,
+          },
+          ticks: {
+            fontColor: '#555',
+            fontSize: 20,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          id: 'y1',
+          type: 'linear',
+          scaleLabel: {display: true, fontSize: 22, fontColor: COLOUR_SPEED_PRIMARY, fontStyle: 'bold', labelString: 'Average relative op/s'},
+          position: 'left',
+          ticks: {
+            callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
+            fontColor: COLOUR_SPEED_PRIMARY,
+            fontSize: 16,
+          },
+          gridLines: {
+            color: '#eee',
+          },
+        },
+        {
+          id: 'y2',
+          type: 'linear',
+          scaleLabel: {display: true, fontSize: 22, fontColor: COLOUR_SIZE_PRIMARY, fontStyle: 'bold', labelString: 'Average size reduction'},
+          position: 'right',
+          ticks: {
+            callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
+            fontColor: COLOUR_SIZE_PRIMARY,
+            fontSize: 16,
+          },
+          gridLines: {
+            display: false,
+          }
+        },
+      ],
     },
   },
 });
@@ -69,7 +125,8 @@ const renderChart = (cfg) => new Promise((resolve, reject) => {
     res.on('end', () => resolve(Buffer.concat(chunks)));
   });
   req.end(JSON.stringify({
-    chart: cfg,
+    backgroundColor: 'white',
+    chart: JSON.stringify(cfg).replaceAll('"$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$"', "function(value) {return Math.round(value * 10000) / 100 + '%';}"),
     width: 900,
     height: 650,
     format: 'png',
@@ -78,19 +135,27 @@ const renderChart = (cfg) => new Promise((resolve, reject) => {
 
 (async () => {
   const averageSpeeds = results.getSpeedResults().getAverageRelativeSpeedPerMinifier('@minify-html/js');
-  results.writeAverageSpeedsGraph(await renderChart({
+  const averageSizes = results.getSizeResults().getAverageRelativeSizePerMinifier();
+  const averageLabels = ["html-minifier", "minimize", "@minify-html/js"];
+
+  results.writeAverageCombinedGraph(await renderChart({
     type: 'bar',
     data: {
-      labels: averageSpeeds.map(([n]) => n),
+      labels: averageLabels,
       datasets: [
         {
-          label: 'Average relative op/s',
+          yAxisID: 'y1',
-          backgroundColor: '#1f77b4',
+          backgroundColor: averageLabels.map((n) => n === "@minify-html/js" ? COLOUR_SPEED_PRIMARY : COLOUR_SPEED_SECONDARY),
-          data: averageSpeeds.map(([_, v]) => v),
+          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)),
         },
       ],
     },
-    ...chartOptions('Average operations per second (higher is better)', false),
+    ...combinedChartOptions(),
   }));
 
   const speeds = results.getSpeedResults().getRelativeFileSpeedsPerMinifier('@minify-html/js');
@@ -104,24 +169,7 @@ const renderChart = (cfg) => new Promise((resolve, reject) => {
         data: fileSpeeds.map(([_, speed]) => speed),
       })),
     },
-    ...chartOptions('Operations per second (higher is better)', true),
+    ...breakdownChartOptions('Operations per second (higher is better)'),
-  }));
-
-  const averageSizes = results.getSizeResults().getAverageRelativeSizePerMinifier();
-  results.writeAverageSizesGraph(await renderChart({
-    type: 'bar',
-    scaleFontColor: 'red',
-    data: {
-      labels: averageSizes.map(([n]) => n),
-      datasets: [
-        {
-          label: 'Average minified size',
-          backgroundColor: '#2ca02c',
-          data: averageSizes.map(([_, v]) => v),
-        },
-      ],
-    },
-    ...chartOptions('Average minified size (lower is better)', false),
   }));
 
   const sizes = results.getSizeResults().getRelativeFileSizesPerMinifier();
@@ -135,6 +183,6 @@ const renderChart = (cfg) => new Promise((resolve, reject) => {
         data: fileSizes.map(([_, size]) => size),
       })),
     },
-    ...chartOptions('Minified size (lower is better)', true),
+    ...breakdownChartOptions('Minified size (lower is better)'),
   }));
 })();

bench/results.js

@@ -6,6 +6,7 @@ const {mkdirSync, readFileSync, writeFileSync} = require('fs');
 const RESULTS_DIR = join(__dirname, 'results');
 const SPEEDS_JSON = join(RESULTS_DIR, 'speeds.json');
 const SPEEDS_GRAPH = join(RESULTS_DIR, 'speeds.png');
+const AVERAGE_COMBINED_GRAPH = join(RESULTS_DIR, 'average-combined.png');
 const AVERAGE_SPEEDS_GRAPH = join(RESULTS_DIR, 'average-speeds.png');
 const SIZES_JSON = join(RESULTS_DIR, 'sizes.json');
 const SIZES_GRAPH = join(RESULTS_DIR, 'sizes.png');
@@ -23,6 +24,9 @@ module.exports = {
   writeSizeResults(sizes) {
     writeFileSync(SIZES_JSON, JSON.stringify(sizes, null, 2));
   },
+  writeAverageCombinedGraph(data) {
+    writeFileSync(AVERAGE_COMBINED_GRAPH, data);
+  },
   writeAverageSpeedsGraph(data) {
     writeFileSync(AVERAGE_SPEEDS_GRAPH, data);
   },
@@ -39,9 +43,9 @@ module.exports = {
     const data = JSON.parse(readFileSync(SPEEDS_JSON, 'utf8'));
 
     return {
-      // Get minifier-speed pairs sorted by speed ascending.
+      // Get minifier-speed pairs.
       getAverageRelativeSpeedPerMinifier(baselineMinifier) {
-        return minifierNames.map(minifier => [
+        return new Map(minifierNames.map(minifier => [
           minifier,
           testNames
             // Get operations per second for each test.
@@ -50,7 +54,7 @@ module.exports = {
             .reduce((sum, c) => sum + c)
           // Divide by tests count to get average operations per second.
           / testNames.length,
-        ]).sort((a, b) => a[1] - b[1]);
+        ]));
       },
       // Get minifier-speeds pairs.
       getRelativeFileSpeedsPerMinifier(baselineMinifier) {
@@ -65,15 +69,15 @@ module.exports = {
     const data = JSON.parse(readFileSync(SIZES_JSON, 'utf8'));
 
     return {
-      // Get minifier-size pairs sorted by size descending.
+      // Get minifier-size pairs.
       getAverageRelativeSizePerMinifier() {
-        return minifierNames.map(minifier => [
+        return new Map(minifierNames.map(minifier => [
           minifier,
           testNames
             .map(test => data[test][minifier].relative)
             .reduce((sum, c) => sum + c)
           / testNames.length,
-        ]).sort((a, b) => b[1] - a[1]);
+        ]));
       },
       // Get minifier-sizes pairs.
       getRelativeFileSizesPerMinifier() {