watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added website menu view. Fixed pages filter.

Browse source
This commit is contained in:
Mike Cao 2023-02-10 23:21:50 -08:00
parent d4437427c4
commit 4a689bf294
13 changed files with 100 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/common/FilterButtons.js
View file

@ -1,9 +1,9 @@
import { ButtonGroup, Button, Flexbox } from 'react-basics';
export default function FilterButtons({ items, selected, onSelect }) {
export default function FilterButtons({ items, selectedKey, onSelect }) {
return (
<Flexbox justifyContent="center">
<ButtonGroup items={items} selectedKey={selected} onSelect={onSelect}>
<ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
{({ key, label }) => <Button key={key}>{label}</Button>}
</ButtonGroup>
</Flexbox>

4
components/metrics/DatePickerForm.js
View file

@ -7,9 +7,7 @@ import { getDateRangeValues } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import { labels } from 'components/messages';
import styles from './DatePickerForm.module.css';
const FILTER_DAY = 'day';
const FILTER_RANGE = 'range';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
export default function DatePickerForm({
startDate: defaultStartDate,

15
components/metrics/PagesTable.js
View file

@ -5,9 +5,12 @@ import FilterButtons from 'components/common/FilterButtons';
import { urlFilter } from 'lib/filters';
import { labels } from 'components/messages';
import MetricsTable from './MetricsTable';
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
export const FILTER_COMBINED = 0;
export const FILTER_RAW = 1;
const filters = {
[FILTER_RAW]: null,
[FILTER_COMBINED]: urlFilter,
};
export default function PagesTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
@ -16,11 +19,11 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
const buttons = [
{
label: formatMessage(labels.filterCombined),
value: FILTER_COMBINED,
key: FILTER_COMBINED,
},
{
label: formatMessage(labels.filterRaw),
value: FILTER_RAW,
key: FILTER_RAW,
},
];
@ -30,13 +33,13 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
return (
<>
{showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
{showFilters && <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />}
<MetricsTable
title={formatMessage(labels.pages)}
type="url"
metric={formatMessage(labels.views)}
websiteId={websiteId}
dataFilter={filter !== FILTER_RAW ? urlFilter : null}
dataFilter={filters[filter]}
renderLabel={renderLink}
{...props}
/>

32
components/metrics/QueryParametersTable.js
View file

@ -1,21 +1,17 @@
import { useState } from 'react';
import { useIntl, defineMessages } from 'react-intl';
import { useIntl } from 'react-intl';
import { safeDecodeURI } from 'next-basics';
import Tag from 'components/common/Tag';
import FilterButtons from 'components/common/FilterButtons';
import { paramFilter } from 'lib/filters';
import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
import { labels } from 'components/messages';
import MetricsTable from './MetricsTable';
const FILTER_COMBINED = 0;
const FILTER_RAW = 1;
const messages = defineMessages({
combined: { id: 'metrics.filter.combined', defaultMessage: 'Combined' },
raw: { id: 'metrics.filter.raw', defaultMessage: 'Raw' },
views: { id: 'metrics.views', defaultMessage: 'Views' },
none: { id: 'label.none', defaultMessage: 'None' },
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
});
const filters = {
[FILTER_RAW]: null,
[FILTER_COMBINED]: paramFilter,
};
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
@ -23,22 +19,22 @@ export default function QueryParametersTable({ websiteId, showFilters, ...props
const buttons = [
{
label: formatMessage(messages.combined),
value: FILTER_COMBINED,
label: formatMessage(labels.filterCombined),
key: FILTER_COMBINED,
},
{ label: formatMessage(messages.raw), value: FILTER_RAW },
{ label: formatMessage(labels.filterRaw), key: FILTER_RAW },
];
return (
<>
{showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
{showFilters && <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />}
<MetricsTable
{...props}
title={formatMessage(messages.query)}
title={formatMessage(labels.query)}
type="query"
metric={formatMessage(messages.views)}
metric={formatMessage(labels.views)}
websiteId={websiteId}
dataFilter={filter !== FILTER_RAW ? paramFilter : null}
dataFilter={filters[filter]}
renderLabel={({ x, p, v }) =>
filter === FILTER_RAW ? (
x

10
components/metrics/RealtimeLog.js
View file

@ -54,19 +54,19 @@ export default function RealtimeLog({ data, websites, websiteId }) {
const buttons = [
{
label: <FormattedMessage id="label.all" defaultMessage="All" />,
value: TYPE_ALL,
key: TYPE_ALL,
},
{
label: <FormattedMessage id="metrics.views" defaultMessage="Views" />,
value: TYPE_PAGEVIEW,
key: TYPE_PAGEVIEW,
},
{
label: <FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />,
value: TYPE_SESSION,
key: TYPE_SESSION,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: TYPE_EVENT,
key: TYPE_EVENT,
},
];
@ -165,7 +165,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
return (
<div className={styles.table}>
<FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
<div className={styles.header}>
<FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
</div>

10
components/metrics/RealtimeViews.js
View file

@ -4,9 +4,7 @@ import firstBy from 'thenby';
import { percentFilter } from 'lib/filters';
import DataTable from './DataTable';
import FilterButtons from 'components/common/FilterButtons';
const FILTER_REFERRERS = 0;
const FILTER_PAGES = 1;
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
export default function RealtimeViews({ websiteId, data, websites }) {
const { pageviews } = data;
@ -23,11 +21,11 @@ export default function RealtimeViews({ websiteId, data, websites }) {
const buttons = [
{
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
value: FILTER_REFERRERS,
key: FILTER_REFERRERS,
},
{
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
value: FILTER_PAGES,
key: FILTER_PAGES,
},
];
@ -90,7 +88,7 @@ export default function RealtimeViews({ websiteId, data, websites }) {
return (
<>
<FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
<FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
{filter === FILTER_REFERRERS && (
<DataTable
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}

15
components/metrics/ReferrersTable.js
View file

@ -5,9 +5,12 @@ import FilterButtons from 'components/common/FilterButtons';
import FilterLink from 'components/common/FilterLink';
import { refFilter } from 'lib/filters';
import { labels } from 'components/messages';
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
const FILTER_COMBINED = 0;
const FILTER_RAW = 1;
const filters = {
[FILTER_RAW]: null,
[FILTER_COMBINED]: refFilter,
};
export default function ReferrersTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
@ -16,9 +19,9 @@ export default function ReferrersTable({ websiteId, showFilters, ...props }) {
const items = [
{
label: formatMessage(labels.filterCombined),
value: FILTER_COMBINED,
key: FILTER_COMBINED,
},
{ label: formatMessage(labels.filterRaw), value: FILTER_RAW },
{ label: formatMessage(labels.filterRaw), key: FILTER_RAW },
];
const renderLink = ({ w: link, x: referrer }) => {
@ -31,14 +34,14 @@ export default function ReferrersTable({ websiteId, showFilters, ...props }) {
return (
<>
{showFilters && <FilterButtons items={items} selected={filter} onSelect={setFilter} />}
{showFilters && <FilterButtons items={items} selectedKey={filter} onSelect={setFilter} />}
<MetricsTable
{...props}
title={formatMessage(labels.referrers)}
type="referrer"
metric={formatMessage(labels.views)}
websiteId={websiteId}
dataFilter={filter !== FILTER_RAW ? refFilter : null}
dataFilter={filters[filter]}
renderLabel={renderLink}
/>
</>

54
components/pages/websites/WebsiteMenuView.js
View file

@ -1,4 +1,4 @@
import { Row, Column, Menu, Item, Icon, Button } from 'react-basics';
import { Row, Column, Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import classNames from 'classnames';
@ -39,44 +39,44 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const items = [
{
key: 'url',
label: formatMessage(labels.pages),
value: resolve({ view: 'url' }),
},
{
key: 'referrer',
label: formatMessage(labels.referrers),
value: resolve({ view: 'referrer' }),
},
{
key: 'browser',
label: formatMessage(labels.browsers),
value: resolve({ view: 'browser' }),
},
{
key: 'os',
label: formatMessage(labels.os),
value: resolve({ view: 'os' }),
},
{
key: 'device',
label: formatMessage(labels.devices),
value: resolve({ view: 'device' }),
},
{
key: 'country',
label: formatMessage(labels.countries),
value: resolve({ view: 'country' }),
},
{
key: 'language',
label: formatMessage(labels.languages),
value: resolve({ view: 'language' }),
},
{
key: 'screen',
label: formatMessage(labels.screens),
value: resolve({ view: 'screen' }),
},
{
key: 'event',
label: formatMessage(labels.events),
value: resolve({ view: 'event' }),
},
{
key: 'query',
label: formatMessage(labels.query),
value: resolve({ view: 'query' }),
},
];
@ -85,31 +85,37 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
return (
<Row className={styles.row}>
<Column defaultSize={3} className={classNames(styles.col, styles.menu)}>
<Button>
<Icon rotate={180}>
<Icons.ArrowRight />
</Icon>
{formatMessage(labels.back)}
</Button>
<Menu items={items}>
{({ value, label }) => (
<Item key={value}>
<Link href={resolve()}>
<Link href={resolve({ view: undefined })}>
<a>
<Flexbox justifyContent="center">
<Button variant="quiet">
<Icon rotate={180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</Button>
</Flexbox>
</a>
</Link>
<Menu items={items} selectedKey={view}>
{({ key, label }) => (
<Item key={key} className={styles.item}>
<Link href={resolve({ view: key })} shallow={true}>
<a>{label}</a>
</Link>
</Item>
)}
</Menu>
</Column>
<Column defaultSize={9} className={styles.col}>
<Column defaultSize={9} className={classNames(styles.col, styles.data)}>
<DetailsComponent
websiteId={websiteId}
websiteDomain={websiteDomain}
height={500}
limit={false}
animate={false}
showFilters
virtualize
showFilters={true}
virtualize={true}
/>
</Column>
</Row>

13
components/pages/websites/WebsiteMenuView.module.css
View file

@ -13,10 +13,19 @@
}
.menu {
display: flex;
gap: 20px;
}
.menu a {
.item a {
color: var(--font-color100);
flex: 1;
padding: var(--size300) var(--size600);
}
.item {
padding: 0;
}
.data {
min-height: 600px;
}