Update plot_week.html

plot_week.html

@@ -106,124 +106,115 @@ body {
 </div>
 
 <!-- Кнопки переключения недель -->
-<div class="week-buttons">
+<div class="week-buttons mb-3">
     <button id="prev_week" class="btn btn-success mr-2" onclick="navigateWeek(-1)">Предыдущая неделя</button>
     <button id="next_week" class="btn btn-success" onclick="navigateWeek(1)">Следующая неделя</button>
 </div>
 
 {% if data %}
-    <div class="container">
-        <div class="row">
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="ph_chart"></div>
-            </div>
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="ec_chart"></div>
-            </div>
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="pump_chart"></div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="ts_chart"></div>
-            </div>
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="ta_chart"></div>
-            </div>
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="hdm_chart"></div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-4 graph-container">
-                <div class="graph" id="sven_chart"></div>
-            </div>
-        </div>
-    </div>
+<!-- Графики -->
+<div id="graph_container" style="height: 600px;"></div>
 
-    <script>
-        const data = {{ data | tojson }};
-        
-        function createChart(id, yData, title, yLabel, color) {
-            Plotly.newPlot(id, [{
+<script>
+    const data = {{ data | tojson }};
+
+    // Создаём несколько графиков в одном окне (с использованием subplot)
+    function createSubplotData() {
+        return [
+            // График PH
+            {
                 x: data.dates,
-                y: yData,
+                y: data.ph,
                 type: "scatter",
                 mode: "lines+markers",
-                line: { color: color },
+                name: "pH",
+                line: { color: "blue" },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
+                    `Неделя: ${data.week}<br>День: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
                 )
-            }], {
-                title: title,
-                xaxis: { title: "", showticklabels: false },
-                yaxis: { title: yLabel, titlefont: { size: 14 } },
-                hovermode: "closest",
-                showlegend: false
-            });
-        }
+            },
+            // График EC
+            {
+                x: data.dates,
+                y: data.ec,
+                type: "scatter",
+                mode: "lines+markers",
+                name: "EC",
+                line: { color: "green" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `Неделя: ${data.week}<br>День: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
+                )
+            },
+            // График TS
+            {
+                x: data.dates,
+                y: data.tS,
+                type: "scatter",
+                mode: "lines+markers",
+                name: "TS",
+                line: { color: "purple" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `Неделя: ${data.week}<br>День: ${day}<br>TS: %{y}<br>Дата: ${data.dates[index]}`
+                )
+            },
+            // График TA
+            {
+                x: data.dates,
+                y: data.ta,
+                type: "scatter",
+                mode: "lines+markers",
+                name: "TA",
+                line: { color: "red" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `Неделя: ${data.week}<br>День: ${day}<br>TA: %{y}<br>Дата: ${data.dates[index]}`
+                )
+            },
+        ];
+    }
 
-        function updateCharts() {
-            $.get("/plot_week?week=" + {{ week_number }}, function(data) {
-                // Обновление графиков с новыми данными
-                createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
-                createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
-                createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-                createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-                createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
-                createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
-                Plotly.newPlot("pump_chart", [
-                    {
-                        x: data.dates,
-                        y: data.onA,
-                        type: "scatter",
-                        mode: "lines+markers",
-                        line: { color: "green" },
-                        hovertemplate: data.days_of_week.map((day, index) =>
-                            `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
-                        )
-                    },
-                    {
-                        x: data.dates,
-                        y: data.onB,
-                        type: "scatter",
-                        mode: "lines+markers",
-                        line: { color: "brown" },
-                        hovertemplate: data.days_of_week.map((day, index) =>
-                            `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
-                        )
-                    },
-                    {
-                        x: data.dates,
-                        y: data.onC,
-                        type: "scatter",
-                        mode: "lines+markers",
-                        line: { color: "orange" },
-                        hovertemplate: data.days_of_week.map((day, index) =>
-                            `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
-                        )
-                    }
-                ], {
-                    title: `Интервал дозирования насосов для ${data.week}-ой недели`,
-                    xaxis: { title: "", showticklabels: false },
-                    yaxis: { title: "Время ВКЛ(сек.)" },
-                    hovermode: "closest",
-                    showlegend: false
-                });
-            });
-        }
+    // Создание графиков
+    function createPlot() {
+        const traces = createSubplotData();
+
+        const layout = {
+            title: `Графики за ${data.week}-ю неделю`,
+            xaxis: {
+                title: "Дата",
+                showticklabels: true
+            },
+            yaxis: {
+                title: "Значения",
+                titlefont: { size: 14 }
+            },
+            hovermode: "closest",
+            showlegend: true
+        };
+
+        Plotly.newPlot('graph_container', traces, layout);
+    }
+
+    // Обновляем графики
+    function updateCharts() {
+        $.get("/plot_week?week=" + {{ week_number }}, function(data) {
+            createPlot();
+        });
+    }
+
+    setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
+
+</script>
 
-        setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
-    </script>
 {% else %}
     <div class="no-data-message">
         {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
     </div>
 {% endif %}
 
+<!-- Скрипты навигации -->
 <script>
     let weekNumber = {{ week_number }};
+
+    // Функция переключения недели
     function navigateWeek(change) {
         const newWeek = weekNumber + change;
         if (newWeek >= 1 && newWeek <= 30) {
@@ -232,21 +223,20 @@ body {
     }
 </script>
 
+<!-- Скрипты перехода на страницы -->
 <script>
     document.getElementById("st_onl").addEventListener("click", function() {
         var baseUrl = window.location.origin;
         var targetUrl = baseUrl + "/online";
         window.location.href = targetUrl;
     });
-</script>
-<script>
+
     document.getElementById("st_set").addEventListener("click", function() {
         var baseUrl = window.location.origin;
         var targetUrl = baseUrl + "/settings";
         window.location.href = targetUrl;
     });
-</script>
-<script>
+
     document.getElementById("st_plot").addEventListener("click", function() {
         var baseUrl = window.location.origin;
         var targetUrl = baseUrl + "/plot_week";
@@ -256,4 +246,5 @@ body {
 
 </body>
 
+
 </html>