mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 04:37:11 +01:00
Refactored query parameters.
This commit is contained in:
Mike Cao
parent
69962eb08d
commit
89781d4847
99 changed files with 452 additions and 2273 deletions
|
|
@ -1,6 +1,5 @@
|
|||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import MetricsTable from './MetricsTable';
|
||||
import { eventTypeFilter } from 'lib/filters';
|
||||
|
||||
const messages = defineMessages({
|
||||
events: { id: 'metrics.events', defaultMessage: 'Events' },
|
||||
|
|
@ -21,7 +20,6 @@ export default function EventsTable({ websiteId, ...props }) {
|
|||
type="event"
|
||||
metric={formatMessage(messages.actions)}
|
||||
websiteId={websiteId}
|
||||
dataFilter={eventTypeFilter}
|
||||
onDataLoad={handleDataLoad}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -54,9 +54,12 @@ export default function MetricsTable({
|
|||
|
||||
const filteredData = useMemo(() => {
|
||||
if (data) {
|
||||
const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
|
||||
let items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
|
||||
if (limit) {
|
||||
return items.filter((e, i) => i < limit).sort(firstBy('y', -1).thenBy('x'));
|
||||
items = items.filter((e, i) => i < limit);
|
||||
}
|
||||
if (filterOptions?.sort === false) {
|
||||
return items;
|
||||
}
|
||||
return items.sort(firstBy('y', -1).thenBy('x'));
|
||||
}
|
||||
|
|
|
|||
56
components/metrics/QueryParametersTable.js
Normal file
56
components/metrics/QueryParametersTable.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { useState } from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
import MetricsTable from './MetricsTable';
|
||||
import Tag from 'components/common/Tag';
|
||||
import { paramFilter } from 'lib/filters';
|
||||
import { safeDecodeURI } from 'lib/url';
|
||||
import FilterButtons from '../common/FilterButtons';
|
||||
|
||||
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' },
|
||||
});
|
||||
|
||||
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
|
||||
const [filter, setFilter] = useState(FILTER_COMBINED);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: formatMessage(messages.combined),
|
||||
value: FILTER_COMBINED,
|
||||
},
|
||||
{ label: formatMessage(messages.raw), value: FILTER_RAW },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
|
||||
<MetricsTable
|
||||
{...props}
|
||||
title={formatMessage(messages.query)}
|
||||
type="query"
|
||||
metric={formatMessage(messages.views)}
|
||||
websiteId={websiteId}
|
||||
dataFilter={filter !== FILTER_RAW ? paramFilter : null}
|
||||
renderLabel={({ x, p, v }) =>
|
||||
filter === FILTER_RAW ? (
|
||||
x
|
||||
) : (
|
||||
<>
|
||||
<Tag>{safeDecodeURI(p)}</Tag>
|
||||
{safeDecodeURI(v)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
delay={0}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
|
|||
import { FixedSizeList } from 'react-window';
|
||||
import firstBy from 'thenby';
|
||||
import Icon from 'components/common/Icon';
|
||||
import Tag from 'components/common/Tag';
|
||||
import Dot from 'components/common/Dot';
|
||||
import FilterButtons from 'components/common/FilterButtons';
|
||||
import NoData from 'components/common/NoData';
|
||||
|
|
@ -103,11 +102,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
|
|||
website_id,
|
||||
}) {
|
||||
if (event_name) {
|
||||
return (
|
||||
<div>
|
||||
<Tag>{event_name}</Tag>
|
||||
</div>
|
||||
);
|
||||
return <div>{event_name}</div>;
|
||||
}
|
||||
if (view_id) {
|
||||
const domain = getWebsite({ website_id })?.domain;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ import FilterButtons from 'components/common/FilterButtons';
|
|||
import FilterLink from 'components/common/FilterLink';
|
||||
import { refFilter } from 'lib/filters';
|
||||
|
||||
export const FILTER_COMBINED = 0;
|
||||
export const FILTER_RAW = 1;
|
||||
const FILTER_COMBINED = 0;
|
||||
const FILTER_RAW = 1;
|
||||
|
||||
const messages = defineMessages({
|
||||
combined: { id: 'metrics.filter.combined', defaultMessage: 'Combined' },
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default function ScreenTable({ websiteId, ...props }) {
|
|||
return (
|
||||
<MetricsTable
|
||||
{...props}
|
||||
title={<FormattedMessage id="metrics.screens" defaultMessage="Screen" />}
|
||||
title={<FormattedMessage id="metrics.screens" defaultMessage="Screens" />}
|
||||
type="screen"
|
||||
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
||||
websiteId={websiteId}
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
import MetricsTable from './MetricsTable';
|
||||
import FilterButtons from 'components/common/FilterButtons';
|
||||
|
||||
export const UTM_SOURCE = 'utm_source';
|
||||
export const UTM_MEDIUM = 'utm_medium';
|
||||
export const UTM_CAMPAIGN = 'utm_campaign';
|
||||
export const UTM_CONTENT = 'utm_content';
|
||||
export const UTM_TERM = 'utm_term';
|
||||
|
||||
const messages = defineMessages({
|
||||
utm_source: { id: 'metrics.utm_source', defaultMessage: 'UTM Source' },
|
||||
utm_medium: { id: 'metrics.utm_medium', defaultMessage: 'UTM Medium' },
|
||||
utm_campaign: { id: 'metrics.utm_campaign', defaultMessage: 'UTM Campaign' },
|
||||
utm_content: { id: 'metrics.utm_content', defaultMessage: 'UTM Content' },
|
||||
utm_term: { id: 'metrics.utm_term', defaultMessage: 'UTM Term' },
|
||||
views: { id: 'metrics.views', defaultMessage: 'Views' },
|
||||
none: { id: 'label.none', defaultMessage: 'None' },
|
||||
});
|
||||
|
||||
export default function UTMTable({ websiteId, showFilters, ...props }) {
|
||||
const [type, setType] = useState(UTM_SOURCE);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const buttons = [
|
||||
{ label: formatMessage(messages.utm_source), value: UTM_SOURCE },
|
||||
{ label: formatMessage(messages.utm_medium), value: UTM_MEDIUM },
|
||||
{ label: formatMessage(messages.utm_campaign), value: UTM_CAMPAIGN },
|
||||
{ label: formatMessage(messages.utm_content), value: UTM_CONTENT },
|
||||
{ label: formatMessage(messages.utm_term), value: UTM_TERM },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{showFilters && <FilterButtons buttons={buttons} selected={type} onClick={setType} />}
|
||||
<MetricsTable
|
||||
{...props}
|
||||
title={formatMessage(messages[type])}
|
||||
type={type}
|
||||
metric={formatMessage(messages.views)}
|
||||
websiteId={websiteId}
|
||||
delay={0}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -19,23 +19,23 @@ import LanguagesTable from 'components/metrics/LanguagesTable';
|
|||
import EventsTable from 'components/metrics/EventsTable';
|
||||
import EventsChart from 'components/metrics/EventsChart';
|
||||
import ScreenTable from 'components/metrics/ScreenTable';
|
||||
import UTMTable from 'components/metrics/UTMTable';
|
||||
import QueryParametersTable from 'components/metrics/QueryParametersTable';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import usePageQuery from 'hooks/usePageQuery';
|
||||
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
||||
import styles from './WebsiteDetails.module.css';
|
||||
|
||||
const messages = defineMessages({
|
||||
pages: { id: 'pages', defaultMessage: 'Pages' },
|
||||
pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
|
||||
referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
|
||||
screens: { id: 'metrics.screens', defaultMessage: 'Screens' },
|
||||
browsers: { id: 'metrics.browsers', defaultMessage: 'Browsers' },
|
||||
os: { id: 'metrics.os', defaultMessage: 'Operating system' },
|
||||
devices: { id: 'metrics.device', defaultMessage: 'Devices' },
|
||||
countries: { id: 'metrics.screens', defaultMessage: 'Screens' },
|
||||
os: { id: 'metrics.operating-systems', defaultMessage: 'Operating system' },
|
||||
devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
|
||||
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
|
||||
languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
|
||||
events: { id: 'metrics.screens', defaultMessage: 'Screens' },
|
||||
utm: { id: 'metrics.utm', defaultMessage: 'UTM' },
|
||||
events: { id: 'metrics.events', defaultMessage: 'Events' },
|
||||
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
|
||||
});
|
||||
|
||||
const views = {
|
||||
|
|
@ -48,7 +48,7 @@ const views = {
|
|||
country: CountriesTable,
|
||||
language: LanguagesTable,
|
||||
event: EventsTable,
|
||||
utm: UTMTable,
|
||||
query: QueryParametersTable,
|
||||
};
|
||||
|
||||
export default function WebsiteDetails({ websiteId }) {
|
||||
|
|
@ -82,10 +82,6 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
label: formatMessage(messages.referrers),
|
||||
value: resolve({ view: 'referrer' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.screens),
|
||||
value: resolve({ view: 'screen' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.browsers),
|
||||
value: resolve({ view: 'browser' }),
|
||||
|
|
@ -106,13 +102,17 @@ export default function WebsiteDetails({ websiteId }) {
|
|||
label: formatMessage(messages.languages),
|
||||
value: resolve({ view: 'language' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.screens),
|
||||
value: resolve({ view: 'screen' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.events),
|
||||
value: resolve({ view: 'event' }),
|
||||
},
|
||||
{
|
||||
label: formatMessage(messages.utm),
|
||||
value: resolve({ view: 'utm' }),
|
||||
label: formatMessage(messages.query),
|
||||
value: resolve({ view: 'query' }),
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue