#820 Updated Custom tooltip to recharts v3.0+

Author: bogadisa

src/frontend/src/components/Graph/CustomTooltip.tsx

@@ -1,44 +1,36 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect } from "react";
 
 import { Box, Divider, Text } from "@chakra-ui/layout";
-import { TooltipProps } from "recharts";
+import { TooltipContentProps } from "recharts";
 import { Icon } from "@chakra-ui/react";
 
-// for recharts v2.1 and above
-import {
-  ValueType,
-  NameType,
-} from "recharts/types/component/DefaultTooltipContent";
 import { capitalizeFirstLetter } from "../../hooks/utils";
 import { BiError } from "react-icons/bi";
-import {
-  getHoursSinceLaunch,
-} from "../../hooks/graphing/utils";
+import { getHoursSinceLaunch } from "../../hooks/graphing/utils";
 import { setupHourlyUpdate } from "../../utils";
 
-interface CustomTooltipProps extends TooltipProps<ValueType, NameType> {
+interface CustomTooltipProps extends TooltipContentProps<number, number> {
   upperBoundry: number;
   fetchedLeagues: string[];
-  colors: string[]
+  colors: string[];
 }
 
 export const CustomTooltip = (props: CustomTooltipProps) => {
   const [currentTime, setCurrentTime] = useState(new Date());
 
-  const hoursAgo = getHoursSinceLaunch(currentTime) - props.label
-
-  const daysToDisplay = Math.floor(hoursAgo / 24)
-  const hoursToDisplay = hoursAgo % 24
+  let hoursAgo = -1;
+  if (typeof props.label == "number") {
+    hoursAgo = getHoursSinceLaunch(currentTime) - props.label;
+  }
 
+  const daysToDisplay = Math.floor(hoursAgo / 24);
+  const hoursToDisplay = hoursAgo % 24;
 
   useEffect(() => {
-    return setupHourlyUpdate(setCurrentTime)
+    return setupHourlyUpdate(setCurrentTime);
   }, []);
 
-
-
   if (props.active && props.payload && props.payload.length) {
-
     const confidence = props.payload[0].payload.confidence;
     const isLowConfidence = confidence === "low";
     const isMediumConfidence = confidence === "medium";
@@ -61,8 +53,12 @@ export const CustomTooltip = (props: CustomTooltipProps) => {
         flexDirection="column"
       >
         <Text my="5px">
-          {hoursAgo !== 0 && daysToDisplay !== 0 && ` ${daysToDisplay} days ago`}
-          {hoursAgo !== 0 && hoursToDisplay !== 0 && ` ${hoursToDisplay} hours ago`}
+          {hoursAgo !== 0 &&
+            daysToDisplay !== 0 &&
+            ` ${daysToDisplay} days ago`}
+          {hoursAgo !== 0 &&
+            hoursToDisplay !== 0 &&
+            ` ${hoursToDisplay} hours ago`}
           {hoursAgo === 0 && ` now`}
         </Text>
         <Divider />
@@ -115,7 +111,18 @@ export const CustomTooltip = (props: CustomTooltipProps) => {
 
         <Divider mb="5px" />
         {props.payload.map((value, index) => (
-          <Box display="flex" flexDirection="row" key={`value-${index}`} color={props.colors[props.fetchedLeagues.indexOf((value.name as string).split(" - ")[0])]}>
+          <Box
+            display="flex"
+            flexDirection="row"
+            key={`value-${index}`}
+            color={
+              props.colors[
+                props.fetchedLeagues.indexOf(
+                  (value.name as string).split(" - ")[0],
+                )
+              ]
+            }
+          >
             <Box>{`${value.name}: `}</Box>
             <Box
               textAlign="right"

src/frontend/src/components/Graph/GraphComponent.tsx

@@ -7,15 +7,14 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
+  TooltipContentProps,
 } from "recharts";
 import { Box, BoxProps, Center, Spinner } from "@chakra-ui/react";
 import { useGraphInputStore } from "../../store/GraphInputStore";
 import { usePlotSettingsStore } from "../../store/PlotSettingsStore";
 import { capitalizeFirstLetter } from "../../hooks/utils";
 import { CustomTooltip } from "./CustomTooltip";
-import {
-  formatHoursSinceLaunch,
-} from "../../hooks/graphing/utils";
+import { formatHoursSinceLaunch } from "../../hooks/graphing/utils";
 import { BiError } from "react-icons/bi";
 import { ErrorMessage } from "../Input/StandardLayoutInput/ErrorMessage";
 import useGetPlotData from "../../hooks/graphing/processPlottingData";
@@ -30,14 +29,15 @@ import PlotCustomizationButtons from "../Common/PlotCustomizationButtons";
  */
 function GraphComponent(props: BoxProps) {
   const { plotQuery, leagues } = useGraphInputStore();
-  const { result: plotData,
+  const {
+    result: plotData,
     mostCommonCurrencyUsed,
     confidenceRating,
     upperBoundryChaos,
     upperBoundrySecondary,
     fetchStatus,
-    error } = useGetPlotData(plotQuery);
-
+    error,
+  } = useGetPlotData(plotQuery);
 
   const mostCommonCurrencyUsedName = `${capitalizeFirstLetter(mostCommonCurrencyUsed ?? "")} value`;
   const renderGraph =
@@ -57,9 +57,17 @@ function GraphComponent(props: BoxProps) {
       : "ui.input";
 
   const colors = [
-    "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
-  ]
-
+    "#1f77b4",
+    "#ff7f0e",
+    "#2ca02c",
+    "#d62728",
+    "#9467bd",
+    "#8c564b",
+    "#e377c2",
+    "#7f7f7f",
+    "#bcbd22",
+    "#17becf",
+  ];
 
   if (fetchStatus === "fetching") {
     return (
@@ -145,25 +153,35 @@ function GraphComponent(props: BoxProps) {
               allowDataOverflow
             />
             <Tooltip
-              content={<CustomTooltip upperBoundry={upperBoundryChaos} fetchedLeagues={fetchedLeagues} colors={colors} />}
+              content={(props: TooltipContentProps<number, number>) => (
+                <CustomTooltip
+                  {...props}
+                  upperBoundry={upperBoundryChaos}
+                  fetchedLeagues={fetchedLeagues}
+                  colors={colors}
+                />
+              )}
               isAnimationActive={false}
             />
             <Legend verticalAlign="top" height={36} />
-            {plotData.data.map((series, idx) => (
-              leagues.includes(series.name) && (<Line
-                type="monotone"
-                data={series.data}
-                dataKey={"valueInChaos"}
-                key={series.name}
-                name={series.name + " - " + "Chaos Value"}
-                stroke={colors[idx]}
-                yAxisId={0}
-                hide={!showChaos}
-                isAnimationActive={false}
-                dot={{ fill: colors[idx] }}
-                legendType={showChaos ? "line" : "none"}
-              />)
-            ))}
+            {plotData.data.map(
+              (series, idx) =>
+                leagues.includes(series.name) && (
+                  <Line
+                    type="monotone"
+                    data={series.data}
+                    dataKey={"valueInChaos"}
+                    key={series.name}
+                    name={series.name + " - " + "Chaos Value"}
+                    stroke={colors[idx]}
+                    yAxisId={0}
+                    hide={!showChaos}
+                    isAnimationActive={false}
+                    dot={{ fill: colors[idx] }}
+                    legendType={showChaos ? "line" : "none"}
+                  />
+                ),
+            )}
             <YAxis
               label={{
                 value: mostCommonCurrencyUsedName,
@@ -178,21 +196,25 @@ function GraphComponent(props: BoxProps) {
               domain={[0, upperBoundrySecondary]}
               allowDataOverflow
             />
-            {mostCommonCurrencyUsed !== "chaos" && plotData.data.map((series, idx) => (
-              leagues.includes(series.name) && (<Line
-                type="monotone"
-                data={series.data}
-                dataKey={"valueInMostCommonCurrencyUsed"}
-                key={series.name}
-                name={series.name + " - " + mostCommonCurrencyUsedName}
-                stroke={colors[idx]}
-                yAxisId={1}
-                hide={!showSecondary}
-                isAnimationActive={false}
-                dot={{ fill: colors[idx] }}
-                legendType={showSecondary ? "line" : "none"}
-              />)
-            ))}
+            {mostCommonCurrencyUsed !== "chaos" &&
+              plotData.data.map(
+                (series, idx) =>
+                  leagues.includes(series.name) && (
+                    <Line
+                      type="monotone"
+                      data={series.data}
+                      dataKey={"valueInMostCommonCurrencyUsed"}
+                      key={series.name}
+                      name={series.name + " - " + mostCommonCurrencyUsedName}
+                      stroke={colors[idx]}
+                      yAxisId={1}
+                      hide={!showSecondary}
+                      isAnimationActive={false}
+                      dot={{ fill: colors[idx] }}
+                      legendType={showSecondary ? "line" : "none"}
+                    />
+                  ),
+              )}
           </LineChart>
         </ResponsiveContainer>
       </Box>