Update plot_ph_week.html
Browse files- plot_ph_week.html +25 -6
plot_ph_week.html
CHANGED
@@ -20,7 +20,7 @@
|
|
20 |
<script>
|
21 |
const weekNumber = {{ data.week }};
|
22 |
const data = {{ data | tojson }}; // Данные из Flask
|
23 |
-
|
24 |
function navigateWeek(change) {
|
25 |
const newWeek = weekNumber + change;
|
26 |
if (newWeek >= 1 && newWeek <= 30) {
|
@@ -28,6 +28,14 @@
|
|
28 |
}
|
29 |
}
|
30 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
31 |
// Рендерим графики с использованием Plotly.js
|
32 |
Plotly.newPlot("ph_chart", [{
|
33 |
x: data.dates, // Используем даты для оси X
|
@@ -35,7 +43,9 @@
|
|
35 |
type: "scatter",
|
36 |
mode: "lines+markers", // Добавим маркеры для данных
|
37 |
name: "pH",
|
38 |
-
marker: { symbol: "circle", color: "blue" }
|
|
|
|
|
39 |
}], {
|
40 |
title: `График pH за ${data.week}-ю неделю`,
|
41 |
xaxis: { title: "Дата" }, // Ось X теперь - это даты
|
@@ -49,13 +59,16 @@
|
|
49 |
mode: "lines+markers", // Добавим маркеры для данных
|
50 |
name: "EC",
|
51 |
line: { color: "green" },
|
52 |
-
marker: { symbol: "cross", color: "red" }
|
|
|
|
|
53 |
}], {
|
54 |
title: `График EC за ${data.week}-ю неделю`,
|
55 |
xaxis: { title: "Дата" }, // Ось X теперь - это даты
|
56 |
yaxis: { title: "EC" }
|
57 |
});
|
58 |
|
|
|
59 |
Plotly.newPlot("pump_chart", [
|
60 |
{
|
61 |
x: data.dates,
|
@@ -64,7 +77,9 @@
|
|
64 |
mode: "lines+markers",
|
65 |
name: "Насос A",
|
66 |
line: { color: "blue" },
|
67 |
-
marker: { symbol: "circle", color: "blue" }
|
|
|
|
|
68 |
},
|
69 |
{
|
70 |
x: data.dates,
|
@@ -73,7 +88,9 @@
|
|
73 |
mode: "lines+markers",
|
74 |
name: "Насос B",
|
75 |
line: { color: "brown" },
|
76 |
-
marker: { symbol: "square", color: "brown" }
|
|
|
|
|
77 |
},
|
78 |
{
|
79 |
x: data.dates,
|
@@ -82,7 +99,9 @@
|
|
82 |
mode: "lines+markers",
|
83 |
name: "Насос C",
|
84 |
line: { color: "orange" },
|
85 |
-
marker: { symbol: "triangle-up", color: "orange" }
|
|
|
|
|
86 |
}
|
87 |
], {
|
88 |
title: `График работы насосов за ${data.week}-ю неделю`,
|
|
|
20 |
<script>
|
21 |
const weekNumber = {{ data.week }};
|
22 |
const data = {{ data | tojson }}; // Данные из Flask
|
23 |
+
|
24 |
function navigateWeek(change) {
|
25 |
const newWeek = weekNumber + change;
|
26 |
if (newWeek >= 1 && newWeek <= 30) {
|
|
|
28 |
}
|
29 |
}
|
30 |
|
31 |
+
// Создаём кастомный hovertemplate для добавления дня недели
|
32 |
+
function addHoverTemplate(name, days) {
|
33 |
+
return {
|
34 |
+
hovertemplate: '%{x}<br>%{y}<br>День недели: ' + days + '<br>' + name + ': %{text}' + '<extra></extra>',
|
35 |
+
hoverinfo: 'x+y+text'
|
36 |
+
};
|
37 |
+
}
|
38 |
+
|
39 |
// Рендерим графики с использованием Plotly.js
|
40 |
Plotly.newPlot("ph_chart", [{
|
41 |
x: data.dates, // Используем даты для оси X
|
|
|
43 |
type: "scatter",
|
44 |
mode: "lines+markers", // Добавим маркеры для данных
|
45 |
name: "pH",
|
46 |
+
marker: { symbol: "circle", color: "blue" },
|
47 |
+
text: data.days_of_week, // Добавляем дни недели в качестве текста
|
48 |
+
...addHoverTemplate("pH", data.days_of_week)
|
49 |
}], {
|
50 |
title: `График pH за ${data.week}-ю неделю`,
|
51 |
xaxis: { title: "Дата" }, // Ось X теперь - это даты
|
|
|
59 |
mode: "lines+markers", // Добавим маркеры для данных
|
60 |
name: "EC",
|
61 |
line: { color: "green" },
|
62 |
+
marker: { symbol: "cross", color: "red" },
|
63 |
+
text: data.days_of_week, // Добавляем дни недели в качестве текста
|
64 |
+
...addHoverTemplate("EC", data.days_of_week)
|
65 |
}], {
|
66 |
title: `График EC за ${data.week}-ю неделю`,
|
67 |
xaxis: { title: "Дата" }, // Ось X теперь - это даты
|
68 |
yaxis: { title: "EC" }
|
69 |
});
|
70 |
|
71 |
+
// График насосов, с добавлением дня недели на точке
|
72 |
Plotly.newPlot("pump_chart", [
|
73 |
{
|
74 |
x: data.dates,
|
|
|
77 |
mode: "lines+markers",
|
78 |
name: "Насос A",
|
79 |
line: { color: "blue" },
|
80 |
+
marker: { symbol: "circle", color: "blue" },
|
81 |
+
text: data.days_of_week, // Добавляем дни недели в качестве текста
|
82 |
+
...addHoverTemplate("Насос A", data.days_of_week)
|
83 |
},
|
84 |
{
|
85 |
x: data.dates,
|
|
|
88 |
mode: "lines+markers",
|
89 |
name: "Насос B",
|
90 |
line: { color: "brown" },
|
91 |
+
marker: { symbol: "square", color: "brown" },
|
92 |
+
text: data.days_of_week, // Добавляем дни недели в качестве текста
|
93 |
+
...addHoverTemplate("Насос B", data.days_of_week)
|
94 |
},
|
95 |
{
|
96 |
x: data.dates,
|
|
|
99 |
mode: "lines+markers",
|
100 |
name: "Насос C",
|
101 |
line: { color: "orange" },
|
102 |
+
marker: { symbol: "triangle-up", color: "orange" },
|
103 |
+
text: data.days_of_week, // Добавляем дни недели в качестве текста
|
104 |
+
...addHoverTemplate("Насос C", data.days_of_week)
|
105 |
}
|
106 |
], {
|
107 |
title: `График работы насосов за ${data.week}-ю неделю`,
|