chore: unify water chart

Author: mdvanes

apps/client/src/Components/Pages/Energy/charts/WaterChart.tsx

@@ -1,51 +1,53 @@
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { Button, Chip, IconButton, Stack } from "@mui/material";
 import { FC, useState } from "react";
-import {
-    useGetWaterQuery,
-    type GetWaterResponse,
-} from "../../../../Services/generated/energyUsageApiWithRetry";
+import { BarProps } from "recharts";
+import { useGetWaterQuery } from "../../../../Services/generated/energyUsageApiWithRetry";
 import EnergyChart, {
+    SensorItem,
     axisDateTimeFormatDayHour,
 } from "../../../Molecules/EnergyChart/EnergyChart";
 
-type WaterSensorItem = GetWaterResponse[0][0] & {
-    delta?: number;
-    liters?: number;
-};
-
-const INTERVAL_24_HOURS = 1000 * 60 * 60 * 24;
-const INTERVAL_5_MIN = 1000 * 60 * 5;
-
-const aggregateByInterval =
-    (interval: number) =>
-    (acc: WaterSensorItem[], next: WaterSensorItem): WaterSensorItem[] => {
-        const prevEntry = acc.at(-1) ?? next;
-        const prevTime = new Date(prevEntry.last_changed ?? "0").getTime();
-        const nextTime = new Date(next.last_changed ?? "0").getTime();
-        if (nextTime <= prevTime + interval) {
-            return [
-                ...acc.slice(0, -1),
-                { ...prevEntry, liters: (prevEntry.liters ?? 0) + 1 },
-            ];
-        }
-        return [...acc, { ...next, liters: (next.liters ?? 0) + 1 }];
-    };
+const COLORS = ["#66bb6a"];
 
 export const WaterChart: FC = () => {
     const [mode, setMode] = useState<"day" | "month">("day");
     const { data, isLoading, isFetching, refetch } = useGetWaterQuery({
         range: mode,
     });
 
-    const sensorEntries: WaterSensorItem[] = data?.[0] ?? [];
+    const sensors = data?.flatMap((sensor) => sensor[0]) ?? [];
 
-    const interval = mode === "month" ? INTERVAL_24_HOURS : INTERVAL_5_MIN;
+    const entriesBySensor = (
+        data?.flatMap((sensor) =>
+            sensor
+                .map((item) => ({
+                    time: new Date(item?.last_changed ?? 0).getTime(),
+                    [`${item.attributes?.friendly_name ?? item?.entity_id}`]:
+                        parseFloat(item.state ?? ""),
+                }))
+                .slice(1)
+        ) ?? []
+    ).toSorted((a, b) => {
+        return a.time - b.time;
+    });
+    const entriesByTimestamp = entriesBySensor.reduce<
+        Record<number, SensorItem>
+    >((acc: Record<number, SensorItem>, item: SensorItem) => {
+        acc[item.time] = { ...acc[item.time], ...item };
+        return acc;
+    }, {});
+    const entries = Object.values(entriesByTimestamp);
 
-    const aggregatedByInterval = sensorEntries.reduce<WaterSensorItem[]>(
-        aggregateByInterval(interval),
-        []
-    );
+    const bars: Omit<BarProps, "ref">[] = sensors.map((sensor, i) => ({
+        dataKey: `${sensor.attributes?.friendly_name ?? sensor?.entity_id}`,
+        fill: COLORS[i],
+        unit: "l",
+    }));
+
+    if (!data) {
+        return <div>Loading...</div>;
+    }
 
     return (
         <>
@@ -84,19 +86,9 @@ export const WaterChart: FC = () => {
                     ))}
             </Stack>
             <EnergyChart
-                data={aggregatedByInterval.map((item) => ({
-                    time: new Date(item.last_changed ?? "0").getTime() ?? 1,
-                    liters: item.liters,
-                    state: item.state,
-                }))}
+                data={entries}
                 config={{
-                    bars: [
-                        {
-                            dataKey: "liters",
-                            fill: "#66bb6a",
-                            unit: "l",
-                        },
-                    ],
+                    bars,
                     rightYAxis: {
                         unit: "l",
                     },

apps/server/src/energyusage/energyusage.controller.spec.ts

@@ -43,7 +43,7 @@ describe("EnergyUsage Controller", () => {
                     entity_id: "water_id",
                     state: "1",
                     attributes: {},
-                    last_changed: "123",
+                    last_changed: "2025-04-30T06:00:00.000Z",
                     last_updated: "124",
                 },
             ],
@@ -62,14 +62,14 @@ describe("EnergyUsage Controller", () => {
                     entity_id: "water_id",
                     state: "1",
                     attributes: {},
-                    last_changed: "123",
+                    last_changed: "2025-04-30T06:00:00.000Z",
                     last_updated: "124",
                 },
             ],
         ]);
         expect(mockGot).toBeCalledTimes(1);
         expect(mockGot).toBeCalledWith(
-            "/api/history/period/2024-04-24T00:00:00.000Z?end_time=2024-04-25T00:00:00.000Z&filter_entity_id=&minimal_response",
+            "/api/history/period/2024-04-24T00:00:00.000Z?end_time=2024-04-25T00:00:00.000Z&filter_entity_id=",
             {
                 headers: {
                     Authorization: "Bearer ",

apps/server/src/energyusage/energyusage.controller.ts

@@ -514,15 +514,38 @@ export class EnergyUsageController {
             const startTime = new Date(time - startOffset).toISOString();
             const endTime = new Date(time).toISOString();
 
-            const url = `${this.haApiConfig.baseUrl}/api/history/period/${startTime}?end_time=${endTime}&filter_entity_id=${this.haApiConfig.waterSensorId}&minimal_response`;
+            const url = `${this.haApiConfig.baseUrl}/api/history/period/${startTime}?end_time=${endTime}&filter_entity_id=${this.haApiConfig.waterSensorId}`;
 
             const result = await got(url, {
                 headers: {
                     Authorization: `Bearer ${this.haApiConfig.token}`,
                 },
             }).json<GetHaSensorHistoryResponse>();
 
-            return result;
+            const reduced = result
+                .map((sensorEntries) =>
+                    // Reduce by timeslot, timeslot is RANGE, from 00:00
+                    sensorEntries.reduce(
+                        reduceSensorEntriesByTimeslot(
+                            range === "day" ? DAY_IN_MS / 24 : DAY_IN_MS
+                        ),
+                        []
+                    )
+                )
+                .map((sensorEntries) => {
+                    if (
+                        sensorEntries.length > 0 &&
+                        sensorEntries[0].attributes.device_class === "water"
+                    ) {
+                        return sensorEntries.reduce(
+                            reduceSensorEntriesToDeltas,
+                            []
+                        );
+                    }
+                    return sensorEntries;
+                });
+
+            return reduced;
         } catch (err) {
             this.logger.error(`[${req.user.name}] ${err}`);
             throw new HttpException(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeremote",
-  "version": "3.7.14",
+  "version": "3.7.15",
   "license": "MIT",
   "scripts": {
     "writeGitInfo": "ts-node --project ./tsconfig.node.json writeGitInfo.ts",