umami/components/pages/WebsiteDetails.js

191 lines
5.8 KiB
JavaScript
Raw Normal View History

import { useState } from 'react';
2022-12-10 23:26:52 +01:00
import { Column } from 'react-basics';
2022-08-05 22:07:20 +02:00
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
2020-08-01 04:05:14 +02:00
import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart';
2020-08-12 07:24:41 +02:00
import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page';
2022-12-10 23:26:52 +01:00
import GridRow from 'components/layout/GridRow';
2020-08-12 07:24:41 +02:00
import MenuLayout from 'components/layout/MenuLayout';
2020-09-26 08:38:28 +02:00
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
2022-03-02 06:13:15 +01:00
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import BrowsersTable from 'components/metrics/BrowsersTable';
import OSTable from 'components/metrics/OSTable';
import DevicesTable from 'components/metrics/DevicesTable';
import CountriesTable from 'components/metrics/CountriesTable';
import LanguagesTable from 'components/metrics/LanguagesTable';
2022-08-05 22:07:20 +02:00
import ScreenTable from 'components/metrics/ScreenTable';
2022-08-08 10:26:20 +02:00
import QueryParametersTable from 'components/metrics/QueryParametersTable';
import useFetch from 'hooks/useFetch';
2020-09-26 08:38:28 +02:00
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
2022-12-07 03:36:41 +01:00
import Arrow from 'assets/arrow-right.svg';
2022-03-02 06:13:15 +01:00
import styles from './WebsiteDetails.module.css';
2022-08-05 22:07:20 +02:00
const messages = defineMessages({
2022-08-08 10:26:20 +02:00
pages: { id: 'metrics.pages', defaultMessage: 'Pages' },
2022-08-05 22:07:20 +02:00
referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
screens: { id: 'metrics.screens', defaultMessage: 'Screens' },
browsers: { id: 'metrics.browsers', defaultMessage: 'Browsers' },
2022-08-08 10:26:20 +02:00
os: { id: 'metrics.operating-systems', defaultMessage: 'Operating system' },
devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
2022-08-05 22:07:20 +02:00
languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
2022-08-08 10:26:20 +02:00
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
2022-08-05 22:07:20 +02:00
});
2020-08-01 04:05:14 +02:00
const views = {
url: PagesTable,
referrer: ReferrersTable,
browser: BrowsersTable,
os: OSTable,
device: DevicesTable,
2022-07-16 07:29:55 +02:00
screen: ScreenTable,
country: CountriesTable,
2021-12-02 04:32:45 +01:00
language: LanguagesTable,
2022-08-08 10:26:20 +02:00
query: QueryParametersTable,
};
2020-10-11 11:29:55 +02:00
export default function WebsiteDetails({ websiteId }) {
const { data } = useFetch(`/websites/${websiteId}`);
const [chartLoaded, setChartLoaded] = useState(false);
2020-08-01 12:34:56 +02:00
const [countryData, setCountryData] = useState();
const {
2020-09-26 07:31:18 +02:00
resolve,
query: { view },
} = usePageQuery();
2022-08-05 22:07:20 +02:00
const { formatMessage } = useIntl();
const BackButton = () => (
2022-02-17 08:10:35 +01:00
<div key="back-button" className={classNames(styles.backButton, 'col-12')}>
2022-12-10 23:26:52 +01:00
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} sizes="small">
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.back" defaultMessage="Back" />
2020-09-29 07:12:48 +02:00
</Link>
</div>
);
2020-08-10 00:13:38 +02:00
const menuOptions = [
{
render: BackButton,
2020-08-10 00:13:38 +02:00
},
2020-09-08 00:25:09 +02:00
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.pages),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'url' }),
2020-09-08 00:25:09 +02:00
},
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.referrers),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'referrer' }),
2020-09-08 00:25:09 +02:00
},
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.browsers),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'browser' }),
2020-09-08 00:25:09 +02:00
},
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.os),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'os' }),
2020-09-08 00:25:09 +02:00
},
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.devices),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'device' }),
2020-09-08 00:25:09 +02:00
},
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.countries),
2020-09-26 07:31:18 +02:00
value: resolve({ view: 'country' }),
2020-09-08 00:25:09 +02:00
},
2021-12-02 04:32:45 +01:00
{
2022-08-05 22:07:20 +02:00
label: formatMessage(messages.languages),
2021-12-02 04:32:45 +01:00
value: resolve({ view: 'language' }),
},
2022-08-08 10:26:20 +02:00
{
label: formatMessage(messages.screens),
value: resolve({ view: 'screen' }),
},
2022-07-22 01:22:43 +02:00
{
2022-08-08 10:26:20 +02:00
label: formatMessage(messages.query),
value: resolve({ view: 'query' }),
2022-07-22 01:22:43 +02:00
},
2020-08-10 00:13:38 +02:00
];
2020-08-27 12:42:24 +02:00
const tableProps = {
2020-08-31 23:11:30 +02:00
websiteId,
websiteDomain: data?.domain,
2020-08-23 07:01:14 +02:00
limit: 10,
};
const DetailsComponent = views[view];
2020-08-27 12:42:24 +02:00
function handleDataLoad() {
2020-08-31 23:11:30 +02:00
if (!chartLoaded) {
2020-10-10 05:37:24 +02:00
setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
2020-08-31 23:11:30 +02:00
}
2020-08-01 04:05:14 +02:00
}
if (!data) {
return null;
2020-08-01 04:05:14 +02:00
}
return (
2020-08-06 04:04:02 +02:00
<Page>
2022-12-10 23:26:52 +01:00
<WebsiteChart
websiteId={websiteId}
title={data.name}
domain={data.domain}
onDataLoad={handleDataLoad}
showLink={false}
stickyHeader
/>
{!chartLoaded && <Loading />}
{chartLoaded && !view && (
<>
2022-12-10 23:26:52 +01:00
<GridRow>
<Column variant="two" className={styles.column}>
<PagesTable {...tableProps} />
</Column>
2022-12-10 23:26:52 +01:00
<Column variant="two" className={styles.column}>
<ReferrersTable {...tableProps} />
</Column>
2022-12-10 23:26:52 +01:00
</GridRow>
<GridRow>
<Column variant="three" className={styles.column}>
<BrowsersTable {...tableProps} />
</Column>
2022-12-10 23:26:52 +01:00
<Column variant="three" className={styles.column}>
<OSTable {...tableProps} />
</Column>
2022-12-10 23:26:52 +01:00
<Column variant="three" className={styles.column}>
<DevicesTable {...tableProps} />
</Column>
2022-12-10 23:26:52 +01:00
</GridRow>
<GridRow>
<Column xs={12} sm={12} md={12} defaultSize={8}>
<WorldMap data={countryData} />
</Column>
2022-12-10 23:26:52 +01:00
<Column xs={12} sm={12} md={12} defaultSize={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</Column>
2022-12-10 23:26:52 +01:00
</GridRow>
</>
)}
2020-10-11 10:33:26 +02:00
{view && chartLoaded && (
<MenuLayout
className={styles.view}
menuClassName={styles.menu}
contentClassName={styles.content}
menu={menuOptions}
>
2020-10-13 01:31:51 +02:00
<DetailsComponent
{...tableProps}
height={500}
limit={false}
animte={false}
showFilters
virtualize
/>
2020-08-10 00:13:38 +02:00
</MenuLayout>
2020-08-09 12:04:48 +02:00
)}
2020-08-06 04:04:02 +02:00
</Page>
2020-08-01 04:05:14 +02:00
);
}