JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.2.0/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
CSS
#container3 {
margin-bottom: 1em;
}
JavaScript
function cleanup(data) {
let max1 = 0,
max2 = 0,
max3 = 0,
max4 = 0;
let min = 0;
data.forEach((t) => {
if (t !== 0 && (min === 0 || min > t)) {
min = t;
}
if (t > max1) {
max4 = max3;
max3 = max2;
max2 = max1;
max1 = t;
} else if (t > max2) {
max4 = max3;
max3 = max2;
max2 = t;
} else if (t > max3) {
max4 = max3;
max3 = t;
} else if (t > max4) {
max4 = t;
}
});
data.forEach((t, i) => {
if (t === 0) {
//data[i] = min;
} else if (t === max1 || t === max2 || t === max3) {
data[i] = max4;
}
});
}
function chart(container, title, series) {
cleanup(series[0].data);
cleanup(series[1].data);
Highcharts.chart(container, {
title: {
text: title
},
yAxis: {
title: {
text: 'μs'
},
//type: 'logarithmic'
},
xAxis: {
labels: {
formatter: function() {
return 1000 * this.value;
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: series,
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
const arrayData = [],
setData = [];
const arr = [],
set = new Set();
let n = 0,
start, end;
for (let i = 0; i < 1000; i++) {
for (let j = 0; j < 999; j++) {
arr.push(n);
set.add(n);
n++;
}
start = performance.now();
arr.push(n);
end = performance.now();
arrayData.push(end - start);
start = performance.now();
set.add(n);
end = performance.now();
setData.push(end - start);
n++;
}
chart('container1', 'Add Nth...