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

feat: add flood-zone bands (normal/warning/danger) to history chart

Browse Source
This commit is contained in:
grabowski
2026-08-09 17:54:11 +07:00
parent 21ca84444d
commit ba0348b580
1 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/static/dashboard.html
+31 -1
View File
@@ -356,7 +356,37 @@
{ label: 'Water level (m)', data: sampled.map((row) => row.water_level), borderColor: '#d99018', yAxisID: 'level', pointRadius: 0, tension: .25, parsing: false }
]
},
options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 }, interaction: { mode: 'index', intersect: false }, scales: { flow: { type: 'linear', position: 'left' }, level: { type: 'linear', position: 'right', grid: { drawOnChartArea: false } }, x: { ticks: { maxTicksLimit: 12 } } } }
options: {
responsive: true, maintainAspectRatio: false, animation: { duration: 0 },
interaction: { mode: 'index', intersect: false },
scales: {
flow: { type: 'linear', position: 'left' },
level: { type: 'linear', position: 'right', grid: { drawOnChartArea: false } },
x: { ticks: { maxTicksLimit: 12 } }
},
plugins: [{
id: 'flood-bands',
beforeDraw(chart) {
const { ctx, scales, chartArea } = chart;
const levelScale = scales.level;
const zones = [
{ min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' }, // normal
{ min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' }, // warning
{ min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' }, // danger
];
zones.forEach((z) => {
const top = levelScale.getPixelForValue(Math.min(z.max, levelScale.max));
const bottom = levelScale.getPixelForValue(Math.max(z.min, levelScale.min));
if (top < bottom) {
ctx.save();
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-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' });