MG-212 - Update Cards to fetch data from the back-end (#220)

* update value card Signed-off-by: Musilah <nataleigh.nk@gmail.com> * remove defunct charts Signed-off-by: Musilah <nataleigh.nk@gmail.com> * add fetch to entity count Signed-off-by: Musilah <nataleigh.nk@gmail.com> * remove entity count Signed-off-by: Musilah <nataleigh.nk@gmail.com> * add interval to form Signed-off-by: Musilah <nataleigh.nk@gmail.com> * fix entity count modal Signed-off-by: Musilah <nataleigh.nk@gmail.com> * fix entity count modal Signed-off-by: Musilah <nataleigh.nk@gmail.com> * revert db changes Signed-off-by: Musilah <nataleigh.nk@gmail.com> * revert entity count modal Signed-off-by: Musilah <nataleigh.nk@gmail.com> --------- Signed-off-by: Musilah <nataleigh.nk@gmail.com>
absmach · Mar 20, 2024 · d111f69 · d111f69
1 parent 1ae4a0f
commit d111f69
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 396 deletions.
diff --git a/ui/charts.go b/ui/charts.go
@@ -123,16 +123,6 @@ func CreateItem() []Item {
 			Content: "This is a card that displays dynamic entity count data",
 			Widget:  "entityCount",
 		},
-		{
-			Title:   "Label Card",
-			Content: "This is a label card",
-			Widget:  "label",
-		},
-		{
-			Title:   "Progress Bar",
-			Content: "This is a progress bar",
-			Widget:  "progressBar",
-		},
 	}
 
 	return items

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -604,7 +604,7 @@ class EntityCount extends Chart {
     super(widgetID, chartData);
     this.Style = {
       width: "400px",
-      height: "175px",
+      height: "220px",
     };
     this.Content = this.#generateContent();
   }
@@ -617,16 +617,14 @@ class EntityCount extends Chart {
             <h5 class="card-title">Entity Count</h5>
           </div>
           <div class="card-body text-center">
-            <p class="card-text value"> 35</p>
+            <p class="card-text count"> 35</p>
           </div>
           <div class="card-footer text-right">
-            <p class="card-text">
-              Domain Name: D1
-            </p>
+            <p class="card-text"> Entity Name: ${this.chartData.entityType}</p>
           </div>
         </div>
     </div>
-        `;
+    `;
   }
 }
 
@@ -755,35 +753,6 @@ class HorizontalBarChart extends Echart {
   }
 }
 
-class LabelCard extends Chart {
-  constructor(chartData, widgetID) {
-    super(widgetID, chartData);
-    this.Style = {
-      width: "420px",
-      height: "180px",
-    };
-    this.Content = this.#generateContent();
-  }
-
-  #generateContent() {
-    return `
-    <div class="item-content" id="${this.ID}" style="width: ${this.Style.width}; height: ${this.Style.height};">
-    <div class="card widgetcard">
-    <div class="card-header text-center">
-      <h5 class="card-title">Label</h5>
-    </div>
-    <div class="card-body text-center">
-      <p class="card-subtitle mb-2 text-muted">Selected Entity: <span class="badge bg-primary">Thing6</span></p>
-    </div>
-    <div class="card-footer">
-      <p class="card-text text"> ThingID: 666 666 666</p>
-    </div>
-    </div>
-    </div>
-`;
-  }
-}
-
 class TimeSeriesLineChart extends Echart {
   constructor(chartData, widgetID) {
     super(widgetID, chartData);
@@ -1313,40 +1282,6 @@ class PieChart extends Echart {
   }
 }
 
-class ProgressBar extends Chart {
-  constructor(chartData, widgetID) {
-    super(widgetID, chartData);
-    this.Style = {
-      width: "400px",
-      height: "100px",
-    };
-    this.Content = this.#generateContent();
-  }
-
-  #generateContent() {
-    return `
-    <div class="item-content" id="${this.ID}" style="width: ${this.Style.width}; height: ${this.Style.height};">
-        <div class="card widgetcard">
-          <div class="card-header text-center">
-            <h5 class="card-title">${this.chartData.title}</h5>
-          </div>
-          <div class="card-body p-2">
-            <div class="progress">
-              <div class="progress-bar ${this.chartData.progressBarColor}" role="progressbar" style="width: 70%" aria-valuemin=${this.chartData.minValue} 
-              aria-valuemax=${this.chartData.maxValue}></div>
-            </div>
-          </div>
-          <div class="card-footer text-center">
-            <p class="card-text">
-              Status: 70%
-            </p>
-          </div>
-        </div>
-    </div>
-      `;
-  }
-}
-
 class SharedDatasetChart extends Echart {
   constructor(chartData, widgetID) {
     super(widgetID, chartData);
@@ -1853,9 +1788,10 @@ class ValueCard extends Chart {
     super(widgetID, chartData);
     this.Style = {
       width: "400px",
-      height: "200px",
+      height: "220px",
     };
     this.Content = this.#generateContent();
+    this.Script = this.#generateScript();
   }
 
   #generateContent() {
@@ -1876,6 +1812,36 @@ class ValueCard extends Chart {
     </div>
   `;
   }
+
+  #generateScript() {
+    return `
+    (function() {
+      var valueCard = document.getElementById("${this.ID}");
+
+      async function getData() {
+        try {
+          const response = await fetch(
+            "${pathPrefix}/data?channel=${this.chartData.channel}"+
+            "&publisher=${this.chartData.thing}" +
+            "&name=${this.chartData.valueName}" +
+            "&limit=1",
+          );
+          if (response.ok) {
+            const data = await response.json();
+            valueCard.querySelector(".value").textContent = data.messages[0].value;
+          } else {
+            console.error("HTTP request failed with status: ", response.status);
+          }
+        } catch (error) {
+          console.error("Failed to fetch card data: ", error);
+        }
+      }
+
+      getData();
+      setInterval(getData, "${this.chartData.updateInterval}");
+    })();
+    `;
+  }
 }
 
 const chartTypes = {
@@ -1890,13 +1856,11 @@ const chartTypes = {
   entityCount: EntityCount,
   gaugeChart: GaugeChart,
   horizontalBarChart: HorizontalBarChart,
-  labelCard: LabelCard,
   lineChart: TimeSeriesLineChart,
   multiBarChart: MultiBarChart,
   multiGaugeChart: MultiGaugeChart,
   multipleLineChart: MultipleLineChart,
   pieChart: PieChart,
-  progressBar: ProgressBar,
   sharedDatasetChart: SharedDatasetChart,
   speedGaugeChart: SpeedGaugeChart,
   stackedLineChart: StackedLineChart,

diff --git a/ui/web/templates/charts/labelmodal.html b/ui/web/templates/charts/labelmodal.html