Merge pull request #13 from maexled/feature/detailed-shelly-result

- add total returned power in shelly results 
- compute variable results on server side with database
- add gzip middleware
- add debug_toolbar

Author: maexled

.github/workflows/test.yml

@@ -28,4 +28,5 @@ jobs:
         pip install -r requirements.txt
     - name: Run Tests
       run: |
+        python manage.py collectstatic --noinput
         python manage.py test

Dockerfile

@@ -13,5 +13,5 @@ RUN pip install --no-cache-dir --upgrade pip && \
     pip install --no-cache-dir -r requirements.txt
 
 COPY . .
-CMD python manage.py makemigrations && python manage.py migrate && python manage.py collectstatic --noinput && gunicorn --bind=0.0.0.0:8000 --timeout 600 --workers=3 --threads=3 pim.wsgi:application
+CMD python manage.py makemigrations && python manage.py migrate && python manage.py collectstatic --noinput && gunicorn --bind=0.0.0.0:8000 --timeout 300 --workers=3 --threads=3 --max-requests 5 --max-requests-jitter 2 pim.wsgi:application
 EXPOSE 8000/tcp

interface/templates/mystrom_chart.html

@@ -26,12 +26,13 @@
         startQuery +
         endQuery,
         data => {
+          const results = data.results;
           const chartElement = document.getElementById(elementId + "-chart");
           const informationElement = document.getElementById(
             elementId + "-information"
           );
 
-          if (data.length == 0) {
+          if (results.length == 0) {
             informationElement.innerHTML =
               '<h3 class="text-danger">Query of device ' +
               id +
@@ -40,41 +41,43 @@
             resolve();
             return;
           }
-          const firstDate = new Date(data[0].date);
-          const lastDate = new Date(data[data.length - 1].date);
+          const firstDate = new Date(results[0].date);
+          const lastDate = new Date(results[results.length - 1].date);
+
           const differenceBetweenDates = lastDate - firstDate;
           const hoursDifferenceBetweedDates =
             differenceBetweenDates / 1000 / 60 / 60;
 
-          const powerList = data.map((entry) => entry.power);
-          const wsList = data.map((entry) => entry.ws);
-          const temperatureList = data.map((entry) => entry.temperature);
-          let total = 0;
-          for (let power of powerList) {
-            total += power;
-          }
-          const average = total / powerList.length;
-          const totalProducedkWh =
-            (average * hoursDifferenceBetweedDates) / 1000;
+          const powerList = results.map((entry) => entry.power);
+          const wsList = results.map((entry) => entry.ws);
+          const temperatureList = results.map((entry) => entry.temperature);
+          const totalPowerkWh = data.total_power / 1000;
 
           informationElement.innerHTML =
-            "<h5>Average of " +
-            hoursDifferenceBetweedDates.toFixed(2) +
-            " hours: " +
-            average.toFixed(2) +
-            "Wh</h5>";
-          informationElement.innerHTML +=
             "<h5>Leads to <b>" +
-            totalProducedkWh.toFixed(2) +
+            totalPowerkWh.toFixed(2) +
             "kWh</b> produced in " +
             hoursDifferenceBetweedDates.toFixed(2) +
             " hours</h5>";
 
-          const xAxisList = data.map((entry) => entry.date);
+          const xAxisList = results.map((entry) => entry.date);
           renderMystromChart(powerList, wsList, temperatureList, xAxisList, chartElement);
-          resolve();
         }
-      );
+      ).fail((jqXHR, textStatus, errorThrown) => {
+        console.log("Error: " + errorThrown);
+        console.log("Status: " + textStatus);
+        const informationElement = document.getElementById(
+          elementId + "-information"
+        );
+        if (informationElement)
+          informationElement.innerHTML =
+            '<h3 class="text-danger">Error while requesting data of device ' +
+            id +
+            "</h3>";
+      }).always(() => {
+        console.log("Request finished");
+        resolve();
+      });
     });
   }
 
