Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update benchmarks page #26

Merged
merged 1 commit into from
Jul 18, 2024
Merged

Update benchmarks page #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions jekyll/benchmarks/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,67 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performance Benchmarks</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="js/script.js"></script>
<style>
.graph_container {
display: flex;
flex: 2;
align-items: center;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
border: 2px solid #000; /* Add this line to create a border */
padding: 10px; /* Optional: Add some padding to improve the appearance */
}
.description {
flex: 1;
padding: 20px;
}
.chart-container {
flex: 2;
position: relative;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div class="content">
<h1 style="text-align: center;">Chipmunk Performance benchmarks</h1>
<br><br>
<div class="graph_container">
<div style="text-align: left;" class="description">Performance test comparison for each subsequent release and time taken for each test. Lesser the time taken, better the performance. </div>
<div class="chart-container">
<canvas id="chart_full"></canvas>
</div>
</div>
<br><br>
<div class="graph_container">
<div class="description">Performance test comparison for each subsequent release where time taken for each test is below 500ms.</div>
<div class="chart-container">
<canvas id="chart_below500"></canvas>
</div>
</div>
<br><br>
<div class="graph_container">
<div class="description">Performance test comparison for each subsequent release where time taken for each test is below 500ms.</div>
<div class="chart-container">
<canvas id="chart_above500"></canvas>
</div>
</div>
<br><br>
</div>
</body>
</html>


<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -22,3 +83,4 @@ <h1 style="text-align: center;">Chipmunk Performance Changes</h1>
</div>
</body>
</html>
-->
182 changes: 125 additions & 57 deletions jekyll/benchmarks/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,136 @@
document.addEventListener('DOMContentLoaded', function () {
// Load benchmark data from JSON
fetch('data/data.json')
.then(response => response.json())
.then(data => {
// Extract all unique file names
const allFileNames = [];
Object.keys(data).forEach(benchmark => {
data[benchmark].forEach(entry => {
if (!allFileNames.includes(entry.release)) {
allFileNames.push(entry.release);
}
});
});
document.addEventListener('DOMContentLoaded', () => {
// function to generate a random color
const getRandomColor = () => {
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
};

// Function to create datasets from benchmark data
const createDatasets = (data) => {
return Object.keys(data).map(benchmark => ({
label: benchmark,
data: data[benchmark].map(entry => entry.actual_value),
fill: false,
borderColor: getRandomColor(),
tension: 0.1
}));
};

// // Function to handle click events on the x-axis
// function clickableScales(canvas, click) {
// const height = chart.scales.x.height;
// const top = chart.scales.x.top;
// const bottom = chart.scales.x.bottom;
// const left = chart.scales.x.left;
// const right = chart.scales.x.maxWidth / chart.scales.x.ticks.length;
// const width = right - left;
// // alert(`right = ${chart.scales.x.maxWidth}/${chart.scales.x.ticks.length} = ${right}`)

// Prepare labels and datasets for Chart.js
const datasets = Object.keys(data).map(benchmark => ({
label: benchmark,
data: data[benchmark].map(entry => entry.actual_value),
fill: false,
borderColor: getRandomColor(),
tension: 0.1
}));
// let resetCoordinates = canvas.getBoundingClientRect()
// // alert (event.clientX);
// const x = click.clientX - resetCoordinates.left;
// const y = click.clientY - resetCoordinates.top;

// for (let i = 0; i < chart.scales.x.ticks.length; i++) {
// // alert (`x=${x}\ny=${y}\nleft=${left}\nright=${right}\ntop=${top}\nbottom=${bottom}\ni=${i}\nx >= left + (right * i) && x <= right + (right * i) && y >= top && y <= bottom`);
// // alert (`i=${i}\n${width}\n${x} >= ${left} + (${right * i}) && ${x} <= ${right} + (${right * i}) && ${y} >= ${top} && ${y} <= ${bottom}`);
// // alert(x >= left + (right * i) && x <= right + (right * i) && y >= top && y <= bottom);
// if ((width + x >= (left + right*i)) && (x <= (left + right + right * i)) && (y >= top && y <= bottom)) {
// // alert(chart.data.labels[i]);
// const url = `https://github.com/esrlabs/chipmunk/releases/tag/${chart.data.labels[i]}`;
// window.open(url, '_blank');
// break;
// }
// }
// }

// Function to handle click events on the x-axis
const clickableScales = (chart, event) => {
const { top, bottom, left, width: chartWidth } = chart.scales.x;
const tickWidth = chartWidth / chart.scales.x.ticks.length;
const { clientX, clientY } = event;
const { left: canvasLeft, top: canvasTop } = chart.canvas.getBoundingClientRect();
const x = clientX - canvasLeft;
const y = clientY - canvasTop;

if (y >= top && y <= bottom) {
chart.scales.x.ticks.forEach((tick, i) => {
const tickStart = left + i * tickWidth;
const tickEnd = tickStart + tickWidth;
if (x >= tickStart && x <= tickEnd) {
const url = `https://github.com/esrlabs/chipmunk/releases/tag/${chart.data.labels[i]}`;
window.open(url, '_blank');
}
});
}
};

// Render chart using Chart.js
const ctx = document.getElementById('benchmarkChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: allFileNames,
datasets: datasets
// Function to render a chart
const renderChart = (canvasId, labels, datasets) => {
const ctx = document.getElementById(canvasId).getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels,
datasets
},
options: {
responsive: true,
plugins: {
tooltip: {
mode: 'index',
intersect: false
},
legend: {
position: 'chartArea'
}
},
options: {
responsive: true,
plugins: {
tooltip: {
mode: 'index',
intersect: false
scales: {
x: {
title: {
display: true,
text: 'Release'
}
},
scales: {
x: {
title: {
display: true,
text: 'Release'
}
},
y: {
title: {
display: true,
text: 'Actual Value (ms)'
}
y: {
title: {
display: true,
text: 'Actual Value (ms)'
}
}
}
}
});

document.getElementById(canvasId).addEventListener('click', (e) => {
clickableScales(chart, e);
});

return chart;
};

// Fetch benchmark data and render charts
fetch('data/data.json')
.then(response => response.json())
.then(data => {
const allFileNames = [...new Set(Object.values(data).flat().map(entry => entry.release))];

const below500Data = {};
const above500Data = {};
Object.entries(data).forEach(([benchmark, entries]) => {
const maxValue = Math.max(...entries.map(entry => entry.actual_value));
if (maxValue < 500) {
below500Data[benchmark] = entries;
} else {
above500Data[benchmark] = entries;
}
});

const datasets = createDatasets(data);
const below500Datasets = createDatasets(below500Data);
const above500Datasets = createDatasets(above500Data);
renderChart('chart_full', allFileNames, datasets);
renderChart('chart_below500', allFileNames, below500Datasets);
renderChart('chart_above500', allFileNames, above500Datasets);
})
.catch(error => console.error('Error fetching data:', error));

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
});
112 changes: 0 additions & 112 deletions jekyll/benchmarks/js/script1.js
View file
Open in desktop

This file was deleted.

Loading