Update plot_ph_week.html

plot_ph_week.html

@@ -16,89 +16,100 @@
     <div id="ph_chart"></div>
     <div id="ec_chart"></div>
     <div id="pump_chart"></div>
+    
+    <div id="no_data_message" style="display:none; color:red;">Нет данных за выбранную неделю.</div>
 
     <script>
         const weekNumber = {{ data.week }};
         const data = {{ data | tojson }};  // Данные из Flask
+
         function navigateWeek(change) {
             const newWeek = weekNumber + change;
             if (newWeek >= 1 && newWeek <= 30) {
                 window.location.href = `/plot_ph_week?week=${newWeek}`;
             }
         }
-        // Рендерим графики с использованием Plotly.js
-        Plotly.newPlot("ph_chart", [{
-            x: data.dates,  // Используем даты для оси X
-            y: data.ph,
-            type: "scatter",
-            mode: "lines+markers",  // Добавляем точки на линии
-            name: "pH",
-            hovertemplate: data.days_of_week.map((day, index) =>
-                `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
-            )
-        }], {
-            title: `График pH за ${data.week}-ю неделю`,
-            xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "pH" },
-            hovermode: "closest"
-        });
-        Plotly.newPlot("ec_chart", [{
-            x: data.dates,  // Используем даты для оси X
-            y: data.ec,
-            type: "scatter",
-            mode: "lines+markers",  // Добавляем точки на линии
-            name: "EC",
-            line: { color: "green" },
-            hovertemplate: data.days_of_week.map((day, index) =>
-                `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
-            )
-        }], {
-            title: `График EC за ${data.week}-ю неделю`,
-            xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "EC" },
-            hovermode: "closest"
-        });
-        // Добавляем дни недели на график насосов
-        Plotly.newPlot("pump_chart", [
-            { 
-                x: data.dates, 
-                y: data.onA, 
-                type: "scatter", 
-                mode: "lines+markers",  // Добавляем точки на линии
-                name: "Насос A", 
-                line: { color: "blue" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            },
-            { 
-                x: data.dates, 
-                y: data.onB, 
-                type: "scatter", 
+
+        // Если нет данных, показываем сообщение
+        if (!data.dates || data.dates.length === 0) {
+            document.getElementById('no_data_message').style.display = 'block';
+        } else {
+            // Рендерим графики с использованием Plotly.js
+            Plotly.newPlot("ph_chart", [{
+                x: data.dates,  // Используем даты для оси X
+                y: data.ph,
+                type: "scatter",
                 mode: "lines+markers",  // Добавляем точки на линии
-                name: "Насос B", 
-                line: { color: "brown" },
+                name: "pH",
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Насос B: %{y}<br>Дата: ${data.dates[index]}`
+                    `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
                 )
-            },
-            { 
-                x: data.dates, 
-                y: data.onC, 
-                type: "scatter", 
+            }], {
+                title: `График pH за ${data.week}-ю неделю`,
+                xaxis: { title: "Дата" },  // Ось X теперь - это даты
+                yaxis: { title: "pH" },
+                hovermode: "closest"
+            });
+
+            Plotly.newPlot("ec_chart", [{
+                x: data.dates,  // Используем даты для оси X
+                y: data.ec,
+                type: "scatter",
                 mode: "lines+markers",  // Добавляем точки на линии
-                name: "Насос C", 
-                line: { color: "orange" },
+                name: "EC",
+                line: { color: "green" },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
+                    `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
                 )
-            }
-        ], {
-            title: `График работы насосов за ${data.week}-ю неделю`,
-            xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "Состояние насосов" },
-            hovermode: "closest"
-        });
+            }], {
+                title: `График EC за ${data.week}-ю неделю`,
+                xaxis: { title: "Дата" },  // Ось X теперь - это даты
+                yaxis: { title: "EC" },
+                hovermode: "closest"
+            });
+
+            // Добавляем дни недели на график насосов
+            Plotly.newPlot("pump_chart", [
+                { 
+                    x: data.dates, 
+                    y: data.onA, 
+                    type: "scatter", 
+                    mode: "lines+markers",  // Добавляем точки на линии
+                    name: "Насос A", 
+                    line: { color: "blue" },
+                    hovertemplate: data.days_of_week.map((day, index) =>
+                        `День недели: ${day}<br>Насос A: %{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: `График работы насосов за ${data.week}-ю неделю`,
+                xaxis: { title: "Дата" },  // Ось X теперь - это даты
+                yaxis: { title: "Состояние насосов" },
+                hovermode: "closest"
+            });
+        }
     </script>
 
 </body>