Improve graph

This commit is contained in:
hodasemi 2023-09-22 06:21:58 +02:00
parent 4cf0c7ff48
commit 24551e72bf
4 changed files with 33 additions and 7 deletions

4
.gitignore vendored
View file

@ -3,4 +3,6 @@ Cargo.lock
test_devices.conf test_devices.conf
*.db *.db
midea_ac_lan/

3
midea.py Normal file
View file

@ -0,0 +1,3 @@
import midea_ac_lan.midea.core as midea_core
midea_core

View file

@ -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);
} }

View file

@ -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>