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 (