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({
+    setTooltip(
-      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      <>
-      value,
+        <div>{dateFormat(new Date(+title[0]), format, locale)}</div>
-      label,
+        <div>
-      labelColor: labelColors[0].backgroundColor,
+          <StatusLight color={labelColors[0].backgroundColor}>
-    });
+            <b>
-  }
+              {formatLongNumber(value)} {label}
-
+            </b>
-  function getTooltipFormat(unit) {
+          </StatusLight>
-    switch (unit) {
+        </div>
-      case 'hour':
+      </>,
-        return 'EEE p — PPP';
+    );
-      default:
-        return 'PPPP';
-    }
   }
 
   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
+      <div className={classNames(styles.chart, className)}>
-        data-tip=""
-        data-for={`${chartId}-tooltip`}
-        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),

package.json

@@ -93,13 +93,12 @@
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.71.0",
+    "react-basics": "^0.72.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",
     "react-simple-maps": "^2.3.0",
     "react-spring": "^9.4.4",
-    "react-tooltip": "^4.2.21",
     "react-use-measure": "^2.0.4",
     "react-window": "^1.8.6",
     "request-ip": "^3.3.0",

yarn.lock

@@ -7082,10 +7082,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.71.0:
+react-basics@^0.72.0:
-  version "0.71.0"
+  version "0.72.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.71.0.tgz#317ab58cdbadd4ba36b233cc64dec2a64fe0f1b8"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.72.0.tgz#23dbd61d5ac6bb8b8d61f1f3adcebb7edeab8a26"
-  integrity sha512-DLhx9bweJz2JG0lETnRrjQNeLL/pmyBqd0SFLM+VXaw8+6SnFheVhQ1Q/W8UerNRsN2oLGH4Hg1XuULG0JlrgA==
+  integrity sha512-dWthEwyh/ilt1BSPYwMdd1oE/OFDp8oZ5udZGrdXs5guRh9Ukar4V4chQPbnuZPYUnAH4jg19H5Fesvz2lSaaw==
   dependencies:
     classnames "^2.3.1"
     date-fns "^2.29.3"
@@ -7198,14 +7198,6 @@ react-spring@^9.5.5:
     "@react-spring/web" "~9.5.5"
     "@react-spring/zdog" "~9.5.5"
 
-react-tooltip@^4.2.21:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.5.1.tgz#77eccccdf16adec804132e558ec20ca5783b866a"
-  integrity sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==
-  dependencies:
-    prop-types "^15.8.1"
-    uuid "^7.0.3"
-
 react-use-measure@^2.0.4:
   version "2.1.1"
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz"
@@ -8562,11 +8554,6 @@ uuid@3.4.0, uuid@^3.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
 uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"