dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-30 17:24:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: Implement fluid aspect ratio for chart on narrow devices

Browse source
This commit is contained in:
Paul Gauthier (aider) 2024-08-15 13:54:45 -07:00
parent b7a8ddeceb
commit de7c1484f2
1 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

50
aider/website/_includes/code-in-json-benchmark.js
View file

@ -1,9 +1,21 @@
<canvas id="passRateChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
<style>
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
</style>
<div class="chart-container">
<canvas id="passRateChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var ctx = document.getElementById('passRateChart').getContext('2d');
var chartContainer = document.querySelector('.chart-container');
var yamlData = {{ site.data.code-in-json | jsonify }};
@ -37,11 +49,19 @@ document.addEventListener('DOMContentLoaded', function () {
datasets: datasets
};
function getAspectRatio() {
var width = chartContainer.offsetWidth;
// Gradually change aspect ratio from 2 (landscape) to 1 (square)
return Math.max(1, Math.min(2, width / 400));
}
var config = {
type: 'bar',
data: data,
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: getAspectRatio(),
scales: {
x: {
title: {
@ -104,29 +124,17 @@ document.addEventListener('DOMContentLoaded', function () {
}]
};
function createStripedCanvas(isStrict) {
const patternCanvas = document.createElement('canvas');
const patternContext = patternCanvas.getContext('2d');
const size = 10;
patternCanvas.width = size;
patternCanvas.height = size;
var chart = new Chart(ctx, config);
patternContext.fillStyle = 'rgba(255, 99, 132, 0.8)';
patternContext.fillRect(0, 0, size, size);
if (isStrict) {
patternContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
patternContext.lineWidth = 0.75;
patternContext.beginPath();
patternContext.moveTo(0, 0);
patternContext.lineTo(size, size);
patternContext.stroke();
}
return patternCanvas;
function resizeChart() {
chart.options.aspectRatio = getAspectRatio();
chart.resize();
}
new Chart(ctx, config);
window.addEventListener('resize', resizeChart);
// Initial resize to set correct size
resizeChart();
});
function createStripedCanvas(isStrict) {