Skip to content

Commit 6d35258

Browse files
itsmesamsteritsmesamster
committed
Update benchmarks page to show benchmarks in individual graphs
1 parent 359e7c0 commit 6d35258

File tree

2 files changed

+62
-86
lines changed

2 files changed

+62
-86
lines changed

‎jekyll/benchmarks/index.html

Lines changed: 6 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
margin-bottom: 20px;
1919
margin-left: 30px;
2020
margin-right: 30px;
21-
border: 2px solid #000; /* Add this line to create a border */
22-
padding: 10px; /* Optional: Add some padding to improve the appearance */
21+
border: 2px solid #000;
22+
padding: 10px;
2323
}
2424
.description {
2525
flex: 1;
@@ -35,52 +35,11 @@
3535
</head>
3636
<body>
3737
<div class="content">
38-
<h1 style="text-align: center;">Chipmunk Performance benchmarks</h1>
38+
<h1 style="text-align: center;">Chipmunk Performance Benchmarks</h1>
3939
<br><br>
40-
<div class="graph_container">
41-
<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>
42-
<div class="chart-container">
43-
<canvas id="chart_full"></canvas>
44-
</div>
40+
<!-- Container to dynamically insert the individual test graphs -->
41+
<div id="dynamic_graphs_container">
4542
</div>
46-
<br><br>
47-
<div class="graph_container">
48-
<div class="description">Performance test comparison for each subsequent release where time taken for each test is below 500ms.</div>
49-
<div class="chart-container">
50-
<canvas id="chart_below500"></canvas>
51-
</div>
52-
</div>
53-
<br><br>
54-
<div class="graph_container">
55-
<div class="description">Performance test comparison for each subsequent release where time taken for each test is below 500ms.</div>
56-
<div class="chart-container">
57-
<canvas id="chart_above500"></canvas>
58-
</div>
59-
</div>
60-
<br><br>
61-
</div>
62-
</body>
63-
</html>
64-
65-
66-
<!-- <!DOCTYPE html>
67-
<html lang="en">
68-
<head>
69-
<meta charset="UTF-8">
70-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
71-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
72-
<title>Performance Benchmarks</title>
73-
<script src="js/script.js"></script>
74-
<script src="js/script1.js"></script>
75-
</head>
76-
<body>
77-
<div class="content">
78-
<h1 style="text-align: center;">Chipmunk Performance Changes</h1>
79-
<br><br><
80-
<canvas id="benchmarkChart"></canvas><br><br>
81-
<canvas id="chartSegment1"></canvas><br><br>
82-
<canvas id="chartSegment2"></canvas><br><br>
8343
</div>
8444
</body>
85-
</html>
86-
-->
45+
</html>

‎jekyll/benchmarks/js/script.js

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,29 @@ document.addEventListener('DOMContentLoaded', () => {
1515
}));
1616
};
1717

