Skip to content
This repository has been archived by the owner on Jan 23, 2025. It is now read-only.

Commit

Permalink
MG-209 - Update Line charts (#230)
Browse files Browse the repository at this point in the history 
* add fetch data functionality to line chart

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

* make aggregation not required

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

* add path prefix

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

---------

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>
  • Loading branch information
@ianmuchyri
ianmuchyri authored Mar 13, 2024
1 parent 9d5c3f9 commit 9be17fc
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 24 deletions.
91 changes: 84 additions & 7 deletions ui/web/static/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,29 +799,30 @@ class TimeSeriesLineChart extends Echart {
left: 'center',
show: true
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
name: '${this.chartData.xAxisLabel}',
nameLocation: 'middle',
nameGap: 35
min: '${new Date(this.chartData.startTime)}',
max: '${new Date(this.chartData.stopTime)}',
},
yAxis: {
type: 'value',
name: '${this.chartData.yAxisLabel}',
nameLocation: 'middle',
nameGap: 35
},
legend: {
show: true,
left: 'right',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
data: [],
type: 'line',
lineStyle: {
width: '${this.chartData.lineWidth}',
width: ${this.chartData.lineWidth},
type: 'solid',
color: '${this.chartData.lineColor}'
},
Expand All @@ -830,7 +831,83 @@ class TimeSeriesLineChart extends Echart {
]
};
lineChart.setOption(option);`;
lineChart.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(lineChart,chartdata);
async function getData(linechart,chartData) {
try {
const response = await fetch(
"${pathPrefix}/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 = chartData.from;
let previousTimestamp;
const endTimestamp = chartData.to;
const intervalNum = 3600;
while (currentTimestamp <= endTimestamp) {
let messageIndex = data.messages.length - 1;
let isempty= true;
while (messageIndex >= 0 && (data.messages[messageIndex].time) >= previousTimestamp) {
const item = data.messages[messageIndex];
if ((item.time) <= currentTimestamp) {
const date = new Date(item.time);
xAxisArray.push(date.toLocaleTimeString());
yAxisArray.push(item.value);
isempty=false;
}
messageIndex--;
}
if (isempty) {
const date = new Date(currentTimestamp);
xAxisArray.push(date.toLocaleTimeString());
yAxisArray.push("-");
}
previousTimestamp = currentTimestamp;
currentTimestamp += intervalNum * 1e3;
}
linechart.setOption({
xAxis: {
data: xAxisArray,
},
series: [
{
data: yAxisArray,
},
],
});
} else {
// Handle errors
console.error("HTTP request failed with status:", response.status);
}
} catch (error) {
// Handle fetch or other errors
console.error("Error:", error);
// Retry after a couple of seconds
setTimeout(function () {
getData(linechart, chartData);
}, 20000);
}
}`;
}
}

Expand Down
55 changes: 38 additions & 17 deletions ui/web/templates/charts/linechartmodal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,17 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
required
/>
</div>
<div class="mb-3">
<label for="aggregation-type" class="form-label">Aggregation</label>
<select class="form-select mb-3" name="aggregationType" id="aggregation-type">
<option value="">Select an aggregation type</option>
<option value="MAX">Maximum</option>
<option value="MIN">Minimum</option>
<option value="SUM">Sum</option>
<option value="COUNT">Count</option>
<option value="AVG">Average</option>
</select>
</div>
<div class="mb-3">
<label for="update-interval" class="form-label">Update interval</label>
<input
Expand All @@ -131,20 +142,8 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
name="updateInterval"
id="update-interval"
placeholder="Enter the update interval, eg. 5s, 10m, 1h, 1d"
required
/>
<div class="invalid-feedback">Please enter a valid interval</div>
</div>
<div class="mb-3">
<label for="aggregation-type" class="form-label">Aggregation</label>
<select class="form-select mb-3" name="aggregationType" id="aggregation-type">
<option value="" disabled>Select an aggregation type</option>
<option value="MAX">Maximum</option>
<option value="MIN">Minimum</option>
<option value="SUM">Sum</option>
<option value="COUNT">Count</option>
<option value="AVG">Average</option>
</select>
<div class="invalid-feedback invalid-interval">Please enter a valid interval</div>
</div>
</div>
<!-- Appearance Tab -->
Expand Down Expand Up @@ -241,20 +240,42 @@ <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()) {
chartData[pair[0]] = pair[1];
if (pair[0] === "startTime" || pair[0] === "stopTime") {
const inputDate = new Date(pair[1]);
chartData[pair[0]] = inputDate.getTime();
} else {
chartData[pair[0]] = pair[1];
}
}

if (chartData.aggregationType != "") {
const updateInterval = form.querySelector("#update-interval");
if (chartData.updateInterval === "") {
form.querySelector(".invalid-interval").innerHTML = "Please enter an Interval";
updateInterval.classList.remove("was-validated");
updateInterval.classList.add("is-invalid");
return;
} else {
form.querySelector(".invalid-interval").innerHTML = "";
updateInterval.classList.remove("is-invalid");
updateInterval.classList.add("was-validated");
}
}
const invalidTimeFeedback = form.querySelector(".invalid-time");
const invalidTimeInput = form.querySelector("#stop-time");
if (chartData.stopTime <= chartData.startTime) {
const invalidTimeFeedback = form.querySelector(".invalid-time");
invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
invalidTimeFeedback.style.color = "red";
const invalidTimeInput = form.querySelector("#stop-time");
invalidTimeInput.classList.remove("was-validated");
invalidTimeInput.classList.add("is-invalid");
return;
} else {
invalidTimeFeedback.innerHTML = "";
invalidTimeInput.classList.remove("is-invalid");
invalidTimeInput.classList.add("was-validated");
}

var widgetID = "lineChart-" + Date.now();
Expand Down

0 comments on commit 9be17fc

Please sign in to comment.