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

Commit

Permalink
Add data to time series bar chart
Browse files Browse the repository at this point in the history 
Signed-off-by: felix.gateru <[email protected]>
  • Loading branch information
@felixgateru
felixgateru committed Mar 12, 2024
1 parent 9800b73 commit 9555d77
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 40 deletions.
4 changes: 2 additions & 2 deletions cmd/ui/main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ const envPrefixGoogle = "MG_GOOGLE_"

type config struct {
LogLevel string `env:"MG_UI_LOG_LEVEL" envDefault:"debug"`
Port string `env:"MG_UI_PORT" envDefault:"9095"`
Port string `env:"MG_UI_PORT" envDefault:"9097"`
InstanceID string `env:"MG_UI_INSTANCE_ID" envDefault:""`
HTTPAdapterURL string `env:"MG_HTTP_ADAPTER_URL" envDefault:"http://localhost:8008"`
ReaderURL string `env:"MG_READER_URL" envDefault:"http://localhost:9011"`
ThingsURL string `env:"MG_THINGS_URL" envDefault:"http://localhost:9000"`
UsersURL string `env:"MG_USERS_URL" envDefault:"http://localhost:9002"`
HostURL string `env:"MG_UI_HOST_URL" envDefault:"http://localhost:9095"`
HostURL string `env:"MG_UI_HOST_URL" envDefault:"http://localhost:9097"`
BootstrapURL string `env:"MG_BOOTSTRAP_URL" envDefault:"http://localhost:9013"`
DomainsURL string `env:"MG_DOMAINS_URL" envDefault:"http://localhost:8189"`
InvitationsURL string `env:"MG_INVITATIONS_URL" envDefault:"http://localhost:9020"`
Expand Down
8 changes: 4 additions & 4 deletions internal/postgres/postgres.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ var (
// Config defines the options that are used when connecting to the PostgresSQL instance.
type Config struct {
Host string `env:"MG_UI_DB_HOST" envDefault:"localhost"`
Port string `env:"MG_UI_DB_PORT" envDefault:"5432"`
User string `env:"MG_UI_DB_USER" envDefault:"magistrala-ui"`
Pass string `env:"MG_UI_DB_PASS" envDefault:"magistrala-ui"`
Name string `env:"MG_UI_DB_NAME" envDefault:"dashboards"`
Port string `env:"MG_UI_DB_PORT" envDefault:"6007"`
User string `env:"MG_UI_DB_USER" envDefault:"magistrala"`
Pass string `env:"MG_UI_DB_PASS" envDefault:"magistrala"`
Name string `env:"MG_UI_DB_NAME" envDefault:"ui"`
SSLMode string `env:"MG_UI_DB_SSL_MODE" envDefault:"disable"`
SSLCert string `env:"MG_UI_DB_SSL_CERT" envDefault:""`
SSLKey string `env:"MG_UI_DB_SSL_KEY" envDefault:""`
Expand Down
118 changes: 85 additions & 33 deletions ui/web/static/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,6 @@ class TimeSeriesBarChart extends Echart {
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
name: '${this.chartData.xAxisLabel}',
nameLocation: 'middle',
nameGap: 35
Expand All @@ -231,47 +230,100 @@ class TimeSeriesBarChart extends Echart {
show: true,
left: 'right',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
name: '${this.chartData.seriesName}'
}
]
series: [
{
data: [],
type: 'bar',
name: '${this.chartData.seriesName}'
}
]
};
barChart.setOption(option);
var chartData = {
channel: '${this.chartData.channel}',
publisher: '${this.chartData.thing}',
name: '${this.chartData.valueName}',
from: '${this.chartData.startTime / 1000}',
to: '${this.chartData.stopTime / 1000}',
aggregation: '${this.chartData.aggregationType}',
limit: 100,
interval : '${this.chartData.updateInterval}'
}
async fetchDataAndUpdate() {
try {
const apiEndpoint = '/data?channel=${this.chartData.channel}';
const response = await fetch(apiEndpoint);
const xAxisArray = [];
const yAxisArray = [];
async function fetchDataAndUpdate() {
try {
const apiEndpoint = "/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;
console.log('Fetching data from:', apiEndpoint);
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error('API request failed with status ${response.status}');
}
const data = await response.json();
updateChart(data);
if (!response.ok) {
throw new Error("HTTP request failed with status: " + response.status);
}
} catch (error) {
console.error("Error fetching data:", error);
// Handle the error (e.g., display an error message)
} finally {
// Schedule the next update
setTimeout(() => this.fetchDataAndUpdate(), 5000); // Example: 5 seconds
const data = await response.json();
console.log("Data fetched:", data);
let previousTimestamp = chartData.from;
let endTimestamp = chartData.to;
let stepSize = 2000;
let currentTimestamp;
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 += stepSize * 1e3;
}
updateChart();
} catch (error) {
console.error("Error fetching data:", error);
// Handle the error (e.g., display an error message)
} finally {
// Schedule the next update
setTimeout(fetchDataAndUpdate, 5000);
}
}
}
updateChart(data) {
const barChart = echarts.init(document.getElementById(this.ID));
const option = barChart.getOption(); // Get the existing options
option.series[0].data = data.seriesData;
function updateChart() {
const option = barChart.getOption();
console.log('x axis array:', xAxisArray);
console.log('y axis array:', yAxisArray);
option.series[0].data = yAxisArray;
option.xAxis[0].data = xAxisArray;
barChart.setOption(option); // Update the chart
}
}
barChart.setOption(option);
}
fetchDataAndUpdate();
`;
}
}
Expand Down
7 changes: 6 additions & 1 deletion ui/web/templates/charts/barchartmodal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,12 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
let 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.stopTime <= chartData.startTime) {
Expand Down

0 comments on commit 9555d77

Please sign in to comment.