frontend: fix chart edgecase to properly update the total amount

On mobile the total changes when the user selects a point on the
chart so that they can see exact amount at the time.

With scrolling or 2nd finger changing the currency it can happen
that the amount does not update, ending up with a wrong amount/unit.

Fixed by resetting the tooltip value if the currency changes.

Author: thisconnect

frontends/web/src/routes/account/summary/chart.tsx

@@ -26,6 +26,7 @@ import { PercentageDiff } from './percentage-diff';
 import { Filters } from './filters';
 import { getDarkmode } from '@/components/darkmode/darkmode';
 import { DefaultCurrencyRotator } from '@/components/rates/rates';
+import { RatesContext } from '@/contexts/RatesContext';
 import { AppContext, TChartDisplay } from '@/contexts/AppContext';
 import styles from './chart.module.css';
 
@@ -137,6 +138,7 @@ export const Chart = ({
 
   const { t, i18n } = useTranslation();
   const { chartDisplay, setChartDisplay } = useContext(AppContext);
+  const { defaultCurrency } = useContext(RatesContext);
   const [searchParams] = useSearchParams();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -163,6 +165,15 @@ export const Chart = ({
     toolTipTime: 0,
   });
 
+  useEffect(() => {
+    setTooltipData({
+      toolTipVisible: false,
+      toolTipTop: 0,
+      toolTipLeft: 0,
+      toolTipTime: 0,
+    });
+  }, [defaultCurrency]);
+
   const [showAnimationOverlay, setAnimationOverlay] = useState(true);
 
   const prevChartDataDaily = usePrevious(data.chartDataDaily);