m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issue with hover tooltips.

Browse Source
This commit is contained in:
Mike Cao 2023-06-15 20:15:31 -07:00
parent 2b13002f1b
commit ab0838e272
20 changed files with 50 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/common/HoverTooltip.js
View File

@ -18,9 +18,9 @@ export function HoverTooltip({ children }) {
}, []); }, []);
return ( return (
<div className={styles.tooltip} style={{ left: position.x, top: position.y - 16 }}> <Tooltip className={styles.tooltip} style={{ left: position.x, top: position.y }}>
<Tooltip position="top" action="none" label={children} /> {children}
</div> </Tooltip>
); );
} }

39
components/common/HoverTooltip.module.css
View File

@ -1,43 +1,6 @@
.chart {
position: relative;
}
.tooltip { .tooltip {
position: fixed; position: fixed;
pointer-events: none; pointer-events: none;
z-index: var(--z-index-popup); z-index: var(--z-index-popup);
} transform: translate(-50%, calc(-100% - 5px));
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-size: var(--font-size-xs);
font-weight: 600;
}
.metric {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-sm);
font-weight: 600;
}
.dot {
position: relative;
overflow: hidden;
border-radius: 100%;
margin-right: 8px;
background: var(--base50);
}
.color {
width: 10px;
height: 10px;
} }

6
components/common/WorldMap.js
View File

