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 } },
x: { ticks: { maxTicksLimit: 12 } }
},
plugins: [{
id: 'flood-bands',
beforeDraw(chart) {
const levelScale = chart.scales?.level;
if (!levelScale || levelScale.min == null) return;
const zones = [
{ min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
{ min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
{ min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
];
zones.forEach((z) => {
const top = levelScale.getPixelForValue(Math.min(z.max, levelScale.max));
const bottom = levelScale.getPixelForValue(Math.max(z.min, levelScale.min));
if (bottom > top) {
const { ctx, chartArea } = chart;
ctx.save();
ctx.fillStyle = z.color;
ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top);
ctx.restore();
}
});
}
}]
}
plugins: {
legend: { display: true },
floodBands: { enabled: true }
}
},
plugins: [{
id: 'floodBands',
beforeDraw(chart, _args, pluginOptions) {
if (!pluginOptions.enabled || !chart.chartArea) return;
const levelScale = chart.scales?.level;
if (!levelScale || !Number.isFinite(levelScale.min) || !Number.isFinite(levelScale.max)) return;
const { ctx, chartArea } = chart;
const zones = [
{ min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
{ min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
{ min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
];
ctx.save();
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-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' });