Update plot_ph_week.html

plot_ph_week.html

@@ -55,108 +55,56 @@
     </div>
 
     {% if data %}
-        <div class="graph-container">
-            <!-- График pH -->
-            <div class="graph" id="ph_chart"></div>
-        </div>
-
-        <div class="graph-container">
-            <!-- График EC -->
-            <div class="graph" id="ec_chart"></div>
-        </div>
-
-        <div class="graph-container">
-            <!-- График насосов -->
-            <div class="graph" id="pump_chart"></div>
-        </div>
+        <div class="graph-container"><div class="graph" id="ph_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ec_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="pump_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ts_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ta_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="hdm_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
 
         <script>
-            const data = {{ data | tojson }};  // Данные из Flask
-
-            // Рендерим графики с использованием Plotly.js
-            Plotly.newPlot("ph_chart", [{
-                x: data.dates,
-                y: data.ph,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "pH",
-                line: { color: "blue" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `График pH за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { 
-                    title: "Уровень pH",
-                    titlefont: { size: 14 }
-                },
-                hovermode: "closest",
-                showlegend: false
-            });
-
-            Plotly.newPlot("ec_chart", [{
-                x: data.dates,
-                y: data.ec,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "EC",
-                line: { color: "blue" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `График EC за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { 
-                    title: "Уровень EC", 
-                    titlefont: { size: 14 }
-                },
-                hovermode: "closest",
-                showlegend: false
-            });
-
-            Plotly.newPlot("pump_chart", [
-                {
+            const data = {{ data | tojson }};
+            
+            function renderPlot(id, yData, title, yTitle, color) {
+                Plotly.newPlot(id, [{
                     x: data.dates,
-                    y: data.onA,
+                    y: yData,
                     type: "scatter",
                     mode: "lines+markers",
-                    name: "Насос A",
-                    line: { color: "green" },
+                    name: title,
+                    line: { color: color },
                     hovertemplate: data.days_of_week.map((day, index) =>
-                        `День недели: ${day}<br>Насос A: %{y}сек.<br>Дата: ${data.dates[index]}`
+                        `День недели: ${day}<br>${title}: %{y}<br>Дата: ${data.dates[index]}`
                     )
-                },
-                {
-                    x: data.dates,
-                    y: data.onB,
-                    type: "scatter",
-                    mode: "lines+markers",
-                    name: "Насос B",
-                    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",
-                    name: "Насос C",
-                    line: { color: "orange" },
-                    hovertemplate: data.days_of_week.map((day, index) =>
-                        `День недели: ${day}<br>Насос C: %{y}сек.<br>Дата: ${data.dates[index]}`
-                    )
-                }
+                }], {
+                    title: `График ${title} за ${data.week}-ю неделю`,
+                    xaxis: { title: "Дата" },
+                    yaxis: { title: yTitle, titlefont: { size: 14 } },
+                    hovermode: "closest",
+                    showlegend: false
+                });
+            }
+
+            renderPlot("ph_chart", data.ph, "pH", "Уровень pH", "blue");
+            renderPlot("ec_chart", data.ec, "EC", "Уровень EC", "red");
+            renderPlot("ts_chart", data.tS, "Температура раствора", "Температура (°C)", "purple");
+            renderPlot("ta_chart", data.tA, "Температура воздуха", "Температура (°C)", "orange");
+            renderPlot("hdm_chart", data.hDm, "Влажность воздуха", "Влажность (%)", "green");
+            renderPlot("sven_chart", data.sVen, "Обороты вентилятора", "Обороты", "brown");
+
+            Plotly.newPlot("pump_chart", [
+                { x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" } },
+                { x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" } },
+                { x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" } }
             ], {
                 title: `График работы насосов за ${data.week}-ю неделю`,
                 xaxis: { title: "Дата" },
                 yaxis: { title: "Состояние насосов" },
                 hovermode: "closest",
-                showlegend: false
+                showlegend: true
             });
+
         </script>
 
     {% else %}
@@ -177,4 +125,5 @@
 
 </body>
 
+
 </html>