2020-01-18 09:14:30 -05:00
|
|
|
const results = require('./results');
|
2021-08-07 07:36:09 -04:00
|
|
|
const https = require('https');
|
2020-01-09 06:40:04 -05:00
|
|
|
|
|
|
|
const colours = {
|
2020-07-11 11:29:34 -04:00
|
|
|
'minify-html': '#041f60',
|
2020-07-24 23:59:21 -04:00
|
|
|
'@minify-html/js': '#1f77b4',
|
2020-01-12 01:39:23 -05:00
|
|
|
'minimize': '#ff7f0e',
|
|
|
|
'html-minifier': '#2ca02c',
|
2020-01-09 06:40:04 -05:00
|
|
|
};
|
|
|
|
|
2021-08-07 09:58:38 -04:00
|
|
|
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) => ({
|
2020-01-09 06:40:04 -05:00
|
|
|
options: {
|
2021-08-07 09:58:38 -04:00
|
|
|
legend: {
|
|
|
|
display: true,
|
|
|
|
labels: {
|
|
|
|
fontColor: '#000',
|
|
|
|
},
|
|
|
|
},
|
2020-01-09 06:40:04 -05:00
|
|
|
title: {
|
|
|
|
display: true,
|
|
|
|
text: title,
|
2020-01-12 01:39:23 -05:00
|
|
|
fontColor: '#333',
|
2020-01-12 04:32:37 -05:00
|
|
|
fontSize: 24,
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
|
|
|
scales: {
|
2021-08-07 07:36:09 -04:00
|
|
|
xAxes: [
|
|
|
|
{
|
|
|
|
barPercentage: 0.25,
|
|
|
|
gridLines: {
|
|
|
|
color: '#e2e2e2',
|
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
fontColor: '#666',
|
|
|
|
fontSize: 20,
|
|
|
|
},
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 07:36:09 -04:00
|
|
|
],
|
|
|
|
yAxes: [
|
|
|
|
{
|
|
|
|
gridLines: {
|
|
|
|
color: '#ccc',
|
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
fontColor: '#666',
|
|
|
|
fontSize: 20,
|
|
|
|
},
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 07:36:09 -04:00
|
|
|
],
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const combinedChartOptions = () => ({
|
|
|
|
options: {
|
2020-01-09 06:40:04 -05:00
|
|
|
legend: {
|
2021-08-07 09:58:38 -04:00
|
|
|
display: false,
|
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
xAxes: [
|
|
|
|
{
|
|
|
|
gridLines: {
|
|
|
|
display: false,
|
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
fontColor: '#555',
|
|
|
|
fontSize: 20,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
yAxes: [
|
|
|
|
{
|
|
|
|
id: 'y1',
|
|
|
|
type: 'linear',
|
2021-08-07 09:59:20 -04:00
|
|
|
scaleLabel: {display: true, fontSize: 22, fontColor: COLOUR_SPEED_PRIMARY, fontStyle: 'bold', labelString: 'Average performance'},
|
2021-08-07 09:58:38 -04:00
|
|
|
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,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
],
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-08-07 07:36:09 -04:00
|
|
|
const renderChart = (cfg) => new Promise((resolve, reject) => {
|
|
|
|
const req = https.request('https://quickchart.io/chart', {
|
|
|
|
method: 'POST',
|
|
|
|
headers: {
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
},
|
2021-08-07 06:53:28 -04:00
|
|
|
});
|
2021-08-07 07:36:09 -04:00
|
|
|
req.on('error', reject);
|
|
|
|
req.on('response', res => {
|
|
|
|
const err = res.headers['x-quickchart-error'];
|
|
|
|
if (res.statusCode < 200 || res.statusCode > 299 || err) {
|
|
|
|
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({
|
2021-08-07 09:58:38 -04:00
|
|
|
backgroundColor: 'white',
|
|
|
|
chart: JSON.stringify(cfg).replaceAll('"$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$"', "function(value) {return Math.round(value * 10000) / 100 + '%';}"),
|
2021-08-07 07:36:09 -04:00
|
|
|
width: 900,
|
|
|
|
height: 650,
|
|
|
|
format: 'png',
|
|
|
|
}));
|
|
|
|
});
|
2020-01-09 06:40:04 -05:00
|
|
|
|
|
|
|
(async () => {
|
2020-07-24 23:59:21 -04:00
|
|
|
const averageSpeeds = results.getSpeedResults().getAverageRelativeSpeedPerMinifier('@minify-html/js');
|
2021-08-07 09:58:38 -04:00
|
|
|
const averageSizes = results.getSizeResults().getAverageRelativeSizePerMinifier();
|
|
|
|
const averageLabels = ["html-minifier", "minimize", "@minify-html/js"];
|
|
|
|
|
|
|
|
results.writeAverageCombinedGraph(await renderChart({
|
2020-01-09 06:40:04 -05:00
|
|
|
type: 'bar',
|
|
|
|
data: {
|
2021-08-07 09:58:38 -04:00
|
|
|
labels: averageLabels,
|
2021-08-07 07:36:09 -04:00
|
|
|
datasets: [
|
|
|
|
{
|
2021-08-07 09:58:38 -04:00
|
|
|
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)),
|
2021-08-07 07:36:09 -04:00
|
|
|
},
|
|
|
|
],
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 09:58:38 -04:00
|
|
|
...combinedChartOptions(),
|
2020-01-18 09:14:30 -05:00
|
|
|
}));
|
|
|
|
|
2020-07-24 23:59:21 -04:00
|
|
|
const speeds = results.getSpeedResults().getRelativeFileSpeedsPerMinifier('@minify-html/js');
|
2020-01-18 09:14:30 -05:00
|
|
|
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),
|
|
|
|
})),
|
|
|
|
},
|
2021-08-07 09:58:38 -04:00
|
|
|
...breakdownChartOptions('Operations per second (higher is better)'),
|
2020-01-18 09:14:30 -05:00
|
|
|
}));
|
|
|
|
|
|
|
|
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),
|
|
|
|
})),
|
|
|
|
},
|
2021-08-07 09:58:38 -04:00
|
|
|
...breakdownChartOptions('Minified size (lower is better)'),
|
2020-01-18 09:14:30 -05:00
|
|
|
}));
|
2020-01-09 06:40:04 -05:00
|
|
|
})();
|