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

Mobile fixes for metrics bar.

Browse Source
This commit is contained in:
Mike Cao 2023-10-16 22:46:49 -07:00
parent 4c57c32950
commit 9af6e08c00
3 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/(main)/websites/[id]/WebsiteFilterButton.js Normal file
View File

@ -0,0 +1,54 @@
import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
import PopupForm from 'app/(main)/reports/[id]/PopupForm';
import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
import { useMessages, useNavigation } from 'components/hooks';
export function WebsiteFilterButton({ websiteId, className }) {
const { formatMessage, labels } = useMessages();
const { makeUrl, router } = useNavigation();
const fieldOptions = [
{ name: 'url', type: 'string', label: formatMessage(labels.url) },
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
{ name: 'browser', type: 'string', label: formatMessage(labels.browser) },
{ name: 'os', type: 'string', label: formatMessage(labels.os) },
{ name: 'device', type: 'string', label: formatMessage(labels.device) },
{ name: 'country', type: 'string', label: formatMessage(labels.country) },
{ name: 'region', type: 'string', label: formatMessage(labels.region) },
{ name: 'city', type: 'string', label: formatMessage(labels.city) },
];
const handleAddFilter = ({ name, value }) => {
router.push(makeUrl({ [name]: value }));
};
return (
<PopupTrigger>
<Button className={className}>
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.filter)}</Text>
</Button>
<Popup position="bottom" alignment="start">
{close => {
return (
<PopupForm onClose={close}>
<FilterSelectForm
websiteId={websiteId}
items={fieldOptions}
onSelect={value => {
handleAddFilter(value);
close();
}}
allowFilterSelect={false}
/>
</PopupForm>
);
}}
</Popup>
</PopupTrigger>
);
}
export default WebsiteFilterButton;

54
src/app/(main)/websites/[id]/WebsiteMetricsBar.js
View File

@ -3,22 +3,17 @@ import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'com
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
import PopupForm from 'app/(main)/reports/[id]/PopupForm';
import { formatShortTime } from 'lib/format';
import { Button, Icon, Icons, Popup, PopupTrigger } from 'react-basics';
import WebsiteFilterButton from './WebsiteFilterButton';
import styles from './WebsiteMetricsBar.module.css';
export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { ref, isSticky } = useSticky({ enabled: sticky });
const {
makeUrl,
router,
query: { url, referrer, title, os, browser, device, country, region, city },
} = useNavigation();
@ -43,17 +38,6 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
}),
);
const fieldOptions = [
{ name: 'url', type: 'string', label: formatMessage(labels.url) },
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
{ name: 'browser', type: 'string', label: formatMessage(labels.browser) },
{ name: 'os', type: 'string', label: formatMessage(labels.os) },
{ name: 'device', type: 'string', label: formatMessage(labels.device) },
{ name: 'country', type: 'string', label: formatMessage(labels.country) },
{ name: 'region', type: 'string', label: formatMessage(labels.region) },
{ name: 'city', type: 'string', label: formatMessage(labels.city) },
];
const { pageviews, uniques, bounces, totaltime } = data || {};
const num = Math.min(data && uniques.value, data && bounces.value);
const diffs = data && {
@ -63,40 +47,6 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
totaltime: totaltime.value - totaltime.change,
};
const handleAddFilter = ({ name, value }) => {
router.push(makeUrl({ [name]: value }));
};
const WebsiteFilterButton = () => {
return (
<PopupTrigger>
<Button>
<Icon>
<Icons.Plus />
</Icon>
{formatMessage(labels.filter)}
</Button>
<Popup position="bottom" alignment="start" className={styles.popup}>
{close => {
return (
<PopupForm onClose={close}>
<FilterSelectForm
websiteId={websiteId}
items={fieldOptions}
onSelect={value => {
handleAddFilter(value);
close();
}}
allowFilterSelect={false}
/>
</PopupForm>
);
}}
</Popup>
</PopupTrigger>
);
};
return (
<div
ref={ref}
@ -152,7 +102,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
)}
</MetricsBar>
<div className={styles.actions}>
{showFilter && <WebsiteFilterButton />}
{showFilter && <WebsiteFilterButton websiteId={websiteId} className={styles.button} />}
<WebsiteDateFilter websiteId={websiteId} />
</div>
</div>

10
src/app/(main)/websites/[id]/WebsiteMetricsBar.module.css
View File

@ -17,7 +17,7 @@
gap: 10px;
}
@media only screen and (max-width: 1200px) {
@media screen and (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
}
@ -27,7 +27,7 @@
}
}
@media only screen and (min-width: 992px) {
@media screen and (min-width: 992px) {
.sticky {
position: sticky;
top: -1px;
@ -38,3 +38,9 @@
border-bottom: 1px solid var(--base300);
}
}
@media screen and (max-width: 768px) {
.button {
display: none;
}
}