watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Updated sticky header logic.

Browse source
This commit is contained in:
Mike Cao 2023-03-22 01:53:34 -07:00
parent 8532c673fe
commit f3e1f18e1b
7 changed files with 41 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/metrics/WebsiteChart.js
View file

@ -2,11 +2,11 @@ import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Button, Icon, Text, Row, Column } from 'react-basics';
import Link from 'next/link';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
import DateFilter from 'components/input/DateFilter';
import StickyHeader from 'components/common/StickyHeader';
import ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import RefreshButton from 'components/input/RefreshButton';
@ -16,9 +16,9 @@ import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength } from 'lib/date';
import Icons from 'components/icons';
import { UI_LAYOUT_BODY } from 'lib/constants';
import { labels } from 'components/messages';
import styles from './WebsiteChart.module.css';
import useSticky from '../../hooks/useSticky';
export default function WebsiteChart({
websiteId,
@ -37,6 +37,7 @@ export default function WebsiteChart({
query: { url, referrer, os, browser, device, country },
} = usePageQuery();
const { get, useQuery } = useApi();
const { ref, isSticky } = useSticky({ enabled: stickyHeader });
const { data, isLoading, error } = useQuery(
['websites:pageviews', websiteId, modified, url, referrer, os, browser, device, country],
@ -81,21 +82,21 @@ export default function WebsiteChart({
)}
</WebsiteHeader>
<FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
<StickyHeader
stickyClassName={styles.sticky}
enabled={stickyHeader}
scrollElement={document.getElementById(UI_LAYOUT_BODY)}
<Row
ref={ref}
className={classNames(styles.header, {
[styles.sticky]: stickyHeader,
[styles.isSticky]: isSticky,
})}
>
<Row className={styles.header}>
<Column>
<MetricsBar websiteId={websiteId} />
</Column>
<Column className={styles.actions}>
<RefreshButton websiteId={websiteId} isLoading={isLoading} />
<DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
</Column>
</Row>
</StickyHeader>
<Column>
<MetricsBar websiteId={websiteId} />
</Column>
<Column className={styles.actions}>
<RefreshButton websiteId={websiteId} isLoading={isLoading} />
<DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
</Column>
</Row>
<Row>
<Column className={styles.chart}>
{error && <ErrorMessage />}