Added HoverTooltip component. Removed react-tooltip.

components/common/HoverTooltip.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { Tooltip } from 'react-basics';
+import styles from './HoverTooltip.module.css';
+
+export default function HoverTooltip({ tooltip }) {
+  const [position, setPosition] = useState({ x: -1000, y: -1000 });
+
+  useEffect(() => {
+    const handler = e => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+
+    document.addEventListener('mousemove', handler);
+
+    return () => {
+      document.removeEventListener('mousemove', handler);
+    };
+  }, []);
+
+  return (
+    <div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
+      <Tooltip position="top" action="none" label={tooltip} />
+    </div>
+  );
+}

components/common/HoverTooltip.module.css

@@ -3,7 +3,7 @@
 }
 
 .tooltip {
-  color: var(--msgColor);
+  position: fixed;
   pointer-events: none;
   z-index: 1;
 }

components/common/WorldMap.js

@@ -1,6 +1,5 @@
 import { useState, useMemo } from 'react';
 import { useRouter } from 'next/router';
-import ReactTooltip from 'react-tooltip';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
@@ -9,6 +8,8 @@ import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
 import styles from './WorldMap.module.css';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
+import HoverTooltip from './HoverTooltip';
+import { formatLongNumber } from '../../lib/format';
 
 function WorldMap({ data, className }) {
   const { basePath } = useRouter();
@@ -46,7 +47,7 @@ function WorldMap({ data, className }) {
   function handleHover(code) {
     if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
+    setTooltip(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
   }
 
   return (
@@ -83,7 +84,7 @@ function WorldMap({ data, className }) {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
+      {tooltip && <HoverTooltip tooltip={tooltip} />}
     </div>
   );
 }

components/metrics/BarChart.js

@@ -1,6 +1,8 @@
 import { useState, useRef, useEffect } from 'react';
+import { StatusLight } from 'react-basics';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
+import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/date';
@@ -9,10 +11,8 @@ import useTheme from 'hooks/useTheme';
 import useForceUpdate from 'hooks/useForceUpdate';
 import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
-import ChartTooltip from './ChartTooltip';
 
 export default function BarChart({
-  chartId,
   datasets,
   unit,
   records,
@@ -89,22 +89,20 @@ export default function BarChart({
     }
 
     const [label, value] = body[0].lines[0].split(':');
+    const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
 
-    setTooltip({
-      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-      value,
-      label,
-      labelColor: labelColors[0].backgroundColor,
-    });
-  }
-
-  function getTooltipFormat(unit) {
-    switch (unit) {
-      case 'hour':
-        return 'EEE p — PPP';
-      default:
-        return 'PPPP';
-    }
+    setTooltip(
+      <>
+        <div>{dateFormat(new Date(+title[0]), format, locale)}</div>
+        <div>
+          <StatusLight color={labelColors[0].backgroundColor}>
+            <b>
+              {formatLongNumber(value)} {label}
+            </b>
+          </StatusLight>
+        </div>
+      </>,
+    );
   }
 
   function createChart() {
@@ -125,6 +123,9 @@ export default function BarChart({
       legend: {
         display: false,
       },
+      onResize: ({ width, height }) => {
+        //console.log({ width, height });
+      },
       scales: {
         xAxes: [
           {
@@ -206,19 +207,15 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale, theme]);
+  }, [datasets, unit, animationDuration, locale]);
 
   return (
     <>
-      <div
-        data-tip=""
-        data-for={`${chartId}-tooltip`}
-        className={classNames(styles.chart, className)}
-      >
+      <div className={classNames(styles.chart, className)}>
         <canvas ref={canvas} />
       </div>
       <Legend chart={chart.current} />
-      <ChartTooltip chartId={chartId} tooltip={tooltip} />
+      {tooltip && <HoverTooltip tooltip={tooltip} />}
     </>
   );
 }

components/metrics/ChartTooltip.js

@@ -1,26 +0,0 @@
-import { StatusLight } from 'react-basics';
-import styles from './ChartTooltip.module.css';
-import ReactTooltip from 'react-tooltip';
-
-export default function ChartTooltip({ chartId, tooltip }) {
-  if (!tooltip) {
-    return null;
-  }
-
-  const { title, value, label, labelColor } = tooltip;
-
-  return (
-    <ReactTooltip id={`${chartId}-tooltip`}>
-      <div className={styles.tooltip}>
-        <div className={styles.content}>
-          <div className={styles.title}>{title}</div>
-          <div className={styles.metric}>
-            <StatusLight color={labelColor}>
-              {value} {label}
-            </StatusLight>
-          </div>
-        </div>
-      </div>
-    </ReactTooltip>
-  );
-}

components/metrics/EventsChart.js

@@ -76,7 +76,6 @@ export default function EventsChart({ websiteId, className, token }) {
 
   return (
     <BarChart
-      chartId={`events-${websiteId}`}
       className={className}
       datasets={datasets}
       unit={unit}

components/metrics/PageviewsChart.js

@@ -55,7 +55,6 @@ export default function PageviewsChart({
       <BarChart
         {...props}
         className={className}
-        chartId={websiteId}
         datasets={[
           {
             label: formatMessage(labels.uniqueVisitors),