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 double 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 20, 2024
1 parent 1ae4a0f commit d38fa04
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 53 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:"9099"`
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:9099"`
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 @@ -20,10 +20,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
53 changes: 53 additions & 0 deletions ui/web/static/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,59 @@ class DoubleBarChart extends Echart {
};
doubleBarChart.setOption(option);
var chartData = {
channels: '${this.chartData.channels}'.split(','),
things: '${this.chartData.things}'.split(','),
name: '${this.chartData.valueName}',
from: ${this.chartData.startTime},
to: ${this.chartData.stopTime},
aggregation: '${this.chartData.aggregationType}',
limit: 100,
interval:'${this.chartData.updateInterval}'
};
async function fetchData(doubleBarChart, chartData) {
try {
const dataSeries0 = [];
const dataSeries1 = [];
const xAxisArray = [];
for (let i = 0; i < chartData.channels.length; i++) {
const apiEndpoint = '${pathPrefix}/data?channel=' + chartData.channels[i] +
'&name=' + chartData.name +
'&from='+ chartData.from +
'&to=' + chartData.to +
'&aggregation=' + chartData.aggregation +
'&limit=10' +
'&interval=' + chartData.interval +
'&publisher=' + chartData.things[i];
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error('HTTP request failed with status:', response.status)
}
const data = await response.json();
if (data.messages != undefined && data.messages.length > 0) {
data.messages.forEach((message) => {
xAxisArray.push(new Date(message.time).toLocaleTimeString());
dataSeries0.push(message.value);
});
}
}
updateChart(horizontalBarChart, plotData);
} catch (error) {
console.error("Error fetching data:", error);
}
}
updateChart(data) {
const barChart = echarts.init(document.getElementById(this.ID));
const option = barChart.getOption();
option.series[0].data = data.seriesData;
barChart.setOption(option);
}
}
`;
}
}
Expand Down
140 changes: 93 additions & 47 deletions ui/web/templates/charts/doublebarchartmodal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,31 +64,62 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
role="tabpanel"
aria-labelledby="data-tab"
>
<div class="mb-3">
<label for="channel-id" class="form-label">Channel ID</label>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control mb-3"
name="channel"
id="channel-id"
placeholder="Enter the channel ID"
required
/>
<div class="invalid-feedback">Please enter a valid uuid</div>
</div>
<div class="mb-3">
<label for="thing-id" class="form-label">Thing IDs</label>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control mb-3"
name="thing"
id="thing-id"
placeholder="Enter the thing IDs"
required
/>
<div class="invalid-feedback">Please enter a valid uuid</div>
<div class="table-responsive-md mb-3 p-2 border rounded">
<h5>Data Source</h5>
<table class="table" id="linechart-data">
<thead>
<tr>
<th scope="col">Channel</th>
<th scope="col">Thing</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control"
name="channel"
placeholder="channel ID"
required
/>
</td>
<td>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control"
name="thing"
placeholder="thing ID"
required
/>
</td>
</tr>
<tr>
<td>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control"
name="channel"
placeholder="channel ID"
required
/>
</td>
<td>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control"
name="thing"
placeholder="thing ID"
required
/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mb-3">
<label for="value-name" class="form-label">Value name</label>
Expand All @@ -101,16 +132,6 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
required
/>
</div>
<div class="mb-3">
<label for="y-axis-type" class="form-label">Y-axis Type</label>
<select class="form-select mb-3" name="yAxisType" id="y-axis-type">
<option value="" disabled>Select y-axis Type</option>
<option value="value">Value</option>
<option value="category">Category</option>
<option value="time">Time</option>
<option value="log">Log</option>
</select>
</div>
<div class="mb-3">
<label for="start-time" class="form-label">Start time</label>
<input
Expand All @@ -132,6 +153,22 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar 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"
required
>
<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>
<div class="mb-3">
<label for="update-interval" class="form-label">Update interval</label>
<input
Expand All @@ -145,17 +182,6 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
/>
<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>
</div>
<!-- Appearance Tab -->
<div
Expand Down Expand Up @@ -235,9 +261,26 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>

// Create an object to store the form data
let chartData = {};
const channels = [];
const things = [];
let formData = new FormData(form);
for (var pair of formData.entries()) {
chartData[pair[0]] = pair[1];
switch (pair[0]) {
case "startTime":
case "stopTime":
const inputDate = new Date(pair[1]);
chartData[pair[0]] = inputDate.getTime() * 1e6;
break;
case "channel":
channels.push(pair[1]);
break;
case "thing":
things.push(pair[1]);
break;
default:
chartData[pair[0]] = pair[1];
break;
}
}

if (chartData.stopTime <= chartData.startTime) {
Expand All @@ -253,6 +296,9 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
var widgetID = "doubleBarChart-" + Date.now();

chartData["Type"] = "doubleBarChart";
chartData["channels"] = channels;
chartData["things"] = things;
console.log("Chart Data: ", chartData);
addWidget(chartData, widgetID);
metadataBuffer[widgetID] = chartData;

Expand Down

0 comments on commit d38fa04

Please sign in to comment.