From 3c777aac27ebab62e3acaccf704112ebc72c6c0f Mon Sep 17 00:00:00 2001
From: "felix.gateru" <felix.gateru@gmail.com>
Date: Mon, 11 Mar 2024 17:13:12 +0300
Subject: [PATCH] Added data to multibar chart

Signed-off-by: felix.gateru <felix.gateru@gmail.com>
---
 ui/web/static/js/charts.js                    |  59 ++++
 .../templates/charts/multibarchartmodal.html  | 274 ++++++++++++++----
 2 files changed, 278 insertions(+), 55 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 379f79a7..eb2e2536 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -1068,6 +1068,65 @@ class MultiBarChart extends Echart {
         ]
     };
     multiBarChart.setOption(option);
+
+    horizontalBarChart.setOption(option);
+    var chartData = {
+      channels: '${this.chartData.channels}'.split(','),
+      publishers: '${this.chartData.things}'.split(','),
+      name: '${this.chartData.valueName}',
+      from: ${this.chartData.startTime},
+      to: ${this.chartData.stopTime},
+      aggregation: '${this.chartData.aggregationType}',
+      interval: '${this.chartData.interval}',
+      limit: 100,
+      barColors:'${this.chartData.barColors}'.split(',')
+    };
+    fetchData(multiBarChart, chartData);
+    async function fetchData(multiBarChart, chartData) {
+      try {
+          const plotData = [['value', 'thing']];
+  
+          for (let i = 0; i < chartData.channels.length; i++) {
+              const apiEndpoint = '${pathPrefix}/data?channel=' + chartData.channels[i] +
+                  '&name=' + chartData.name +
+                  '&from='+ chartData.from +
+                  '&to=' + chartData.to +
+                  '&aggregation=' + chartData.aggregation +
+                  '&limit=100' +
+                  '&interval=' + getInterval(chartData) +
+                  '&publisher=' + chartData.publishers[i];
+  
+              const response = await fetch(apiEndpoint);
+              if (!response.ok) {
+                  throw new Error('HTTP request failed with status:', response.status)
+              }
+              const data = await response.json();
+              if (data.messages != undefined && data.messages.length > 0) {
+                dataSeries[i] = {
+                    xAxisArray: [],
+                    dataPoints: []
+                };
+        
+                data.messages.forEach((message) => {
+                    dataSeries[i].xAxisArray.push(new Date(message.time).toLocaleTimeString());
+                    dataSeries[i].dataPoints.push(message.value);
+                });
+              plotData.push(dataSeries[i])
+            }
+          }
+          updateChart(horizontalBarChart, plotData);
+      } catch (error) {
+          console.error("Error fetching data:", error);
+      }
+    }
+  
+    function updateChart(multiBarChart, plotData) {
+      option = multiBarChart.getOption();
+      for (let i = 0; i < plotData.length; i++) {
+          option.series[i].data = plotData[i];
+      }
+      multiBarChart.setOption(option);
+    }
   `;
   }
 }
diff --git a/ui/web/templates/charts/multibarchartmodal.html b/ui/web/templates/charts/multibarchartmodal.html
index 127322a0..7fb53f98 100644
--- a/ui/web/templates/charts/multibarchartmodal.html
+++ b/ui/web/templates/charts/multibarchartmodal.html
@@ -15,12 +15,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
+          <button type="button" class="btn-close" onclick="closeForm()" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <!-- Tab Navs -->
@@ -54,7 +49,6 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
               </button>
             </li>
           </ul>
-          <!-- Single Form for both Data and Appearance Tabs -->
           <form id="create-multiBarChart-form">
             <div class="tab-content" id="myTabContent">
               <!-- Data Tab -->
@@ -64,43 +58,107 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
                 role="tabpanel"
                 aria-labelledby="data-tab"
               >
+                <div class="table-responsive-md mb-3 p-2 border rounded">
+                  <h5>Data Source</h5>
+                  <table class="table" id="multibarchart-data">
+                    <thead>
+                      <tr>
+                        <th scope="col">Channel</th>
+                        <th scope="col">Thing</th>
+                        <th scope="col">Value</th>
+                        <th scope="col">Color</th>
+                        <th scope="col"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <input
+                            type="text"
+                            pattern="{{ .UUIDPattern }}"
+                            class="form-control"
+                            name="channel"
+                            placeholder="channel ID"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            pattern="{{ .UUIDPattern }}"
+                            class="form-control"
+                            name="thing"
+                            placeholder="thing ID"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            class="form-control"
+                            name="seriesName"
+                            placeholder="series name"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <input type="color" class="form-control" name="barColor" />
+                        </td>
+                        <td class="text-center"></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <button
+                    type="button"
+                    class="btn body-button btn-sm"
+                    onclick="addMultiBarChartRow()"
+                  >
+                    Add data source
+                  </button>
+                </div>
                 <div class="mb-3">
-                  <label for="channel-id" class="form-label">Channel ID</label>
+                  <label for="value-name" class="form-label">Value name</label>
                   <input
                     type="text"
-                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
-                    name="channel"
-                    id="channel-id"
-                    placeholder="Enter the channel ID"
+                    name="valueName"
+                    id="value-name"
+                    placeholder="Enter the value name eg. temperature"
                     required
                   />
-                  <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>
+                  <label for="start-time" class="form-label">Start time</label>
                   <input
-                    type="text"
-                    pattern="{{ .UUIDPattern }}"
+                    type="datetime-local"
                     class="form-control mb-3"
-                    name="thing"
-                    id="thing-id"
-                    placeholder="Enter the thing IDs"
+                    name="startTime"
+                    id="start-time"
                     required
                   />
-                  <div class="invalid-feedback">Please enter a valid uuid</div>
+                  <div class="invalid-time"></div>
                 </div>
                 <div class="mb-3">
-                  <label for="value-name" class="form-label">Value name</label>
+                  <label for="stop-time" class="form-label">Stop time</label>
                   <input
-                    type="text"
+                    type="datetime-local"
                     class="form-control mb-3"
-                    name="valueName"
-                    id="value-name"
-                    placeholder="Enter the value name eg. temperature"
+                    name="stopTime"
+                    id="stop-time"
                     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
@@ -114,17 +172,6 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple 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
@@ -178,14 +225,7 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
           </form>
         </div>
         <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            id="close-multiBarChart-button"
-            data-bs-dismiss="modal"
-          >
-            Close
-          </button>
+          <button type="button" class="btn btn-secondary" onclick="closeForm()">Close</button>
           <button type="button" class="btn body-button" id="create-multiBarChart-button">
             Create Chart
           </button>
@@ -194,6 +234,23 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
     </div>
   </div>
   <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      document.getElementById("multiBarChartModal").addEventListener("shown.bs.modal", function () {
+        const form = document.getElementById("create-multiBarChart-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);
+      });
+    });
     // Multibar chart form
     document.getElementById("create-multiBarChart-button").addEventListener("click", function () {
       const form = document.getElementById("create-multiBarChart-form");
@@ -204,26 +261,133 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
 
       // Create an object to store the form data
       let chartData = {};
+      const channels = [];
+      const things = [];
+      const barColors = [];
       let formData = new FormData(form);
-      for (var pair of formData.entries()) {
-        chartData[pair[0]] = pair[1];
+      for (let [name, value] of formData) {
+        switch (name) {
+          case "startTime":
+          case "stopTime":
+            const inputDate = new Date(value);
+            chartData[name] = inputDate.getTime();
+            break;
+          case "channel":
+            channels.push(value);
+            break;
+          case "thing":
+            things.push(value);
+            break;
+          case "barColor":
+            barColors.push(value);
+            break;
+          default:
+            chartData[name] = value;
+            break;
+        }
+      }
+
+      if (chartData.stopTime <= chartData.startTime) {
+          const invalidTimeFeedback = form.querySelector(".invalid-time");
+          invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
+          invalidTimeFeedback.style.color = "red";
+          const invalidTimeInput = form.querySelector("#stop-time");
+          invalidTimeInput.classList.remove("was-validated");
+          invalidTimeInput.classList.add("is-invalid");
+          return;
       }
 
       var widgetID = "multiBarChart-" + Date.now();
 
       chartData["Type"] = "multiBarChart";
-      addWidget(chartData, widgetID);
-      metadataBuffer[widgetID] = chartData;
-
-      form.reset();
-      form.classList.remove("was-validated");
-      bootstrap.Modal.getInstance(document.getElementById("multiBarChartModal")).hide();
+      chartData["channels"] = channels;
+      chartData["things"] = things;
+      chartData["barColors"] = barColors;
+      console.log("Chart data: ", chartData)
+      // addWidget(chartData, widgetID);
+      // metadataBuffer[widgetID] = chartData;
+      closeForm();
     });
 
-    document.getElementById("close-multiBarChart-button").addEventListener("click", function () {
+    function addMultiBarChartRow() {
+      const table = document.getElementById("multibarchart-data");
+      const newRow = table.insertRow(-1);
+      newRow.innerHTML =
+      ` <td>
+            <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="channel"
+              placeholder="channel ID" required />
+        </td>
+        <td>
+          <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="thing"
+            placeholder="thing ID" required />
+       </td>
+        <td>
+          <input type="text" class="form-control" name="seriesName"
+            placeholder="series name" required />
+        </td>
+        <td>
+          <input type="color" class="form-control" name="barColor" />
+        </td>
+        <td class="text-center">
+          <button type="button" class="btn btn-sm" onclick="removeMultiBarChartRow(this)">
+            <i class="fas fa-trash-alt"></i>
+          </button>
+        </td>`;
+    }
+
+    function removeMultiBarChartRow(button) {
+      const row = button.parentNode.parentNode;
+      row.parentNode.removeChild(row);
+    }
+
+    function resetTable() {
+      const table = document.getElementById("multibarchart-data");
+      table.innerHTML = ` <thead>
+        <tr>
+          <th scope="col">Channel</th>
+          <th scope="col">Thing</th>
+          <th scope="col">Value</th>
+          <th scope="col">Color</th>
+          <th scope="col"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input
+              type="text" pattern="{{ .UUIDPattern }}" class="form-control"
+              name="channel" placeholder="channel ID" required
+            />
+          </td>
+          <td>
+            <input
+              type="text" pattern="{{ .UUIDPattern }}" class="form-control"
+              name="thing" placeholder="thing ID" required
+            />
+          </td>
+          <td>
+            <input
+              type="text" class="form-control" name="seriesName"
+              placeholder="series name" required
+            />
+          </td>
+          <td>
+            <input type="color" class="form-control" name="barColor" />
+          </td>
+          <td class="text-center">
+          </td>
+        </tr>
+      </tbody>`;
+    }
+
+    function closeForm() {
       const form = document.getElementById("create-multiBarChart-form");
-      form.reset();
       form.classList.remove("was-validated");
-    });
+      form.querySelector(".invalid-time").innerHTML = "";
+      form.querySelector("#stop-time").classList.remove("is-invalid");
+      form.reset();
+      resetTable();
+      bootstrap.Modal.getInstance(document.getElementById("multiBarChartModal")).hide();
+    }
   </script>
 {{ end }}