tovjemam/bojler-esp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add graph range selection

Browse Source
This commit is contained in:
zbyv 2026-09-17 20:17:43 +02:00
parent 803000cf3e
commit e2645a729d
2 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/www/index.html
View File

File diff suppressed because one or more lines are too long

42
res/index.html
View File

@ -150,9 +150,15 @@
<div class="row mb-4"> <div class="row mb-4">
<div class="col-12"> <div class="col-12">
<div class="card p-4"> <div class="card p-4">
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap"> <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
<h5 class="opacity-75 mb-0">📈 Historie teploty</h5> <h5 class="opacity-75 mb-0">📈 Historie teploty</h5>
<select id="history-range" class="form-select w-auto mt-2 mt-sm-0 shadow-sm"> <div class="d-flex gap-2 flex-wrap ms-auto">
<select id="y-axis-range" class="form-select w-auto shadow-sm">
<option value="0-100">Osa Y: 0 - 100 °C</option>
<option value="10-80">Osa Y: 10 - 80 °C</option>
<option value="auto">Osa Y: Auto</option>
</select>
<select id="history-range" class="form-select w-auto shadow-sm">
<option value="24" selected>1 den (24h)</option> <option value="24" selected>1 den (24h)</option>
<option value="48">2 dny (48h)</option> <option value="48">2 dny (48h)</option>
<option value="72">3 dny (72h)</option> <option value="72">3 dny (72h)</option>
@ -160,6 +166,7 @@
<option value="120">5 dní (120h)</option> <option value="120">5 dní (120h)</option>
</select> </select>
</div> </div>
</div>
<div style="height: 400px; width: 100%;"> <div style="height: 400px; width: 100%;">
<canvas id="historyChart"></canvas> <canvas id="historyChart"></canvas>
</div> </div>
@ -210,7 +217,7 @@
} }
if (currentChartData.data.length > 0) { if (currentChartData.data.length > 0) {
updateChart(currentChartData.data, currentChartData.hours); updateChart(currentChartData.data);
} }
} }
@ -221,6 +228,20 @@
applyTheme(currentTheme); applyTheme(currentTheme);
// --------------------------------------- // ---------------------------------------
// --- Správa rozsahu osy Y ---
const yAxisRangeSelect = document.getElementById('y-axis-range');
let currentYAxisRange = localStorage.getItem('graphRange') || '0-100';
yAxisRangeSelect.value = currentYAxisRange;
yAxisRangeSelect.addEventListener('change', (e) => {
currentYAxisRange = e.target.value;
localStorage.setItem('graphRange', currentYAxisRange);
if (currentChartData.data.length > 0) {
updateChart(currentChartData.data);
}
});
// ---------------------------------------
function showNotification(message, isError = false) { function showNotification(message, isError = false) {
const notif = document.getElementById('notification'); const notif = document.getElementById('notification');
notif.className = `alert rounded-pill px-4 shadow-lg ${isError ? 'alert-danger' : 'alert-success'}`; notif.className = `alert rounded-pill px-4 shadow-lg ${isError ? 'alert-danger' : 'alert-success'}`;
@ -346,6 +367,17 @@
chartInstance.destroy(); chartInstance.destroy();
} }
// Rozhodnutí o min/max pro osu Y na základě vybrané volby
let yMin = 0;
let yMax = 100;
if (currentYAxisRange === '10-80') {
yMin = 10;
yMax = 80;
} else if (currentYAxisRange === 'auto') {
yMin = undefined;
yMax = undefined;
}
chartInstance = new Chart(ctx, { chartInstance = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
@ -379,8 +411,8 @@
title: { display: true, text: 'Teplota (°C)', color: textColor }, title: { display: true, text: 'Teplota (°C)', color: textColor },
ticks: { color: textColor }, ticks: { color: textColor },
grid: { color: gridColor, drawBorder: false }, grid: { color: gridColor, drawBorder: false },
min: 0, min: yMin,
max: 100 max: yMax
} }
}, },
plugins: { plugins: {