web: add total in summary

web_viewer/__init__.py

@@ -80,6 +80,26 @@ def hourly_chart(_: web.Request):
     return res
 
 
+def dict_factory(cursor, row):
+    d = {}
+    for idx, col in enumerate(cursor.description):
+        d[col[0]] = row[idx]
+    return d
+
+def total(_: web.Request):
+    if "DB_NAME" not in config:
+        return web.json_response({}, headers=VITE_CORS_HEADER)
+    global db_connection
+    if db_connection is None:
+       db_connection = sqlite3.connect(config["DB_NAME"])
+    cursor = db_connection.cursor()
+    cursor.row_factory = dict_factory
+    total = cursor.execute(
+        "SELECT SUM(pv) as pv, SUM(battery_charged) as battery_charged, SUM(battery_discharged) as battery_discharged, SUM(grid_import) as grid_import, SUM(grid_export) as grid_export, SUM(consumption) as consumption FROM daily_chart").fetchone()
+    res = web.json_response(total, headers=VITE_CORS_HEADER)
+    return res
+
+
 def daily_chart(_: web.Request):
     if "DB_NAME" not in config:
         return web.json_response([], headers=VITE_CORS_HEADER)
@@ -104,6 +124,7 @@ def create_runner():
         web.get("/state", state),
         web.get("/hourly-chart", hourly_chart),
         web.get("/daily-chart", daily_chart),
+        web.get("/total", total),
         web.static("/", path.join(path.dirname(__file__), "public"))
     ])
     return web.AppRunner(app)

web_viewer/fe_src/src/Intefaces.ts

@@ -62,4 +62,13 @@ export interface IClassNameProps {
 
 export interface IUpdateChart {
   updateItem: (hourlyItem: never[]) => void;
+}
+
+export interface ITotal {
+  pv: number;
+  battery_charged: number;
+  battery_discharged: number;
+  grid_import: number;
+  grid_export: number;
+  consumption: number;
 }

web_viewer/fe_src/src/components/Summary.tsx

@@ -1,5 +1,5 @@
-import { memo, useState } from "react";
-import { IInverterData } from "../Intefaces";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { IInverterData, ITotal } from "../Intefaces";
 import GeneralValue from "./GeneralValue";
 import "./Summary.css";
 
@@ -9,6 +9,30 @@ interface IProps {
 function Summary({ invertData }: IProps) {
   const [isShowCharged, setIsShowCharnged] = useState(false);
   const [isShowFeed, setIsShowFeed] = useState(false);
+  const isFetchingRef = useRef(false);
+  const [total, setTotal] = useState<ITotal>();
+
+  const fetchTotal = useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    try {
+      console.log("Fetching total...");
+      isFetchingRef.current = true;
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/total`);
+      const json = await res.json();
+      setTotal(json);
+    } catch (err) {
+      console.error("Fetch total error", err);
+    } finally {
+      isFetchingRef.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTotal();
+  }, [fetchTotal]);
+
   return (
     <div className="summary row">
       <div className="yield summary-item flex-1">
@@ -19,6 +43,12 @@ function Summary({ invertData }: IProps) {
             <div className="yield-texts text-right">
               <GeneralValue value={invertData.e_pv_day} unit=" kWh" />
               <div className="description">Yield today</div>
+              {total && (
+                <>
+                  <GeneralValue value={total.pv} unit=" kWh" />
+                  <div className="description">Total Yield</div>
+                </>
+              )}
             </div>
           </div>
         </div>
@@ -43,6 +73,20 @@ function Summary({ invertData }: IProps) {
               <div className="description">
                 {isShowCharged ? "Charged today" : "Discharged today"}
               </div>
+              {total && (
+                <>
+                  <GeneralValue
+                    value={(isShowCharged
+                      ? total.battery_charged
+                      : total.battery_discharged
+                    ).toFixed(1)}
+                    unit=" kWh"
+                  />
+                  <div className="description">
+                    Total {isShowCharged ? "Charged" : "Discharged"}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>
@@ -76,6 +120,20 @@ function Summary({ invertData }: IProps) {
                 <div className="description">
                   {isShowFeed ? "Today Export" : "Today Import"}
                 </div>
+                {total && (
+                  <>
+                    <GeneralValue
+                      value={(isShowFeed
+                        ? total.grid_export
+                        : total.grid_import
+                      ).toFixed(1)}
+                      unit=" kWh"
+                    />
+                    <div className="description">
+                      Total {isShowFeed ? "Export" : "Import"}
+                    </div>
+                  </>
+                )}
               </div>
             </div>
           </div>
@@ -97,6 +155,15 @@ function Summary({ invertData }: IProps) {
                 unit=" kWh"
               />
               <div className="description">Today Comsumption</div>
+              {total && (
+                <>
+                  <GeneralValue
+                    value={total.consumption.toFixed(1)}
+                    unit=" kWh"
+                  />
+                  <div className="description">Total Comsumption</div>
+                </>
+              )}
             </div>
           </div>
         </div>

web_viewer/public/assets/GeneralValue-hjtRabQp.js → web_viewer/public/assets/GeneralValue-ztwt6XHn.js

@@ -1 +1 @@
-import{j as e}from"./index-WUe1rxM1.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
+import{j as e}from"./index-C7XF5frs.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};