DmitrMakeev commited on
Commit
e9da9c9
·
verified ·
1 Parent(s): 88b14cd

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +66 -61
plot_week.html CHANGED
@@ -186,71 +186,76 @@ document.addEventListener("DOMContentLoaded", function () {
186
  </div>
187
 
188
  <script>
189
- const data = {{ data | tojson }};
190
-
191
- function createChart(id, yData, title, yLabel, color) {
192
- Plotly.newPlot(id, [{
193
- x: data.dates,
194
- y: yData,
195
- type: "scatter",
196
- mode: "lines+markers",
197
- line: { color: color },
198
- hovertemplate: data.days_of_week.map((day, index) =>
199
- `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
200
- )
201
- }], {
202
- title: title,
203
- xaxis: { title: "", showticklabels: false },
204
- yaxis: { title: yLabel, titlefont: { size: 14 } },
205
- hovermode: "closest",
206
- showlegend: false
207
- });
208
- }
209
- createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
210
- createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
211
- createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
212
- createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
213
- createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
214
- createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
215
- Plotly.newPlot("pump_chart", [
216
- {
217
- x: data.dates,
218
- y: data.onA,
219
- type: "scatter",
220
- mode: "lines+markers",
221
- line: { color: "green" },
222
- hovertemplate: data.days_of_week.map((day, index) =>
223
- `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
224
- )
225
- },
226
- {
227
- x: data.dates,
228
- y: data.onB,
229
- type: "scatter",
230
- mode: "lines+markers",
231
- line: { color: "brown" },
232
- hovertemplate: data.days_of_week.map((day, index) =>
233
- `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
234
- )
235
- },
236
- {
237
- x: data.dates,
238
- y: data.onC,
239
- type: "scatter",
240
- mode: "lines+markers",
241
- line: { color: "orange" },
242
- hovertemplate: data.days_of_week.map((day, index) =>
243
- `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
244
- )
245
- }
246
- ], {
247
- title: `Интервал дозирования насосов для ${data.week}-ой недели`,
248
  xaxis: { title: "", showticklabels: false },
249
- yaxis: { title: "Время ВКЛ(сек.)" },
250
  hovermode: "closest",
251
  showlegend: false
252
  });
253
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  {% else %}
255
  <div class="no-data-message">
256
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
 
186
  </div>
187
 
188
  <script>
189
+ const data = {{ data | tojson }};
190
+
191
+ function createChart(id, yData, title, yLabel, color, parameterName, unit) {
192
+ Plotly.newPlot(id, [{
193
+ x: data.dates,
194
+ y: yData,
195
+ type: "scatter",
196
+ mode: "lines+markers",
197
+ line: { color: color },
198
+ hovertemplate: data.days_of_week.map((day, index) =>
199
+ `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>${parameterName}: %{y} ${unit}<br>Дата: ${data.dates[index]}<extra></extra>`
200
+ )
201
+ }], {
202
+ title: title,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  xaxis: { title: "", showticklabels: false },
204
+ yaxis: { title: yLabel, titlefont: { size: 14 } },
205
  hovermode: "closest",
206
  showlegend: false
207
  });
208
+ }
209
+
210
+ // Создание графиков с правильными подсказками
211
+ createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue", "pH", "");
212
+ createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue", "EC", "мкСм/см");
213
+ createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple", "Температура раствора", "°C");
214
+ createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple", "Температура воздуха", "°C");
215
+ createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple", "Влажность воздуха", "%");
216
+ createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple", "Обороты вентилятора", "%");
217
+
218
+ // График насосов
219
+ Plotly.newPlot("pump_chart", [
220
+ {
221
+ x: data.dates,
222
+ y: data.onA,
223
+ type: "scatter",
224
+ mode: "lines+markers",
225
+ line: { color: "green" },
226
+ hovertemplate: data.days_of_week.map((day, index) =>
227
+ `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}<extra></extra>`
228
+ )
229
+ },
230
+ {
231
+ x: data.dates,
232
+ y: data.onB,
233
+ type: "scatter",
234
+ mode: "lines+markers",
235
+ line: { color: "brown" },
236
+ hovertemplate: data.days_of_week.map((day, index) =>
237
+ `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}<extra></extra>`
238
+ )
239
+ },
240
+ {
241
+ x: data.dates,
242
+ y: data.onC,
243
+ type: "scatter",
244
+ mode: "lines+markers",
245
+ line: { color: "orange" },
246
+ hovertemplate: data.days_of_week.map((day, index) =>
247
+ `Неделя: ${data.week}<br>День: ${day}<br>Время системы: ${data.sus[index]}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}<extra></extra>`
248
+ )
249
+ }
250
+ ], {
251
+ title: `Интервал дозирования насосов для ${data.week}-ой недели`,
252
+ xaxis: { title: "", showticklabels: false },
253
+ yaxis: { title: "Время ВКЛ(сек.)" },
254
+ hovermode: "closest",
255
+ showlegend: false
256
+ });
257
+ </script>
258
+
259
  {% else %}
260
  <div class="no-data-message">
261
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}