@ -14,7 +14,7 @@ import styles from './WorldMap.module.css';
export function WorldMap({ data, className }) { export function WorldMap({ data, className }) {
const { basePath } = useRouter(); const { basePath } = useRouter();
const [tooltip, setTooltip] = useState(); const [tooltip, setTooltipPopup] = useState();
const { theme, colors } = useTheme(); const { theme, colors } = useTheme();
const { locale } = useLocale(); const { locale } = useLocale();
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
@ -40,7 +40,7 @@ export function WorldMap({ data, className }) {
function handleHover(code) { function handleHover(code) {
if (code === 'AQ') return; if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code); const country = metrics?.find(({ x }) => x === code);
setTooltip(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`); setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
} }
return ( return (
@ -69,7 +69,7 @@ export function WorldMap({ data, className }) {
pressed: { outline: 'none' }, pressed: { outline: 'none' },
}} }}
onMouseOver={() => handleHover(code)} onMouseOver={() => handleHover(code)}
onMouseOut={() => setTooltip(null)} onMouseOut={() => setTooltipPopup(null)}
/> />
); );
}); });

3
components/input/LanguageButton.js
View File

@ -9,7 +9,8 @@ export function LanguageButton() {
const { locale, saveLocale, dir } = useLocale(); const { locale, saveLocale, dir } = useLocale();
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key })); const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
function handleSelect(value, close) { function handleSelect(value, close, e) {
e.stopPropagation();
saveLocale(value); saveLocale(value);
close(); close();
} }

2
components/input/LanguageButton.module.css
View File

@ -1,7 +1,7 @@
.menu { .menu {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
max-width: 640px; min-width: 640px;
padding: 10px; padding: 10px;
background: var(--base50); background: var(--base50);
z-index: var(--z-index-popup); z-index: var(--z-index-popup);

6
components/input/LogoutButton.js
View File

@ -1,4 +1,4 @@
import { Button, Icon, Icons, Tooltip } from 'react-basics'; import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
import Link from 'next/link'; import Link from 'next/link';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
@ -6,13 +6,13 @@ export function LogoutButton({ tooltipPosition = 'top' }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
return ( return (
<Link href="/logout"> <Link href="/logout">
<Tooltip label={formatMessage(labels.logout)} position={tooltipPosition}> <TooltipPopup label={formatMessage(labels.logout)} position={tooltipPosition}>
<Button variant="quiet"> <Button variant="quiet">
<Icon> <Icon>
<Icons.Logout /> <Icons.Logout />
</Icon> </Icon>
</Button> </Button>
</Tooltip> </TooltipPopup>
</Link> </Link>
); );
} }

6
components/input/RefreshButton.js
View File

@ -1,4 +1,4 @@
import { LoadingButton, Icon, Tooltip } from 'react-basics'; import { LoadingButton, Icon, TooltipPopup } from 'react-basics';
import { setWebsiteDateRange } from 'store/websites'; import { setWebsiteDateRange } from 'store/websites';
import useDateRange from 'hooks/useDateRange'; import useDateRange from 'hooks/useDateRange';
import Icons from 'components/icons'; import Icons from 'components/icons';
@ -19,13 +19,13 @@ export function RefreshButton({ websiteId, isLoading }) {
} }
return ( return (
<Tooltip label={formatMessage(labels.refresh)}> <TooltipPopup label={formatMessage(labels.refresh)}>
<LoadingButton loading={isLoading} onClick={handleClick}> <LoadingButton loading={isLoading} onClick={handleClick}>
<Icon> <Icon>
<Icons.Refresh /> <Icons.Refresh />
</Icon> </Icon>
</LoadingButton> </LoadingButton>
</Tooltip> </TooltipPopup>
); );
} }

1
components/layout/AppLayout.module.css
View File

@ -2,6 +2,7 @@
display: grid; display: grid;
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
overflow: hidden;
} }
.nav { .nav {

6
components/layout/NavGroup.js
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Icon, Text, Tooltip } from 'react-basics'; import { Icon, Text, TooltipPopup } from 'react-basics';
import classNames from 'classnames'; import classNames from 'classnames';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
@ -36,7 +36,7 @@ export function NavGroup({
<div className={styles.body}> <div className={styles.body}>
{items.map(({ label, url, icon, divider }) => { {items.map(({ label, url, icon, divider }) => {
return ( return (
<Tooltip key={label} label={label} position="right" disabled={!minimized}> <TooltipPopup key={label} label={label} position="right" disabled={!minimized}>
<Link <Link
href={url} href={url}
className={classNames(styles.item, { className={classNames(styles.item, {
@ -47,7 +47,7 @@ export function NavGroup({
<Icon>{icon}</Icon> <Icon>{icon}</Icon>
<Text className={styles.text}>{label}</Text> <Text className={styles.text}>{label}</Text>
</Link> </Link>
</Tooltip> </TooltipPopup>
); );
})} })}
</div> </div>

10
components/metrics/BarChart.js
View File

@ -20,14 +20,14 @@ export function BarChart({
renderYLabel, renderYLabel,
XAxisType = 'time', XAxisType = 'time',
YAxisType = 'linear', YAxisType = 'linear',
renderTooltip, renderTooltipPopup,
onCreate, onCreate,
onUpdate, onUpdate,
className, className,
}) { }) {
const canvas = useRef(); const canvas = useRef();
const chart = useRef(null); const chart = useRef(null);
const [tooltip, setTooltip] = useState(null); const [tooltip, setTooltipPopup] = useState(null);
const { locale } = useLocale(); const { locale } = useLocale();
const { theme, colors } = useTheme(); const { theme, colors } = useTheme();
@ -50,7 +50,7 @@ export function BarChart({
}, },
tooltip: { tooltip: {
enabled: false, enabled: false,
external: renderTooltip ? renderTooltip.bind(null, setTooltip) : undefined, external: renderTooltipPopup ? renderTooltipPopup.bind(null, setTooltipPopup) : undefined,
}, },
}, },
scales: { scales: {
@ -93,7 +93,7 @@ export function BarChart({
}; };
}, [ }, [
animationDuration, animationDuration,
renderTooltip, renderTooltipPopup,
renderXLabel, renderXLabel,
XAxisType, XAxisType,
YAxisType, YAxisType,
@ -120,7 +120,7 @@ export function BarChart({
}; };
const updateChart = () => { const updateChart = () => {
setTooltip(null); setTooltipPopup(null);
datasets.forEach((dataset, index) => { datasets.forEach((dataset, index) => {
chart.current.data.datasets[index].data = dataset.data; chart.current.data.datasets[index].data = dataset.data;

6
components/metrics/BarChart.module.css
View File

@ -13,9 +13,3 @@
.tooltip .value { .tooltip .value {
text-transform: lowercase; text-transform: lowercase;
} }
@media only screen and (max-width: 992px) {
.chart {
/*height: 200px;*/
}
}

4
components/metrics/EventsChart.js
View File

@ -5,7 +5,7 @@ import BarChart from './BarChart';
import { getDateArray } from 'lib/date'; import { getDateArray } from 'lib/date';
import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks'; import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks';
import { EVENT_COLORS } from 'lib/constants'; import { EVENT_COLORS } from 'lib/constants';
import { renderDateLabels, renderStatusTooltip } from 'lib/charts'; import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
export function EventsChart({ websiteId, className, token }) { export function EventsChart({ websiteId, className, token }) {
const { get, useQuery } = useApi(); const { get, useQuery } = useApi();
@ -72,7 +72,7 @@ export function EventsChart({ websiteId, className, token }) {
loading={isLoading} loading={isLoading}
stacked stacked
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderDateLabels(unit, locale)}
renderTooltip={renderStatusTooltip(unit, locale)} renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/> />
); );
} }

4
components/metrics/PageviewsChart.js
View File

@ -1,7 +1,7 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import BarChart from './BarChart'; import BarChart from './BarChart';
import { useLocale, useTheme, useMessages } from 'hooks'; import { useLocale, useTheme, useMessages } from 'hooks';
import { renderDateLabels, renderStatusTooltip } from 'lib/charts'; import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) { export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
@ -36,7 +36,7 @@ export function PageviewsChart({ websiteId, data, unit, className, loading, ...p
unit={unit} unit={unit}
loading={loading} loading={loading}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderDateLabels(unit, locale)}
renderTooltip={renderStatusTooltip(unit, locale)} renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/> />
); );
} }

2
components/pages/reports/ReportHeader.js
View File

@ -39,7 +39,7 @@ export function ReportHeader({ icon }) {
}; };
const handleNameChange = name => { const handleNameChange = name => {
updateReport({ name }); updateReport({ name: name || 'Untitled' });
}; };
const handleDescriptionChange = description => { const handleDescriptionChange = description => {

8
components/pages/reports/funnel/FunnelChart.js
View File

@ -21,15 +21,15 @@ export function FunnelChart({ className, loading }) {
[parameters], [parameters],
); );
const renderTooltip = useCallback((setTooltip, model) => { const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
const { opacity, dataPoints } = model.tooltip; const { opacity, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) { if (!dataPoints?.length || !opacity) {
setTooltip(null); setTooltipPopup(null);
return; return;
} }
setTooltip(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`); setTooltipPopup(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`);
}, []); }, []);
const datasets = useMemo(() => { const datasets = useMemo(() => {
@ -54,7 +54,7 @@ export function FunnelChart({ className, loading }) {
unit="day" unit="day"
loading={loading} loading={loading}
renderXLabel={renderXLabel} renderXLabel={renderXLabel}
renderTooltip={renderTooltip} renderTooltipPopup={renderTooltipPopup}
XAxisType="category" XAxisType="category"
/> />
); );

10
components/pages/reports/funnel/FunnelParameters.js
View File

@ -11,7 +11,7 @@ import {
SubmitButton, SubmitButton,
Text, Text,
TextField, TextField,
Tooltip, TooltipPopup,
} from 'react-basics'; } from 'react-basics';
import Icons from 'components/icons'; import Icons from 'components/icons';
import UrlAddForm from './UrlAddForm'; import UrlAddForm from './UrlAddForm';
@ -62,7 +62,7 @@ export function FunnelParameters() {
return ( return (
<div key={index} className={styles.url}> <div key={index} className={styles.url}>
<Text>{url}</Text> <Text>{url}</Text>
<Tooltip <TooltipPopup
className={styles.icon} className={styles.icon}
label={formatMessage(labels.remove)} label={formatMessage(labels.remove)}
position="right" position="right"
@ -70,7 +70,7 @@ export function FunnelParameters() {
<Icon onClick={handleRemoveUrl.bind(null, index)}> <Icon onClick={handleRemoveUrl.bind(null, index)}>
<Icons.Close /> <Icons.Close />
</Icon> </Icon>
</Tooltip> </TooltipPopup>
</div> </div>
); );
})} })}
@ -90,11 +90,11 @@ function AddUrlButton({ onAdd }) {
return ( return (
<PopupTrigger> <PopupTrigger>
<Tooltip label={formatMessage(labels.addUrl)}> <TooltipPopup label={formatMessage(labels.addUrl)}>
<Icon> <Icon>
<Icons.Plus /> <Icons.Plus />
</Icon> </Icon>
</Tooltip> </TooltipPopup>
<Popup position="bottom" alignment="start"> <Popup position="bottom" alignment="start">
{close => { {close => {
return <UrlAddForm onSave={onAdd} onClose={close} />; return <UrlAddForm onSave={onAdd} onClose={close} />;

4
hooks/useCountryNames.js
View File

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { get } from 'next-basics'; import { httpGet } from 'next-basics';
import enUS from 'public/intl/country/en-US.json'; import enUS from 'public/intl/country/en-US.json';
const countryNames = { const countryNames = {
@ -12,7 +12,7 @@ export function useCountryNames(locale) {
const { basePath } = useRouter(); const { basePath } = useRouter();
async function loadData(locale) { async function loadData(locale) {
const { data } = await get(`${basePath}/intl/country/${locale}.json`); const { data } = await httpGet(`${basePath}/intl/country/${locale}.json`);
if (data) { if (data) {
countryNames[locale] = data; countryNames[locale] = data;

8
lib/charts.js
View File

@ -27,12 +27,12 @@ export function renderDateLabels(unit, locale) {
}; };
} }
export function renderStatusTooltip(unit, locale) { export function renderStatusTooltipPopup(unit, locale) {
return (setTooltip, model) => { return (setTooltipPopup, model) => {
const { opacity, labelColors, dataPoints } = model.tooltip; const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) { if (!dataPoints?.length || !opacity) {
setTooltip(null); setTooltipPopup(null);
return; return;
} }
@ -48,7 +48,7 @@ export function renderStatusTooltip(unit, locale) {
year: 'yyyy', year: 'yyyy',
}; };
setTooltip( setTooltipPopup(
<> <>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div> <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div> <div>

2
package.json
View File

@ -95,7 +95,7 @@
"node-fetch": "^3.2.8", "node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"react": "^18.2.0", "react": "^18.2.0",
"react-basics": "^0.84.0", "react-basics": "^0.85.0",
"react-beautiful-dnd": "^13.1.0", "react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-error-boundary": "^4.0.4", "react-error-boundary": "^4.0.4",

8
yarn.lock
View File

@ -8191,10 +8191,10 @@ rc@^1.2.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-basics@^0.84.0: react-basics@^0.85.0:
version "0.84.0" version "0.85.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.84.0.tgz#cfea2ae6b64d9318406a0c6cf0d5d9e8a0790a28" resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.85.0.tgz#407c413e56b004120b5e11074a7d9f17a697c6b7"
integrity sha512-QWnUkw7kVbBK0Z1xvvsNgrUBlUI0FzL39jQAZR5EutE83BlkAtYeisXooPZk3PJuGHZzJvY6+JzMYmvALLjqnQ== integrity sha512-RPxYiMdOmlWZXh2tKbUay97lsOFWtNYTzx5Jpcd9IUxBrNzYWgTCgtSHJLHAuycUCDNVepX+do+HdRG3uMkE0Q==
dependencies: dependencies:
classnames "^2.3.1" classnames "^2.3.1"
date-fns "^2.29.3" date-fns "^2.29.3"