From e5000c4900825cc0d1ed79e5e08eeaa6e41c5fbb Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 11:39:50 +0300 Subject: [PATCH 01/13] update linechartmodal Signed-off-by: ianmuchyri --- ui/web/templates/charts/linechartmodal.html | 273 ++++++++++++-------- 1 file changed, 166 insertions(+), 107 deletions(-) diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html index 63f2df96..988683ad 100644 --- a/ui/web/templates/charts/linechartmodal.html +++ b/ui/web/templates/charts/linechartmodal.html @@ -64,42 +64,66 @@ role="tabpanel" aria-labelledby="data-tab" > -
- - -
Please enter a valid uuid
-
-
- - -
Please enter a valid uuid
-
-
- - +
+
Data Source
+ + + + + + + + + + + + + + + + + + + +
ChannelThingValueColor
+ + + + + + + + + +
+
@@ -109,6 +133,7 @@ name="startTime" id="start-time" required + value="1710242880000" />
@@ -120,6 +145,7 @@ name="stopTime" id="stop-time" required + value="1710329220000" />
@@ -183,20 +209,6 @@ placeholder="Enter the x axis label" />
-
- - -
-
- - -
-
Please enter a valid uuid
-
-
- - -
Please enter a valid uuid
-
-
- - -
-
- - -
-
-
- - -
-
- - -
Please enter a valid interval
-
-
- - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - -
- - -
- - - - -{{ end }} diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html index 0a80b908..81297e15 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -107,7 +107,6 @@
Widgets
{{ template "horizontalbarchartmodal" . }} {{ template "dynamicdatachartmodal" . }} {{ template "doublebarchartmodal" . }} - {{ template "multiplelinechartmodal" . }} {{ template "stepchartmodal" . }} {{ template "multigaugemodal" . }} {{ template "multibarchartmodal" . }} From 4a583c151c7e437608506411711ab9323370d4e7 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 14:22:47 +0300 Subject: [PATCH 04/13] remove input values Signed-off-by: ianmuchyri --- ui/web/templates/charts/linechartmodal.html | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html index abc93118..1fcaeb2f 100644 --- a/ui/web/templates/charts/linechartmodal.html +++ b/ui/web/templates/charts/linechartmodal.html @@ -86,7 +86,6 @@
Data Source
name="channel" placeholder="channel ID" required - value="b6b2bdf4-de46-45c9-bbaa-a3c972d60f33" /> @@ -97,7 +96,6 @@
Data Source
name="thing" placeholder="thing ID" required - value="3ca685f2-34cb-4614-84b2-f0ec3793e0b4" /> @@ -107,7 +105,6 @@
Data Source
name="valueName" placeholder="value name" required - value="Temp" /> @@ -133,7 +130,6 @@
Data Source
name="startTime" id="start-time" required - value="1710242880000" />
@@ -145,7 +141,6 @@
Data Source
name="stopTime" id="stop-time" required - value="1710329220000" />
@@ -342,15 +337,15 @@
Data Source
newRow.innerHTML = ` + placeholder="channel ID" required /> + placeholder="thing ID" required /> + placeholder="value name" required /> From a78d999c32fc06c07c3f5c9244b3999fdda0e248 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 18:05:24 +0300 Subject: [PATCH 05/13] add series name Signed-off-by: ianmuchyri --- ui/web/static/js/charts.js | 27 ++++++++++++++++++--- ui/web/templates/charts/linechartmodal.html | 19 ++++++++++++--- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index 4029c55b..e56f1d0a 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -793,7 +793,7 @@ class TimeSeriesLineChart extends Echart { #generateScript() { const channels = JSON.stringify(this.chartData.channels); const things = JSON.stringify(this.chartData.things); - const names = JSON.stringify(this.chartData.valueNames); + const names = JSON.stringify(this.chartData.seriesNames); const colors = JSON.stringify(this.chartData.colors); return ` var lineChart = echarts.init(document.getElementById("${this.ID}")); @@ -839,6 +839,7 @@ class TimeSeriesLineChart extends Echart { publishers:${things}, names:${names}, colors:${colors}, + valueName: '${this.chartData.valueName}', from:${this.chartData.startTime}, to:${this.chartData.stopTime}, aggregation:'${this.chartData.aggregationType}', @@ -854,7 +855,7 @@ class TimeSeriesLineChart extends Echart { for (let i=0; iData Source @@ -122,6 +122,17 @@
Data Source
Add source
+
+ + +
Data Source case "thing": things.push(value); break; - case "valueName": + case "seriesName": names.push(value); break; case "lineColor": @@ -279,7 +290,7 @@
Data Source
chartData["channels"] = channels; chartData["things"] = things; - chartData["valueNames"]= names; + chartData["seriesNames"]= names; chartData["colors"]=colors; if (chartData.aggregationType != "") { From ecc4864049e06b753798f23922e6b8ae6579f89b Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Sun, 17 Mar 2024 13:31:40 +0300 Subject: [PATCH 06/13] update the x-axis population Signed-off-by: ianmuchyri --- ui/web/static/js/charts.js | 96 ++++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 46 deletions(-) diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index e56f1d0a..105f37ae 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -852,6 +852,40 @@ class TimeSeriesLineChart extends Echart { try { let xAxisArray=[]; const yAxisArray = []; + let currentTimestamp = chartData.from; + let previousTimestamp=0; + const endTimestamp = chartData.to; + const timeDifference = chartData.to - chartData.from; + let intervalNum; + switch (true) { + case (timeDifference <= 3.6*1e6): + intervalNum = 6*1e5; + break; + case (timeDifference <= 8.64 * 1e7): + intervalNum = 6*1e6; + break; + case (timeDifference <= 6.05 * 1e8): + intervalNum = 6*1e7; + break; + case (timeDifference <= 2.63 * 1e9): + intervalNum = 6*1e8; + break; + case (timeDifference <= 3.16 * 1e10): + intervalNum = 6*1e9; + break; + default: + intervalNum = 6*1e8; + break; + } + + const initialXAxisArray = [] + const NoOfValues = Math.ceil(timeDifference/intervalNum); + for (i=0; i<=NoOfValues; i++) { + initialXAxisArray.push(currentTimestamp); + currentTimestamp += intervalNum; + } + xAxisArray.push(initialXAxisArray); + for (let i=0; i { const date = new Date(element); - xAxisData.push(date.toLocaleTimeString()); + xAxisData.push(date); }) const seriesData = [] for (i=0; i Date: Sun, 17 Mar 2024 13:39:38 +0300 Subject: [PATCH 07/13] fix close and dismiss button to work the same Signed-off-by: ianmuchyri --- ui/web/static/js/charts.js | 2 +- ui/web/templates/charts/linechartmodal.html | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index 105f37ae..9e3e1611 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -922,7 +922,7 @@ class TimeSeriesLineChart extends Echart { } } xAxisArray.push(xAxis); - // Remove the previous element in the array; + // Remove the previous element in the array xAxisArray.shift(); yAxisArray.push(yAxis); } else { diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html index b0dc7be7..af110ce6 100644 --- a/ui/web/templates/charts/linechartmodal.html +++ b/ui/web/templates/charts/linechartmodal.html @@ -17,7 +17,7 @@ @@ -235,8 +235,7 @@
Data Source