B4L/Northern-Thailand-Ping-River-Monitor
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: restore history chart initialization after flood bands change

Browse Source
This commit is contained in:
grabowski
2026-08-10 09:46:34 +07:00
parent 76c934e475
commit af1909db73
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/static/dashboard.html
+30 -24
View File
@@ -370,30 +370,36 @@
level: { type: 'linear', position: 'right', grid: { drawOnChartArea: false } }, level: { type: 'linear', position: 'right', grid: { drawOnChartArea: false } },
x: { ticks: { maxTicksLimit: 12 } } x: { ticks: { maxTicksLimit: 12 } }
}, },
plugins: [{ plugins: {
id: 'flood-bands', legend: { display: true },
beforeDraw(chart) { floodBands: { enabled: true }
const levelScale = chart.scales?.level; }
if (!levelScale || levelScale.min == null) return; },
const zones = [ plugins: [{
{ min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' }, id: 'floodBands',
{ min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' }, beforeDraw(chart, _args, pluginOptions) {
{ min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' }, if (!pluginOptions.enabled || !chart.chartArea) return;
]; const levelScale = chart.scales?.level;
zones.forEach((z) => { if (!levelScale || !Number.isFinite(levelScale.min) || !Number.isFinite(levelScale.max)) return;
const top = levelScale.getPixelForValue(Math.min(z.max, levelScale.max)); const { ctx, chartArea } = chart;
const bottom = levelScale.getPixelForValue(Math.max(z.min, levelScale.min)); const zones = [
if (bottom > top) { { min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
const { ctx, chartArea } = chart; { min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
ctx.save(); { min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
ctx.fillStyle = z.color; ];
ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top); ctx.save();
ctx.restore(); zones.forEach((z) => {
} const min = Math.max(z.min, levelScale.min);
}); const max = Math.min(z.max, levelScale.max);
} if (max <= min) return;
}] const top = levelScale.getPixelForValue(max);
} const bottom = levelScale.getPixelForValue(min);
ctx.fillStyle = z.color;
ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top);
});
ctx.restore();
}
}]
}); });
$('history-status').textContent = rows.length ? `${rows.length} measurements (${sampled.length} daily) from PostgreSQL` : 'No PostgreSQL measurements in this period'; $('history-status').textContent = rows.length ? `${rows.length} measurements (${sampled.length} daily) from PostgreSQL` : 'No PostgreSQL measurements in this period';
$('history-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); $('history-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' });