From 90dd51a4e0ecdade9a5fe5073d0f18fcf123475e Mon Sep 17 00:00:00 2001
From: Viktor Andersson <30777521+VIKTORVAV99@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:04:11 +0200
Subject: [PATCH] sync area graph index between graphs (#7331)

---
 web/src/features/charts/elements/AreaGraph.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/features/charts/elements/AreaGraph.tsx b/web/src/features/charts/elements/AreaGraph.tsx
index bc99e34dfb..7cfa16bee9 100644
--- a/web/src/features/charts/elements/AreaGraph.tsx
+++ b/web/src/features/charts/elements/AreaGraph.tsx
@@ -3,7 +3,7 @@ import { Series, stack, stackOffsetDiverging } from 'd3-shape';
 import { add } from 'date-fns';
 import TimeAxis from 'features/time/TimeAxis';
 import { useHeaderHeight } from 'hooks/headerHeight';
-import { useAtom } from 'jotai';
+import { atom, useAtom, useAtomValue } from 'jotai';
 import React, { useMemo, useRef, useState } from 'react';
 import { ZoneDetail } from 'types';
 import useResizeObserver from 'use-resize-observer';
@@ -116,6 +116,8 @@ interface TooltipData {
   zoneDetail: ZoneDetail;
 }
 
+const AreaGraphIndexSelectedAtom = atom<number | null>(null);
+
 function AreaGraph({
   data,
   testId,
@@ -136,7 +138,7 @@ function AreaGraph({
   const { width: observerWidth = 0, height: observerHeight = 0 } =
     useResizeObserver<HTMLDivElement>({ ref: reference });
 
-  const [selectedDate] = useAtom(selectedDatetimeIndexAtom);
+  const selectedDate = useAtomValue(selectedDatetimeIndexAtom);
   const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
   const isBiggerThanMobile = useBreakpoint('sm');
   const zoneId = useGetZoneFromPath();
@@ -184,7 +186,7 @@ function AreaGraph({
     [containerWidth, startTime, endTime]
   );
 
-  const [graphIndex, setGraphIndex] = useState<number | null>(null);
+  const [graphIndex, setGraphIndex] = useAtom(AreaGraphIndexSelectedAtom);
   const [selectedLayerIndex, setSelectedLayerIndex] = useState<number | null>(null);
 
   const hoverLineTimeIndex = graphIndex ?? selectedDate.index;