redo chart height to fit the window, and add fullscreen option in the hamburger menu if needed

This commit is contained in:
2026-02-15 13:12:20 +11:00
parent 3d28aee717
commit 0a179c2503

View File

@@ -15,6 +15,8 @@
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/fullscreen.js"></script>
<style>
.col-form-label { width:140px; }
html { font-size: 75% !important; }
@@ -417,7 +419,48 @@
]
});
{% endif %}
}
);
$(document).ready(function() {
// 1. The Resizing Logic
function fitChartsToWindow() {
// Targets any div with your highcharts class that is currently visible
$('.tab-pane.active .highcharts-dark').each(function() {
var $chartDiv = $(this);
var chart = $chartDiv.highcharts();
if (chart) {
// Get position of chart relative to the viewport
var topPos = $chartDiv[0].getBoundingClientRect().top;
// Calculate remaining height (subtracting 5-10px for safety)
var remainingHeight = window.innerHeight - topPos - 10;
// Apply height and reflow
$chartDiv.css('height', remainingHeight + 'px');
chart.reflow();
}
});
}
// 2. Trigger when switching tabs
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
fitChartsToWindow();
});
// 3. Trigger when window is resized
$(window).on('resize', function() {
fitChartsToWindow();
});
// 4. Initial call (in case the first tab is a graph)
// Wrap in a small timeout to ensure Bootstrap finish rendering
setTimeout(fitChartsToWindow, 100);
});
</script>
<div id="save_modal" class="modal modal-lg" tabindex="-1">
<div class="modal-dialog">