diff --git a/components/common/HoverTooltip.js b/components/common/HoverTooltip.js
new file mode 100644
index 00000000..3b885b1d
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/components/metrics/ChartTooltip.module.css b/components/common/HoverTooltip.module.css
similarity index 95%
rename from components/metrics/ChartTooltip.module.css
rename to components/common/HoverTooltip.module.css
index 2d7ba958..519e303d 100644
--- a/components/metrics/ChartTooltip.module.css
+++ b/components/common/HoverTooltip.module.css
@@ -3,7 +3,7 @@
}
.tooltip {
- color: var(--msgColor);
+ position: fixed;
pointer-events: none;
z-index: 1;
}
diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js
index 8afd84e0..b774702b 100644
--- a/components/common/WorldMap.js
+++ b/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 }) {
- {tooltip}
+ {tooltip && }
);
}
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index f70e012e..cab5021c 100644
--- a/components/metrics/BarChart.js
+++ b/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(
+ <>
+ {dateFormat(new Date(+title[0]), format, locale)}
+
+
+
+ {formatLongNumber(value)} {label}
+
+
+
+ >,
+ );
}
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 (
<>
-
+
-
+ {tooltip &&
}
>
);
}
diff --git a/components/metrics/ChartTooltip.js b/components/metrics/ChartTooltip.js
deleted file mode 100644
index c409f462..00000000
--- a/components/metrics/ChartTooltip.js
+++ /dev/null
@@ -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 (
-
-
-
-
{title}
-
-
- {value} {label}
-
-
-
-
-
- );
-}
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index db647c2f..31d5faa9 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -76,7 +76,6 @@ export default function EventsChart({ websiteId, className, token }) {
return (