api_g

Running

App Files Files Community

DmitrMakeev commited on Mar 21

Commit

ee71bfe

verified ·

1 Parent(s): 0dada52

Update plot_ph_week.html

Browse files

Files changed (1) hide show

plot_ph_week.html +42 -143

plot_ph_week.html CHANGED Viewed

@@ -46,161 +46,59 @@
     </style>
 </head>
 <body>
     <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
     <div class="buttons">
-        <button id="prev_week" onclick="navigateWeek(-1)" {% if week_number == 1 %}disabled{% endif %}>Предыдущая неделя</button>
-        <button id="next_week" onclick="navigateWeek(1)" {% if week_number == 30 %}disabled{% endif %}>Следующая неделя</button>
     </div>
     {% if data %}
-        <div class="graph-container">
-            <div class="graph" id="ph_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="ec_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="ts_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="ta_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="hdm_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="sven_chart"></div>
-        </div>
-        <div class="graph-container">
-            <div class="graph" id="pump_chart"></div>
-        </div>
         <script>
             const data = {{ data | tojson }};
-            // График pH
-            Plotly.newPlot("ph_chart", [{
-                x: data.dates,
-                y: data.ph,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "pH",
-                line: { color: "blue" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `График pH за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Уровень pH" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График EC
-            Plotly.newPlot("ec_chart", [{
-                x: data.dates,
-                y: data.ec,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "EC",
-                line: { color: "blue" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `График EC за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Уровень EC" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График температуры раствора (tS)
-            Plotly.newPlot("ts_chart", [{
-                x: data.dates,
-                y: data.tS,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "Температура раствора",
-                line: { color: "red" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Температура раствора: %{y}°C<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `Темпера��ура раствора за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Температура (°C)" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График температуры воздуха (tA)
-            Plotly.newPlot("ta_chart", [{
-                x: data.dates,
-                y: data.tA,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "Температура воздуха",
-                line: { color: "orange" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Температура воздуха: %{y}°C<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `Температура воздуха за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Температура (°C)" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График влажности воздуха (hDm)
-            Plotly.newPlot("hdm_chart", [{
-                x: data.dates,
-                y: data.hDm,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "Влажность воздуха",
-                line: { color: "green" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Влажность воздуха: %{y}%<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `Влажность воздуха за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Влажность (%)" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График оборотов вентилятора (sVen)
-            Plotly.newPlot("sven_chart", [{
-                x: data.dates,
-                y: data.sVen,
-                type: "scatter",
-                mode: "lines+markers",
-                name: "Обороты вентилятора",
-                line: { color: "purple" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День недели: ${day}<br>Обороты вентилятора: %{y} об/мин<br>Дата: ${data.dates[index]}`
-                )
-            }], {
-                title: `Обороты вентилятора за ${data.week}-ю неделю`,
-                xaxis: { title: "Дата" },
-                yaxis: { title: "Обороты (об/мин)" },
-                hovermode: "closest",
-                showlegend: false
-            });
-            // График насосов (onA, onB, onC)
             Plotly.newPlot("pump_chart", [
                 {
                     x: data.dates,
                     y: data.onA,
                     type: "scatter",
                     mode: "lines+markers",
-                    name: "Насос A",
                     line: { color: "green" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
@@ -211,7 +109,6 @@
                     y: data.onB,
                     type: "scatter",
                     mode: "lines+markers",
-                    name: "Насос B",
                     line: { color: "brown" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
@@ -222,20 +119,20 @@
                     y: data.onC,
                     type: "scatter",
                     mode: "lines+markers",
-                    name: "Насос C",
                     line: { color: "orange" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
                     )
                 }
             ], {
-                title: `Работа насосов за ${data.week}-ю неделю`,
                 xaxis: { title: "Дата" },
-                yaxis: { title: "Время работы (сек)" },
                 hovermode: "closest",
-                showlegend: true  // Включаем легенду для насосов
             });
         </script>
     {% else %}
         <div class="no-data-message">
             {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
@@ -251,8 +148,10 @@
             }
         }
     </script>
 </body>
 </html>

     </style>
 </head>
 <body>
     <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
     <div class="buttons">
+        <button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
+        <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
     </div>
     {% if data %}
+        <div class="graph-container"><div class="graph" id="ph_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ec_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="pump_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ts_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ta_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="hdm_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
         <script>
             const data = {{ data | tojson }};
+            function createChart(id, yData, title, yLabel, color) {
+                Plotly.newPlot(id, [{
+                    x: data.dates,
+                    y: yData,
+                    type: "scatter",
+                    mode: "lines+markers",
+                    line: { color: color },
+                    hovertemplate: data.days_of_week.map((day, index) =>
+                        `День недели: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
+                    )
+                }], {
+                    title: title,
+                    xaxis: { title: "Дата" },
+                    yaxis: { title: yLabel, titlefont: { size: 14 } },
+                    hovermode: "closest",
+                    showlegend: false
+                });
+            }
+            createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
+            createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
+            createChart("ts_chart", data.tS, `Температура раствора`, "Температура (°C)", "red");
+            createChart("ta_chart", data.tA, `Температура воздуха`, "Температура (°C)", "orange");
+            createChart("hdm_chart", data.hDm, `Влажность воздуха`, "Влажность (%)", "purple");
+            createChart("sven_chart", data.sVen, `Обороты вентилятора`, "Обороты (RPM)", "brown");
+            // График насосов без легенды
             Plotly.newPlot("pump_chart", [
                 {
                     x: data.dates,
                     y: data.onA,
                     type: "scatter",
                     mode: "lines+markers",
                     line: { color: "green" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
                     y: data.onB,
                     type: "scatter",
                     mode: "lines+markers",
                     line: { color: "brown" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
                     y: data.onC,
                     type: "scatter",
                     mode: "lines+markers",
                     line: { color: "orange" },
                     hovertemplate: data.days_of_week.map((day, index) =>
                         `День недели: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
                     )
                 }
             ], {
+                title: `График работы насосов за ${data.week}-ю неделю`,
                 xaxis: { title: "Дата" },
+                yaxis: { title: "Состояние насосов" },
                 hovermode: "closest",
+                showlegend: false  // ОТКЛЮЧИЛ ЛЕГЕНДУ
             });
         </script>
     {% else %}
         <div class="no-data-message">
             {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
             }
         }
     </script>
 </body>
 </html>