318 lines
14 KiB
JavaScript
318 lines
14 KiB
JavaScript
'use strict';
|
|
|
|
const PUBLIC_CHART_COLORS = ['--accent', '--info', '--warning', '--purple', '--danger', '--teal', '--orange', '--blue'];
|
|
const $ = selector => document.querySelector(selector);
|
|
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
const PUBLIC_CHART_RANGES = [6, 24, 168, 720, 2160, 8760];
|
|
|
|
function basePathFromScript() {
|
|
const src = document.currentScript?.src || '';
|
|
try {
|
|
const path = new URL(src, location.href).pathname;
|
|
const slash = path.lastIndexOf('/');
|
|
return path.slice(0, slash).replace(/\/$/, '');
|
|
} catch (_) { return ''; }
|
|
}
|
|
|
|
const PUBLIC_BASE = basePathFromScript();
|
|
const withBase = path => `${PUBLIC_BASE}${path.startsWith('/') ? path : `/${path}`}`;
|
|
|
|
function cssColor(name, fallback) {
|
|
const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
return value || fallback;
|
|
}
|
|
|
|
function localeFor(lang) {
|
|
return lang === 'pl' ? 'pl-PL' : 'en-GB';
|
|
}
|
|
|
|
function timeLabel(timestamp, hours, locale) {
|
|
const options = Number(hours) > 48
|
|
? { day: '2-digit', month: '2-digit', hour: '2-digit' }
|
|
: { hour: '2-digit', minute: '2-digit' };
|
|
return new Date(timestamp).toLocaleString(locale, options);
|
|
}
|
|
|
|
function preciseTime(timestamp, locale) {
|
|
return new Intl.DateTimeFormat(locale, {
|
|
year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'
|
|
}).format(new Date(timestamp));
|
|
}
|
|
|
|
function prepareCanvas(canvas, height = 520) {
|
|
const wrap = canvas.parentElement;
|
|
const width = Math.max(720, Math.floor(wrap?.clientWidth || canvas.getBoundingClientRect().width || 720));
|
|
const actualHeight = Math.max(180, Math.floor(wrap?.clientHeight || height));
|
|
const dpr = window.devicePixelRatio || 1;
|
|
canvas.width = Math.floor(width * dpr);
|
|
canvas.height = Math.floor(actualHeight * dpr);
|
|
canvas.style.width = `${width}px`;
|
|
canvas.style.height = `${actualHeight}px`;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
ctx.clearRect(0, 0, width, actualHeight);
|
|
return { ctx, width, height: actualHeight };
|
|
}
|
|
|
|
function renderLegend(series) {
|
|
const host = $('#publicCustomChartLegend');
|
|
host.innerHTML = series.map((item, index) => {
|
|
const color = cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e');
|
|
const dashed = item.dashed ? ' is-dashed' : '';
|
|
return `<span class="legend-item public-chart-legend-item"><i class="legend-line${dashed}" style="--legend-color:${color}"></i><span>${escapeHtml(item.label)}</span></span>`;
|
|
}).join('');
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value ?? '').replace(/[&<>'"]/g, char => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[char]));
|
|
}
|
|
|
|
function drawEmpty(canvas, message) {
|
|
const { ctx, width, height } = prepareCanvas(canvas);
|
|
ctx.fillStyle = cssColor('--muted', '#888');
|
|
ctx.font = '13px system-ui';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(message, width / 2, height / 2);
|
|
}
|
|
|
|
function nearestPoint(points, targetTs) {
|
|
if (!points.length) return null;
|
|
let lo = 0, hi = points.length - 1;
|
|
while (lo < hi) {
|
|
const mid = Math.floor((lo + hi) / 2);
|
|
if (points[mid].ts < targetTs) lo = mid + 1; else hi = mid;
|
|
}
|
|
const after = points[lo];
|
|
const before = lo > 0 ? points[lo - 1] : null;
|
|
if (!before) return after;
|
|
return Math.abs(before.ts - targetTs) <= Math.abs(after.ts - targetTs) ? before : after;
|
|
}
|
|
|
|
function bindTooltip(canvas, series, geometry, locale) {
|
|
const wrap = canvas.parentElement;
|
|
const tooltip = wrap.querySelector('.chart-tooltip');
|
|
const line = wrap.querySelector('.chart-hover-line');
|
|
const { pad, width, height, firstTs, lastTs } = geometry;
|
|
const plotWidth = width - pad.left - pad.right;
|
|
const timestamps = [...new Set(series.flatMap(item => item.points.map(point => new Date(point.timestamp).getTime())).filter(Number.isFinite))].sort((a, b) => a - b);
|
|
const timestampPoints = timestamps.map(ts => ({ ts }));
|
|
const seriesPoints = series.map((item, index) => ({
|
|
item,
|
|
color: cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e'),
|
|
points: item.points.map(point => ({ ts: new Date(point.timestamp).getTime(), value: Number(point.value) }))
|
|
.filter(point => Number.isFinite(point.ts) && Number.isFinite(point.value))
|
|
.sort((a, b) => a.ts - b.ts)
|
|
}));
|
|
|
|
const hide = () => { tooltip.hidden = true; line.hidden = true; };
|
|
const showAt = clientX => {
|
|
if (!timestamps.length) return hide();
|
|
const rect = canvas.getBoundingClientRect();
|
|
const localX = clamp(clientX - rect.left, pad.left, width - pad.right);
|
|
const targetTs = firstTs + ((localX - pad.left) / Math.max(1, plotWidth)) * (lastTs - firstTs);
|
|
const snapped = nearestPoint(timestampPoints, targetTs)?.ts;
|
|
if (!Number.isFinite(snapped)) return hide();
|
|
const values = seriesPoints.map(entry => ({ ...entry, point: nearestPoint(entry.points, snapped) })).filter(entry => entry.point);
|
|
if (!values.length) return hide();
|
|
|
|
const px = pad.left + (snapped - firstTs) / Math.max(1, lastTs - firstTs) * plotWidth;
|
|
tooltip.innerHTML = `<strong class="chart-tooltip-time">${escapeHtml(preciseTime(snapped, locale))}</strong><div class="chart-tooltip-values">${values.map(({ item, point, color }) => `<div class="chart-tooltip-row"><span class="chart-tooltip-label"><i style="--tooltip-color:${color}"></i><span>${escapeHtml(item.label)}</span></span><span class="chart-tooltip-value">${Number(point.value).toLocaleString(locale, { minimumFractionDigits: 1, maximumFractionDigits: 2 })} °C</span></div>`).join('')}</div>`;
|
|
tooltip.hidden = false;
|
|
line.hidden = false;
|
|
line.style.left = `${px}px`;
|
|
line.style.top = `${pad.top}px`;
|
|
line.style.height = `${Math.max(0, height - pad.top - pad.bottom)}px`;
|
|
const minLeft = wrap.scrollLeft + 8;
|
|
const maxLeft = wrap.scrollLeft + wrap.clientWidth - tooltip.offsetWidth - 8;
|
|
let tooltipLeft = px + 12;
|
|
if (tooltipLeft + tooltip.offsetWidth > wrap.scrollLeft + wrap.clientWidth - 8) tooltipLeft = px - tooltip.offsetWidth - 12;
|
|
tooltip.style.left = `${Math.max(minLeft, Math.min(tooltipLeft, Math.max(minLeft, maxLeft)))}px`;
|
|
tooltip.style.top = `${pad.top + 8}px`;
|
|
};
|
|
canvas.onpointermove = event => { if (event.pointerType !== 'touch') showAt(event.clientX); };
|
|
canvas.onpointerleave = event => { if (event.pointerType !== 'touch') hide(); };
|
|
}
|
|
|
|
function drawChart(canvas, payload, locale) {
|
|
const series = (payload.series || []).map((item, index) => ({
|
|
...item,
|
|
color: cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e'),
|
|
points: Array.isArray(item.points) ? item.points : []
|
|
}));
|
|
renderLegend(series);
|
|
const allPoints = series.flatMap(item => item.points.map(point => ({ ...point, value: Number(point.value) })))
|
|
.filter(point => Number.isFinite(point.value) && Number.isFinite(new Date(point.timestamp).getTime()));
|
|
if (!allPoints.length) return drawEmpty(canvas, payload.no_data_label || 'No data');
|
|
|
|
const { ctx, width, height } = prepareCanvas(canvas);
|
|
const text = cssColor('--muted', '#888');
|
|
const grid = cssColor('--grid', '#333');
|
|
const compact = width < 520;
|
|
const pad = compact ? { left: 43, right: 12, top: 16, bottom: 34 } : { left: 54, right: 20, top: 20, bottom: 42 };
|
|
const values = allPoints.map(point => point.value);
|
|
let min = Math.floor(Math.min(...values) - 1);
|
|
let max = Math.ceil(Math.max(...values) + 1);
|
|
if (max - min < 2) { min -= 1; max += 1; }
|
|
const firstTs = Math.min(...allPoints.map(point => new Date(point.timestamp).getTime()));
|
|
const lastTs = Math.max(...allPoints.map(point => new Date(point.timestamp).getTime()));
|
|
const span = Math.max(1, lastTs - firstTs);
|
|
const x = ts => pad.left + (ts - firstTs) / span * (width - pad.left - pad.right);
|
|
const y = value => pad.top + (max - value) / (max - min) * (height - pad.top - pad.bottom);
|
|
|
|
ctx.font = '10px system-ui';
|
|
ctx.fillStyle = text;
|
|
ctx.strokeStyle = grid;
|
|
ctx.lineWidth = 1;
|
|
for (let i = 0; i <= 5; i += 1) {
|
|
const value = min + (max - min) * i / 5;
|
|
const py = y(value);
|
|
ctx.beginPath(); ctx.moveTo(pad.left, py); ctx.lineTo(width - pad.right, py); ctx.stroke();
|
|
ctx.textAlign = 'right'; ctx.fillText(`${value.toFixed(1)}°`, pad.left - 8, py + 3);
|
|
}
|
|
const ticks = width < 420 ? 2 : width < 620 ? 3 : 5;
|
|
for (let i = 0; i <= ticks; i += 1) {
|
|
const ts = firstTs + (span * i / ticks);
|
|
const px = x(ts);
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(timeLabel(ts, payload.hours, locale), px, height - 14);
|
|
}
|
|
series.forEach(item => {
|
|
const points = item.points.map(point => ({ ts: new Date(point.timestamp).getTime(), value: Number(point.value) }))
|
|
.filter(point => Number.isFinite(point.ts) && Number.isFinite(point.value))
|
|
.sort((a, b) => a.ts - b.ts);
|
|
if (!points.length) return;
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = item.color;
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash(item.dashed ? [6, 4] : []);
|
|
points.forEach((point, index) => {
|
|
const px = x(point.ts), py = y(point.value);
|
|
if (index === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
|
|
});
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
});
|
|
bindTooltip(canvas, series, { pad, width, height, firstTs, lastTs }, locale);
|
|
}
|
|
|
|
let publicChartPayload = null;
|
|
let publicChartLocale = 'en-GB';
|
|
let publicChartResizeFrame = 0;
|
|
|
|
function publicChartToken() {
|
|
return decodeURIComponent(location.pathname.split('/').filter(Boolean).pop() || '');
|
|
}
|
|
|
|
function requestedPublicChartHours() {
|
|
const value = Number(new URLSearchParams(location.search).get('hours'));
|
|
return Number.isInteger(value) && value >= 1 && value <= 87600 ? value : null;
|
|
}
|
|
|
|
function setPublicRangeLanguage(lang) {
|
|
const pl = lang === 'pl';
|
|
const label = $('#publicChartRangeLabel');
|
|
const select = $('#publicChartHours');
|
|
if (label) label.textContent = pl ? 'Zakres' : 'Range';
|
|
if (!select) return;
|
|
const labels = pl
|
|
? ['6 godzin', '24 godziny', '7 dni', '30 dni', '90 dni', '1 rok']
|
|
: ['6 hours', '24 hours', '7 days', '30 days', '90 days', '1 year'];
|
|
[...select.options].forEach((option, index) => { if (labels[index]) option.textContent = labels[index]; });
|
|
select.setAttribute('aria-label', pl ? 'Zakres wykresu' : 'Chart range');
|
|
}
|
|
|
|
function syncPublicRangeControl(hours) {
|
|
const select = $('#publicChartHours');
|
|
if (!select) return;
|
|
const value = String(hours);
|
|
if (![...select.options].some(option => option.value === value)) {
|
|
const option = document.createElement('option');
|
|
option.value = value;
|
|
option.textContent = `${value} h`;
|
|
select.append(option);
|
|
}
|
|
select.value = value;
|
|
}
|
|
|
|
function publicChartApiPath(token, hours) {
|
|
const value = Number(hours);
|
|
const hasHours = hours !== null && hours !== undefined && Number.isInteger(value) && value >= 1 && value <= 87600;
|
|
const query = hasHours ? `?hours=${encodeURIComponent(String(value))}` : '';
|
|
return `/api/public/charts/custom/${encodeURIComponent(token)}${query}`;
|
|
}
|
|
|
|
function redrawPublicChart() {
|
|
if (!publicChartPayload) return;
|
|
drawChart($('#publicCustomChart'), publicChartPayload, publicChartLocale);
|
|
}
|
|
|
|
async function loadPublicChart(hours = requestedPublicChartHours()) {
|
|
const token = publicChartToken();
|
|
const title = $('#publicChartTitle');
|
|
const hint = $('#publicChartHint');
|
|
const error = $('#publicChartError');
|
|
const canvas = $('#publicCustomChart');
|
|
const range = $('#publicChartHours');
|
|
|
|
if (!token.startsWith('chart_')) {
|
|
title.textContent = 'Custom chart';
|
|
hint.textContent = '';
|
|
error.hidden = false;
|
|
error.textContent = 'Invalid chart link.';
|
|
drawEmpty(canvas, error.textContent);
|
|
return;
|
|
}
|
|
|
|
if (range) range.disabled = true;
|
|
error.hidden = true;
|
|
const response = await fetch(withBase(publicChartApiPath(token, hours)), { headers: { Accept: 'application/json' }, cache: 'no-store' });
|
|
if (!response.ok) {
|
|
let message = `${response.status}`;
|
|
try { message = (await response.json()).error || message; } catch (_) { }
|
|
throw new Error(message);
|
|
}
|
|
const payload = await response.json();
|
|
const lang = payload.lang === 'pl' ? 'pl' : 'en';
|
|
const locale = localeFor(lang);
|
|
document.documentElement.lang = payload.lang || lang;
|
|
title.textContent = payload.title || (lang === 'pl' ? 'Wykres niestandardowy' : 'Custom chart');
|
|
hint.textContent = payload.hint || '';
|
|
canvas.setAttribute('aria-label', title.textContent);
|
|
setPublicRangeLanguage(lang);
|
|
syncPublicRangeControl(payload.hours);
|
|
publicChartPayload = payload;
|
|
publicChartLocale = locale;
|
|
drawChart(canvas, payload, locale);
|
|
if (range) range.disabled = false;
|
|
}
|
|
|
|
$('#publicChartHours')?.addEventListener('change', async event => {
|
|
const hours = Number(event.currentTarget.value);
|
|
if (!Number.isInteger(hours) || hours < 1 || hours > 87600) return;
|
|
const url = new URL(location.href);
|
|
url.searchParams.set('hours', String(hours));
|
|
history.replaceState(null, '', url);
|
|
try {
|
|
await loadPublicChart(hours);
|
|
} catch (error) {
|
|
const host = $('#publicChartError');
|
|
host.hidden = false;
|
|
host.textContent = `${document.documentElement.lang === 'pl' ? 'Nie udało się wczytać wykresu' : 'Unable to load chart'}: ${error.message}`;
|
|
event.currentTarget.disabled = false;
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
cancelAnimationFrame(publicChartResizeFrame);
|
|
publicChartResizeFrame = requestAnimationFrame(redrawPublicChart);
|
|
});
|
|
|
|
loadPublicChart().catch(error => {
|
|
const host = $('#publicChartError');
|
|
host.hidden = false;
|
|
host.textContent = `Unable to load chart: ${error.message}`;
|
|
$('#publicChartHint').textContent = '';
|
|
$('#publicChartHours').disabled = false;
|
|
drawEmpty($('#publicCustomChart'), host.textContent);
|
|
});
|