18-
// Function to handle clicking of labels on the x-axis
19-
const clickableScales = (chart, event) => {
18+
// Function to create a graph container dynamically
19+
const createGraphContainer = (benchmarkName) => {
20+
const container = document.createElement('div');
21+
container.className = 'graph_container';
22+
23+
const descriptionDiv = document.createElement('div');
24+
descriptionDiv.className = 'description';
25+
descriptionDiv.textContent = `Performance test comparison for ${benchmarkName}`;
26+
27+
const chartContainerDiv = document.createElement('div');
28+
chartContainerDiv.className = 'chart-container';
29+
const canvas = document.createElement('canvas');
30+
canvas.id = `chart_${benchmarkName.replace(/\s+/g, '_')}`;
31+
32+
chartContainerDiv.appendChild(canvas);
33+
container.appendChild(descriptionDiv);
34+
container.appendChild(chartContainerDiv);
35+
36+
return container;
37+
};
38+
39+
// Function to handle clickable x-axis labels
40+
const clickableScales = (chart, event, prId) => {
2041
const { top, bottom, left, width: chartWidth } = chart.scales.x;
2142
const tickWidth = chartWidth / chart.scales.x.ticks.length;
2243
const { clientX, clientY } = event;
@@ -32,9 +53,9 @@ document.addEventListener('DOMContentLoaded', () => {
3253
const label = chart.data.labels[i];
3354
let url;
3455

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

49-
5070
// Function to render a chart
51-
const renderChart = (canvasId, labels, datasets) => {
71+
const renderChart = (canvasId, labels, datasets, prId) => {
5272
const ctx = document.getElementById(canvasId).getContext('2d');
5373
const chart = new Chart(ctx, {
5474
type: 'line',
@@ -85,52 +105,49 @@ document.addEventListener('DOMContentLoaded', () => {
85105
});
86106

87107
document.getElementById(canvasId).addEventListener('click', (e) => {
88-
clickableScales(chart, e);
108+
clickableScales(chart, e, prId);
89109
});
90110

91111
return chart;
92112
};
93113

94114
// Function to fetch and combine data
95115
const fetchAndCombineData = (prId) => {
116+
// Fetch the main data
96117
const fetchMainData = fetch('data/data.json').then(response => response.json());
118+
119+
// Fetch the PR data if prId is provided
97120
const fetchPrData = prId ? fetch(`data/pull_request/Benchmark_PR_${prId}.json`).then(response => response.json()) : Promise.resolve({});
98121

99-
return Promise.all([fetchMainData, fetchPrData])
100-
.then(([mainData, prData]) => {
101-
// Combine data
102-
const combinedData = { ...mainData };
122+
// Combine the main data with PR data
123+
return Promise.all([fetchMainData, fetchPrData]).then(([mainData, prData]) => {
124+
// Merge the PR data into the main data
125+
Object.entries(prData).forEach(([benchmark, entries]) => {
126+
if (!mainData[benchmark]) {
127+
mainData[benchmark] = [];
128+
}
129+
mainData[benchmark] = mainData[benchmark].concat(entries);
130+
});
103131

104-
// Merge pull request data into combined data
105-
Object.entries(prData).forEach(([benchmark, entries]) => {
106-
if (!combinedData[benchmark]) {
107-
combinedData[benchmark] = [];
108-
}
109-
combinedData[benchmark] = combinedData[benchmark].concat(entries);
110-
});
132+
return mainData;
133+
});
134+
};
111135

112-
// Generate datasets
136+
// Function to fetch and render all benchmarks as individual charts
137+
const fetchAndRenderBenchmarks = (prId) => {
138+
fetchAndCombineData(prId)
139+
.then((combinedData) => {
113140
const allFileNames = [...new Set(Object.values(combinedData).flat().map(entry => entry.release))];
114-
const below500Data = {};
115-
const above500Data = {};
116141

117-
Object.entries(combinedData).forEach(([benchmark, entries]) => {
118-
const maxValue = Math.max(...entries.map(entry => entry.actual_value));
119-
if (maxValue < 500) {
120-
below500Data[benchmark] = entries;
121-
} else {
122-
above500Data[benchmark] = entries;
123-
}
124-
});
142+
Object.keys(combinedData).forEach(benchmarkName => {
143+
const entries = combinedData[benchmarkName];
144+
const container = createGraphContainer(benchmarkName);
125145

126-
const datasets = createDatasets(combinedData);
127-
const below500Datasets = createDatasets(below500Data);
128-
const above500Datasets = createDatasets(above500Data);
146+
document.getElementById('dynamic_graphs_container').appendChild(container);
129147

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

148165
// Fetch benchmark data and render charts
149166
const params = getQueryParams();
150-
var prId = params['pr_id'] || null;
167+
const prId = params['pr_id'] || null;
151168

152-
fetchAndCombineData(prId);
169+
fetchAndRenderBenchmarks(prId);
153170
});

0 commit comments

Comments
 (0)