Hugging Face's logo

Spaces:
DmitrMakeev
/
flask_inference_api_g
Running

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

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. plot_ph_week.html +42 -143
plot_ph_week.html CHANGED
@@ -46,161 +46,59 @@
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,
86
- type: "scatter",
87
- mode: "lines+markers",
88
- name: "pH",
89
- line: { color: "blue" },
90
- hovertemplate: data.days_of_week.map((day, index) =>
91
- `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
92
- )
93
- }], {
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,
105
- type: "scatter",
106
- mode: "lines+markers",
107
- name: "EC",
108
- line: { color: "blue" },
109
- hovertemplate: data.days_of_week.map((day, index) =>
110
- `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
111
- )
112
- }], {
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]}`
@@ -211,7 +109,6 @@
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]}`
@@ -222,20 +119,20 @@
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 'Данных за эту неделю нет в базе данных.' }}
@@ -251,8 +148,10 @@
251
  }
252
  }
253
  </script>
 
254
  </body>
255
 
256
 
257
 
 
258
  </html>
 
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
+ function createChart(id, yData, title, yLabel, color) {
70
+ Plotly.newPlot(id, [{
71
+ x: data.dates,
72
+ y: yData,
73
+ type: "scatter",
74
+ mode: "lines+markers",
75
+ line: { color: color },
76
+ hovertemplate: data.days_of_week.map((day, index) =>
77
+ `День недели: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
78
+ )
79
+ }], {
80
+ title: title,
81
+ xaxis: { title: "Дата" },
82
+ yaxis: { title: yLabel, titlefont: { size: 14 } },
83
+ hovermode: "closest",
84
+ showlegend: false
85
+ });
86
+ }
87
 
88
+ createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
89
+ createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
90
+ createChart("ts_chart", data.tS, `Температура раствора`, "Температура (°C)", "red");
91
+ createChart("ta_chart", data.tA, `Температура воздуха`, "Температура (°C)", "orange");
92
+ createChart("hdm_chart", data.hDm, `Влажность воздуха`, "Влажность (%)", "purple");
93
+ createChart("sven_chart", data.sVen, `Обороты вентилятора`, "Обороты (RPM)", "brown");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
 
95
+ // График насосов без легенды
96
  Plotly.newPlot("pump_chart", [
97
  {
98
  x: data.dates,
99
  y: data.onA,
100
  type: "scatter",
101
  mode: "lines+markers",
 
102
  line: { color: "green" },
103
  hovertemplate: data.days_of_week.map((day, index) =>
104
  `День недели: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
 
109
  y: data.onB,
110
  type: "scatter",
111
  mode: "lines+markers",
 
112
  line: { color: "brown" },
113
  hovertemplate: data.days_of_week.map((day, index) =>
114
  `День недели: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
 
119
  y: data.onC,
120
  type: "scatter",
121
  mode: "lines+markers",
 
122
  line: { color: "orange" },
123
  hovertemplate: data.days_of_week.map((day, index) =>
124
  `День недели: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
125
  )
126
  }
127
  ], {
128
+ title: `График работы насосов за ${data.week}-ю неделю`,
129
  xaxis: { title: "Дата" },
130
+ yaxis: { title: "Состояние насосов" },
131
  hovermode: "closest",
132
+ showlegend: false // ОТКЛЮЧИЛ ЛЕГЕНДУ
133
  });
134
  </script>
135
+
136
  {% else %}
137
  <div class="no-data-message">
138
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
 
148
  }
149
  }
150
  </script>
151
+
152
  </body>
153
 
154
 
155
 
156
+
157
  </html>