Update online.html

online.html

@@ -469,7 +469,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
   // Объект для хранения истории данных (до 60 значений)
   let dataHistory = {
     labels: [], // Индексы для оси X
-    times: [],  // Отдельный массив для времени (только для карточек)
+    dates: [],  // Даты с сервера
+    times: [],  // Время с сервера
     ph: [],
     ec: [],
     tS: [],
@@ -497,8 +498,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "pH",
       mode: "lines",
       line: { color: "blue" },
-      customdata: dataHistory.times, // Привязываем время для карточек
-      hovertemplate: "<b>pH: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>pH: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "blue", font: { color: "white" } }
     },
     {
@@ -507,8 +508,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "EC",
       mode: "lines",
       line: { color: "green" },
-      customdata: dataHistory.times,
-      hovertemplate: "<b>EC: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>EC: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "green", font: { color: "white" } }
     },
     {
@@ -517,8 +518,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "Т. раствора",
       mode: "lines",
       line: { color: "red" },
-      customdata: dataHistory.times,
-      hovertemplate: "<b>Т. раствора: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>Т. раствора: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "red", font: { color: "white" } }
     },
     {
@@ -527,8 +528,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "Т. воздуха",
       mode: "lines",
       line: { color: "orange" },
-      customdata: dataHistory.times,
-      hovertemplate: "<b>Т. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>Т. воздуха: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "orange", font: { color: "white" } }
     },
     {
@@ -537,8 +538,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "Вл. воздуха",
       mode: "lines",
       line: { color: "purple" },
-      customdata: dataHistory.times,
-      hovertemplate: "<b>Вл. воздуха: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>Вл. воздуха: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "purple", font: { color: "white" } }
     },
     {
@@ -547,8 +548,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       name: "Об. вентилятора",
       mode: "lines",
       line: { color: "brown" },
-      customdata: dataHistory.times,
-      hovertemplate: "<b>Об. вентилятора: %{y}</b><br>Время: %{customdata}<extra></extra>",
+      customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
+      hovertemplate: "<b>Об. вентилятора: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "brown", font: { color: "white" } }
     }
   ];
@@ -586,7 +587,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
   function updateDataHistory(data) {
     // Добавляем новые значения
     dataHistory.labels.push(dataHistory.labels.length); // Просто индексы для оси X
-    dataHistory.times.push(new Date().toLocaleTimeString()); // Только время для карточек
+    dataHistory.dates.push(data.date); // Дата с сервера
+    dataHistory.times.push(data.time); // Время с сервера
     dataHistory.ph.push(parseFloat(data.ph) || 0);
     dataHistory.ec.push(parseFloat(data.ec) || 0);
     dataHistory.tS.push(parseFloat(data.tS) || 0);
@@ -597,6 +599,7 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     // Если больше 60 значений, удал��ем первое
     if (dataHistory.labels.length > 60) {
       dataHistory.labels.shift();
+      dataHistory.dates.shift();
       dataHistory.times.shift();
       dataHistory.ph.shift();
       dataHistory.ec.shift();
@@ -609,6 +612,7 @@ document.getElementById("but_sliv").addEventListener("click", function() {
 
   function updateChart() {
     // Обновляем данные графика
+    const customdata = dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]);
     Plotly.update("parametersChart", {
       x: [
         dataHistory.labels,
@@ -627,12 +631,12 @@ document.getElementById("but_sliv").addEventListener("click", function() {
         dataHistory.sVen
       ],
       customdata: [
-        dataHistory.times,
-        dataHistory.times,
-        dataHistory.times,
-        dataHistory.times,
-        dataHistory.times,
-        dataHistory.times
+        customdata,
+        customdata,
+        customdata,
+        customdata,
+        customdata,
+        customdata
       ]
     });
   }