Improve graph
This commit is contained in:
parent
4cf0c7ff48
commit
24551e72bf
4 changed files with 33 additions and 7 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -4,3 +4,5 @@ Cargo.lock
|
||||||
test_devices.conf
|
test_devices.conf
|
||||||
|
|
||||||
*.db
|
*.db
|
||||||
|
|
||||||
|
midea_ac_lan/
|
3
midea.py
Normal file
3
midea.py
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import midea_ac_lan.midea.core as midea_core
|
||||||
|
|
||||||
|
midea_core
|
|
@ -123,7 +123,7 @@ async function startup() {
|
||||||
let device_power_draw = document.createElement('label');
|
let device_power_draw = document.createElement('label');
|
||||||
device_power_draw.innerText = device_state["power_draw"] + " W";
|
device_power_draw.innerText = device_state["power_draw"] + " W";
|
||||||
let device_power_draw_graph_button = document.createElement('button');
|
let device_power_draw_graph_button = document.createElement('button');
|
||||||
device_power_draw_graph_button.onclick = async () => { await render_graph(device_id) };
|
device_power_draw_graph_button.onclick = async () => { await render_graph(device_id, device_descriptor) };
|
||||||
let device_power_draw_graph_button_icon = document.createElement('i');
|
let device_power_draw_graph_button_icon = document.createElement('i');
|
||||||
device_power_draw_graph_button_icon.className = "fa fa-chart-bar";
|
device_power_draw_graph_button_icon.className = "fa fa-chart-bar";
|
||||||
|
|
||||||
|
@ -190,7 +190,7 @@ async function change_device_name(plug, name) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function render_graph(plug) {
|
async function render_graph(plug, name) {
|
||||||
// remove old graph, if present
|
// remove old graph, if present
|
||||||
let old = document.getElementById("chart");
|
let old = document.getElementById("chart");
|
||||||
|
|
||||||
|
@ -218,14 +218,14 @@ async function render_graph(plug) {
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
let [time, watts] = data[i];
|
let [time, watts] = data[i];
|
||||||
|
|
||||||
x.push(time);
|
x.push(new Date(time * 1000));
|
||||||
y.push(watts);
|
y.push(watts);
|
||||||
}
|
}
|
||||||
|
|
||||||
const chart_data = {
|
const chart_data = {
|
||||||
labels: x,
|
labels: x,
|
||||||
datasets: [{
|
datasets: [{
|
||||||
label: plug,
|
label: name,
|
||||||
data: y,
|
data: y,
|
||||||
fill: false,
|
fill: false,
|
||||||
borderColor: 'rgb(75, 192, 192)',
|
borderColor: 'rgb(75, 192, 192)',
|
||||||
|
@ -236,7 +236,26 @@ async function render_graph(plug) {
|
||||||
new Chart(chart, {
|
new Chart(chart, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: chart_data,
|
data: chart_data,
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
displayFormats: {
|
||||||
|
'day': 'DD.MM hh:mm',
|
||||||
|
'hour': 'DD.MM hh:mm',
|
||||||
|
'week': 'DD.MM hh:mm',
|
||||||
|
'month': 'DD.MM hh:mm',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
locale: 'de-DE'
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("chart_div").appendChild(chart);
|
document.getElementById("main").appendChild(chart);
|
||||||
}
|
}
|
|
@ -9,8 +9,10 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="main"></div>
|
<div id="main"></div>
|
||||||
<div id="chart_div"></div>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="/js/main.js"></script>
|
<script type="text/javascript" src="/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue