Add data to horizontal bar chart

Signed-off-by: felix.gateru <[email protected]>
absmach · Mar 15, 2024 · 7f8d8aa · 7f8d8aa
1 parent 0bb1df1
commit 7f8d8aa
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 43 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -706,13 +706,7 @@ class HorizontalBarChart extends Echart {
           },
           dataset: {
             source: [
-              ['score', 'amount', 'product'],
-              [79.3,85212, 'thing1'],
-              [57.1, 78254, 'thing2'],
-              [14.4, 41032, 'thing3'],
-              [30.1, 12755, 'thing4'],
-              [18.7, 20145, 'thing5'],
-              [88.1, 89146, 'thing6'],
+              [],
             ]
           },
           grid: { containLabel: true },
@@ -731,7 +725,7 @@ class HorizontalBarChart extends Echart {
           visualMap: {
             orient: 'horizontal',
             left: 'center',
-            min: 10,
+            min: 0,
             max: 100,
             text: ['High temperature', 'Low temperature'],
             // Map the score column to color
@@ -751,7 +745,56 @@ class HorizontalBarChart extends Echart {
           ]
         };
 
-      horizontalBarChart.setOption(option);`;
+      horizontalBarChart.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 : getInterval(),
+      }
+      
+      async getData(horizontalBarChart, chartData) {
+        try {
+          const apiEndpoint = "/data?channel=" + chartData.channel +
+          "&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('API request failed with status ${response.status}');
+          }
+    
+          const data = await response.json();
+          updateChart(data);
+    
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          // Handle the error (e.g., display an error message)
+        } finally {
+          // Schedule the next update
+          setTimeout(() => this.fetchDataAndUpdate(), 5000); // Example: 5 seconds 
+        }
+      }
+    
+      updateChart(data) {
+        const barChart = echarts.init(document.getElementById(this.ID));
+        const option = barChart.getOption(); // Get the existing options
+        
+        option.series[0].data = data.seriesData; 
+    
+        barChart.setOption(option); // Update the chart
+      }
+    }
+      `;
   }
 }
 

diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -76,19 +76,6 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                   />
                   <div class="invalid-feedback">Please enter a valid uuid</div>
                 </div>
-                <div class="mb-3">
-                  <label for="thing-id" class="form-label">Thing IDs</label>
-                  <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
-                    class="form-control mb-3"
-                    name="thing"
-                    id="thing-id"
-                    placeholder="Enter the thing IDs"
-                    required
-                  />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
-                </div>
                 <div class="mb-3">
                   <label for="value-name" class="form-label">Value name</label>
                   <input
@@ -100,19 +87,6 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                     required
                   />
                 </div>
-                <div class="mb-3">
-                  <label for="update-interval" class="form-label">Update interval</label>
-                  <input
-                    type="text"
-                    pattern="{{ .IntervalPattern }}"
-                    class="form-control mb-3"
-                    name="updateInterval"
-                    id="update-interval"
-                    placeholder="Enter the update interval, eg. 5s, 10m, 1h, 1d"
-                    required
-                  />
-                  <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">
@@ -197,7 +171,12 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
         let chartData = {};
         let formData = new FormData(form);
         for (var pair of formData.entries()) {
-          chartData[pair[0]] = pair[1];
+          if (pair[0] === "startTime" || pair[0] === "stopTime") {
+            const inputDate = new Date(pair[1]);
+            chartData[pair[0]] = inputDate.getTime() * 1e6;
+          } else {
+            chartData[pair[0]] = pair[1];
+          }
         }
 
         var widgetID = "horizontalBarchart-" + Date.now();
@@ -211,12 +190,10 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
         bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
       });
 
-    document
-      .getElementById("horizontalBarChartModal")
-      .addEventListener("hidden.bs.modal", function () {
-        const form = document.getElementById("create-horizontalBarChart-form");
-        form.reset();
-        form.classList.remove("was-validated");
-      });
+    document.getElementById("horizontalBarChartModal").addEventListener("click", function () {
+      const form = document.getElementById("create-horizontalBarChart-form");
+      form.reset();
+      form.classList.remove("was-validated");
+    });
   </script>
 {{ end }}