Refactored funnel report. Made BarChart more generic.

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export function HoverTooltip({ tooltip }) {
+export function HoverTooltip({ children }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -18,8 +18,8 @@ export function HoverTooltip({ tooltip }) {
   }, []);
 
   return (
-    <div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
-      <Tooltip position="top" action="none" label={tooltip} />
+    <div className={styles.tooltip} style={{ left: position.x, top: position.y - 16 }}>
+      <Tooltip position="top" action="none" label={children} />
     </div>
   );
 }

components/common/WorldMap.js

@@ -15,7 +15,7 @@ import styles from './WorldMap.module.css';
 export function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
-  const [theme] = useTheme();
+  const { theme } = useTheme();
   const colors = useMemo(
     () => ({
       baseColor: THEME_COLORS[theme].primary,