Hugging Face's logo

Spaces:
DmitrMakeev
/
flask_inference_api_g
Sleeping

App Files Community
DmitrMakeev commited on
Commit
aa4fd06
·
verified ·
1 Parent(s): 7807d83

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. plot_ph_week.html +78 -67
plot_ph_week.html CHANGED
@@ -16,89 +16,100 @@
16
  <div id="ph_chart"></div>
17
  <div id="ec_chart"></div>
18
  <div id="pump_chart"></div>
 
 
19
 
20
  <script>
21
  const weekNumber = {{ data.week }};
22
  const data = {{ data | tojson }}; // Данные из Flask
 
23
  function navigateWeek(change) {
24
  const newWeek = weekNumber + change;
25
  if (newWeek >= 1 && newWeek <= 30) {
26
  window.location.href = `/plot_ph_week?week=${newWeek}`;
27
  }
28
  }
29
- // Рендерим графики с использованием Plotly.js
30
- Plotly.newPlot("ph_chart", [{
31
- x: data.dates, // Используем даты для оси X
32
- y: data.ph,
33
- type: "scatter",
34
- mode: "lines+markers", // Добавляем точки на линии
35
- name: "pH",
36
- hovertemplate: data.days_of_week.map((day, index) =>
37
- `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
38
- )
39
- }], {
40
- title: `График pH за ${data.week}-ю неделю`,
41
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
42
- yaxis: { title: "pH" },
43
- hovermode: "closest"
44
- });
45
- Plotly.newPlot("ec_chart", [{
46
- x: data.dates, // Используем даты для оси X
47
- y: data.ec,
48
- type: "scatter",
49
- mode: "lines+markers", // Добавляем точки на линии
50
- name: "EC",
51
- line: { color: "green" },
52
- hovertemplate: data.days_of_week.map((day, index) =>
53
- `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
54
- )
55
- }], {
56
- title: `График EC за ${data.week}-ю неделю`,
57
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
58
- yaxis: { title: "EC" },
59
- hovermode: "closest"
60
- });
61
- // Добавляем дни недели на график насосов
62
- Plotly.newPlot("pump_chart", [
63
- {
64
- x: data.dates,
65
- y: data.onA,
66
- type: "scatter",
67
- mode: "lines+markers", // Добавляем точки на линии
68
- name: "Насос A",
69
- line: { color: "blue" },
70
- hovertemplate: data.days_of_week.map((day, index) =>
71
- `День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
72
- )
73
- },
74
- {
75
- x: data.dates,
76
- y: data.onB,
77
- type: "scatter",
78
  mode: "lines+markers", // Добавляем точки на линии
79
- name: "Насос B",
80
- line: { color: "brown" },
81
  hovertemplate: data.days_of_week.map((day, index) =>
82
- `День недели: ${day}<br>Насос B: %{y}<br>Дата: ${data.dates[index]}`
83
  )
84
- },
85
- {
86
- x: data.dates,
87
- y: data.onC,
88
- type: "scatter",
 
 
 
 
 
 
89
  mode: "lines+markers", // Добавляем точки на линии
90
- name: "Насос C",
91
- line: { color: "orange" },
92
  hovertemplate: data.days_of_week.map((day, index) =>
93
- `День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
94
  )
95
- }
96
- ], {
97
- title: `График работы насосов за ${data.week}-ю неделю`,
98
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
99
- yaxis: { title: "Состояние насосов" },
100
- hovermode: "closest"
101
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </script>
103
 
104
  </body>
 
16
  <div id="ph_chart"></div>
17
  <div id="ec_chart"></div>
18
  <div id="pump_chart"></div>
19
+
20
+ <div id="no_data_message" style="display:none; color:red;">Нет данных за выбранную неделю.</div>
21
 
22
  <script>
23
  const weekNumber = {{ data.week }};
24
  const data = {{ data | tojson }}; // Данные из Flask
25
+
26
  function navigateWeek(change) {
27
  const newWeek = weekNumber + change;
28
  if (newWeek >= 1 && newWeek <= 30) {
29
  window.location.href = `/plot_ph_week?week=${newWeek}`;
30
  }
31
  }
32
+
33
+ // Если нет данных, показываем сообщение
34
+ if (!data.dates || data.dates.length === 0) {
35
+ document.getElementById('no_data_message').style.display = 'block';
36
+ } else {
37
+ // Рендерим графики с использованием Plotly.js
38
+ Plotly.newPlot("ph_chart", [{
39
+ x: data.dates, // Используем даты для оси X
40
+ y: data.ph,
41
+ type: "scatter",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  mode: "lines+markers", // Добавляем точки на линии
43
+ name: "pH",
 
44
  hovertemplate: data.days_of_week.map((day, index) =>
45
+ `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
46
  )
47
+ }], {
48
+ title: `График pH за ${data.week}-ю неделю`,
49
+ xaxis: { title: "Дата" }, // Ось X теперь - это даты
50
+ yaxis: { title: "pH" },
51
+ hovermode: "closest"
52
+ });
53
+
54
+ Plotly.newPlot("ec_chart", [{
55
+ x: data.dates, // Используем даты для оси X
56
+ y: data.ec,
57
+ type: "scatter",
58
  mode: "lines+markers", // Добавляем точки на линии
59
+ name: "EC",
60
+ line: { color: "green" },
61
  hovertemplate: data.days_of_week.map((day, index) =>
62
+ `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
63
  )
64
+ }], {
65
+ title: `График EC за ${data.week}-ю неделю`,
66
+ xaxis: { title: "Дата" }, // Ось X теперь - это даты
67
+ yaxis: { title: "EC" },
68
+ hovermode: "closest"
69
+ });
70
+
71
+ // Добавляем дни недели на график насосов
72
+ Plotly.newPlot("pump_chart", [
73
+ {
74
+ x: data.dates,
75
+ y: data.onA,
76
+ type: "scatter",
77
+ mode: "lines+markers", // Добавляем точки на линии
78
+ name: "Насос A",
79
+ line: { color: "blue" },
80
+ hovertemplate: data.days_of_week.map((day, index) =>
81
+ `День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
82
+ )
83
+ },
84
+ {
85
+ x: data.dates,
86
+ y: data.onB,
87
+ type: "scatter",
88
+ mode: "lines+markers", // Добавляем точки на линии
89
+ name: "Насос B",
90
+ line: { color: "brown" },
91
+ hovertemplate: data.days_of_week.map((day, index) =>
92
+ `День недели: ${day}<br>Насос B: %{y}<br>Дата: ${data.dates[index]}`
93
+ )
94
+ },
95
+ {
96
+ x: data.dates,
97
+ y: data.onC,
98
+ type: "scatter",
99
+ mode: "lines+markers", // Добавляем точки на линии
100
+ name: "Насос C",
101
+ line: { color: "orange" },
102
+ hovertemplate: data.days_of_week.map((day, index) =>
103
+ `День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
104
+ )
105
+ }
106
+ ], {
107
+ title: `График работы насосов за ${data.week}-ю неделю`,
108
+ xaxis: { title: "Дата" }, // Ось X теперь - это даты
109
+ yaxis: { title: "Состояние насосов" },
110
+ hovermode: "closest"
111
+ });
112
+ }
113
  </script>
114
 
115
  </body>