Skip to content

Commit

Permalink
Update benchmarks page to show benchmarks in individual graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsmesamster
itsmesamster committed Oct 1, 2024
1 parent 359e7c0 commit a11ac63
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 86 deletions.
53 changes: 6 additions & 47 deletions jekyll/benchmarks/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
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 */
border: 2px solid #000;
padding: 10px;
}
.description {
flex: 1;
Expand All @@ -35,52 +35,11 @@
</head>
<body>
<div class="content">
<h1 style="text-align: center;">Chipmunk Performance benchmarks</h1>
<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>
<!-- Container to dynamically insert the individual test graphs -->
<div id="dynamic_graphs_container">
</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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<title>Performance Benchmarks</title>
<script src="js/script.js"></script>
<script src="js/script1.js"></script>
</head>
<body>
<div class="content">
<h1 style="text-align: center;">Chipmunk Performance Changes</h1>
<br><br><
<canvas id="benchmarkChart"></canvas><br><br>
<canvas id="chartSegment1"></canvas><br><br>
<canvas id="chartSegment2"></canvas><br><br>
</div>
</body>
</html>
-->
</html>
95 changes: 56 additions & 39 deletions jekyll/benchmarks/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,29 @@ document.addEventListener('DOMContentLoaded', () => {
}));
};

// Function to handle clicking of labels on the x-axis
const clickableScales = (chart, event) => {
// Function to create a graph container dynamically
const createGraphContainer = (benchmarkName) => {
const container = document.createElement('div');
container.className = 'graph_container';

const descriptionDiv = document.createElement('div');
descriptionDiv.className = 'description';
descriptionDiv.textContent = `Performance test comparison for ${benchmarkName}`;

const chartContainerDiv = document.createElement('div');
chartContainerDiv.className = 'chart-container';
const canvas = document.createElement('canvas');
canvas.id = `chart_${benchmarkName.replace(/\s+/g, '_')}`;

chartContainerDiv.appendChild(canvas);
container.appendChild(descriptionDiv);
container.appendChild(chartContainerDiv);

return container;
};

// Function to handle clickable x-axis labels
const clickableScales = (chart, event, prId) => {
const { top, bottom, left, width: chartWidth } = chart.scales.x;
const tickWidth = chartWidth / chart.scales.x.ticks.length;
const { clientX, clientY } = event;
Expand All @@ -32,9 +53,9 @@ document.addEventListener('DOMContentLoaded', () => {
const label = chart.data.labels[i];
let url;

if (label.startsWith('PR_')) {
// Open pull request URL if the label starts with "PR_"
url = `https://github.com/esrlabs/chipmunk/pull/${label.split("_")[1]}`;
if (label.startsWith('PR_') && prId) {
// Open pull request URL if the label starts with "PR_" and pr_id exists
url = `https://github.com/esrlabs/chipmunk/pull/${prId}`;
} else {
// Open release URL if the label does not start with "PR_"
url = `https://github.com/esrlabs/chipmunk/releases/tag/${label}`;
Expand All @@ -46,9 +67,8 @@ document.addEventListener('DOMContentLoaded', () => {
}
};


// Function to render a chart
const renderChart = (canvasId, labels, datasets) => {
const renderChart = (canvasId, labels, datasets, prId) => {
const ctx = document.getElementById(canvasId).getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
Expand Down Expand Up @@ -85,52 +105,49 @@ document.addEventListener('DOMContentLoaded', () => {
});

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

return chart;
};

// Function to fetch and combine data
const fetchAndCombineData = (prId) => {
// Fetch the main data
const fetchMainData = fetch('data/data.json').then(response => response.json());

// Fetch the PR data if prId is provided
const fetchPrData = prId ? fetch(`data/pull_request/Benchmark_PR_${prId}.json`).then(response => response.json()) : Promise.resolve({});

return Promise.all([fetchMainData, fetchPrData])
.then(([mainData, prData]) => {
// Combine data
const combinedData = { ...mainData };
// Combine the main data with PR data
return Promise.all([fetchMainData, fetchPrData]).then(([mainData, prData]) => {
// Merge the PR data into the main data
Object.entries(prData).forEach(([benchmark, entries]) => {
if (!mainData[benchmark]) {
mainData[benchmark] = [];
}
mainData[benchmark] = mainData[benchmark].concat(entries);
});

// Merge pull request data into combined data
Object.entries(prData).forEach(([benchmark, entries]) => {
if (!combinedData[benchmark]) {
combinedData[benchmark] = [];
}
combinedData[benchmark] = combinedData[benchmark].concat(entries);
});
return mainData;
});
};

// Generate datasets
// Function to fetch and render all benchmarks as individual charts
const fetchAndRenderBenchmarks = (prId) => {
fetchAndCombineData(prId)
.then((combinedData) => {
const allFileNames = [...new Set(Object.values(combinedData).flat().map(entry => entry.release))];
const below500Data = {};
const above500Data = {};

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

const datasets = createDatasets(combinedData);
const below500Datasets = createDatasets(below500Data);
const above500Datasets = createDatasets(above500Data);
document.getElementById('dynamic_graphs_container').appendChild(container);

// Render charts
renderChart('chart_full', allFileNames, datasets);
renderChart('chart_below500', allFileNames, below500Datasets);
renderChart('chart_above500', allFileNames, above500Datasets);
const datasets = createDatasets({ [benchmarkName]: entries });
renderChart(`chart_${benchmarkName.replace(/\s+/g, '_')}`, allFileNames, datasets, prId);
});
})
.catch(error => console.error('Error fetching data:', error));
};
Expand All @@ -147,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {

// Fetch benchmark data and render charts
const params = getQueryParams();
var prId = params['pr_id'] || null;
const prId = params['pr_id'] || null;

fetchAndCombineData(prId);
fetchAndRenderBenchmarks(prId);
});

0 comments on commit a11ac63

Please sign in to comment.