@@ -175,7 +178,7 @@
    */
   function renderMystromChart(powerList, wsList, temperatureList, xAxisList, chartElement) {
     let data = [
-      xAxisList.map((date) => new Date(date)/1000),
+      xAxisList.map((date) => new Date(date) / 1000),
       powerList,
       wsList,
       temperatureList
@@ -190,7 +193,7 @@
       axes: [
         {
           label: "Time",
-          values: (u, vals, space) => vals.map(v => new Date(v*1000).toLocaleTimeString().substring(0, 5) + "h"),
+          values: (u, vals, space) => vals.map(v => new Date(v * 1000).toLocaleTimeString().substring(0, 5) + "h"),
         },
         {
           values: (u, vals, space) => vals.map(v => v.toFixed(1) + "W/h"),

interface/templates/results.html

@@ -29,7 +29,8 @@ <h1>Device Results</h1>
             <div class="form-row">
               <div class="form-group col-md-4">
                 <label for="start-date-{{ device.id }}">Start date</label>
-                <input placeholder="Select date" type="date" id="start-date-mystrom-{{ device.id }}" class="form-control">
+                <input placeholder="Select date" type="date" id="start-date-mystrom-{{ device.id }}"
+                  class="form-control">
               </div>
 
               <div class="form-group col-md-4">
@@ -44,7 +45,8 @@ <h1>Device Results</h1>
             </div>
             <div class="form-row">
               <div class="form-group col-md-9">
-                <button class="btn btn-info" id="mystrom-{{ device.id }}" onclick="toggleChart(this.id), 'mystrom'">
+                <button class="btn btn-info" id="mystrom-{{ device.id }}"
+                  onclick="toggleChart(this.id, '{{ device.name }}', 'mystrom')">
                   Show Chart for Device {{ device.id }}
                 </button>
               </div>
@@ -66,7 +68,8 @@ <h1>Device Results</h1>
             <div class="form-row">
               <div class="form-group col-md-4">
                 <label for="start-date-{{ device.id }}">Start date</label>
-                <input placeholder="Select date" type="date" id="start-date-shelly-{{ device.id }}" class="form-control">
+                <input placeholder="Select date" type="date" id="start-date-shelly-{{ device.id }}"
+                  class="form-control">
               </div>
 
               <div class="form-group col-md-4">
@@ -81,7 +84,8 @@ <h1>Device Results</h1>
             </div>
             <div class="form-row">
               <div class="form-group col-md-9">
-                <button class="btn btn-info" id="shelly-{{ device.id }}" onclick="toggleChart(this.id, 'shelly')">
+                <button class="btn btn-info" id="shelly-{{ device.id }}"
+                  onclick="toggleChart(this.id, '{{ device.name }}', 'shelly')">
                   Show Chart for Device {{ device.id }}
                 </button>
               </div>
@@ -101,8 +105,11 @@ <h1>Device Results</h1>
 {% endblock %}
 
 {% block scripts %}
+{% if CHART_TYPE == 'apexcharts' %}
 <script src="{% static 'js/apexcharts.min.js' %}"></script>
+{% elif CHART_TYPE == "uplot" %}
 <script src="{% static 'js/uPlot.iife.min.js' %}"></script>
+{% endif %}
 
 {% include "mystrom_chart.html" %}
 {% include "shelly_chart.html" %}
@@ -120,7 +127,7 @@ <h1>Device Results</h1>
     return date.toISOString();
   }
 
-  function toggleChart(id, device_type) {
+  function toggleChart(id, name, device_type) {
     const startDateElement = document.getElementById("start-date-" + id);
     const endDateElement = document.getElementById("end-date-" + id);
     const elementId = "chart-" + id;
@@ -153,21 +160,23 @@ <h1>Device Results</h1>
       let endDate = endDateElement.value;
       if (!startDate) {
         startDate = new Date();
-        startDate.setHours(0);
-        startDate.setMinutes(0);
-        startDate.setSeconds(0);
-        startDate = dateFormat(startDate);
-        startDateElement.value = startDate;
+      } else {
+        startDate = new Date(startDate);
       }
+      startDate.setHours(0);
+      startDate.setMinutes(0);
+      startDate.setSeconds(0);
+      startDate = dateFormat(startDate);
       if (!endDate) {
         endDate = new Date();
-        endDate.setHours(0);
-        endDate.setMinutes(0);
-        endDate.setSeconds(0);
         endDate.setDate(endDate.getDate() + 1);
-        endDate = dateFormat(endDate);
-        endDateElement.value = endDate;
+      } else {
+        endDate = new Date(endDate);
       }
+      endDate.setHours(0);
+      endDate.setMinutes(0);
+      endDate.setSeconds(0);
+      endDate = dateFormat(endDate);
 
       setTimeout(async () => {
         if (device_type == "shelly") {
@@ -176,6 +185,7 @@ <h1>Device Results</h1>
           await loadMystromChart(id, elementId, startDate, endDate);
         }
         chartElement.removeChild(loadingAnimation);
+        informationElement.innerHTML = "<h4>Information about device <b>" + name + "</b></h4>" + informationElement.innerHTML;
       })
 
       document.getElementById(id).innerHTML = "Hide Chart for Device " + id;

interface/templates/shelly_chart.html

@@ -26,12 +26,13 @@
         startQuery +
         endQuery,
         function (data) {
+          const results = data.results;
           const chartElement = document.getElementById(elementId + "-chart");
           const informationElement = document.getElementById(
             elementId + "-information"
           );
 
-          if (data.length == 0) {
+          if (results.length == 0) {
             informationElement.innerHTML =
               '<h3 class="text-danger">Query of device ' +
               id +
@@ -40,19 +41,19 @@
             resolve();
             return;
           }
-          const firstDate = new Date(data[0].date);
-          const lastDate = new Date(data[data.length - 1].date);
+          const firstDate = new Date(results[0].date);
+          const lastDate = new Date(results[results.length - 1].date);
           const differenceBetweenDates = lastDate - firstDate;
           const hoursDifferenceBetweedDates =
             differenceBetweenDates / 1000 / 60 / 60;
 
-          const powerList = data.map((entry) => entry.total_power);
+          const powerList = results.map((entry) => entry.total_power);
           let emeter0List, emeter1List, emeter2List = [];
           let emeterSeries = [];
-          if (data[0].emeters) {
-            emeter0List = data.map((entry) => entry.emeters[0] ? entry.emeters[0].power : 0);
-            emeter1List = data.map((entry) => entry.emeters[1] ? entry.emeters[1].power : 0);
-            emeter2List = data.map((entry) => entry.emeters[2] ? entry.emeters[2].power : 0);
+          if (results[0].emeters) {
+            emeter0List = results.map((entry) => entry.emeters[0] ? entry.emeters[0].power : 0);
+            emeter1List = results.map((entry) => entry.emeters[1] ? entry.emeters[1].power : 0);
+            emeter2List = results.map((entry) => entry.emeters[2] ? entry.emeters[2].power : 0);
             emeterSeries = [
               {
                 name: "Phase A",
@@ -68,32 +69,39 @@
               },
             ];
           }
-          let total = 0;
-          for (let power of powerList) {
-            total += power;
-          }
+          let total = powerList.reduce((a, b) => a + b, 0);
           const average = total / powerList.length;
-          const totalProducedkWh =
-            (average * hoursDifferenceBetweedDates) / 1000;
+          const totalProducedkWh = data.total_power / 1000;
+          const totalReturnedkWh = data.total_returned_power / 1000;
 
           informationElement.innerHTML =
-            "<h5>Average of " +
-            hoursDifferenceBetweedDates.toFixed(2) +
-            " hours: " +
-            average.toFixed(2) +
-            "Wh</h5>";
-          informationElement.innerHTML +=
             "<h5>Leads to <b>" +
             totalProducedkWh.toFixed(2) +
             "kWh</b> produced in " +
             hoursDifferenceBetweedDates.toFixed(2) +
             " hours</h5>";
+          informationElement.innerHTML +=
+            "Total returned power: <b>" +
+            totalReturnedkWh.toFixed(2) +
+            "kWh</b><br>";
 
-          const xAxisList = data.map((entry) => entry.date);
+          const xAxisList = results.map((entry) => entry.date);
           renderShellyChart(powerList, emeterSeries, xAxisList, chartElement);
-          resolve();
         }
-      );
+      ).fail((jqXHR, textStatus, errorThrown) => {
+        console.log("Error: " + errorThrown);
+        console.log("Status: " + textStatus);
+        const informationElement = document.getElementById(
+          elementId + "-information"
+        );
+        if (informationElement)
+          informationElement.innerHTML =
+            '<h3 class="text-danger">Error while requesting data of device ' +
+            id +
+            "</h3>";
+      }).always(() => {
+        resolve();
+      });
     });
   }
 
@@ -185,9 +193,9 @@
    * @param {Array} xAxisList the x axis list
    * @param {HTMLElement} chartElement the chart element to render the chart in
    */
-   function renderShellyChart(powerList, emeterSeries, xAxisList, chartElement) {
+  function renderShellyChart(powerList, emeterSeries, xAxisList, chartElement) {
     let data = [
-      xAxisList.map((date) => new Date(date)/1000),
+      xAxisList.map((date) => new Date(date) / 1000),
       powerList,
       ...emeterSeries.map(series => series.data)
     ];
@@ -201,7 +209,7 @@
       axes: [
         {
           label: "Time",
-          values: (u, vals, space) => vals.map(v => new Date(v*1000).toLocaleTimeString().substring(0, 5) + "h"),
+          values: (u, vals, space) => vals.map(v => new Date(v * 1000).toLocaleTimeString().substring(0, 5) + "h"),
         },
         {
           values: (u, vals, space) => vals.map(v => v.toFixed(1) + "W/h"),

interface/templates/single_result.html

@@ -4,26 +4,25 @@
 {% block content %}
 <div id="chartContainer">
   <div id="loading" class="d-flex justify-content-center">
-    <div
-      class="spinner-border"
-      style="width: 6rem; height: 6rem; margin-top: 100px"
-      role="status"
-    >
+    <div class="spinner-border" style="width: 6rem; height: 6rem; margin-top: 100px" role="status">
       <span class="sr-only">Loading...</span>
     </div>
   </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
+{% if CHART_TYPE == 'apexcharts' %}
 <script src="{% static 'js/apexcharts.min.js' %}"></script>
+{% elif CHART_TYPE == "uplot" %}
 <script src="{% static 'js/uPlot.iife.min.js' %}"></script>
+{% endif %}
 {% with device|classname as modelclass %}
 
 {% if modelclass == 'Shelly3EMDevice' %}
-  {% include "shelly_chart.html" %}
+{% include "shelly_chart.html" %}
 {% elif modelclass == "MystromDevice" %}
-  {% include "mystrom_chart.html" %}
+{% include "mystrom_chart.html" %}
 {% endif %}
 <script>
   const params = new URLSearchParams(window.location.search);
@@ -83,5 +82,5 @@
     loadingElement.remove();
   });
 </script>
-{% endwith %} 
-{% endblock %}
+{% endwith %}
+{% endblock %}