DmitrMakeev commited on
Commit
9e19043
·
verified ·
1 Parent(s): 3b34ca6

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. 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}-ю неделю`,