Skip to content

Commit

Permalink
Automated deployment: Tue Oct 1 11:41:55 UTC 2024 6d35258
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsmesamster
itsmesamster committed Oct 1, 2024
1 parent f15eac7 commit e084ded
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 86 deletions.
51 changes: 5 additions & 46 deletions benchmarks/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,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 @@ -106,55 +106,14 @@
</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>
-->
<footer>
<div class="container">
<p class="editor-link"><a href="cloudcannon:collections/_data/footer.yml" class="btn"><strong>&#9998;</strong> Edit footer</a></p>
Expand Down
95 changes: 56 additions & 39 deletions 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);
});
2 changes: 1 addition & 1 deletion feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.0.0">Jekyll</generator><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/feed.xml" rel="self" type="application/atom+xml" /><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/" rel="alternate" type="text/html" /><updated>2024-10-01T10:57:18+00:00</updated><id>https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/feed.xml</id><title type="html">Chipmunk Site</title><subtitle>Page with information on chipmunk</subtitle><author><name>{&quot;name&quot;=&gt;nil, &quot;email&quot;=&gt;nil, &quot;twitter&quot;=&gt;nil}</name></author><entry><title type="html">Charts now with scales</title><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales/" rel="alternate" type="text/html" title="Charts now with scales" /><published>2020-04-13T00:00:00+00:00</published><updated>2020-04-13T00:00:00+00:00</updated><id>https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales</id><content type="html" xml:base="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales/">&lt;p&gt;Charts were the first graphical feature we introduced in chipmunk. Using them will allow you to get a quick overview of the data you need to analyze.&lt;/p&gt;
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.0.0">Jekyll</generator><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/feed.xml" rel="self" type="application/atom+xml" /><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/" rel="alternate" type="text/html" /><updated>2024-10-01T11:41:52+00:00</updated><id>https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/feed.xml</id><title type="html">Chipmunk Site</title><subtitle>Page with information on chipmunk</subtitle><author><name>{&quot;name&quot;=&gt;nil, &quot;email&quot;=&gt;nil, &quot;twitter&quot;=&gt;nil}</name></author><entry><title type="html">Charts now with scales</title><link href="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales/" rel="alternate" type="text/html" title="Charts now with scales" /><published>2020-04-13T00:00:00+00:00</published><updated>2020-04-13T00:00:00+00:00</updated><id>https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales</id><content type="html" xml:base="https://esrlabs.github.io/chipmunk-docs/https://esrlabs.github.io/chipmunk-docs/charts/logs/2020/04/13/charts-with-scales/">&lt;p&gt;Charts were the first graphical feature we introduced in chipmunk. Using them will allow you to get a quick overview of the data you need to analyze.&lt;/p&gt;

&lt;h2 id=&quot;data-with-a-chart&quot;&gt;Data with a chart&lt;/h2&gt;
&lt;p&gt;In an example we used chipmunks command-plugin to repeatedly execute the &lt;code class=&quot;highlighter-rouge&quot;&gt;top&lt;/code&gt; command:&lt;/p&gt;
Expand Down

0 comments on commit e084ded

Please sign in to comment.