From 0f82ec455d6faba136456aeee209e9f22bb0820e Mon Sep 17 00:00:00 2001
From: Musilah <nataleigh.nk@gmail.com>
Date: Mon, 18 Mar 2024 17:37:37 +0300
Subject: [PATCH] add data source

Signed-off-by: Musilah <nataleigh.nk@gmail.com>
---
 ui/web/static/js/charts.js                   |  3 ++
 ui/web/templates/charts/multigaugemodal.html | 54 ++++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 43b44b1a..4db9dd27 100644
--- 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
index a3ef9bae..34454273 100644
--- 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