Handle missing data points in chart

codeforbielefeld · Jan 16, 2024 · 26134be · 26134be
1 parent da9bee6
commit 26134be
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/src/components/SensorChart/index.tsx b/src/components/SensorChart/index.tsx
@@ -59,7 +59,7 @@ const recentDaysChartOptions = {
     },
 };
 
-function extractRecentDaysDataset(details: SensorDetails): ChartData<"bar" | "line", number[], string> {
+function extractRecentDaysDataset(details: SensorDetails): ChartData<"bar" | "line", (number | undefined)[], string> {
     const colors = {
         red: "rgb(255, 99, 132)",
         orange: "rgb(255, 159, 64)",
@@ -70,20 +70,20 @@ function extractRecentDaysDataset(details: SensorDetails): ChartData<"bar" | "li
         grey: "rgb(201, 203, 207)",
     };
     return {
-        labels: details.measurements.map((d) => d.timestamp.toLocaleDateString()),
+        labels: details.moistureMeasurements.map((d) => d.timestamp.toLocaleDateString()),
         datasets: [
             {
                 label: "Tageswert",
                 type: "line",
-                data: details.measurements.map((d) => d.moisture),
+                data: details.moistureMeasurements.map((d) => d.sensor),
                 borderColor: colors.green,
                 backgroundColor: colors.green,
                 yAxisID: "moisture",
             },
             {
                 label: "Globales Mittel",
                 type: "line",
-                data: details.peerMeasurements.map((d) => d.moisture),
+                data: details.moistureMeasurements.map((d) => d.peers),
                 borderColor: colors.grey,
                 backgroundColor: colors.grey,
                 yAxisID: "moisture",

diff --git a/src/hooks/useSensorDetails.ts b/src/hooks/useSensorDetails.ts
@@ -1,5 +1,5 @@
 import useFetch from "use-http";
-import { MoistureMeasurement, SensorDetails, SensorInfo } from "../model/models";
+import { SensorDetails, SensorInfo } from "../model/models";
 
 const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 
@@ -18,17 +18,35 @@ function processData(sensorInfo: SensorInfo, data: SensorDetailsDto): SensorDeta
     function toDate(timestamp: string): Date {
         return new Date(/\+|Z/i.test(timestamp) ? timestamp : timestamp + "Z");
     }
-    function processMeasurement({ moisture, time }: { moisture: number; time: string }): MoistureMeasurement {
+    function processMeasurement({ moisture, time }: { moisture: number; time: string }): {
+        moisture: number;
+        timestamp: Date;
+    } {
         return { moisture, timestamp: toDate(time) };
     }
 
-    const measurements = data.sensor.map(processMeasurement);
+    const sensorMeasurements = data.sensor.map(processMeasurement);
     const peerMeasurements = data.peers.map(processMeasurement);
+    const allMeasurements = new Map<number, { timestamp: Date; sensor?: number; peers?: number }>();
+    sensorMeasurements.forEach(({ timestamp, moisture }) => {
+        allMeasurements.set(timestamp.getTime(), { timestamp, sensor: moisture });
+    });
+
+    peerMeasurements.forEach(({ timestamp, moisture }) => {
+        const existing = allMeasurements.get(timestamp.getTime());
+        if (existing) {
+            existing.peers = moisture;
+        } else {
+            allMeasurements.set(timestamp.getTime(), { timestamp, peers: moisture });
+        }
+    });
+
+    const moistureMeasurements = [...allMeasurements.values()];
+    moistureMeasurements.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
 
     return {
-        measurements,
-        peerMeasurements,
         info: sensorInfo,
+        moistureMeasurements,
     };
 }
 

diff --git a/src/model/models.ts b/src/model/models.ts
@@ -42,11 +42,11 @@ export interface MoistureData {
 
 export interface MoistureMeasurement {
     timestamp: Date;
-    moisture: number;
+    sensor?: number;
+    peers?: number;
 }
 
 export interface SensorDetails {
     info: SensorInfo;
-    measurements: MoistureMeasurement[];
-    peerMeasurements: MoistureMeasurement[];
+    moistureMeasurements: MoistureMeasurement[];
 }