fix linechart overriding on multiple charts

Signed-off-by: ianmuchyri <[email protected]>
absmach · Mar 12, 2024 · 18c4694 · 18c4694
1 parent 02c23d1
commit 18c4694
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -792,7 +792,7 @@ class TimeSeriesLineChart extends Echart {
 
   #generateScript() {
     return `
-    var lineChart = echarts.init(document.getElementById("${this.ID}")); 
+    var ${this.ID} = echarts.init(document.getElementById("${this.ID}")); 
     var option = {
       title: {
         text: '${this.chartData.title}',
@@ -831,28 +831,38 @@ class TimeSeriesLineChart extends Echart {
       ]
     };
 
-    lineChart.setOption(option);
-    getData(lineChart);
+    ${this.ID}.setOption(option);
+    var chartdata = {
+      channel:'${this.chartData.channel}',
+      publisher:'${this.chartData.thing}',
+      name:'${this.chartData.valueName}',
+      from:${this.chartData.startTime},
+      to:${this.chartData.stopTime},
+      aggregation:'${this.chartData.aggregationType}',
+      limit:100,
+      interval:'${this.chartData.updateInterval}',
+    };
+    getData(${this.ID},chartdata);
   
-    async function getData(linechart) {
+    async function getData(linechart,chartData) {
       try {
         const response = await fetch(
-          "/data?channel=${this.chartData.channel}" +
-            "&publisher=${this.chartData.thing}" +
-            "&name=${this.chartData.valueName}" +
-            "&from=${this.chartData.startTime}" +
-            "&to=${this.chartData.stopTime}" +
-            "&aggregation=${this.chartData.aggregationType}" +
-            "&limit=100" +
-            "&interval=${this.chartData.updateInterval}",
+          "/data?channel=" + chartData.channel +
+            "&publisher=" + chartData.publisher +
+            "&name=" + chartData.name +
+            "&from=" + chartData.from +
+            "&to=" + chartData.to +
+            "&aggregation=" + chartData.aggregation +
+            "&limit=" + chartData.limit +
+            "&interval=" + chartData.interval,
         );
         if (response.ok) {
           const data = await response.json();
           const xAxisArray = [];
           const yAxisArray = [];
-          let currentTimestamp = ${this.chartData.startTime};
+          let currentTimestamp = chartData.from;
           let previousTimestamp;
-          const endTimestamp = ${this.chartData.stopTime};
+          const endTimestamp = chartData.to;
           const intervalNum = 3600;
           while (currentTimestamp <= endTimestamp) {
             let messageIndex = data.messages.length - 1;
@@ -892,14 +902,14 @@ class TimeSeriesLineChart extends Echart {
     
         // Poll again after a couple of seconds
         setTimeout(function () {
-          getData(linechart);
+          getData(linechart, chartData);
         }, 20000);
       } catch (error) {
         // Handle fetch or other errors
         console.error("Error:", error);
         // Retry after a couple of seconds
         setTimeout(function () {
-          getData(linechart);
+          getData(linechart, chartData);
         }, 20000);
       }
     }`;

diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
@@ -244,7 +244,7 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
       }
 
       // Create an object to store the form data
-      let chartData = {};
+      const chartData = {};
       let formData = new FormData(form);
       for (var pair of formData.entries()) {
         if (pair[0] === "startTime" || pair[0] === "stopTime") {
@@ -265,7 +265,7 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
         return;
       }
 
-      var widgetID = "lineChart-" + Date.now();
+      var widgetID = "lineChart" + Date.now();
 
       chartData["Type"] = "lineChart";
       addWidget(chartData, widgetID);