Update plot_ph_week.html

plot_ph_week.html

@@ -20,7 +20,7 @@
     <script>
         const weekNumber = {{ data.week }};
         const data = {{ data | tojson }};  // Данные из Flask
-
+        
         function navigateWeek(change) {
             const newWeek = weekNumber + change;
             if (newWeek >= 1 && newWeek <= 30) {
@@ -33,44 +33,61 @@
             x: data.dates,  // Используем даты для оси X
             y: data.ph,
             type: "scatter",
-            mode: "lines",
+            mode: "lines+markers",  // Добавим маркеры для данных
             name: "pH",
-            hovertemplate: data.days_of_week.map((day, index) =>
-                `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
-            )
+            marker: { symbol: "circle", color: "blue" }
         }], {
             title: `График pH за ${data.week}-ю неделю`,
             xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "pH" },
-            hovermode: "closest"
+            yaxis: { title: "pH" }
         });
 
         Plotly.newPlot("ec_chart", [{
             x: data.dates,  // Используем даты для оси X
             y: data.ec,
             type: "scatter",
-            mode: "lines",
+            mode: "lines+markers",  // Добавим маркеры для данных
             name: "EC",
             line: { color: "green" },
-            hovertemplate: data.days_of_week.map((day, index) =>
-                `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
-            )
+            marker: { symbol: "cross", color: "red" }
         }], {
             title: `График EC за ${data.week}-ю неделю`,
             xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "EC" },
-            hovermode: "closest"
+            yaxis: { title: "EC" }
         });
 
         Plotly.newPlot("pump_chart", [
-            { x: data.dates, y: data.onA, type: "scatter", mode: "lines", name: "Насос A", line: { color: "blue" } },
-            { x: data.dates, y: data.onB, type: "scatter", mode: "lines", name: "Насос B", line: { color: "brown" } },
-            { x: data.dates, y: data.onC, type: "scatter", mode: "lines", name: "Насос C", line: { color: "orange" } }
+            { 
+                x: data.dates, 
+                y: data.onA, 
+                type: "scatter", 
+                mode: "lines+markers", 
+                name: "Насос A", 
+                line: { color: "blue" },
+                marker: { symbol: "circle", color: "blue" }
+            },
+            { 
+                x: data.dates, 
+                y: data.onB, 
+                type: "scatter", 
+                mode: "lines+markers", 
+                name: "Насос B", 
+                line: { color: "brown" },
+                marker: { symbol: "square", color: "brown" }
+            },
+            { 
+                x: data.dates, 
+                y: data.onC, 
+                type: "scatter", 
+                mode: "lines+markers", 
+                name: "Насос C", 
+                line: { color: "orange" },
+                marker: { symbol: "triangle-up", color: "orange" }
+            }
         ], {
             title: `График работы насосов за ${data.week}-ю неделю`,
             xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "Состояние насосов" },
-            hovermode: "closest"
+            yaxis: { title: "Состояние насосов" }
         });
     </script>