feat: move tracker marker when hovering over chart

Author: mdvanes

apps/client/src/Components/Molecules/DataLora/AssetChart.tsx

@@ -5,15 +5,20 @@ import useStyles from "./Map.styles";
 
 interface Props {
     coords: TrackerItem[][];
+    setActiveMarkerTimestamp: (timestamp: string) => void;
 }
 
-export const AssetsChart: FC<Props> = ({ coords }) => {
+export const AssetsChart: FC<Props> = ({
+    coords,
+    setActiveMarkerTimestamp,
+}) => {
     const { classes } = useStyles();
 
     const asset1 = coords[0]; // Traccar is not sending batteryLevel attribute.
     const data = asset1
         ? asset1.map((item) => ({
               battery: item.batteryLevel, // ? parseInt(item.battery, 10) : -1,
+              time: item.time,
               // temperature: item.temperature, // ? parseInt(item.temperature, 10) : -1,
           }))
         : [];
@@ -27,6 +32,15 @@ export const AssetsChart: FC<Props> = ({ coords }) => {
                     dataKey="battery"
                     stroke="#8884d8"
                     dot={false}
+                    activeDot={{
+                        onMouseOver: (_fn, point) => {
+                            const p = point as { payload?: { time?: string } };
+                            setActiveMarkerTimestamp(p?.payload?.time ?? "");
+                        },
+                        onMouseOut: (_fn, point) => {
+                            setActiveMarkerTimestamp("");
+                        },
+                    }}
                 />
                 <YAxis
                     yAxisId="left"
@@ -35,20 +49,19 @@ export const AssetsChart: FC<Props> = ({ coords }) => {
                     width={75}
                     domain={[0, 100]}
                 />
-                {/* <Line
-                    yAxisId="right"
-                    type="monotone"
-                    dataKey="temperature"
-                    stroke="#888400"
-                /> */}
-                {/* <YAxis
-                    yAxisId="right"
-                    orientation="right"
-                    label="°C"
-                    width={75}
-                /> */}
-                <XAxis dataKey="time" />
+                <XAxis
+                    dataKey="time"
+                    tickFormatter={(value) =>
+                        new Date(value.toString()).toLocaleString("en-uk", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        })
+                    }
+                />
                 <Tooltip
+                    labelFormatter={(value) =>
+                        new Date(value.toString()).toLocaleString("en-uk")
+                    }
                     formatter={(value, name) => {
                         if (name === "battery") {
                             return `${value}%`;

apps/client/src/Components/Molecules/DataLora/Map.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { MapContainer } from "react-leaflet";
 import { AssetsChart } from "./AssetChart";
 import useStyles from "./Map.styles";
@@ -14,10 +14,16 @@ const Map: FC<Props> = ({ showChart = false }) => {
     const { coords, update, isLoading, toggleQueryType, queryType } =
         useLocQuery();
 
+    const [activeMarkerTimestamp, setActiveMarkerTimestamp] =
+        useState<string>("");
+
     return (
         <div className={classes.map}>
             <MapContainer zoom={20}>
-                <MapContent coords={coords} />
+                <MapContent
+                    coords={coords}
+                    activeMarkerTimestamp={activeMarkerTimestamp}
+                />
             </MapContainer>
             <div className="custom-controls">
                 <button onClick={() => update()} disabled={isLoading}>
@@ -27,7 +33,12 @@ const Map: FC<Props> = ({ showChart = false }) => {
                     {queryType}
                 </button>
             </div>
-            {showChart && coords && <AssetsChart coords={coords} />}
+            {showChart && coords && (
+                <AssetsChart
+                    coords={coords}
+                    setActiveMarkerTimestamp={setActiveMarkerTimestamp}
+                />
+            )}
         </div>
     );
 };

apps/client/src/Components/Molecules/DataLora/MapContent.tsx

@@ -14,6 +14,7 @@ const TILES_LAYER_DARK =
 
 interface Props {
     coords: TrackerItem[][];
+    activeMarkerTimestamp: string;
 }
 
 const LINE_COLORS = ["#3488ff", "green", "red", "yellow", "purple"] as const;
@@ -44,7 +45,7 @@ const hasValidCoords = (item: TrackerItem): item is TrackerItem =>
     typeof item.loc[0] === "number" &&
     typeof item.loc[1] === "number";
 
-const MapContent: FC<Props> = ({ coords }) => {
+const MapContent: FC<Props> = ({ coords, activeMarkerTimestamp }) => {
     const [markers, setMarkers] = useState<TrackerItem[] | null>(null);
     const map = useMap();
 
@@ -64,6 +65,25 @@ const MapContent: FC<Props> = ({ coords }) => {
         updateBoundsAndMarker();
     }, [coords, updateBoundsAndMarker]);
 
+    useEffect(() => {
+        setMarkers((prevMarkers) => {
+            if (prevMarkers) {
+                const activeCoord = coords[0].find(
+                    (item) => item.time === activeMarkerTimestamp
+                );
+                const [firstMarker, ...otherMarkers] = prevMarkers;
+                return [
+                    {
+                        ...firstMarker,
+                        loc: activeCoord?.loc ?? firstMarker.loc,
+                    },
+                    ...otherMarkers,
+                ];
+            }
+            return prevMarkers;
+        });
+    }, [activeMarkerTimestamp, coords]);
+
     return (
         <>
             <TileLayer

package.json

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