move js into separate file

This commit is contained in:
askiiart 2024-11-17 01:19:52 -06:00
parent 462dfba485
commit 898bef85eb
Signed by untrusted user who does not match committer: askiiart
GPG key ID: EA85979611654C30
4 changed files with 54 additions and 147 deletions

View file

@ -0,0 +1,52 @@
let ctx = document.getElementById("seq_read_latency_chart");
const labels = [
"Null 25 GiB file",
"Random 25 GiB file",
"100 million-sided polygon data",
"Linux LTS kernel",
];
let data = [
{
label: "DwarFS",
data: [0.37114600000000003, 14.15143, 2.95083, 0.001523],
backgroundColor: "rgb(255, 99, 132)",
},
{
label: "fuse-archive (tar)",
data: [0.393568, 0.397626, 0.07750499999999999, 0.0012230000000000001],
backgroundColor: "rgb(75, 192, 192)",
},
{
label: "Btrfs",
data: [
0.027922000000000002, 0.290906, 0.14088399999999998,
0.0013930000000000001,
],
backgroundColor: "rgb(54, 162, 235)",
},
];
let config = {
type: "bar",
data: {
datasets: data,
labels,
},
options: {
plugins: {
title: {
display: true,
text: "Sequential Read Latency - in ms",
},
},
responsive: true,
interaction: {
intersect: false,
},
},
};
Chart.defaults.borderColor = "#eee";
Chart.defaults.color = "#eee";
new Chart(ctx, config);

View file

@ -128,54 +128,7 @@
<!-- JavaScript for graphs goes hereeeeeee --> <!-- JavaScript for graphs goes hereeeeeee -->
<!-- EXAMPLE HERE --> <!-- EXAMPLE HERE -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script src="/assets/benchmarking-dwarfs/js/seq_latency.js"></script>
let ctx = document.getElementById('seq_read_latency_chart');
const labels = ['Null 25 GiB file', 'Random 25 GiB file', '100 million-sided polygon data', 'Linux LTS kernel']
let data = [
{
label: 'DwarFS',
data: [0.37114600000000003, 14.15143, 2.95083, 0.001523],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'fuse-archive (tar)',
data: [0.393568, 0.397626, 0.07750499999999999, 0.0012230000000000001],
backgroundColor: 'rgb(75, 192, 192)',
},
{
label: 'Btrfs',
data: [0.027922000000000002, 0.290906, 0.14088399999999998, 0.0013930000000000001],
backgroundColor: 'rgb(54, 162, 235)',
},
]
let config = {
type: 'bar',
data: {
datasets: data,
labels
},
options: {
plugins: {
title: {
display: true,
text: 'Sequential Read Latency - in ms'
},
},
responsive: true,
interaction: {
intersect: false,
},
}
};
Chart.defaults.borderColor = "#eee"
Chart.defaults.color = "#eee";
new Chart(ctx, config);
</script>
<section id="footnotes" <section id="footnotes"
class="footnotes footnotes-end-of-document" role="doc-endnotes"> class="footnotes footnotes-end-of-document" role="doc-endnotes">
<hr /> <hr />

View file

@ -97,53 +97,5 @@ The FUSE-based filesystems run into a bit of trouble here - with incompressible
</details> </details>
<!-- JavaScript for graphs goes hereeeeeee --> <!-- JavaScript for graphs goes hereeeeeee -->
<!-- EXAMPLE HERE -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script src="/assets/benchmarking-dwarfs/js/seq_latency.js"></script>
let ctx = document.getElementById('seq_read_latency_chart');
const labels = ['Null 25 GiB file', 'Random 25 GiB file', '100 million-sided polygon data', 'Linux LTS kernel']
let data = [
{
label: 'DwarFS',
data: [0.37114600000000003, 14.15143, 2.95083, 0.001523],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'fuse-archive (tar)',
data: [0.393568, 0.397626, 0.07750499999999999, 0.0012230000000000001],
backgroundColor: 'rgb(75, 192, 192)',
},
{
label: 'Btrfs',
data: [0.027922000000000002, 0.290906, 0.14088399999999998, 0.0013930000000000001],
backgroundColor: 'rgb(54, 162, 235)',
},
]
let config = {
type: 'bar',
data: {
datasets: data,
labels
},
options: {
plugins: {
title: {
display: true,
text: 'Sequential Read Latency - in ms'
},
},
responsive: true,
interaction: {
intersect: false,
},
}
};
Chart.defaults.borderColor = "#eee"
Chart.defaults.color = "#eee";
new Chart(ctx, config);
</script>

View file

@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<canvas id="myChart" style="max-height: 600px; max-width: 900px">
</canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let ctx = document.getElementById('myChart');
const labels = ['Null 25 GiB file', 'Random 25 GiB file', '100 million-sided polygon data', 'Linux LTS kernel']
let data = [
{
label: 'DwarFS',
data: [1.0, 1.0, 1.0, 1.0],
backgroundColor: 'rgb(255, 99, 132)',
},
{
label: 'fuse-archive (tar)',
data: [2.0, 2.0, 2.0, 2.0],
backgroundColor: 'rgb(75, 192, 192)',
},
{
label: 'Btrfs',
data: [3.0, 3.0, 3.0, 3.0],
backgroundColor: 'rgb(54, 162, 235)',
},
]
let config = {
type: 'bar',
data: {
datasets: data,
labels
},
options: {
plugins: {
title: {
display: true,
text: 'Sequential Read Latency - in ms'
},
},
responsive: true,
}
};
new Chart(ctx, config);
</script>
</body>
</html>