Database (#2)

* added new card to LiveView page with chart for last 25 hours

* fixed formatting of the DatabaseChart

* fixed delayed load of google libraries after page refresh

* GChart

* Delete database.png

* removed serial number from screenshot

* use vue-google-charts wrapper

* fixed wromg position of chart

* updated screenshot

* updated webapp

* added calendar chart

* added calendar chart

* updated screenshot

* used new interface

* Fixed problem that charts are not shown after page refresh.

* made Vue compile

* changed chart options

* fixed height

* updated webapp

* changed chart options

* updated webapp

* updated Webapp and screenshot

* new screenshot

* create database when it does not exist

* fixed name of days in calendar chart

* added debug messages

* added more debugging messages

* hooked to LiveView instead of MQTT

* moved loop handler

* fixed time handling

* fixed first datapoint

* fix hanging of GUI

* updated Webapp

* some cosmetic changes

* updated Webapp

* used chunked data transfer

* used chunked data transfer

* fixed loading flag

* removed lambda function

* RaBa

* fixed chart refresh after reload

* fixed wrong time for first database entry on a day

* added autorefresh every hour

* optimized autorefresh

* fixed formatting of card

* html change

* fixed date comparison

* new screenshot

* Update README.md

README.md

@@ -1,9 +1,13 @@
-# OpenDTU
+# OpenDTU-Database
 
 [![OpenDTU Build](https://github.com/tbnobody/OpenDTU/actions/workflows/build.yml/badge.svg)](https://github.com/tbnobody/OpenDTU/actions/workflows/build.yml)
 [![cpplint](https://github.com/tbnobody/OpenDTU/actions/workflows/cpplint.yml/badge.svg)](https://github.com/tbnobody/OpenDTU/actions/workflows/cpplint.yml)
 [![Yarn Linting](https://github.com/tbnobody/OpenDTU/actions/workflows/yarnlint.yml/badge.svg)](https://github.com/tbnobody/OpenDTU/actions/workflows/yarnlint.yml)
 
+OpenDTU-Database adds an ESP32 LittleFS Database and two energy charts, a column chart of the last 25 hours and a full calendar chart.
+
+![Screenshot](https://github.com/RaBa64/OpenDTU/blob/Database/docs/screenshots/23_Database.png)
+
 ## !! IMPORTANT UPGRADE NOTES !!
 
 If you are upgrading from a version before 15.03.2023 you have to upgrade the partition table of the ESP32. Please follow the [this](docs/UpgradePartition.md) documentation!

docs/screenshots/README.md

@@ -89,3 +89,7 @@ here are some screenshots of OpenDTU's web interface.
 ***
 
 ![Console](18_Console.png)
+
+***
+
+![Console](23_Database.png)

include/WebApi_database.h

@@ -12,7 +12,7 @@ public:
     void loop();
     bool write(float energy);
 
-    struct Data {
+    struct pvData {
         uint8_t	tm_year;
         uint8_t tm_mon;
         uint8_t tm_mday;
@@ -22,6 +22,12 @@ public:
 
 private:
     void onDatabase(AsyncWebServerRequest* request);
-
+    void onDatabaseHour(AsyncWebServerRequest* request);
+    void onDatabaseDay(AsyncWebServerRequest* request);
+    static size_t readchunk(uint8_t* buffer, size_t maxLen, size_t index);
+    static size_t readchunk_log(uint8_t* buffer, size_t maxLen, size_t index);
+    static size_t readchunkHour(uint8_t* buffer, size_t maxLen, size_t index);
+    static size_t readchunkDay(uint8_t* buffer, size_t maxLen, size_t index);
+    
     AsyncWebServer* _server;
 };

platformio.ini

@@ -34,7 +34,7 @@ lib_deps =
     https://github.com/yubox-node-org/ESPAsyncWebServer
     bblanchon/ArduinoJson @ ^6.21.2
     https://github.com/bertmelis/espMqttClient.git#v1.4.3
-    nrf24/RF24 @ ^1.4.7
+    nrf24/RF24 @ ^1.4.5
     olikraus/U8g2 @ ^2.34.22
     buelowp/sunset @ ^1.1.7
 

src/MqttHandleInverterTotal.cpp

@@ -7,10 +7,8 @@
 #include "Datastore.h"
 #include "MqttSettings.h"
 #include <Hoymiles.h>
-#include "WebApi_database.h"
 
 MqttHandleInverterTotalClass MqttHandleInverterTotal;
-WebApiDatabaseClass database;
 
 void MqttHandleInverterTotalClass::init()
 {
@@ -33,7 +31,5 @@ void MqttHandleInverterTotalClass::loop()
         MqttSettings.publish("dc/is_valid", String(Datastore.getIsAllEnabledReachable()));
 
         _lastPublish.set(Configuration.get().Mqtt_PublishInterval * 1000);
-
-        database.write(totalAcYieldTotal);      // write value to database
     }
 }

src/WebApi_database.cpp

@@ -1,12 +1,11 @@
 // SPDX-License-Identifier: GPL-2.0-or-later
-/*
- * Copyright (C) 2023 Ralf Bauer and others
- */
 
 #include "WebApi_database.h"
+#include "Datastore.h"
 #include "MessageOutput.h"
 #include "WebApi.h"
 #include "defaults.h"
+#include <Arduino.h>
 #include <AsyncJson.h>
 #include <LittleFS.h>
 
@@ -16,10 +15,16 @@ void WebApiDatabaseClass::init(AsyncWebServer* server)
 
     _server = server;
     _server->on("/api/database", HTTP_GET, std::bind(&WebApiDatabaseClass::onDatabase, this, _1));
+    _server->on("/api/databaseHour", HTTP_GET, std::bind(&WebApiDatabaseClass::onDatabaseHour, this, _1));
+    _server->on("/api/databaseDay", HTTP_GET, std::bind(&WebApiDatabaseClass::onDatabaseDay, this, _1));
 }
 
 void WebApiDatabaseClass::loop()
 {
+    if (!Hoymiles.isAllRadioIdle()) {
+        return;
+    }
+    write(Datastore.getTotalAcYieldTotalEnabled()); // write value to database
 }
 
 bool WebApiDatabaseClass::write(float energy)
@@ -29,70 +34,282 @@ bool WebApiDatabaseClass::write(float energy)
 
     // LittleFS.remove(DATABASE_FILENAME);
 
+    // MessageOutput.println(energy, 6);
+
     struct tm timeinfo;
-    if (!getLocalTime(&timeinfo, 5)) // get cuurent time
+    if (!getLocalTime(&timeinfo, 5)) {
-        return (false);
+        return false;
+    }
     if (timeinfo.tm_hour == old_hour) // must be new hour
         return (false);
     if (old_hour == 255) { // don't write to database after reboot
         old_hour = timeinfo.tm_hour;
         return (false);
     }
+    // MessageOutput.println("Next hour.");
     if (energy <= old_energy) // enery must have increased
         return (false);
+    // MessageOutput.println("Energy difference > 0");
 
-    struct Data d;
+    struct pvData d;
-    d.tm_hour = old_hour;
+    d.tm_hour = timeinfo.tm_hour - 1;
     old_hour = timeinfo.tm_hour;
     d.tm_year = timeinfo.tm_year - 100; // year counting from 2000
     d.tm_mon = timeinfo.tm_mon + 1;
     d.tm_mday = timeinfo.tm_mday;
     d.energy = old_energy = energy;
 
-    File f = LittleFS.open(DATABASE_FILENAME, "a");
+    // create database file if it does not exist
+    // if (!LittleFS.exists(DATABASE_FILENAME)) {
+    //    MessageOutput.println("Database file does not exist.");
+    //    File f = LittleFS.open(DATABASE_FILENAME, "w", true);
+    //    f.flush();
+    //    f.close();
+    //    MessageOutput.println("New database file created.");
+    //}
+
+    File f = LittleFS.open(DATABASE_FILENAME, "a", true);
     if (!f) {
+        MessageOutput.println("Failed to append to database.");
         return (false);
     }
-    f.write((const uint8_t*)&d, sizeof(Data));
+    f.write((const uint8_t*)&d, sizeof(pvData));
     f.close();
+    // MessageOutput.println("Write data point.");
     return (true);
 }
 
+// read chunk from database
+size_t WebApiDatabaseClass::readchunk(uint8_t* buffer, size_t maxLen, size_t index)
+{
+    static bool first = true;
+    static bool last = false;
+    static File f;
+    uint8_t* pr = buffer;
+    uint8_t* pre = pr + maxLen - 50;
+    size_t r;
+    struct pvData d;
+
+    if (first) {
+        f = LittleFS.open(DATABASE_FILENAME, "r", false);
+        if (!f) {
+            return (0);
+        }
+        *pr++ = '[';
+    }
+    while (true) {
+        r = f.read((uint8_t*)&d, sizeof(pvData)); // read from database
+        if (r <= 0) {
+            if (last) {
+                f.close();
+                first = true;
+                last = false;
+                return (0); // end transmission
+            }
+            last = true;
+            *pr++ = ']';
+            return (pr - buffer); // last chunk
+        }
+        if (first) {
+            first = false;
+        } else {
+            *pr++ = ',';
+        }
+        int len = sprintf((char*)pr, "[%d,%d,%d,%d,%f]",
+            d.tm_year, d.tm_mon, d.tm_mday, d.tm_hour, d.energy * 1e3);
+        if (len >= 0) {
+            pr += len;
+        }
+        if (pr >= pre)
+            return (pr - buffer); // buffer full, return number of chars
+    }
+}
+
+size_t WebApiDatabaseClass::readchunk_log(uint8_t* buffer, size_t maxLen, size_t index)
+{
+    size_t x = readchunk(buffer, maxLen, index);
+    MessageOutput.println("----------");
+    MessageOutput.println(maxLen);
+    MessageOutput.println(x);
+    return (x);
+}
+
+// read chunk from database for the last 25 hours
+size_t WebApiDatabaseClass::readchunkHour(uint8_t* buffer, size_t maxLen, size_t index)
+{
+    static bool first = true;
+    static bool last = false;
+    static bool valid = false;
+    static float oldenergy = 0.0;
+    static File f;
+    static bool fileopen = false;
+    union datehour {
+        uint32_t dh;
+        uint8_t dd[4];
+    };
+    static datehour startdate;
+    uint8_t* pr = buffer;
+    uint8_t* pre = pr + maxLen - 50;
+    size_t r;
+    struct pvData d;
+
+    if (!fileopen) {
+        time_t now;
+        struct tm sdate;
+        time(&now);
+        time_t stime = now - (60 * 60 * 25); // subtract 25h
+        localtime_r(&stime, &sdate);
+        if (sdate.tm_year <= (2016 - 1900)) {
+            return (false); // time not set
+        }
+        startdate.dd[3] = sdate.tm_year - 100;
+        startdate.dd[2] = sdate.tm_mon + 1;
+        startdate.dd[1] = sdate.tm_mday;
+        startdate.dd[0] = sdate.tm_hour;
+
+        f = LittleFS.open(DATABASE_FILENAME, "r", false);
+        if (!f) {
+            return (false);
+        }
+        fileopen = true;
+        *pr++ = '[';
+    }
+    while (true) {
+        r = f.read((uint8_t*)&d, sizeof(pvData)); // read from database
+        if (r <= 0) {
+            if (last) {
+                f.close();
+                fileopen = false;
+                first = true;
+                last = false;
+                valid = false;
+                startdate.dh = 0L;
+                return (0); // end transmission
+            }
+            last = true;
+            *pr++ = ']';
+            return (pr - buffer); // last chunk
+        }
+        if (!valid) {
+            datehour cd;
+            cd.dd[3] = d.tm_year;
+            cd.dd[2] = d.tm_mon;
+            cd.dd[1] = d.tm_mday;
+            cd.dd[0] = d.tm_hour;
+            // MessageOutput.println(cd,16);
+            if (cd.dh >= startdate.dh) {
+                valid = true;
+            } else
+                oldenergy = d.energy;
+        }
+        if (valid) {
+            if (first) {
+                first = false;
+            } else
+                *pr++ = ',';
+            int len = sprintf((char*)pr, "[%d,%d,%d,%d,%f]",
+                d.tm_year, d.tm_mon, d.tm_mday, d.tm_hour,
+                (d.energy - oldenergy) * 1e3);
+            oldenergy = d.energy;
+            if (len >= 0) {
+                pr += len;
+            }
+            if (pr >= pre) {
+                return (pr - buffer); // buffer full, return number of chars
+            }
+        }
+    }
+}
+
+// read chunk from database for calendar view
+size_t WebApiDatabaseClass::readchunkDay(uint8_t* buffer, size_t maxLen, size_t index)
+{
+    static bool first = true;
+    static bool last = false;
+    static float startenergy = 0.0;
+    static struct pvData endofday = { 0, 0, 0, 0, 0.0 };
+    static File f;
+    uint8_t* pr = buffer;
+    uint8_t* pre = pr + maxLen - 50;
+    size_t r;
+    struct pvData d;
+
+    if (first) {
+        f = LittleFS.open(DATABASE_FILENAME, "r", false);
+        if (!f) {
+            return (0);
+        }
+        *pr++ = '[';
+    }
+    while (true) {
+        r = f.read((uint8_t*)&d, sizeof(pvData)); // read from database
+        if (r <= 0) {
+            if (last) {
+                f.close();
+                first = true;
+                last = false;
+                endofday = { 0, 0, 0, 0, 0.0 };
+                startenergy = 0.0;
+                return (0); // end transmission
+            }
+            last = true;
+            if (!first)
+                *pr++ = ',';
+            int len = sprintf((char*)pr, "[%d,%d,%d,%d,%f]",
+                endofday.tm_year, endofday.tm_mon, endofday.tm_mday, endofday.tm_hour,
+                (endofday.energy - startenergy) * 1e3);
+            pr += len;
+            *pr++ = ']';
+            return (pr - buffer); // last chunk
+        }
+        if (endofday.tm_year == 0) {
+            startenergy = d.energy;
+        } else {
+            if (endofday.tm_mday != d.tm_mday) { // next day
+                if (first) {
+                    first = false;
+                } else
+                    *pr++ = ',';
+                int len = sprintf((char*)pr, "[%d,%d,%d,%d,%f]",
+                    endofday.tm_year, endofday.tm_mon, endofday.tm_mday, endofday.tm_hour,
+                    (endofday.energy - startenergy) * 1e3);
+                startenergy = endofday.energy;
+                if (len >= 0)
+                    pr += len;
+                if (pr >= pre)
+                    return (pr - buffer); // buffer full, return number of chars
+            }
+        }
+        endofday = d;
+    }
+}
+
 void WebApiDatabaseClass::onDatabase(AsyncWebServerRequest* request)
 {
     if (!WebApi.checkCredentialsReadonly(request)) {
         return;
     }
-
+    AsyncWebServerResponse* response = request->beginChunkedResponse("application/json", readchunk);
-    try {
+    request->send(response);
-        File f = LittleFS.open(DATABASE_FILENAME, "r", false);
-        if (!f) {
-            return;
-        }
-
-        struct Data d;
-
-        AsyncJsonResponse* response = new AsyncJsonResponse(true, 40000U);
-        JsonArray root = response->getRoot();
-
-        while (f.read((uint8_t*)&d, sizeof(Data))) { // read from database
-            JsonArray nested = root.createNestedArray(); // create new nested array and copy data to array
-            nested.add(d.tm_year);
-            nested.add(d.tm_mon);
-            nested.add(d.tm_mday);
-            nested.add(d.tm_hour);
-            nested.add(d.energy);
-        }
-        f.close();
-        response->setLength();
-        request->send(response);
-    } catch (std::bad_alloc& bad_alloc) {
-        MessageOutput.printf("Call to /api/database temporarely out of resources. Reason: \"%s\".\r\n", bad_alloc.what());
-        WebApi.sendTooManyRequests(request);
-    }
 }
 
+void WebApiDatabaseClass::onDatabaseHour(AsyncWebServerRequest* request)
+{
+    if (!WebApi.checkCredentialsReadonly(request)) {
+        return;
+    }
+    AsyncWebServerResponse* response = request->beginChunkedResponse("application/json", readchunkHour);
+    request->send(response);
+}
 
+void WebApiDatabaseClass::onDatabaseDay(AsyncWebServerRequest* request)
+{
+    if (!WebApi.checkCredentialsReadonly(request)) {
+        return;
+    }
+    AsyncWebServerResponse* response = request->beginChunkedResponse("application/json", readchunkDay);
+    request->send(response);
+}
 
 /*  JS
 const energy = JSON.parse('[[23,5,19,6,175.4089966],[23,5,19,10,175.7649994],[23,5,19,10,175.8939972],[23,5,19,10,175.904007],[23,5,19,10,175.9149933],[23,5,19,11,175.9669952],[23,5,19,11,175.973999],[23,5,19,12,176.1159973],[23,5,19,13,176.2900085],[23,5,19,14,176.4179993],[23,5,19,15,176.5429993],[23,5,19,16,176.6100006],[23,5,19,17,176.7269897],[23,5,19,18,176.8370056],[23,5,19,19,176.9060059],[23,5,19,20,176.9360046],[23,5,19,21,176.9459991],[23,5,20,5,176.9459991],[23,5,20,6,176.9470062],[23,5,20,7,176.9629974],[23,5,20,8,177.0270081],[23,5,20,9,177.0899963],[23,5,20,10,177.2389984],[23,5,20,11,177.4759979],[23,5,20,12,177.7310028],[23,5,20,13,178.0749817],[23,5,20,14,178.3970032],[23,5,20,15,178.7460022],[23,5,20,16,179.0829926],[23,5,20,17,179.3110046],[23,5,20,18,179.4849854],[23,5,20,19,179.5549927],[23,5,20,20,179.5899963]]')

webapp/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

webapp/package.json

@@ -18,6 +18,7 @@
     "sortablejs": "^1.15.0",
     "spark-md5": "^3.0.2",
     "vue": "^3.3.4",
+    "vue-google-charts": "^1.1.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.2"
   },

webapp/src/components/BarChart.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="card row" v-if="dataLoaded">
+        <GChart type="ColumnChart" :data="chartData" :options="chartOptions" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { GChart } from 'vue-google-charts';
+import { authHeader, handleResponse } from '@/utils/authentication';
+//import { DatetimeFormat } from 'vue-i18n';
+var data_col: any;
+
+const options_col = {
+    height: 300,
+    chartArea: {
+        top: 25,
+        width: '85%',
+        height: '80%'
+    },
+    bar: {
+        groupWidth: '90%'
+    },
+    legend: {
+        position: 'none'
+    },
+    hAxis: {
+        format: 'HH',
+        minorGridlines: {
+            count: 0
+        }
+    },
+    vAxis: {
+        minValue: 0,
+        format: '# Wh'
+    }
+};
+export default defineComponent({
+    components: {
+        GChart,
+    },
+    data() {
+        return {
+            chartData: data_col,
+            chartOptions: options_col,
+            dataLoaded: false,
+        }
+    },
+    created() {
+        this.getInitialData();
+        this.startautorefresh();
+    },
+    methods: {
+        getInitialData() {
+            this.dataLoaded = false;
+            fetch("/api/databaseHour", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
+                .then((energy) => {
+                    if (energy) {
+                        this.chartData = [[{ type: 'date', id: 'Time' }, { type: 'number', id: 'Energy' }]];
+                        energy.forEach((x: any[]) => {
+                            var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3]);
+                            this.chartData.push([d, Math.round(x[4])])
+                        });
+                        this.dataLoaded = true;
+                    }
+                });
+
+            // var date_formatter = new google.visualization.DateFormat({
+            //     pattern: "dd.MM.YY HH:mm"
+            // });
+            // date_formatter.format(data, 0);
+        },
+        callEveryHour() {
+            this.getInitialData();
+            setInterval(this.getInitialData, 1000 * 60 * 60);   // refresh every hour
+        },
+        startautorefresh() {
+            var nextDate = new Date();
+            nextDate.setHours(nextDate.getHours() + 1);
+            nextDate.setMinutes(0);
+            nextDate.setSeconds(5);
+            var difference: number = nextDate.valueOf() - Date.now();
+            setTimeout(this.callEveryHour, difference);
+        },
+    }
+});
+</script>

webapp/src/components/CalendarChart.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="card row" v-if="dataLoaded">
+        <GChart type="Calendar" :data="chartData" :options="chartOptions" :settings="{ packages: ['calendar'] }" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { GChart } from 'vue-google-charts';
+import { authHeader, handleResponse } from '@/utils/authentication';
+var data_cal: any;
+
+export const options_cal = {
+    height: 270,
+    colorAxis: {
+        minValue: 0,
+        colors: ['#FFFFFF', '#0000FF']
+    },
+    calendar: {
+        cellSize: 24,
+    },
+};
+export default defineComponent({
+    components: {
+        GChart,
+    },
+    data() {
+        return {
+            chartData: data_cal,
+            chartOptions: options_cal,
+            dataLoaded: false,
+        }
+    },
+    created() {
+        this.getInitialData();
+        this.startautorefresh();
+    },
+    methods: {
+        getInitialData() {
+            this.dataLoaded = false;
+            fetch("/api/databaseDay", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
+                .then((energy) => {
+                    if (energy) {
+                        this.chartData = [[{ type: 'date', id: 'Date' }, { type: 'number', id: 'Energy' }]];
+                        var d: Date;
+                        var a: any;
+                        energy.forEach((x: any[]) => {
+                            d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                            a = [d, Math.round(x[4])]
+                            this.chartData.push(a)
+                        })
+                        this.dataLoaded = true;
+                    }
+                })
+        },
+        callEveryHour() {
+            this.getInitialData();
+            setInterval(this.getInitialData, 1000 * 60 * 60);   // refresh every hour
+        },
+        startautorefresh() {
+            var nextDate = new Date();
+            nextDate.setHours(nextDate.getHours() + 1);
+            nextDate.setMinutes(0);
+            nextDate.setSeconds(5);
+            var difference: number = nextDate.valueOf() - Date.now();
+            setTimeout(this.callEveryHour, difference);
+        },
+    }
+});
+</script>

webapp/src/components/MemoryInfo.vue

@@ -14,6 +14,7 @@
                 <tbody>
                     <FsInfo :name="$t('memoryinfo.Heap')" :total="systemStatus.heap_total"
                         :used="systemStatus.heap_used" />
+                    <a href='/api/database'>Read Database</a>
                     <FsInfo :name="$t('memoryinfo.LittleFs')" :total="systemStatus.littlefs_total"
                         :used="systemStatus.littlefs_used" />
                     <FsInfo :name="$t('memoryinfo.Sketch')" :total="systemStatus.sketch_total"

webapp/src/views/HomeView.vue

@@ -16,6 +16,14 @@
                     </button>
                 </div>
             </div>
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <BarChart />
+                        <CalendarChart />
+                    </div>
+                </div>
+            </div>
 
             <div class="tab-content" id="v-pills-tabContent" :class="{
                 'col-sm-9 col-md-10': inverterData.length > 1,
@@ -25,13 +33,12 @@
                     :id="'v-pills-' + inverter.serial" role="tabpanel"
                     :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
                     <div class="card">
-                        <div class="card-header d-flex justify-content-between align-items-center"
+                        <div class="card-header d-flex justify-content-between align-items-center" :class="{
-                            :class="{
+                            'text-bg-tertiary': !inverter.poll_enabled,
-                                'text-bg-tertiary': !inverter.poll_enabled,
+                            'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
-                                'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
+                            'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
-                                'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
+                            'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
-                                'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
+                        }">
-                            }">
                             <div class="p-1 flex-grow-1">
                                 <div class="d-flex flex-wrap">
                                     <div style="padding-right: 2em;">
@@ -42,11 +49,11 @@
                                     </div>
                                     <div style="padding-right: 2em;">
                                         {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
-                                                $n(inverter.limit_absolute, 'decimalNoDigits')
+                                            $n(inverter.limit_absolute, 'decimalNoDigits')
                                         }} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }}
                                     </div>
                                     <div style="padding-right: 2em;">
-                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', {'val': $n(inverter.data_age) }) }}
+                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', { 'val': $n(inverter.data_age) }) }}
                                         <template v-if="inverter.data_age > 300">
                                             / {{ calculateAbsoluteTime(inverter.data_age) }}
                                         </template>
@@ -56,7 +63,8 @@
                             <div class="btn-toolbar p-2" role="toolbar">
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip :title="$t('home.ShowSetInverterLimit')">
+                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip
+                                        :title="$t('home.ShowSetInverterLimit')">
                                         <BIconSpeedometer style="font-size:24px;" />
 
                                     </button>
@@ -64,7 +72,8 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip :title="$t('home.TurnOnOff')">
+                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip
+                                        :title="$t('home.TurnOnOff')">
                                         <BIconPower style="font-size:24px;" />
 
                                     </button>
@@ -72,7 +81,8 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowDevInfo(inverter.serial)" v-tooltip :title="$t('home.ShowInverterInfo')">
+                                        @click="onShowDevInfo(inverter.serial)" v-tooltip
+                                        :title="$t('home.ShowInverterInfo')">
                                         <BIconCpu style="font-size:24px;" />
 
                                     </button>
@@ -94,16 +104,17 @@
                         </div>
                         <div class="card-body">
                             <div class="row flex-row-reverse flex-wrap-reverse g-3">
-                                <template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()">
+                                <template
-                                    <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel">
+                                    v-for="chanType in [{ obj: inverter.INV, name: 'INV' }, { obj: inverter.AC, name: 'AC' }, { obj: inverter.DC, name: 'DC' }].reverse()">
+                                    <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x => +x)"
+                                        :key="channel">
                                         <template v-if="(chanType.name != 'DC') ||
                                             (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
                                             (chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.v || 0 > 0)
                                             ">
                                             <div class="col">
                                                 <InverterChannelInfo :channelData="chanType.obj[channel]"
-                                                    :channelType="chanType.name"
+                                                    :channelType="chanType.name" :channelNumber="channel" />
-                                                    :channelNumber="channel" />
                                             </div>
                                         </template>
                                     </template>
@@ -134,8 +145,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideEventlog"
+                    <button type="button" class="btn btn-secondary" @click="onHideEventlog" data-bs-dismiss="modal">{{
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                        $t('home.Close') }}</button>
                 </div>
 
             </div>
@@ -160,8 +171,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo"
+                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo" data-bs-dismiss="modal">{{
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                        $t('home.Close') }}</button>
                 </div>
             </div>
         </div>
@@ -189,12 +200,12 @@
                         <template v-if="!limitSettingLoading">
 
                             <div class="row mb-3">
-                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
+                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
+                                </label>
                                 <div class="col-sm-4">
                                     <div class="input-group">
                                         <input type="text" class="form-control" id="inputCurrentLimit"
-                                            aria-describedby="currentLimitType" v-model="currentLimitRelative"
+                                            aria-describedby="currentLimitType" v-model="currentLimitRelative" disabled />
-                                            disabled />
                                         <span class="input-group-text" id="currentLimitType">%</span>
                                     </div>
                                 </div>
@@ -226,7 +237,8 @@
                             </div>
 
                             <div class="row mb-3">
-                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
+                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
+                                }}</label>
                                 <div class="col-sm-9">
                                     <div class="input-group">
                                         <input type="number" name="inputTargetLimit" class="form-control"
@@ -236,11 +248,14 @@
                                             data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText
                                             }}</button>
                                         <ul class="dropdown-menu dropdown-menu-end">
-                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
-                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a></li>
+                                                $t('home.Relative') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
+                                                $t('home.Absolute') }}</a></li>
                                         </ul>
                                     </div>
-                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert" v-html="$t('home.LimitHint')"></div>
+                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
+                                        v-html="$t('home.LimitHint')"></div>
                                 </div>
                             </div>
                         </template>
@@ -248,11 +263,14 @@
                     </div>
 
                     <div class="modal-footer">
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{ $t('home.SetPersistent') }}</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
+                            $t('home.SetPersistent') }}</button>
 
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{ $t('home.SetNonPersistent') }}</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
+                            $t('home.SetNonPersistent') }}</button>
 
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close')
+                        }}</button>
                     </div>
                 </form>
             </div>
@@ -279,14 +297,15 @@
 
                     <template v-if="!powerSettingLoading">
                         <div class="row mb-3 align-items-center">
-                            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
+                            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
+                            }}</label>
                             <div class="col">
                                 <span class="badge" :class="{
-                                    'text-bg-danger': successCommandPower == 'Failure',
+                                        'text-bg-danger': successCommandPower == 'Failure',
-                                    'text-bg-warning': successCommandPower == 'Pending',
+                                        'text-bg-warning': successCommandPower == 'Pending',
-                                    'text-bg-success': successCommandPower == 'Ok',
+                                        'text-bg-success': successCommandPower == 'Ok',
-                                    'text-bg-secondary': successCommandPower == 'Unknown',
+                                        'text-bg-secondary': successCommandPower == 'Unknown',
-                                }">
+                                    }">
                                     {{ $t('home.' + successCommandPower) }}
                                 </span>
                             </div>
@@ -313,7 +332,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script lang="ts">
@@ -323,6 +341,8 @@ import DevInfo from '@/components/DevInfo.vue';
 import EventLog from '@/components/EventLog.vue';
 import HintView from '@/components/HintView.vue';
 import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
+import BarChart from "@/components/BarChart.vue";
+import CalendarChart from "@/components/CalendarChart.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
@@ -353,6 +373,8 @@ export default defineComponent({
         EventLog,
         HintView,
         InverterChannelInfo,
+        BarChart,
+        CalendarChart,
         InverterTotalInfo,
         BIconArrowCounterclockwise,
         BIconCheckCircleFill,
@@ -457,7 +479,7 @@ export default defineComponent({
                 'decimalTwoDigits');
         },
         inverterData(): Inverter[] {
-            return this.liveData.inverters.slice().sort((a : Inverter, b: Inverter) => {
+            return this.liveData.inverters.slice().sort((a: Inverter, b: Inverter) => {
                 return a.order - b.order;
             });
         }

webapp/vite.config.ts

@@ -52,15 +52,15 @@ export default defineConfig({
   server: {
     proxy: {
       '^/api': {
-        target: 'http://192.168.20.110/'
+        target: 'http://192.168.2.93/'
       },
       '^/livedata': {
-        target: 'ws://192.168.20.110/',
+        target: 'ws://192.168.2.93/',
         ws: true,
         changeOrigin: true
       },
       '^/console': {
-        target: 'ws://192.168.20.110/',
+        target: 'ws://192.168.2.93/',
         ws: true,
         changeOrigin: true
       }