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/annotations.js"></script>
|
||||||
<script src="https://code.highcharts.com/modules/accessibility.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/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>
|
<style>
|
||||||
.col-form-label { width:140px; }
|
.col-form-label { width:140px; }
|
||||||
html { font-size: 75% !important; }
|
html { font-size: 75% !important; }
|
||||||
@@ -417,6 +419,47 @@
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
{% endif %}
|
{% 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>
|
</script>
|
||||||
<div id="save_modal" class="modal modal-lg" tabindex="-1">
|
<div id="save_modal" class="modal modal-lg" tabindex="-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user