Create combined graph
This commit is contained in:
Wilson Lin
parent
a5f5dfa653
commit
9d968ade18
110
bench/graph.js
110
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,
|
||||
labels: {
|
||||
fontColor: '#000',
|
||||
},
|
||||
display: false,
|
||||
},
|
||||
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',
|
||||
backgroundColor: '#1f77b4',
|
||||
data: averageSpeeds.map(([_, v]) => v),
|
||||
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)),
|
||||
},
|
||||
],
|
||||
},
|
||||
...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),
|
||||
}));
|
||||
|
||||
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),
|
||||
...breakdownChartOptions('Operations per second (higher is better)'),
|
||||
}));
|
||||
|
||||
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)'),
|
||||
}));
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue