m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update website details layout.

Browse Source
This commit is contained in:
Mike Cao 2022-12-10 14:26:52 -08:00
parent 0a6ecfe3d2
commit e8e90a5451
12 changed files with 128 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/Button.module.css
View File

@ -29,7 +29,7 @@
} }
.large { .large {
font-size: var(--font-size-large); font-size: var(--font-size-lg);
} }
.small { .small {

2
components/common/Link.module.css
View File

@ -17,7 +17,7 @@ a.link:hover span {
} }
a.link.large { a.link.large {
font-size: var(--font-size-large); font-size: var(--font-size-lg);
} }
a.link.small { a.link.small {

2
components/common/MobileMenu.module.css
View File

@ -21,7 +21,7 @@
} }
.item { .item {
font-size: var(--font-size-large); font-size: var(--font-size-lg);
} }
.item + .item { .item + .item {

18
components/layout/GridRow.js Normal file
View File

@ -0,0 +1,18 @@
import { Row, cloneChildren } from 'react-basics';
import styles from './GridRow.module.css';
import classNames from 'classnames';
export default function GridRow(props) {
const { children, className, ...rowProps } = props;
return (
<Row {...rowProps} className={className}>
{breakpoint =>
cloneChildren(children, () => {
return {
className: classNames(styles.column, styles[breakpoint]),
};
})
}
</Row>
);
}

21
components/layout/GridRow.module.css Normal file
View File

@ -0,0 +1,21 @@
.column {
padding: 20px;
border-top: 1px solid var(--base200);
border-left: 1px solid var(--base200);
}
.column:first-child {
padding-left: 0;
border-left: 0;
}
.column:last-child {
padding-right: 0;
}
.column.xs,
.column.sm,
.column.md {
border-left: 0;
border-right: 0;
}

54
components/layout/Header.js
View File

@ -1,6 +1,6 @@
import { Row, Column } from 'react-basics';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import Icon from 'components/common/Icon'; import Icon from 'components/common/Icon';
import LanguageButton from 'components/settings/LanguageButton'; import LanguageButton from 'components/settings/LanguageButton';
@ -25,31 +25,33 @@ export default function Header() {
return ( return (
<> <>
{allowUpdate && <UpdateNotice />} {allowUpdate && <UpdateNotice />}
<header className={classNames(styles.header, 'row')}> <header className={styles.header}>
<div className={styles.title}> <Row>
<Icon icon={<Logo />} size="large" className={styles.logo} /> <Column className={styles.title}>
<Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link> <Icon icon={<Logo />} size="large" className={styles.logo} />
</div> <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
<HamburgerButton /> </Column>
{user && !adminDisabled && ( <HamburgerButton />
<div className={styles.links}> {user && !adminDisabled && (
<Link href="/dashboard"> <div className={styles.links}>
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" /> <Link href="/dashboard">
</Link> <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
<Link href="/realtime"> </Link>
<FormattedMessage id="label.realtime" defaultMessage="Realtime" /> <Link href="/realtime">
</Link> <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
<Link href="/settings"> </Link>
<FormattedMessage id="label.settings" defaultMessage="Settings" /> <Link href="/settings">
</Link> <FormattedMessage id="label.settings" defaultMessage="Settings" />
</div> </Link>
)} </div>
<div className={styles.buttons}> )}
<ThemeButton /> <Column className={styles.buttons}>
<LanguageButton menuAlign="right" /> <ThemeButton />
<SettingsButton /> <LanguageButton menuAlign="right" />
{user && !adminDisabled && <UserButton />} <SettingsButton />
</div> {user && !adminDisabled && <UserButton />}
</Column>
</Row>
</header> </header>
</> </>
); );

3
components/layout/Header.module.css
View File

@ -10,7 +10,7 @@
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.4; flex-direction: row;
} }
.logo { .logo {
@ -33,6 +33,7 @@
.buttons { .buttons {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }

52
components/metrics/WebsiteChart.js
View File

@ -1,5 +1,5 @@
import React, { useMemo } from 'react'; import { useMemo } from 'react';
import classNames from 'classnames'; import { Row, Column } from 'react-basics';
import PageviewsChart from './PageviewsChart'; import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar'; import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader'; import WebsiteHeader from './WebsiteHeader';
@ -20,7 +20,6 @@ export default function WebsiteChart({
title, title,
domain, domain,
stickyHeader = false, stickyHeader = false,
showLink = false,
showChart = true, showChart = true,
onDataLoad = () => {}, onDataLoad = () => {},
}) { }) {
@ -80,33 +79,34 @@ export default function WebsiteChart({
} }
return ( return (
<div className={styles.container}> <>
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} /> <WebsiteHeader websiteId={websiteId} title={title} domain={domain} />
<div className={classNames(styles.header, 'row')}>
<StickyHeader <StickyHeader
className={classNames(styles.metrics, 'col row')} className={styles.metrics}
stickyClassName={styles.sticky} stickyClassName={styles.sticky}
enabled={stickyHeader} enabled={stickyHeader}
> >
<FilterTags <FilterTags
params={{ url, referrer, os, browser, device, country }} params={{ url, referrer, os, browser, device, country }}
onClick={handleCloseFilter} onClick={handleCloseFilter}
/> />
<div className="col-12 col-lg-9"> <Row className={styles.header}>
<Column xs={12} sm={12} md={12} defaultSize={10}>
<MetricsBar websiteId={websiteId} /> <MetricsBar websiteId={websiteId} />
</div> </Column>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}> <Column className={styles.filter} xs={12} sm={12} md={12} defaultSize={2}>
<DateFilter <DateFilter
value={value} value={value}
startDate={startDate} startDate={startDate}
endDate={endDate} endDate={endDate}
onChange={handleDateChange} onChange={handleDateChange}
/> />
</div> </Column>
</StickyHeader> </Row>
</div> </StickyHeader>
<div className="row"> <Row>
<div className={classNames(styles.chart, 'col')}> <Column className={styles.chart}>
{error && <ErrorMessage />} {error && <ErrorMessage />}
{showChart && ( {showChart && (
<PageviewsChart <PageviewsChart
@ -117,8 +117,8 @@ export default function WebsiteChart({
loading={loading} loading={loading}
/> />
)} )}
</div> </Column>
</div> </Row>
</div> </>
); );
} }

13
components/metrics/WebsiteChart.module.css
View File

@ -7,10 +7,11 @@
.chart { .chart {
position: relative; position: relative;
padding-bottom: 20px;
} }
.title { .title {
font-size: var(--font-size-large); font-size: var(--font-size-lg);
line-height: 60px; line-height: 60px;
font-weight: 600; font-weight: 600;
} }
@ -37,13 +38,5 @@
} }
.filter { .filter {
display: flex; align-self: center;
justify-content: flex-end;
align-items: center;
}
@media only screen and (max-width: 992px) {
.filter {
display: block;
}
} }

11
components/metrics/WebsiteHeader.js
View File

@ -1,8 +1,6 @@
import { Row, Column } from 'react-basics'; import { Row, Column } from 'react-basics';
import Favicon from 'components/common/Favicon'; import Favicon from 'components/common/Favicon';
import OverflowText from 'components/common/OverflowText'; import OverflowText from 'components/common/OverflowText';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import ActiveUsers from './ActiveUsers'; import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css'; import styles from './WebsiteHeader.module.css';
@ -11,18 +9,13 @@ export default function WebsiteHeader({ websiteId, title, domain }) {
return ( return (
<PageHeader> <PageHeader>
<Row> <Row>
<Column className={styles.title} xs={12} sm={12} md={4} lg={4}> <Column className={styles.title} variant="two">
<Favicon domain={domain} /> <Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText> <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Column> </Column>
<Column className={styles.active} xs={12} sm={12} md={4} lg={4}> <Column className={styles.active} variant="two">
<ActiveUsers websiteId={websiteId} /> <ActiveUsers websiteId={websiteId} />
</Column> </Column>
<Column xs={12} sm={12} md={4} lg={4}>
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
</ButtonLayout>
</Column>
</Row> </Row>
</PageHeader> </PageHeader>
); );

72
components/pages/WebsiteDetails.js
View File

@ -1,10 +1,11 @@
import { useState } from 'react'; import { useState } from 'react';
import { Row, Column } from 'react-basics'; import { Column } from 'react-basics';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart'; import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap'; import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import GridRow from 'components/layout/GridRow';
import MenuLayout from 'components/layout/MenuLayout'; import MenuLayout from 'components/layout/MenuLayout';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
@ -15,11 +16,8 @@ import OSTable from 'components/metrics/OSTable';
import DevicesTable from 'components/metrics/DevicesTable'; import DevicesTable from 'components/metrics/DevicesTable';
import CountriesTable from 'components/metrics/CountriesTable'; import CountriesTable from 'components/metrics/CountriesTable';
import LanguagesTable from 'components/metrics/LanguagesTable'; 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 ScreenTable from 'components/metrics/ScreenTable';
import QueryParametersTable from 'components/metrics/QueryParametersTable'; import QueryParametersTable from 'components/metrics/QueryParametersTable';
import EventDataButton from 'components/common/EventDataButton';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants'; import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
@ -35,7 +33,6 @@ const messages = defineMessages({
devices: { id: 'metrics.devices', defaultMessage: 'Devices' }, devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
countries: { id: 'metrics.countries', defaultMessage: 'Countries' }, countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
languages: { id: 'metrics.languages', defaultMessage: 'Languages' }, languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
events: { id: 'metrics.events', defaultMessage: 'Events' },
query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' }, query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
}); });
@ -48,7 +45,6 @@ const views = {
screen: ScreenTable, screen: ScreenTable,
country: CountriesTable, country: CountriesTable,
language: LanguagesTable, language: LanguagesTable,
event: EventsTable,
query: QueryParametersTable, query: QueryParametersTable,
}; };
@ -56,7 +52,6 @@ export default function WebsiteDetails({ websiteId }) {
const { data } = useFetch(`/websites/${websiteId}`); const { data } = useFetch(`/websites/${websiteId}`);
const [chartLoaded, setChartLoaded] = useState(false); const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState(); const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
const { const {
resolve, resolve,
query: { view }, query: { view },
@ -65,7 +60,7 @@ export default function WebsiteDetails({ websiteId }) {
const BackButton = () => ( const BackButton = () => (
<div key="back-button" className={classNames(styles.backButton, 'col-12')}> <div key="back-button" className={classNames(styles.backButton, 'col-12')}>
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small"> <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} sizes="small">
<FormattedMessage id="label.back" defaultMessage="Back" /> <FormattedMessage id="label.back" defaultMessage="Back" />
</Link> </Link>
</div> </div>
@ -107,10 +102,6 @@ export default function WebsiteDetails({ websiteId }) {
label: formatMessage(messages.screens), label: formatMessage(messages.screens),
value: resolve({ view: 'screen' }), value: resolve({ view: 'screen' }),
}, },
{
label: formatMessage(messages.events),
value: resolve({ view: 'event' }),
},
{ {
label: formatMessage(messages.query), label: formatMessage(messages.query),
value: resolve({ view: 'query' }), value: resolve({ view: 'query' }),
@ -137,57 +128,44 @@ export default function WebsiteDetails({ websiteId }) {
return ( return (
<Page> <Page>
<Row> <WebsiteChart
<Column className={styles.chart}> websiteId={websiteId}
<WebsiteChart title={data.name}
websiteId={websiteId} domain={data.domain}
title={data.name} onDataLoad={handleDataLoad}
domain={data.domain} showLink={false}
onDataLoad={handleDataLoad} stickyHeader
showLink={false} />
stickyHeader {!chartLoaded && <Loading />}
/>
{!chartLoaded && <Loading />}
</Column>
</Row>
{chartLoaded && !view && ( {chartLoaded && !view && (
<> <>
<Row> <GridRow>
<Column md={12} lg={6}> <Column variant="two" className={styles.column}>
<PagesTable {...tableProps} /> <PagesTable {...tableProps} />
</Column> </Column>
<Column md={12} lg={6}> <Column variant="two" className={styles.column}>
<ReferrersTable {...tableProps} /> <ReferrersTable {...tableProps} />
</Column> </Column>
</Row> </GridRow>
<Row> <GridRow>
<Column md={12} lg={4}> <Column variant="three" className={styles.column}>
<BrowsersTable {...tableProps} /> <BrowsersTable {...tableProps} />
</Column> </Column>
<Column md={12} lg={4}> <Column variant="three" className={styles.column}>
<OSTable {...tableProps} /> <OSTable {...tableProps} />
</Column> </Column>
<Column md={12} lg={4}> <Column variant="three" className={styles.column}>
<DevicesTable {...tableProps} /> <DevicesTable {...tableProps} />
</Column> </Column>
</Row> </GridRow>
<Row> <GridRow>
<Column xs={12} md={12} lg={8}> <Column xs={12} sm={12} md={12} defaultSize={8}>
<WorldMap data={countryData} /> <WorldMap data={countryData} />
</Column> </Column>
<Column xs={12} md={12} lg={4}> <Column xs={12} sm={12} md={12} defaultSize={4}>
<CountriesTable {...tableProps} onDataLoad={setCountryData} /> <CountriesTable {...tableProps} onDataLoad={setCountryData} />
</Column> </Column>
</Row> </GridRow>
<Row className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
<Column xs={12} md={12} lg={4}>
<EventsTable {...tableProps} onDataLoad={setEventsData} />
</Column>
<Column xs={12} md={12} lg={8}>
<EventDataButton websiteId={websiteId} />
<EventsChart className={styles.eventschart} websiteId={websiteId} />
</Column>
</Row>
</> </>
)} )}
{view && chartLoaded && ( {view && chartLoaded && (

11
components/pages/WebsiteDetails.module.css
View File

@ -29,14 +29,3 @@
.hidden { .hidden {
display: none; display: none;
} }
.eventschart {
padding-top: 30px;
}
@media only screen and (max-width: 992px) {
.menu {
display: flex;
flex-direction: column;
}
}