redo chart height to fit the window, and add fullscreen option in the hamburger menu if needed
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user