gru/gree-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.12.0-hotfix2

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-09-03 22:28:46 +02:00
parent 97fff976fe
commit 39f50eba2e
5 changed files with 241 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/js/charts.js
+14 -7
View File
@@ -173,6 +173,11 @@ function toggleChartFullscreen(id) {
card.classList.add('chart-fullscreen-fallback');
document.body.classList.add('chart-fullscreen-open');
if (window.matchMedia('(max-width: 760px)').matches) {
app.chartZooms[id] = 1;
canvas.dataset.chartZoom = '1';
if (canvas.parentElement) canvas.parentElement.scrollLeft = 0;
}
updateChartFullscreenButton(card);
requestAnimationFrame(() => redrawHistoryChart(id));
}
@@ -183,11 +188,12 @@ function prepareCanvas(canvas, height) {
const wrapWidth = Math.floor(wrap?.clientWidth || rect.width || 720);
const card = canvas.closest('.history-chart-card');
const fullscreen = chartCardIsFullscreen(card);
const fullscreenHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
const actualHeight = fullscreenHeight || height;
const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
// Regular charts keep a useful minimum plotting width and may scroll horizontally.
// In fullscreen, 100% zoom must fit the available viewport instead of forcing 720px.
const mobileFullscreen = fullscreen && window.matchMedia('(max-width: 760px)').matches;
const wrapHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
const naturalMobileHeight = Math.round(clamp(wrapWidth * .72, 260, 360));
const actualHeight = mobileFullscreen ? Math.min(wrapHeight || naturalMobileHeight, naturalMobileHeight) : (wrapHeight || height);
const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, MAX_CHART_ZOOM);
// Normal charts may scroll horizontally. Fullscreen 100% always fits the viewport width.
const baseWidth = fullscreen ? Math.max(1, wrapWidth) : Math.max(720, wrapWidth);
const width = Math.max(1, Math.floor(baseWidth * zoom));
const dpr = window.devicePixelRatio || 1;
@@ -449,7 +455,8 @@ function drawLineChart(canvas, series, rows, { height = 340, minValue = null, ma
const { ctx, width } = prepared;
height = prepared.height;
const text = cssColor('--muted', '#888'), grid = cssColor('--grid', '#333');
const pad = { left: 54, right: 20, top: 20, bottom: 42 };
const compactPlot = width < 520;
const pad = compactPlot ? { left: 43, right: 12, top: 16, bottom: 34 } : { left: 54, right: 20, top: 20, bottom: 42 };
const allValues = [];
visibleSeries.forEach(item => sortedRows.forEach(row => { const value = item.value(row); if (Number.isFinite(value)) allValues.push(value); }));
if (!allValues.length) return drawEmptyChart(canvas, height);
@@ -467,7 +474,7 @@ function drawLineChart(canvas, series, rows, { height = 340, minValue = null, ma
ctx.beginPath(); ctx.moveTo(pad.left, py); ctx.lineTo(width - pad.right, py); ctx.stroke();
ctx.textAlign = 'right'; ctx.fillText(binaryLabels ? value.toFixed(0) : `${value.toFixed(1)}°`, pad.left - 8, py + 3);
}
const ticks = 5;
const ticks = width < 420 ? 2 : width < 620 ? 3 : 5;
for (let i = 0; i <= ticks; i++) {
const idx = Math.min(sortedRows.length - 1, Math.round(i * (sortedRows.length - 1) / ticks)); const px = x(sortedRows[idx]);
ctx.textAlign = 'center'; ctx.fillText(timeLabel(sortedRows[idx].timestamp, $('#historyHours')?.value), px, height - 14);