Update plot_ph_week.html

plot_ph_week.html

@@ -28,85 +28,49 @@
             }
         }
 
-        // Создаём кастомный hovertemplate для добавления дня недели
-        function addHoverTemplate(name, days) {
-            return {
-                hovertemplate: '%{x}<br>%{y}<br>День недели: ' + days + '<br>' + name + ': %{text}' + '<extra></extra>',
-                hoverinfo: 'x+y+text'
-            };
-        }
-
         // Рендерим графики с использованием Plotly.js
         Plotly.newPlot("ph_chart", [{
             x: data.dates,  // Используем даты для оси X
             y: data.ph,
             type: "scatter",
-            mode: "lines+markers",  // Добавим маркеры для данных
+            mode: "lines",
             name: "pH",
-            marker: { symbol: "circle", color: "blue" },
-            text: data.days_of_week,  // Добавляем дни недели в качестве текста
-            ...addHoverTemplate("pH", data.days_of_week)
+            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" }
+            yaxis: { title: "pH" },
+            hovermode: "closest"
         });
 
         Plotly.newPlot("ec_chart", [{
             x: data.dates,  // Используем даты для оси X
             y: data.ec,
             type: "scatter",
-            mode: "lines+markers",  // Добавим маркеры для данных
+            mode: "lines",
             name: "EC",
             line: { color: "green" },
-            marker: { symbol: "cross", color: "red" },
-            text: data.days_of_week,  // Добавляем дни недели в качестве текста
-            ...addHoverTemplate("EC", data.days_of_week)
+            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" }
+            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" },
-                marker: { symbol: "circle", color: "blue" },
-                text: data.days_of_week,  // Добавляем дни недели в качестве текста
-                ...addHoverTemplate("Насос A", data.days_of_week)
-            },
-            { 
-                x: data.dates, 
-                y: data.onB, 
-                type: "scatter", 
-                mode: "lines+markers", 
-                name: "Насос B", 
-                line: { color: "brown" },
-                marker: { symbol: "square", color: "brown" },
-                text: data.days_of_week,  // Добавляем дни недели в качестве текста
-                ...addHoverTemplate("Насос B", data.days_of_week)
-            },
-            { 
-                x: data.dates, 
-                y: data.onC, 
-                type: "scatter", 
-                mode: "lines+markers", 
-                name: "Насос C", 
-                line: { color: "orange" },
-                marker: { symbol: "triangle-up", color: "orange" },
-                text: data.days_of_week,  // Добавляем дни недели в качестве текста
-                ...addHoverTemplate("Насос C", data.days_of_week)
-            }
+            { 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" } }
         ], {
             title: `График работы насосов за ${data.week}-ю неделю`,
             xaxis: { title: "Дата" },  // Ось X теперь - это даты
-            yaxis: { title: "Состояние насосов" }
+            yaxis: { title: "Состояние насосов" },
+            hovermode: "closest"
         });
     </script>