You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.5 KiB
131 lines
3.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" />
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
|
|
<style>
|
|
.wrapper {
|
|
display: flex;
|
|
flex: wrap;
|
|
order: row;
|
|
}
|
|
</style>
|
|
<title>Histogram data access</title>
|
|
</head>
|
|
<body>
|
|
<div style="max-width: 800px;">
|
|
<canvas id="chart1591912418741" width="16" height="9"></canvas>
|
|
</div>
|
|
<script>
|
|
const format = num => {
|
|
const chunked = [];
|
|
String(num)
|
|
.split("")
|
|
.reverse()
|
|
.forEach((char, index) => {
|
|
if (index % 3 === 0) {
|
|
chunked.unshift([char]);
|
|
} else {
|
|
chunked[0].unshift(char);
|
|
}
|
|
});
|
|
|
|
return chunked.map(chunk => chunk.join("")).join(" ");
|
|
};
|
|
const ctx1591912418741 = document
|
|
.getElementById("chart1591912418741")
|
|
.getContext("2d");
|
|
const chart1591912418741 = new Chart(ctx1591912418741, {
|
|
type: "bar",
|
|
data: {
|
|
labels: [
|
|
"Int32Histogram",
|
|
"PackedHistogram",
|
|
"Float64Histogram",
|
|
"Int32Histogram eager allocation",
|
|
"WASM Int32Histogram",
|
|
"WASM PackedHistogram",
|
|
"Float64Histogram eager allocation"
|
|
],
|
|
datasets: [
|
|
{
|
|
data: [
|
|
8837945,
|
|
722255,
|
|
8686614,
|
|
8439126,
|
|
24384646,
|
|
24239733,
|
|
8555309
|
|
],
|
|
backgroundColor: [
|
|
"rgba(63, 142, 252, 0.8)",
|
|
"rgba(116, 165, 127, 0.8)",
|
|
"rgba(158, 206, 154, 0.8)",
|
|
"rgba(58, 175, 185, 0.8)",
|
|
"rgba(79, 124, 172, 0.8)",
|
|
"rgba(113, 128, 172, 0.8)",
|
|
"rgba(182, 140, 184, 0.8)"
|
|
],
|
|
borderColor: [
|
|
"rgba(63, 142, 252, 1)",
|
|
"rgba(116, 165, 127, 1)",
|
|
"rgba(158, 206, 154, 1)",
|
|
"rgba(58, 175, 185, 1)",
|
|
"rgba(79, 124, 172, 1)",
|
|
"rgba(113, 128, 172, 1)",
|
|
"rgba(182, 140, 184, 1)"
|
|
],
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: "Histogram data access",
|
|
fontSize: 16,
|
|
padding: 20
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: tooltipItem => {
|
|
return format(tooltipItem.yLabel) + " ops/s";
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
gridLines: {
|
|
color: "rgba(127, 127, 127, 0.2)"
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: "Operations per second"
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
callback: format
|
|
}
|
|
}
|
|
],
|
|
xAxes: [
|
|
{
|
|
gridLines: {
|
|
color: "rgba(127, 127, 127, 0.2)"
|
|
},
|
|
maxBarThickness: 150
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|