From c3b127c8686e67fe16aebd063630619055b9f337 Mon Sep 17 00:00:00 2001 From: P43YM Date: Fri, 28 Feb 2025 20:19:03 +0300 Subject: [PATCH] Cleaning for chart code --- src_data/pages/settings.html | 244 +++++++++++++++++------------------ 1 file changed, 119 insertions(+), 125 deletions(-) diff --git a/src_data/pages/settings.html b/src_data/pages/settings.html index 8c03ce5..69b6bbc 100644 --- a/src_data/pages/settings.html +++ b/src_data/pages/settings.html @@ -978,7 +978,8 @@ //График let equithermChart; - async function initChart() { + + async function fetchSettings() { try { const response = await fetch("/api/settings", { cache: "no-cache", @@ -989,145 +990,137 @@ throw new Error('Response not valid'); } - const result = await response.json(); - - //График переменные - const targetTemp = result?.heating?.target ?? 24; - const maxOut = result?.heating?.maxTemp ?? 90; - const Kn = result?.equitherm?.n_factor ?? 1; - const Ke = result?.equitherm?.e_factor ?? 1.3; - const Kk = result?.equitherm?.k_factor ?? 0; - - function calculateTRad(targetTemp, outdoorTemp, maxOut, Kn, Ke, Kk) { - let tempDiff = targetTemp - outdoorTemp; - if (tempDiff < 0) { - tempDiff = 0; - } - const minOutside = targetTemp - (maxOut - targetTemp) / Kn; - let base = targetTemp - minOutside; - if (base <= 0) { - base = 0.0001; - } - const c1 = (maxOut - targetTemp) / Math.pow(base, 1.0 / Ke); - let T_rad = targetTemp + c1 * Math.pow(tempDiff, 1.0 / Ke) + Kk; - return Math.min(T_rad, maxOut); - } - - function generateChartData(targetTemp, maxOut, Kn, Ke, Kk) { - const outdoorTemps = []; - const predictedTRad = []; - - for (let temp = 25; temp >= -30; temp -= 1) { - outdoorTemps.push(temp); - predictedTRad.push(calculateTRad(targetTemp, temp, maxOut, Kn, Ke, Kk).toFixed(1)); - } - return { outdoorTemps, predictedTRad }; - } - - // Стартовые данные - const { outdoorTemps, predictedTRad } = generateChartData(targetTemp, maxOut, Kn, Ke, Kk); - - // Создаем график - const ctx = document.getElementById('equithermChart').getContext('2d'); - // Create gradient for the line - const canvasHeight = ctx.canvas.height; - const gradient = ctx.createLinearGradient(0, canvasHeight, 0, 0); // Adjust x1, y1, x2, y2 for direction - gradient.addColorStop(0, 'rgba(75, 192, 192, 1)'); - gradient.addColorStop(0.5, 'rgba(255, 99, 132, 1)'); - - - equithermChart = new Chart(ctx, { - type: 'line', - data: { - labels: outdoorTemps, - datasets: [{ - label: 'Температура Радиатора (°C)', - borderColor: gradient, // Use gradient instead of solid color - borderWidth: 1, - fill: false, - tension: 0.1, - pointRadius: 2, // Reduce dot size (default is 3) - pointHoverRadius: 4, - data: predictedTRad - }] - }, - options: { - responsive: true, - interaction: { - mode: 'nearest', // Подтягиваемся к точкам - intersect: false - }, - plugins: { - tooltip: { - enabled: true, - position: 'nearest', - } - }, - scales: { - x: { - display: true, - title: { - display: true, - text: 'Наружная температура (°C)' - } - }, - y: { - display: true, - title: { - display: true, - text: 'Температура Радиатора (°C)' - } - } - } - } - }); - - // Показ формы - document.getElementById('equitherm-settings-busy').classList.add('hidden'); - document.getElementById('equitherm-settings').classList.remove('hidden'); - + return await response.json(); } catch (error) { console.log(error); } } - // Обновление графика + // Считаем температуру + function calculateTRad(targetTemp, outdoorTemp, maxOut, Kn, Ke, Kk) { + let tempDelta = targetTemp - outdoorTemp; + const maxPoint = targetTemp - (maxOut - targetTemp) / Kn; + let base = targetTemp - maxPoint; + + if (base <= 0) { + base = 0.0001; + } + + const sf = (maxOut - targetTemp) / Math.pow(base, 1.0 / Ke); + + let T_rad = targetTemp + sf * (tempDelta >= 0 ? Math.pow(tempDelta, 1.0 / Ke) : -Math.pow(-tempDelta, 1.0 / Ke)) + Kk; + return Math.min(T_rad, maxOut); + } + + // Генерируем данные для графика + function generateChartData(targetTemp, maxOut, Kn, Ke, Kk) { + const outdoorTemps = []; + const predictedTRad = []; + + for (let temp = 25; temp >= -30; temp -= 1) { + outdoorTemps.push(temp); + predictedTRad.push(calculateTRad(targetTemp, temp, maxOut, Kn, Ke, Kk).toFixed(1)); + } + + return { outdoorTemps, predictedTRad }; + } + + // Создаем график + function createChart(outdoorTemps, predictedTRad) { + const ctx = document.getElementById('equithermChart').getContext('2d'); + + const canvasHeight = ctx.canvas.height; + const gradient = ctx.createLinearGradient(0, canvasHeight, 0, 0); + gradient.addColorStop(0, 'rgba(75, 192, 192, 1)'); + gradient.addColorStop(0.5, 'rgba(255, 99, 132, 1)'); + + equithermChart = new Chart(ctx, { + type: 'line', + data: { + labels: outdoorTemps, + datasets: [{ + label: 'Температура Радиатора (°C)', + borderColor: gradient, + borderWidth: 1, + fill: false, + tension: 0.1, + pointRadius: 2, + pointHoverRadius: 4, + data: predictedTRad + }] + }, + options: { + responsive: true, + interaction: { + mode: 'nearest', + intersect: false + }, + plugins: { + tooltip: { + enabled: true, + position: 'nearest', + } + }, + scales: { + x: { + display: true, + title: { + display: true, + text: 'Наружная температура (°C)' + } + }, + y: { + display: true, + title: { + display: true, + text: 'Температура Радиатора (°C)' + } + } + } + } + }); + } + + // Инициализируем график + async function initChart() { + try { + const result = await fetchSettings(); + + const { heating, equitherm } = result; + const targetTemp = heating?.target ?? 24; + const maxOut = heating?.maxTemp ?? 90; + const Kn = equitherm?.n_factor ?? 1; + const Ke = equitherm?.e_factor ?? 1.3; + const Kk = equitherm?.k_factor ?? 0; + + + const { outdoorTemps, predictedTRad } = generateChartData(targetTemp, maxOut, Kn, Ke, Kk); + + + createChart(outdoorTemps, predictedTRad); + + + document.getElementById('equitherm-settings-busy').classList.add('hidden'); + document.getElementById('equitherm-settings').classList.remove('hidden'); + } catch (error) { + console.log(error); + } + } + + function updateChart(formData) { if (!equithermChart) return; - fetch("/api/settings", { - cache: "no-cache", - credentials: "include" - }) - .then(response => response.json()) + fetchSettings() .then(result => { const targetTemp = result?.heating?.target ?? 24; const maxOut = result?.heating?.maxTemp ?? 90; + const Kn = parseFloat(formData.get('equitherm[n_factor]')) || 1; const Ke = parseFloat(formData.get('equitherm[e_factor]')) || 1.3; const Kk = parseFloat(formData.get('equitherm[k_factor]')) || 0; - function calculateTRad(targetTemp, outdoorTemp, maxOut, Kn, Ke, Kk) { - let tempDiff = targetTemp - outdoorTemp; - if (tempDiff < 0) { - tempDiff = 0; - } - const minOutside = targetTemp - (maxOut - targetTemp) / Kn; - let base = targetTemp - minOutside; - if (base <= 0) { - base = 0.0001; - } - const c1 = (maxOut - targetTemp) / Math.pow(base, 1.0 / Ke); - let T_rad = targetTemp + c1 * Math.pow(tempDiff, 1.0 / Ke) + Kk; - return Math.min(T_rad, maxOut); - } - - const outdoorTemps = []; - const predictedTRad = []; - for (let temp = 25; temp >= -30; temp -= 1) { - outdoorTemps.push(temp); - predictedTRad.push(calculateTRad(targetTemp, temp, maxOut, Kn, Ke, Kk).toFixed(1)); - } + const { outdoorTemps, predictedTRad } = generateChartData(targetTemp, maxOut, Kn, Ke, Kk); equithermChart.data.labels = outdoorTemps; equithermChart.data.datasets[0].data = predictedTRad; @@ -1136,6 +1129,7 @@ .catch(error => console.log(error)); } + // Слушаем отправку const form = document.getElementById('equitherm-settings'); form.addEventListener('submit', (e) => {