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

Updates to realtime. Fixed refresh button.

Browse source
This commit is contained in:
Mike Cao 2023-02-14 17:23:20 -08:00
parent 638a674e99
commit 28921a7cd5
31 changed files with 373 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/pages/websites/WebsiteDetails.js
View file

@ -8,13 +8,10 @@ import WebsiteChart from 'components/metrics/WebsiteChart';
import useApi from 'hooks/useApi';
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { labels } from 'components/messages';
import styles from './WebsiteDetails.module.css';
import WebsiteTableView from './WebsiteTableView';
import WebsiteMenuView from './WebsiteMenuView';
export default function WebsiteDetails({ websiteId }) {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites', websiteId], () =>
get(`/websites/${websiteId}`),
@ -22,7 +19,6 @@ export default function WebsiteDetails({ websiteId }) {
const [chartLoaded, setChartLoaded] = useState(false);
const {
resolve,
query: { view },
} = usePageQuery();

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

@ -1,7 +1,7 @@
import { Row, Column, Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import classNames from 'classnames';
import { GridRow, GridColumn } from 'components/layout/Grid';
import BrowsersTable from 'components/metrics/BrowsersTable';
import CountriesTable from 'components/metrics/CountriesTable';
import DevicesTable from 'components/metrics/DevicesTable';
@ -33,7 +33,7 @@ const views = {
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const { formatMessage } = useIntl();
const {
resolve,
resolveUrl,
query: { view },
} = usePageQuery();
@ -80,12 +80,12 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
},
];
const DetailsComponent = views[view];
const DetailsComponent = views[view] || (() => null);
return (
<Row className={styles.row}>
<Column defaultSize={3} className={classNames(styles.col, styles.menu)}>
<Link href={resolve({ view: undefined })}>
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={3} className={styles.menu}>
<Link href={resolveUrl({ view: undefined })}>
<a>
<Flexbox justifyContent="center">
<Button variant="quiet">
@ -100,14 +100,14 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
<Menu items={items} selectedKey={view}>
{({ key, label }) => (
<Item key={key} className={styles.item}>
<Link href={resolve({ view: key })} shallow={true}>
<Link href={resolveUrl({ view: key })} shallow={true}>
<a>{label}</a>
</Link>
</Item>
)}
</Menu>
</Column>
<Column defaultSize={9} className={classNames(styles.col, styles.data)}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
<DetailsComponent
websiteId={websiteId}
websiteDomain={websiteDomain}
@ -117,7 +117,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
showFilters={true}
virtualize={true}
/>
</Column>
</Row>
</GridColumn>
</GridRow>
);
}

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

@ -1,17 +1,3 @@
.row {
border-top: 1px solid var(--base300);
}
.col {
border-left: 1px solid var(--base300);
padding: 30px;
}
.col:first-child {
padding-left: 0;
border-left: 0;
}
.menu {
gap: 20px;
}

56
components/pages/websites/WebsiteTableView.js
View file

@ -1,5 +1,6 @@
import { useState } from 'react';
import { Row, Column } from 'react-basics';
import { GridRow, GridColumn } from 'components/layout/Grid';
//import { Row as GridRow, Column as GridColumn } from 'react-basics';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import BrowsersTable from 'components/metrics/BrowsersTable';
@ -9,7 +10,6 @@ import WorldMap from 'components/common/WorldMap';
import CountriesTable from 'components/metrics/CountriesTable';
import EventsTable from 'components/metrics/EventsTable';
import EventsChart from 'components/metrics/EventsChart';
import styles from './WebsiteTableView.module.css';
export default function WebsiteTableView({ websiteId }) {
const [countryData, setCountryData] = useState();
@ -20,41 +20,41 @@ export default function WebsiteTableView({ websiteId }) {
return (
<>
<Row className={styles.row}>
<Column className={styles.col} variant="two">
<GridRow>
<GridColumn variant="two">
<PagesTable {...tableProps} />
</Column>
<Column className={styles.col} variant="two">
</GridColumn>
<GridColumn variant="two">
<ReferrersTable {...tableProps} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} variant="three">
</GridColumn>
</GridRow>
<GridRow>
<GridColumn variant="three">
<BrowsersTable {...tableProps} />
</Column>
<Column className={styles.col} variant="three">
</GridColumn>
<GridColumn variant="three">
<OSTable {...tableProps} />
</Column>
<Column className={styles.col} variant="three">
</GridColumn>
<GridColumn variant="three">
<DevicesTable {...tableProps} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} xs={12} sm={12} md={12} defaultSize={8}>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={8}>
<WorldMap data={countryData} />
</Column>
<Column className={styles.col} xs={12} sm={12} md={12} defaultSize={4}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
</Column>
</Row>
<Row className={styles.row}>
<Column className={styles.col} xs={12} md={12} lg={4} defaultSize={4}>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} sm={12} md={12} lg={4} defaultSize={4}>
<EventsTable {...tableProps} />
</Column>
<Column className={styles.col} xs={12} md={12} lg={8} defaultSize={8}>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} lg={8} defaultSize={8}>
<EventsChart websiteId={websiteId} />
</Column>
</Row>
</GridColumn>
</GridRow>
</>
);
}