mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-28 08:47:50 +02:00
Mobile fixes for metrics bar.
This commit is contained in:
parent
4c57c32950
commit
9af6e08c00
54
src/app/(main)/websites/[id]/WebsiteFilterButton.js
Normal file
54
src/app/(main)/websites/[id]/WebsiteFilterButton.js
Normal 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;
|
|
@ -3,22 +3,17 @@ import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'com
|
||||||
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
|
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
|
||||||
import MetricCard from 'components/metrics/MetricCard';
|
import MetricCard from 'components/metrics/MetricCard';
|
||||||
import MetricsBar from 'components/metrics/MetricsBar';
|
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 { formatShortTime } from 'lib/format';
|
||||||
import { Button, Icon, Icons, Popup, PopupTrigger } from 'react-basics';
|
import WebsiteFilterButton from './WebsiteFilterButton';
|
||||||
import styles from './WebsiteMetricsBar.module.css';
|
import styles from './WebsiteMetricsBar.module.css';
|
||||||
|
|
||||||
export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
|
export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const [dateRange] = useDateRange(websiteId);
|
const [dateRange] = useDateRange(websiteId);
|
||||||
const { startDate, endDate, modified } = dateRange;
|
const { startDate, endDate, modified } = dateRange;
|
||||||
const { ref, isSticky } = useSticky({ enabled: sticky });
|
const { ref, isSticky } = useSticky({ enabled: sticky });
|
||||||
const {
|
const {
|
||||||
makeUrl,
|
|
||||||
router,
|
|
||||||
query: { url, referrer, title, os, browser, device, country, region, city },
|
query: { url, referrer, title, os, browser, device, country, region, city },
|
||||||
} = useNavigation();
|
} = 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 { pageviews, uniques, bounces, totaltime } = data || {};
|
||||||
const num = Math.min(data && uniques.value, data && bounces.value);
|
const num = Math.min(data && uniques.value, data && bounces.value);
|
||||||
const diffs = data && {
|
const diffs = data && {
|
||||||
|
@ -63,40 +47,6 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
|
||||||
totaltime: totaltime.value - totaltime.change,
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
@ -152,7 +102,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
|
||||||
)}
|
)}
|
||||||
</MetricsBar>
|
</MetricsBar>
|
||||||
<div className={styles.actions}>
|
<div className={styles.actions}>
|
||||||
{showFilter && <WebsiteFilterButton />}
|
{showFilter && <WebsiteFilterButton websiteId={websiteId} className={styles.button} />}
|
||||||
<WebsiteDateFilter websiteId={websiteId} />
|
<WebsiteDateFilter websiteId={websiteId} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
.container {
|
.container {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 992px) {
|
@media screen and (min-width: 992px) {
|
||||||
.sticky {
|
.sticky {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
|
@ -38,3 +38,9 @@
|
||||||
border-bottom: 1px solid var(--base300);
|
border-bottom: 1px solid var(--base300);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user