umami/components/WebsiteDetails.js

184 lines
5.5 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } 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';
import MenuLayout from 'components/layout/MenuLayout';
import Button from 'components/common/Button';
2020-08-10 00:13:38 +02:00
import Arrow from 'assets/arrow-right.svg';
2020-08-01 04:05:14 +02:00
import styles from './WebsiteDetails.module.css';
import PagesTable from './metrics/PagesTable';
import ReferrersTable from './metrics/ReferrersTable';
import BrowsersTable from './metrics/BrowsersTable';
import OSTable from './metrics/OSTable';
import DevicesTable from './metrics/DevicesTable';
import CountriesTable from './metrics/CountriesTable';
2020-08-25 08:49:14 +02:00
import EventsTable from './metrics/EventsTable';
2020-08-27 12:42:24 +02:00
import EventsChart from './metrics/EventsChart';
import useFetch from 'hooks/useFetch';
import Loading from 'components/common/Loading';
2020-08-01 04:05:14 +02:00
2020-08-31 23:11:30 +02:00
export default function WebsiteDetails({ websiteId }) {
const { data } = useFetch(`/api/website/${websiteId}`);
const [chartLoaded, setChartLoaded] = useState(false);
2020-08-01 12:34:56 +02:00
const [countryData, setCountryData] = useState();
2020-08-28 03:44:20 +02:00
const [eventsData, setEventsData] = useState();
2020-08-09 12:04:48 +02:00
const [expand, setExpand] = useState();
2020-08-01 04:05:14 +02:00
const BackButton = () => (
<Button
className={styles.backButton}
icon={<Arrow />}
size="xsmall"
onClick={() => setExpand(null)}
>
2020-09-06 02:27:01 +02:00
<div>
<FormattedMessage id="button.back" defaultMessage="Back" />
</div>
</Button>
);
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
{
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
value: 'url',
component: PagesTable,
},
{
2020-09-08 21:13:30 +02:00
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
2020-09-08 00:25:09 +02:00
value: 'referrer',
component: ReferrersTable,
},
{
2020-09-08 21:13:30 +02:00
label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
2020-09-08 00:25:09 +02:00
value: 'browser',
component: BrowsersTable,
},
{
2020-09-12 12:22:14 +02:00
label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
2020-09-08 00:25:09 +02:00
value: 'os',
component: OSTable,
},
{
label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
value: 'device',
component: DevicesTable,
},
{
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
value: 'country',
component: CountriesTable,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: 'event',
component: EventsTable,
},
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,
onExpand: handleExpand,
};
const DetailsComponent = expand?.component;
2020-08-27 12:42:24 +02:00
function getSelectedMenuOption(value) {
return menuOptions.find(e => e.value === value);
}
function handleDataLoad() {
2020-08-31 23:11:30 +02:00
if (!chartLoaded) {
setTimeout(() => setChartLoaded(true), 300);
}
2020-08-01 04:05:14 +02:00
}
2020-08-10 00:13:38 +02:00
function handleExpand(value) {
2020-08-27 12:42:24 +02:00
setExpand(getSelectedMenuOption(value));
2020-08-09 12:04:48 +02:00
}
2020-08-10 00:13:38 +02:00
function handleMenuSelect(value) {
2020-08-27 12:42:24 +02:00
setExpand(getSelectedMenuOption(value));
2020-08-10 00:13:38 +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>
2020-08-01 04:05:14 +02:00
<div className="row">
2020-08-01 06:56:25 +02:00
<div className={classNames(styles.chart, 'col')}>
<WebsiteChart
2020-08-04 03:12:28 +02:00
websiteId={websiteId}
2020-08-31 23:11:30 +02:00
title={data.name}
onDataLoad={handleDataLoad}
2020-08-31 23:11:30 +02:00
showLink={false}
stickyHeader
2020-08-04 03:12:28 +02:00
/>
2020-08-02 06:20:52 +02:00
</div>
2020-08-01 12:34:56 +02:00
</div>
{!chartLoaded && <Loading />}
2020-08-09 12:04:48 +02:00
{chartLoaded && !expand && (
<>
<div className={classNames(styles.row, 'row')}>
<div className="col-md-12 col-lg-6">
<PagesTable {...tableProps} />
</div>
<div className="col-md-12 col-lg-6">
<ReferrersTable {...tableProps} />
</div>
</div>
<div className={classNames(styles.row, 'row')}>
<div className="col-md-12 col-lg-4">
<BrowsersTable {...tableProps} />
</div>
<div className="col-md-12 col-lg-4">
<OSTable {...tableProps} />
</div>
<div className="col-md-12 col-lg-4">
<DevicesTable {...tableProps} />
</div>
</div>
<div className={classNames(styles.row, 'row')}>
<div className="col-12 col-md-12 col-lg-8">
<WorldMap data={countryData} />
</div>
<div className="col-12 col-md-12 col-lg-4">
2020-08-28 03:44:20 +02:00
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</div>
</div>
2020-08-28 03:44:20 +02:00
<div
className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
>
2020-08-25 08:49:14 +02:00
<div className="col-12 col-md-12 col-lg-4">
2020-08-28 03:44:20 +02:00
<EventsTable {...tableProps} onDataLoad={setEventsData} />
2020-08-25 08:49:14 +02:00
</div>
2020-08-28 03:44:20 +02:00
<div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
2020-08-31 23:11:30 +02:00
<EventsChart websiteId={websiteId} />
2020-08-27 12:42:24 +02:00
</div>
2020-08-25 08:49:14 +02:00
</div>
</>
)}
2020-08-09 12:04:48 +02:00
{expand && (
<MenuLayout
className={styles.expand}
menuClassName={styles.menu}
2020-08-10 00:13:38 +02:00
optionClassName={styles.option}
2020-08-09 12:04:48 +02:00
menu={menuOptions}
2020-08-10 00:13:38 +02:00
selectedOption={expand.value}
2020-08-09 12:04:48 +02:00
onMenuSelect={handleMenuSelect}
2020-08-10 00:13:38 +02:00
>
2020-08-23 07:01:14 +02:00
<DetailsComponent {...tableProps} limit={false} />
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
);
}