From d111f695044bc709b5cbfd53cd62fda8e4c52e98 Mon Sep 17 00:00:00 2001 From: Nataly Musilah <115026536+Musilah@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:46:46 +0300 Subject: [PATCH] MG-212 - Update Cards to fetch data from the back-end (#220) * update value card Signed-off-by: Musilah * remove defunct charts Signed-off-by: Musilah * add fetch to entity count Signed-off-by: Musilah * remove entity count Signed-off-by: Musilah * add interval to form Signed-off-by: Musilah * fix entity count modal Signed-off-by: Musilah * fix entity count modal Signed-off-by: Musilah * revert db changes Signed-off-by: Musilah * revert entity count modal Signed-off-by: Musilah --------- Signed-off-by: Musilah --- ui/charts.go | 10 - ui/web/static/js/charts.js | 108 +++------ ui/web/templates/charts/labelmodal.html | 104 --------- ui/web/templates/charts/progressbarmodal.html | 206 ------------------ ui/web/templates/charts/valuecardmodal.html | 4 +- ui/web/templates/dashboard.html | 2 - 6 files changed, 38 insertions(+), 396 deletions(-) delete mode 100644 ui/web/templates/charts/labelmodal.html delete mode 100644 ui/web/templates/charts/progressbarmodal.html diff --git a/ui/charts.go b/ui/charts.go index 4305d6ef2..4222bab2b 100644 --- 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 index 2b55ad992..379f79a7c 100644 --- 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 {
Entity Count
-

35

+

35

-

- Domain Name: D1 -

+

Entity Name: ${this.chartData.entityType}

- `; + `; } } @@ -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 ` -
-
-
-
Label
-
-
-

Selected Entity: Thing6

-
-
-

ThingID: 666 666 666

-
-
-
-`; - } -} - 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 ` -
-
-
-
${this.chartData.title}
-
-
-
-
-
-
-
-

- Status: 70% -

-
-
-
- `; - } -} - 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 { `; } + + #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 deleted file mode 100644 index 7d36064a6..000000000 --- a/ui/web/templates/charts/labelmodal.html +++ /dev/null @@ -1,104 +0,0 @@ - - -{{ define "labelmodal" }} - - - -{{ end }} diff --git a/ui/web/templates/charts/progressbarmodal.html b/ui/web/templates/charts/progressbarmodal.html deleted file mode 100644 index ada7e2b45..000000000 --- a/ui/web/templates/charts/progressbarmodal.html +++ /dev/null @@ -1,206 +0,0 @@ - - -{{ define "progressbarmodal" }} - - - -{{ end }} diff --git a/ui/web/templates/charts/valuecardmodal.html b/ui/web/templates/charts/valuecardmodal.html index 762de3c10..12a66a8c3 100644 --- a/ui/web/templates/charts/valuecardmodal.html +++ b/ui/web/templates/charts/valuecardmodal.html @@ -104,11 +104,11 @@
Please enter a valid interval
diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html index 0a80b9088..8bdd7fa34 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -117,8 +117,6 @@
Widgets
{{ template "alarmstablemodal" . }} {{ template "entitiestablemodal" . }} {{ template "entitycountmodal" . }} - {{ template "progressbarmodal" . }} - {{ template "labelmodal" . }}