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
2023-06-30 14:01:47 +02:00 · 2023-06-30 14:01:47 +02:00 · 08579b0da8
commit 08579b0da8
parent 372f7f7eaa
17 changed files with 496 additions and 85 deletions
--- a/README.md
+++ b/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!
--- a/docs/screenshots/23_Database.png
+++ b/docs/screenshots/23_Database.png
--- a/docs/screenshots/README.md
+++ b/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)
--- a/include/WebApi_database.h
+++ b/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;
 };
--- a/platformio.ini
+++ b/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

--- a/src/MqttHandleInverterTotal.cpp
+++ b/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
    }
 }
--- a/src/WebApi_database.cpp
+++ b/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
-        return (false);
+    if (!getLocalTime(&timeinfo, 5)) {
+        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;
-    d.tm_hour = old_hour;
+    struct pvData d;
+    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;
    }
-
-    try {
-        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);
-    }
+    AsyncWebServerResponse* response = request->beginChunkedResponse("application/json", readchunk);
+    request->send(response);
 }

+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]]')
--- a/webapp/.yarnrc.yml
+++ b/webapp/.yarnrc.yml
@ -0,0 +1 @@
+nodeLinker: node-modules
--- a/webapp/package.json
+++ b/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"
  },
--- a/webapp/src/components/BarChart.vue
+++ b/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>
--- a/webapp/src/components/CalendarChart.vue
+++ b/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>
--- a/webapp/src/components/MemoryInfo.vue
+++ b/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"
--- a/webapp/src/views/HomeView.vue
+++ b/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"
-                            :class="{
-                                'text-bg-tertiary': !inverter.poll_enabled,
-                                'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
-                                'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
-                                'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
-                            }">
+                        <div class="card-header d-flex justify-content-between align-items-center" :class="{
+                            'text-bg-tertiary': !inverter.poll_enabled,
+                            'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
+                            'text-bg-warning': 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 v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel">
+                                <template
+                                    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"
-                                                    :channelNumber="channel" />
+                                                    :channelType="chanType.name" :channelNumber="channel" />
                                            </div>
                                        </template>
                                    </template>
@ -134,8 +145,8 @@
                </div>

                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideEventlog"
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                    <button type="button" class="btn btn-secondary" @click="onHideEventlog" data-bs-dismiss="modal">{{
+                        $t('home.Close') }}</button>
                </div>

            </div>
@ -160,8 +171,8 @@
                </div>

                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo"
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo" data-bs-dismiss="modal">{{
+                        $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"
-                                            disabled />
+                                            aria-describedby="currentLimitType" v-model="currentLimitRelative" 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(0)" href="#">{{ $t('home.Absolute') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
+                                                $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-warning': successCommandPower == 'Pending',
-                                    'text-bg-success': successCommandPower == 'Ok',
-                                    'text-bg-secondary': successCommandPower == 'Unknown',
-                                }">
+                                        'text-bg-danger': successCommandPower == 'Failure',
+                                        'text-bg-warning': successCommandPower == 'Pending',
+                                        'text-bg-success': successCommandPower == 'Ok',
+                                        '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;
            });
        }
--- a/webapp/vite.config.ts
+++ b/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
      }
--- a/webapp_dist/index.html.gz
+++ b/webapp_dist/index.html.gz
--- a/webapp_dist/js/app.js.gz
+++ b/webapp_dist/js/app.js.gz
--- a/webapp_dist/zones.json.gz
+++ b/webapp_dist/zones.json.gz