From 65dcf3caf66d3a07be15932f616b9e8a850fc470 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 11:39:50 +0300 Subject: [PATCH 01/14] 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 3355194567b4dbdda87d6fef8100edf14903c305 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 14:22:47 +0300 Subject: [PATCH 04/14] 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 a24799b415924bb85764cbedd76634a93f433743 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 15 Mar 2024 18:05:24 +0300 Subject: [PATCH 05/14] 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 8dd28bb2a371b0deafbc7ebbd439b3d99a993b22 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Sun, 17 Mar 2024 13:31:40 +0300 Subject: [PATCH 06/14] 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/14] 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
{{ end }} From 7b2344824fbdef54c4f6a1ca53742fe229c5d30a Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Mon, 18 Mar 2024 16:20:19 +0300 Subject: [PATCH 13/14] fix linter error Signed-off-by: ianmuchyri --- .../charts/stackedlinechartmodal.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html index 62b6e3df..f0eb324e 100644 --- a/ui/web/templates/charts/stackedlinechartmodal.html +++ b/ui/web/templates/charts/stackedlinechartmodal.html @@ -284,12 +284,12 @@
Data Source
break } } - + chartData["channels"] = channels; chartData["things"] = things; chartData["seriesNames"]= names; chartData["colors"]=colors; - + if (chartData.aggregationType != "") { const updateInterval = form.querySelector("#update-interval"); if (chartData.updateInterval === "") { @@ -316,19 +316,19 @@
Data Source
invalidTimeInput.classList.remove("is-invalid"); invalidTimeInput.classList.add("was-validated"); } - + var widgetID = "stackedLineChart-" + Date.now(); - + chartData["Type"] = "stackedLineChart"; addWidget(chartData, widgetID); metadataBuffer[widgetID] = chartData; - + form.reset(); form.classList.remove("was-validated"); bootstrap.Modal.getInstance(document.getElementById("stackedLineChartModal")).hide(); - + }); - + document.querySelectorAll(".close-stackedLineChart-button").forEach((element) => { const form = document.getElementById("create-stackedLineChart-form"); element.addEventListener("click", function () { @@ -338,7 +338,7 @@
Data Source
form.classList.remove("was-validated"); }) }); - + function addRow() { const uuidPattern = "{{ .UUIDPattern }}"; const table = document @@ -366,7 +366,7 @@
Data Source
`; } - + function removeRow(button) { const row = button.parentNode.parentNode; row.parentNode.removeChild(row); From f91b6795014bdb3ff1953d5f30abaed03b882af8 Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Tue, 19 Mar 2024 11:26:37 +0300 Subject: [PATCH 14/14] update modal Signed-off-by: ianmuchyri --- ui/web/static/js/charts.js | 173 ++++-------------- .../charts/stackedlinechartmodal.html | 16 +- 2 files changed, 48 insertions(+), 141 deletions(-) diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index a4e954d5..096a4257 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -956,142 +956,26 @@ class TimeSeriesLineChart extends Echart { data: yAxisArray[i], type: 'line', lineStyle: { - width: ${this.chartData.lineWidth}, - type: 'solid', + color: chartData.colors[i], }, - } - ] - }; - - lineChart.setOption(option); - var chartdata = { - channels:${channels}, - publishers:${things}, - names:${names}, - colors:${colors}, - valueName: '${this.chartData.valueName}', - from:${this.chartData.startTime}, - to:${this.chartData.stopTime}, - aggregation:'${this.chartData.aggregationType}', - limit:100, - interval:'${this.chartData.updateInterval}', - }; - getData(lineChart,chartdata); - - async function getData(linechart,chartData) { - 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 (i=0; i < chartData.channels.length; i++) { - const url = "${pathPrefix}/data?channel=" + chartData.channels[i] + - "&publisher=" + chartData.publishers[i] + - "&name=" + chartData.valueName + - "&from=" + chartData.from + - "&to=" + chartData.to + - "&aggregation=" + chartData.aggregation + - "&limit=" + chartData.limit + - "&interval=" + chartData.interval; - const response = await fetch(url); - if (response.ok) { - const data = await response.json(); - const xAxis=[]; - const yAxis=[]; - if (data.messages){ - const currArray = xAxisArray[xAxisArray.length-1]; - let currentTime, previousTime; - for (j=0; j < currArray.length; j++) { - let isempty = true; - let currentTime = currArray[j]; - for (k = (data.messages.length -1); k>= 0 ; k--) { - const item = data.messages[k]; - if (item.time > previousTime && item.time <= currentTime ) { - xAxis.push(item.time); - yAxis.push(item.value); - isEmpty= false; - } - } - if (isempty) { - xAxis.push(currentTime); - yAxis.push("-"); - } - previousTime=currentTime; - } - } - xAxisArray.push(xAxis); - // Remove the previous element in the array - xAxisArray.shift(); - yAxisArray.push(yAxis); - } else { - // Handle errors - console.error("HTTP request failed with status:", response.status); - } - } - - const xAxisData=[]; - xAxisArray[xAxisArray.length-1].forEach((element) => { - const date = new Date(element); - xAxisData.push(date); - }) - const seriesData = [] - for (i=0; i { legendData.push(element); }); @@ -1828,8 +1712,6 @@ class StackedLineChart extends Echart { } } xAxisArray.push(xAxis); - // Remove the previous element in the array - xAxisArray.shift(); yAxisArray.push(yAxis); } else { // Handle errors @@ -1837,6 +1719,23 @@ class StackedLineChart extends Echart { } } + for (i =1; i< xAxisArray.length; i++) { + const missingData = findMissingValuesIndices(xAxisArray[i], xAxisArray[xAxisArray.length-1]); + missingData.forEach((value, index) => { + yAxisArray[i-1].splice(value,0,"-"); + }); + } + + function findMissingValuesIndices(array1, array2) { + const missingIndices = []; + array2.forEach((item, index) => { + if (!array1.includes(item)) { + missingIndices.push(index); + } + }); + return missingIndices; + } + const xAxisData=[]; xAxisArray[xAxisArray.length-1].forEach((element) => { const date = new Date(element); diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html index f0eb324e..fdc825c5 100644 --- a/ui/web/templates/charts/stackedlinechartmodal.html +++ b/ui/web/templates/charts/stackedlinechartmodal.html @@ -110,14 +110,22 @@
Data Source
- -
@@ -339,7 +347,7 @@
Data Source
}) }); - function addRow() { + function addStackLineChartRow() { const uuidPattern = "{{ .UUIDPattern }}"; const table = document .getElementById("stackedLineChart-data"); @@ -367,7 +375,7 @@
Data Source
`; } - function removeRow(button) { + function removeStackLineChartRow(button) { const row = button.parentNode.parentNode; row.parentNode.removeChild(row); }