MG-211 - Update time series bar chart fo fetch data from back-end (#224)

* Add data to bar charts Signed-off-by: felix.gateru <felix.gateru@gmail.com> * Add data to time series bar chart Signed-off-by: felix.gateru <felix.gateru@gmail.com> * Populate data Signed-off-by: 1998-felix <felix.gateru@gmail.com> * fix: enable multiple bar charts Signed-off-by: 1998-felix <felix.gateru@gmail.com> * feat: Add toggle update interval Signed-off-by: 1998-felix <felix.gateru@gmail.com> * feat: Add toggle update interval Signed-off-by: 1998-felix <felix.gateru@gmail.com> * fix: Fix bar chart not displaying Signed-off-by: 1998-felix <felix.gateru@gmail.com> * Refactor code Signed-off-by: 1998-felix <felix.gateru@gmail.com> * feat: Add axis tooltip Signed-off-by: 1998-felix <felix.gateru@gmail.com> --------- Signed-off-by: felix.gateru <felix.gateru@gmail.com> Signed-off-by: 1998-felix <felix.gateru@gmail.com>
absmach · Mar 21, 2024 · 2d2b4e5 · 2d2b4e5
1 parent 72bd62e
commit 2d2b4e5
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 23 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -117,33 +117,91 @@ class TimeSeriesBarChart extends Echart {
         left: 'center',
         show: true
       },
+      tooltip: {
+        trigger: 'axis',
+      },
       xAxis: {
         type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        data: [],
         name: '${this.chartData.xAxisLabel}',
         nameLocation: 'middle',
+        min: '${new Date(this.chartData.startTime)}',
+        max: '${new Date(this.chartData.stopTime)}',
         nameGap: 35
       },
       yAxis: {
         type: 'value',
         name: '${this.chartData.yAxisLabel}',
         nameLocation: 'middle',
-        nameGap: 35
+        nameGap: 25
       },
       legend: {
         show: true,
         left: 'right',
       },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'bar',
-            name: '${this.chartData.seriesName}'
-          }
-        ]
+      series: [
+        {
+          data:  [],
+          type: 'bar',
+          name: '${this.chartData.seriesName}'
+        }
+      ]
     };
 
-    barChart.setOption(option);`;
+    barChart.setOption(option);
+    
+    var chartData = {
+      channel: '${this.chartData.channel}',
+      publisher: '${this.chartData.thing}',
+      name: '${this.chartData.valueName}',
+      from: ${this.chartData.startTime},
+      to: ${this.chartData.stopTime},
+      aggregation: '${this.chartData.aggregationType}',
+      limit: 100,
+      interval : '${this.chartData.updateInterval}'
+    }
+    getData(barChart, chartData);
+
+    async function getData(barChart, chartData) {
+        try {
+          const apiEndpoint = "${pathPrefix}/data?channel=" + chartData.channel +
+          "&publisher=" + chartData.publisher +
+          "&name=" + chartData.name +
+          "&from=" + chartData.from +
+          "&to=" + chartData.to +
+          "&aggregation=" + chartData.aggregation +
+          "&limit=" + chartData.limit +
+          "&interval=" + chartData.interval;
+
+          const response = await fetch(apiEndpoint);
+          if (!response.ok) {
+            throw new Error("HTTP request failed with status: " + response.status);
+          }
+          const data = await response.json();
+          const xAxisArray = [];
+          const yAxisArray = [];
+          if (data.messages != undefined && data.messages.length > 0) {
+            data.messages.forEach((message) => {
+              xAxisArray.push(new Date(message.time).toLocaleTimeString());
+              yAxisArray.push(message.value);
+            });
+          }
+          updateChart(barChart, xAxisArray, yAxisArray);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          setTimeout(function () {
+            getData(barChart, chartData);
+          }, 20000);
+        } 
+      }
+  
+      function updateChart(barChart, xAxisArray, yAxisArray) {
+        const option = barChart.getOption();
+        option.series[0].data = yAxisArray.reverse();
+        option.xAxis[0].data = xAxisArray.reverse();
+        barChart.setOption(option);
+     }
+    `;
   }
 }
 

diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html
@@ -121,6 +121,17 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
                     required
                   />
                 </div>
+                <div class="mb-3">
+                  <label for="aggregation-type" class="form-label">Aggregation</label>
+                  <select class="form-select mb-3" name="aggregationType" id="aggregation-type">
+                    <option value="">Select an aggregation type</option>
+                    <option value="MAX">Maximum</option>
+                    <option value="MIN">Minimum</option>
+                    <option value="SUM">Sum</option>
+                    <option value="COUNT">Count</option>
+                    <option value="AVG">Average</option>
+                  </select>
+                </div>
                 <div class="mb-3">
                   <label for="update-interval" class="form-label">Update interval</label>
                   <input
@@ -134,17 +145,6 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
                   />
                   <div class="invalid-feedback">Please enter a valid interval</div>
                 </div>
-                <div class="mb-3">
-                  <label for="aggregation-type" class="form-label">Aggregation</label>
-                  <select class="form-select mb-3" name="aggregationType" id="aggregation-type">
-                    <option value="" disabled>Select an aggregation type</option>
-                    <option value="MAX">Maximum</option>
-                    <option value="MIN">Minimum</option>
-                    <option value="SUM">Sum</option>
-                    <option value="COUNT">Count</option>
-                    <option value="AVG">Average</option>
-                  </select>
-                </div>
               </div>
               <!-- Appearance Tab -->
               <div
@@ -214,6 +214,24 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
     </div>
   </div>
   <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      document.getElementById("barChartModal").addEventListener("shown.bs.modal", function () {
+        const form = document.getElementById("create-barChart-form");
+        const aggregationTypeInput = form.querySelector("#aggregation-type");
+        const updateIntervalInput = form.querySelector("#update-interval");
+        updateIntervalInput.disabled = true;
+
+        function toggleUpdateInterval() {
+          if (aggregationTypeInput.value === "") {
+            updateIntervalInput.disabled = true;
+          } else {
+            updateIntervalInput.disabled = false;
+          }
+        }
+        aggregationTypeInput.addEventListener("change", toggleUpdateInterval);
+      });
+    });
+
     // bar chart form
     document.getElementById("create-barChart-button").addEventListener("click", function () {
       const form = document.getElementById("create-barChart-form");
@@ -225,8 +243,13 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
       // Create an object to store the form data
       let chartData = {};
       let formData = new FormData(form);
-      for (var pair of formData.entries()) {
-        chartData[pair[0]] = pair[1];
+      for (let [name, value] of formData) {
+        if (name === "startTime" || name === "stopTime") {
+          const inputDate = new Date(value);
+          chartData[name] = inputDate.getTime();
+        } else {
+          chartData[name] = value;
+        }
       }
 
       if (chartData.stopTime <= chartData.startTime) {