Update online.html

online.html

@@ -468,7 +468,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
 <script>
   // Объект для хранения истории данных (до 60 значений)
   let dataHistory = {
-    labels: [], // Метки теперь просто индексы
+    labels: [], // Индексы для оси X
+    times: [],  // Отдельный массив для времени (только для карточек)
     ph: [],
     ec: [],
     tS: [],
@@ -477,24 +478,79 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     sVen: []
   };
 
-  // Инициализация графика Plotly (без времени)
+  // Инициализация графика Plotly
   const layout = {
-    title: "Графики за последний час",
+    title: "График последних 60 значений параметров",
     xaxis: {
-      showticklabels: false // Убираем метки времени на оси X
+      showticklabels: false // Убираем метки на оси X
     },
     yaxis: { title: "Значения" },
     showlegend: true,
-    height: 400
+    height: 400,
+    hovermode: "closest" // Показываем карточку для ближайшей точки
   };
 
   const traces = [
-    { x: dataHistory.labels, y: dataHistory.ph, name: "pH", mode: "lines", line: { color: "blue" } },
-    { x: dataHistory.labels, y: dataHistory.ec, name: "EC", mode: "lines", line: { color: "green" } },
-    { x: dataHistory.labels, y: dataHistory.tS, name: "Т. раствора", mode: "lines", line: { color: "red" } },
-    { x: dataHistory.labels, y: dataHistory.tA, name: "Т. воздуха", mode: "lines", line: { color: "orange" } },
-    { x: dataHistory.labels, y: dataHistory.hDm, name: "Вл. воздуха", mode: "lines", line: { color: "purple" } },
-    { x: dataHistory.labels, y: dataHistory.sVen, name: "Об. вентилятора", mode: "lines", line: { color: "brown" } }
+    {
+      x: dataHistory.labels,
+      y: dataHistory.ph,
+      name: "pH",
+      mode: "lines",
+      line: { color: "blue" },
+      customdata: dataHistory.times, // Привязываем время для карточек
+      hovertemplate: "<b>pH: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "blue", font: { color: "white" } }
+    },
+    {
+      x: dataHistory.labels,
+      y: dataHistory.ec,
+      name: "EC",
+      mode: "lines",
+      line: { color: "green" },
+      customdata: dataHistory.times,
+      hovertemplate: "<b>EC: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "green", font: { color: "white" } }
+    },
+    {
+      x: dataHistory.labels,
+      y: dataHistory.tS,
+      name: "Т. раствора",
+      mode: "lines",
+      line: { color: "red" },
+      customdata: dataHistory.times,
+      hovertemplate: "<b>Т. раствора: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "red", font: { color: "white" } }
+    },
+    {
+      x: dataHistory.labels,
+      y: dataHistory.tA,
+      name: "Т. воздуха",
+      mode: "lines",
+      line: { color: "orange" },
+      customdata: dataHistory.times,
+      hovertemplate: "<b>Т. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "orange", font: { color: "white" } }
+    },
+    {
+      x: dataHistory.labels,
+      y: dataHistory.hDm,
+      name: "Вл. воздуха",
+      mode: "lines",
+      line: { color: "purple" },
+      customdata: dataHistory.times,
+      hovertemplate: "<b>Вл. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "purple", font: { color: "white" } }
+    },
+    {
+      x: dataHistory.labels,
+      y: dataHistory.sVen,
+      name: "Об. вентилятора",
+      mode: "lines",
+      line: { color: "brown" },
+      customdata: dataHistory.times,
+      hovertemplate: "<b>Об. вентилятора: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      hoverlabel: { bgcolor: "brown", font: { color: "white" } }
+    }
   ];
 
   // Создаём график сразу, но с пустыми данными
@@ -528,8 +584,9 @@ document.getElementById("but_sliv").addEventListener("click", function() {
   }
 
   function updateDataHistory(data) {
-    // Добавляем новые значения, метки — просто индексы от 0 до 599
-    dataHistory.labels.push(dataHistory.labels.length);
+    // Добавляем новые значения
+    dataHistory.labels.push(dataHistory.labels.length); // Просто индексы для оси X
+    dataHistory.times.push(new Date().toLocaleTimeString()); // Только время для карточек
     dataHistory.ph.push(parseFloat(data.ph) || 0);
     dataHistory.ec.push(parseFloat(data.ec) || 0);
     dataHistory.tS.push(parseFloat(data.tS) || 0);
@@ -538,8 +595,9 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     dataHistory.sVen.push(parseFloat(data.sVen) || 0);
 
     // Если больше 60 значений, удаляем первое
-    if (dataHistory.labels.length > 600) {
+    if (dataHistory.labels.length > 60) {
       dataHistory.labels.shift();
+      dataHistory.times.shift();
       dataHistory.ph.shift();
       dataHistory.ec.shift();
       dataHistory.tS.shift();
@@ -567,6 +625,14 @@ document.getElementById("but_sliv").addEventListener("click", function() {
         dataHistory.tA,
         dataHistory.hDm,
         dataHistory.sVen
+      ],
+      customdata: [
+        dataHistory.times,
+        dataHistory.times,
+        dataHistory.times,
+        dataHistory.times,
+        dataHistory.times,
+        dataHistory.times
       ]
     });
   }
@@ -595,7 +661,6 @@ document.getElementById("but_sliv").addEventListener("click", function() {
 
 
 
-
   
 </body>
 </html>