Skip to content

Commit

Permalink
resolve comments
Browse files Browse the repository at this point in the history 
Signed-off-by: Musilah <[email protected]>
  • Loading branch information
@Musilah @dborovcanin
Musilah authored and dborovcanin committed Mar 12, 2024
1 parent e8e5128 commit a74f5b3
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 166 deletions.
266 changes: 101 additions & 165 deletions ui/web/static/js/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -675,10 +675,13 @@ class GaugeChart extends Echart {
try {
const response = await fetch(
"/data?channel=${this.chartData.channel}"+
"&name=${this.chartData.valueName}"+
"&limit=1",
);
if (response.ok) {
const data = await response.json();
console.log("message: ", data.messages);
console.log("url: ", response.url);
gaugeChart.setOption({
series: [
{
Expand All @@ -696,13 +699,13 @@ class GaugeChart extends Echart {
console.error("HTTP request failed with status: ", response.status);
}
setTimeout(function () {
getData();
}, 2000000);
getData(gaugeChart);
}, 20000);
} catch (error) {
console.error("Failed to fetch gauge data: ", error);
setTimeout(function () {
getData();
}, 2000000);
getData(gaugeChart);
}, 20000);
}
}
})();`;
Expand Down Expand Up @@ -1052,168 +1055,97 @@ class MultiGaugeChart extends Echart {
}

#generateScript() {
let gaugeLabel = this.chartData.gaugeLabel.split(",");
return `
(function() {
var multiGaugeChart = echarts.init(document.getElementById("${this.ID}"));
var gaugeData = [
{
value: 20,
name: '${gaugeLabel[0]}',
title: {
offsetCenter: ['0%', '-30%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '-18%']
}
},
{
value: 40,
name: '${gaugeLabel[1]}',
title: {
offsetCenter: ['0%', '0%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '12%']
}
},
{
value: 60,
name: '${gaugeLabel[2]}',
title: {
offsetCenter: ['0%', '28%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '40%']
}
}
];
var option = {
title: {
text: '${this.chartData.title}',
left: 'center'
},
series: [
{
type: "gauge",
min: ${this.chartData.minValue},
max: ${this.chartData.maxValue},
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
var gaugeLabels = "${this.chartData.gaugeLabel}".split(",");
var gaugeData = gaugeLabels.map(function(label, index) {
// Dynamic positioning can be improved based on the number of gauges
var position = (index - (gaugeLabels.length - 1) / 2) * 40;
return {
name: label,
value: 0,
title: { offsetCenter: ['0%', position + '%'] },
detail: {
valueAnimation: true,
offsetCenter: ['0%', (position + 12) + '%']
}
};
});
var option = {
title: { text: '${this.chartData.title}', left: 'center' },
series: [
{
type: "gauge",
min: ${this.chartData.minValue},
max: ${this.chartData.maxValue},
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1, borderColor: '#464646'
}
},
axisLine: {
lineStyle: { width: 30 }
},
splitLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
data: gaugeData,
title: { fontSize: 10 },
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
borderWidth: 1,
borderColor: '#464646'
}
},
axisLine: {
lineStyle: {
width: 30
formatter: '{value}%'
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: gaugeData,
title: {
fontSize: 10
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%'
}
}
]
};
multiGaugeChart.setOption(option)
getData(multiGaugeChart);
]
};
async function getData(multiGaugeChart) {
try {
const response = await fetch(
"/data?channel=${this.chartData.channel}"+
"&limit=3",
);
if (response.ok) {
const data = await response.json();
multiGaugeChart.setOption({
series: [
{
data: [
{
value: data.messages[0].value,
name: '${gaugeLabel[0]}',
title: {
offsetCenter: ['0%', '-30%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '-18%']
}
},
{
value: data.messages[1].value,
name: '${gaugeLabel[1]}',
title: {
offsetCenter: ['0%', '0%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '12%']
}
},
{
value: data.messages[2].value,
name: '${gaugeLabel[2]}',
title: {
offsetCenter: ['0%', '28%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '40%']
}
}
],
},
],
});
} else {
console.error("HTTP request failed with status: ", response.status);
multiGaugeChart.setOption(option);
getData(multiGaugeChart);
async function getData(chart) {
try {
var names = "${this.chartData.valueName}".split(",").join(",");
const response = await fetch(
"/data?channel=${this.chartData.channel}"+
"&name="+ names +
"&limit=" + gaugeLabels.length,
);
if (response.ok) {
const data = await response.json();
chart.setOption({
series: [
{
data: data.messages.map(function(message, index) {
return Object.assign({}, gaugeData[index], {value: message.value});
})
}
]
});
} else {
console.error("HTTP request failed with status: ", response.status);
}
} catch (error) {
console.error("Failed to fetch gauge data: ", error);
}
setTimeout(function () {
getData();
}, 2000000);
} catch (error) {
console.error("Failed to fetch gauge data: ", error);
setTimeout(function () {
getData();
}, 2000000);
setTimeout(function () { getData(chart); }, 20000);
}
}
})();`;
})();`;
}
}

Expand Down Expand Up @@ -1548,6 +1480,8 @@ class SpeedGaugeChart extends Echart {
try {
const response = await fetch(
"/data?channel=${this.chartData.channel}"+
"&name=${this.chartData.valueName}"+
"&unit=${this.chartData.valueUnit}"+
"&limit=1",
);
if (response.ok) {
Expand All @@ -1569,13 +1503,13 @@ class SpeedGaugeChart extends Echart {
console.error("HTTP request failed with status: ", response.status);
}
setTimeout(function () {
getData();
}, 2000000);
getData(speedGaugeChart);
}, 20000);
} catch (error) {
console.error("Failed to fetch gauge data: ", error);
setTimeout(function () {
getData();
}, 2000000);
getData(speedGaugeChart);
}, 20000);
}
}
})();`;
Expand Down Expand Up @@ -1856,6 +1790,8 @@ class TempGaugeChart extends Echart {
try {
const response = await fetch(
"/data?channel=${this.chartData.channel}"+
"&name=${this.chartData.valueName}"+
"&unit=${this.chartData.valueUnit}"+
"&limit=1",
);
if (response.ok) {
Expand Down Expand Up @@ -1887,13 +1823,13 @@ class TempGaugeChart extends Echart {
console.error("HTTP request failed with status: ", response.status);
}
setTimeout(function () {
getData();
}, 2000000);
getData(tempGaugeChart);
}, 20000);
} catch (error) {
console.error("Failed to fetch gauge data: ", error);
setTimeout(function () {
getData();
}, 2000000);
getData(tempGaugeChart);
}, 20000);
}
}
})();`;
Expand Down
11 changes: 10 additions & 1 deletion ui/web/templates/charts/speedgaugemodal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,19 @@ <h5 class="modal-title" id="speedGaugeModalLabel">Analogue Speed Gauge</h5>
class="form-control mb-3"
name="valueName"
id="value-name"
placeholder="Enter the value name eg. temperature"
placeholder="Enter the value name eg. velocity, speed"
required
/>
</div>
<div class="mb-3">
<label for="value-unit" class="form-label">Value unit</label>
<select class="form-select mb-3" name="valueUnit" id="value-unit">
<option value="" disabled>Select a speed unit</option>
<option value="km/h">km/h</option>
<option value="m/s">m/s</option>
<option value="mph">mph</option>
</select>
</div>
<div class="mb-3">
<label for="min-value" class="form-label">Min value</label>
<input
Expand Down
9 changes: 9 additions & 0 deletions ui/web/templates/charts/tempgaugemodal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,15 @@ <h5 class="modal-title" id="tempGaugeModalLabel">Analogue Temperature Gauge</h5>
required
/>
</div>
<div class="mb-3">
<label for="value-unit" class="form-label">Value unit</label>
<select class="form-select mb-3" name="valueUnit" id="value-unit">
<option value="" disabled>Select a speed unit</option>
<option value="F">Farenheit</option>
<option value="C">Celsius</option>
<option value="K">Kelvin</option>
</select>
</div>
<div class="mb-3">
<label for="min-value" class="form-label">Min value</label>
<input
Expand Down

0 comments on commit a74f5b3

Please sign in to comment.