diff --git a/jekyll/benchmarks/index.html b/jekyll/benchmarks/index.html index c3f0397..e1060e9 100644 --- a/jekyll/benchmarks/index.html +++ b/jekyll/benchmarks/index.html @@ -4,6 +4,67 @@ + + + + Performance Benchmarks + + + + + +
+

Chipmunk Performance benchmarks

+

+
+
Performance test comparison for each subsequent release and time taken for each test. Lesser the time taken, better the performance.
+
+ +
+
+

+
+
Performance test comparison for each subsequent release where time taken for each test is below 500ms.
+
+ +
+
+

+
+
Performance test comparison for each subsequent release where time taken for each test is below 500ms.
+
+ +
+
+

+
+ + + + + \ No newline at end of file diff --git a/jekyll/benchmarks/js/script.js b/jekyll/benchmarks/js/script.js index 49f87d2..5321b05 100644 --- a/jekyll/benchmarks/js/script.js +++ b/jekyll/benchmarks/js/script.js @@ -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; - } -}); +}); \ No newline at end of file diff --git a/jekyll/benchmarks/js/script1.js b/jekyll/benchmarks/js/script1.js deleted file mode 100644 index 5d38407..0000000 --- a/jekyll/benchmarks/js/script1.js +++ /dev/null @@ -1,112 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - // Load benchmark data from JSON - fetch('data/data.json') - .then(response => response.json()) - .then(data => { - // Prepare data for the two categories - const below500Data = {}; - const above500Data = {}; - - const allFileNames = []; - - Object.keys(data).forEach(benchmark => { - data[benchmark].forEach(entry => { - if (!allFileNames.includes(entry.release)) { - allFileNames.push(entry.release); - } - }); - - const values = data[benchmark].map(entry => entry.actual_value); - const maxValue = Math.max(...values); - if (maxValue < 500) { - below500Data[benchmark] = data[benchmark]; - } else { - above500Data[benchmark] = data[benchmark]; - } - }); - - function 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 - })); - } - - // Create datasets for both categories - const below500Datasets = createDatasets(below500Data); - const above500Datasets = createDatasets(above500Data); - - // Render chart for benchmarks with max value below 500 ms - const ctxBelow500 = document.getElementById('chartSegment1').getContext('2d'); - new Chart(ctxBelow500, { - type: 'line', - data: { - labels: allFileNames, - datasets: below500Datasets - }, - options: { - responsive: true, - plugins: { - tooltip: { - mode: 'index', - intersect: false - }, - legend: { - position: 'chartArea' - } - }, - scales: { - y: { - title: { - display: true, - text: 'Actual Value (ms)' - } - } - } - } - }); - - // Render chart for benchmarks with min value above 500 ms - const ctxAbove500 = document.getElementById('chartSegment2').getContext('2d'); - new Chart(ctxAbove500, { - type: 'line', - data: { - labels: allFileNames, - datasets: above500Datasets - }, - options: { - responsive: true, - plugins: { - tooltip: { - mode: 'index', - intersect: false - }, - legend: { - position: 'chartArea' - } - }, - scales: { - y: { - title: { - display: true, - text: 'Actual Value (ms)' - } - } - } - } - }); - }) - .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; - } -});