add data source

Signed-off-by: Musilah <[email protected]>
absmach · Mar 18, 2024 · 0f82ec4 · 0f82ec4
1 parent e258010
commit 0f82ec4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -1130,6 +1130,9 @@ class MultiGaugeChart extends Echart {
 
   #generateScript() {
     let gaugeLabel = this.chartData.gaugeLabel.split(",");
+    const channels = JSON.stringify(this.chartData.channel);
+    const things = JSON.stringify(this.chartData.thing);
+    const valueName = JSON.stringify(this.chartData.valueName);
     return `
     var multiGaugeChart = echarts.init(document.getElementById("${this.ID}"));
     var gaugeData = [

diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
@@ -64,6 +64,60 @@ <h5 class="modal-title" id="multiGaugeModalLabel">Multi Gauge 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="multigauge-data">
+                    <thead>
+                      <tr>
+                        <th scope="col">Channel</th>
+                        <th scope="col">Thing</th>
+                        <th scope="col">Value</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
+                          />
+                          <div class="invalid-feedback">Please enter a valid uuid</div>
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            class="form-control"
+                            name="valueName"
+                            placeholder="Value name"
+                            required
+                          />
+                        </td>
+                        <td>
+                          <button type="button" class="btn btn-sm" onclick="deleteRow(this)">
+                            <i class="fas fa-trash-alt"></i>
+                          </button>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <button type="button" class="btn body-button btn-sm" onclick="addRow()">
+                    Add Source
+                  </button>
                 <div class="mb-3">
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input