Hugging Face's logo

Spaces:
DmitrMakeev
/
flask_inference_api_g
Running

App Files Community
DmitrMakeev commited on
Commit
0dada52
·
verified ·
1 Parent(s): e0a4dec

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. plot_ph_week.html +112 -44
plot_ph_week.html CHANGED
@@ -46,26 +46,40 @@
46
  </style>
47
  </head>
48
  <body>
49
-
50
  <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
51
 
52
  <div class="buttons">
53
- <button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
54
- <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
55
  </div>
56
 
57
  {% if data %}
58
- <div class="graph-container"><div class="graph" id="ph_chart"></div></div>
59
- <div class="graph-container"><div class="graph" id="ec_chart"></div></div>
60
- <div class="graph-container"><div class="graph" id="pump_chart"></div></div>
61
- <div class="graph-container"><div class="graph" id="tS_chart"></div></div>
62
- <div class="graph-container"><div class="graph" id="tA_chart"></div></div>
63
- <div class="graph-container"><div class="graph" id="hDm_chart"></div></div>
64
- <div class="graph-container"><div class="graph" id="sVen_chart"></div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
 
66
  <script>
67
  const data = {{ data | tojson }};
68
-
 
69
  Plotly.newPlot("ph_chart", [{
70
  x: data.dates,
71
  y: data.ph,
@@ -80,9 +94,11 @@
80
  title: `График pH за ${data.week}-ю неделю`,
81
  xaxis: { title: "Дата" },
82
  yaxis: { title: "Уровень pH" },
83
- hovermode: "closest"
 
84
  });
85
 
 
86
  Plotly.newPlot("ec_chart", [{
87
  x: data.dates,
88
  y: data.ec,
@@ -97,80 +113,133 @@
97
  title: `График EC за ${data.week}-ю неделю`,
98
  xaxis: { title: "Дата" },
99
  yaxis: { title: "Уровень EC" },
100
- hovermode: "closest"
 
101
  });
102
 
103
- Plotly.newPlot("pump_chart", [
104
- { x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" }},
105
- { x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" }},
106
- { x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" }}
107
- ], {
108
- title: `График работы насосов за ${data.week}-ю неделю`,
109
- xaxis: { title: "Дата" },
110
- yaxis: { title: "Состояние насосов" },
111
- hovermode: "closest"
112
- });
113
-
114
- Plotly.newPlot("tS_chart", [{
115
  x: data.dates,
116
  y: data.tS,
117
  type: "scatter",
118
  mode: "lines+markers",
119
  name: "Температура раствора",
120
- line: { color: "red" }
 
 
 
121
  }], {
122
- title: `График температуры раствора за ${data.week}-ю неделю`,
123
  xaxis: { title: "Дата" },
124
  yaxis: { title: "Температура (°C)" },
125
- hovermode: "closest"
 
126
  });
127
 
128
- Plotly.newPlot("tA_chart", [{
 
129
  x: data.dates,
130
  y: data.tA,
131
  type: "scatter",
132
  mode: "lines+markers",
133
  name: "Температура воздуха",
134
- line: { color: "purple" }
 
 
 
135
  }], {
136
- title: `График температуры воздуха за ${data.week}-ю неделю`,
137
  xaxis: { title: "Дата" },
138
  yaxis: { title: "Температура (°C)" },
139
- hovermode: "closest"
 
140
  });
141
 
142
- Plotly.newPlot("hDm_chart", [{
 
143
  x: data.dates,
144
  y: data.hDm,
145
  type: "scatter",
146
  mode: "lines+markers",
147
  name: "Влажность воздуха",
148
- line: { color: "blue" }
 
 
 
149
  }], {
150
- title: `График влажности воздуха за ${data.week}-ю неделю`,
151
  xaxis: { title: "Дата" },
152
  yaxis: { title: "Влажность (%)" },
153
- hovermode: "closest"
 
154
  });
155
 
156
- Plotly.newPlot("sVen_chart", [{
 
157
  x: data.dates,
158
  y: data.sVen,
159
  type: "scatter",
160
  mode: "lines+markers",
161
  name: "Обороты вентилятора",
162
- line: { color: "gray" }
 
 
 
163
  }], {
164
- title: `График оборотов вентилятора за ${data.week}-ю неделю`,
165
  xaxis: { title: "Дата" },
166
- yaxis: { title: "Обороты" },
167
- hovermode: "closest"
 
168
  });
169
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  </script>
171
-
172
  {% else %}
173
- <div class="no-data-message">Данных за эту неделю нет в базе данных.</div>
 
 
174
  {% endif %}
175
 
176
  <script>
@@ -182,7 +251,6 @@
182
  }
183
  }
184
  </script>
185
-
186
  </body>
187
 
188
 
 
46
  </style>
47
  </head>
48
  <body>
 
49
  <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
50
 
51
  <div class="buttons">
52
+ <button id="prev_week" onclick="navigateWeek(-1)" {% if week_number == 1 %}disabled{% endif %}>Предыдущая неделя</button>
53
+ <button id="next_week" onclick="navigateWeek(1)" {% if week_number == 30 %}disabled{% endif %}>Следующая неделя</button>
54
  </div>
55
 
56
  {% if data %}
57
+ <div class="graph-container">
58
+ <div class="graph" id="ph_chart"></div>
59
+ </div>
60
+ <div class="graph-container">
61
+ <div class="graph" id="ec_chart"></div>
62
+ </div>
63
+ <div class="graph-container">
64
+ <div class="graph" id="ts_chart"></div>
65
+ </div>
66
+ <div class="graph-container">
67
+ <div class="graph" id="ta_chart"></div>
68
+ </div>
69
+ <div class="graph-container">
70
+ <div class="graph" id="hdm_chart"></div>
71
+ </div>
72
+ <div class="graph-container">
73
+ <div class="graph" id="sven_chart"></div>
74
+ </div>
75
+ <div class="graph-container">
76
+ <div class="graph" id="pump_chart"></div>
77
+ </div>
78
 
79
  <script>
80
  const data = {{ data | tojson }};
81
+
82
+ // График pH
83
  Plotly.newPlot("ph_chart", [{
84
  x: data.dates,
85
  y: data.ph,
 
94
  title: `График pH за ${data.week}-ю неделю`,
95
  xaxis: { title: "Дата" },
96
  yaxis: { title: "Уровень pH" },
97
+ hovermode: "closest",
98
+ showlegend: false
99
  });
100
 
101
+ // График EC
102
  Plotly.newPlot("ec_chart", [{
103
  x: data.dates,
104
  y: data.ec,
 
113
  title: `График EC за ${data.week}-ю неделю`,
114
  xaxis: { title: "Дата" },
115
  yaxis: { title: "Уровень EC" },
116
+ hovermode: "closest",
117
+ showlegend: false
118
  });
119
 
120
+ // График температуры раствора (tS)
121
+ Plotly.newPlot("ts_chart", [{
 
 
 
 
 
 
 
 
 
 
122
  x: data.dates,
123
  y: data.tS,
124
  type: "scatter",
125
  mode: "lines+markers",
126
  name: "Температура раствора",
127
+ line: { color: "red" },
128
+ hovertemplate: data.days_of_week.map((day, index) =>
129
+ `День недели: ${day}<br>Температура раствора: %{y}°C<br>Дата: ${data.dates[index]}`
130
+ )
131
  }], {
132
+ title: `Температура раствора за ${data.week}-ю неделю`,
133
  xaxis: { title: "Дата" },
134
  yaxis: { title: "Температура (°C)" },
135
+ hovermode: "closest",
136
+ showlegend: false
137
  });
138
 
139
+ // График температуры воздуха (tA)
140
+ Plotly.newPlot("ta_chart", [{
141
  x: data.dates,
142
  y: data.tA,
143
  type: "scatter",
144
  mode: "lines+markers",
145
  name: "Температура воздуха",
146
+ line: { color: "orange" },
147
+ hovertemplate: data.days_of_week.map((day, index) =>
148
+ `День недели: ${day}<br>Температура воздуха: %{y}°C<br>Дата: ${data.dates[index]}`
149
+ )
150
  }], {
151
+ title: `Температура воздуха за ${data.week}-ю неделю`,
152
  xaxis: { title: "Дата" },
153
  yaxis: { title: "Температура (°C)" },
154
+ hovermode: "closest",
155
+ showlegend: false
156
  });
157
 
158
+ // График влажности воздуха (hDm)
159
+ Plotly.newPlot("hdm_chart", [{
160
  x: data.dates,
161
  y: data.hDm,
162
  type: "scatter",
163
  mode: "lines+markers",
164
  name: "Влажность воздуха",
165
+ line: { color: "green" },
166
+ hovertemplate: data.days_of_week.map((day, index) =>
167
+ `День недели: ${day}<br>Влажность воздуха: %{y}%<br>Дата: ${data.dates[index]}`
168
+ )
169
  }], {
170
+ title: `Влажность воздуха за ${data.week}-ю неделю`,
171
  xaxis: { title: "Дата" },
172
  yaxis: { title: "Влажность (%)" },
173
+ hovermode: "closest",
174
+ showlegend: false
175
  });
176
 
177
+ // График оборотов вентилятора (sVen)
178
+ Plotly.newPlot("sven_chart", [{
179
  x: data.dates,
180
  y: data.sVen,
181
  type: "scatter",
182
  mode: "lines+markers",
183
  name: "Обороты вентилятора",
184
+ line: { color: "purple" },
185
+ hovertemplate: data.days_of_week.map((day, index) =>
186
+ `День недели: ${day}<br>Обороты вентилятора: %{y} об/мин<br>Дата: ${data.dates[index]}`
187
+ )
188
  }], {
189
+ title: `Обороты вентилятора за ${data.week}-ю неделю`,
190
  xaxis: { title: "Дата" },
191
+ yaxis: { title: "Обороты (об/мин)" },
192
+ hovermode: "closest",
193
+ showlegend: false
194
  });
195
 
196
+ // График насосов (onA, onB, onC)
197
+ Plotly.newPlot("pump_chart", [
198
+ {
199
+ x: data.dates,
200
+ y: data.onA,
201
+ type: "scatter",
202
+ mode: "lines+markers",
203
+ name: "Насос A",
204
+ line: { color: "green" },
205
+ hovertemplate: data.days_of_week.map((day, index) =>
206
+ `День недели: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
207
+ )
208
+ },
209
+ {
210
+ x: data.dates,
211
+ y: data.onB,
212
+ type: "scatter",
213
+ mode: "lines+markers",
214
+ name: "Насос B",
215
+ line: { color: "brown" },
216
+ hovertemplate: data.days_of_week.map((day, index) =>
217
+ `День недели: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
218
+ )
219
+ },
220
+ {
221
+ x: data.dates,
222
+ y: data.onC,
223
+ type: "scatter",
224
+ mode: "lines+markers",
225
+ name: "Насос C",
226
+ line: { color: "orange" },
227
+ hovertemplate: data.days_of_week.map((day, index) =>
228
+ `День недели: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
229
+ )
230
+ }
231
+ ], {
232
+ title: `Работа насосов за ${data.week}-ю неделю`,
233
+ xaxis: { title: "Дата" },
234
+ yaxis: { title: "Время работы (сек)" },
235
+ hovermode: "closest",
236
+ showlegend: true // Включаем легенду для насосов
237
+ });
238
  </script>
 
239
  {% else %}
240
+ <div class="no-data-message">
241
+ {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
242
+ </div>
243
  {% endif %}
244
 
245
  <script>
 
251
  }
252
  }
253
  </script>
 
254
  </body>
255
 
256