watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 15:17:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update teams features.

Browse source
This commit is contained in:
Mike Cao 2023-02-01 18:39:54 -08:00
parent 89f2fd601e
commit 656df4f846
23 changed files with 278 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

33
components/metrics/ActiveUsers.js
View file

@ -1,16 +1,20 @@
import { useMemo } from 'react';
import { StatusLight } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import { messages } from 'components/messages';
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, className, value, refetchInterval = 60000 }) {
const url = websiteId ? `/websites/${websiteId}/active` : null;
export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data } = useQuery(['websites:active', websiteId], () => get(url), {
refetchInterval,
});
const { data } = useQuery(
['websites:active', websiteId],
() => get(`/websites/${websiteId}/active`),
{
refetchInterval,
},
);
const count = useMemo(() => {
if (websiteId) {
@ -25,17 +29,8 @@ export default function ActiveUsers({ websiteId, className, value, refetchInterv
}
return (
<div className={classNames(styles.container, className)}>
<StatusLight variant="success" />
<div className={styles.text}>
<div>
<FormattedMessage
id="message.active-users"
defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
values={{ x: count }}
/>
</div>
</div>
</div>
<StatusLight variant="success">
<div className={styles.text}>{formatMessage(messages.activeUsers, { x: count })}</div>
</StatusLight>
);
}

5
components/metrics/ChartTooltip.js
View file

@ -15,8 +15,9 @@ export default function ChartTooltip({ chartId, tooltip }) {
<div className={styles.content}>
<div className={styles.title}>{title}</div>
<div className={styles.metric}>
<StatusLight color={labelColor} />
{value} {label}
<StatusLight color={labelColor}>
{value} {label}
</StatusLight>
</div>
</div>
</div>

5
components/metrics/Legend.js
View file

@ -34,8 +34,9 @@ export default function Legend({ chart }) {
className={classNames(styles.label, { [styles.hidden]: hidden })}
onClick={() => handleClick(datasetIndex)}
>
<StatusLight color={color.alpha(color.alpha() + 0.2).toHex()} />
<span className={locale}>{text}</span>
<StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
<span className={locale}>{text}</span>
</StatusLight>
</div>
);
})}

23
components/metrics/WebsiteChart.js
View file

@ -1,5 +1,7 @@
import { useMemo } from 'react';
import { Row, Column, Loading } from 'react-basics';
import { useIntl } from 'react-intl';
import { Button, Icon, Text, Row, Column, Loading } from 'react-basics';
import Link from 'next/link';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
@ -12,6 +14,8 @@ import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength, getDateRangeValues } from 'lib/date';
import Icons from 'components/icons';
import { labels } from 'components/messages';
import styles from './WebsiteChart.module.css';
export default function WebsiteChart({
@ -20,8 +24,10 @@ export default function WebsiteChart({
domain,
stickyHeader = false,
showChart = true,
showDetailsButton = false,
onDataLoad = () => {},
}) {
const { formatMessage } = useIntl();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
@ -82,7 +88,20 @@ export default function WebsiteChart({
return (
<>
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} />
<WebsiteHeader websiteId={websiteId} title={title} domain={domain}>
{showDetailsButton && (
<Link href={`/websites/${websiteId}`}>
<a>
<Button>
<Text>{formatMessage(labels.viewDetails)}</Text>
<Icon>
<Icons.ArrowRight />
</Icon>
</Button>
</a>
</Link>
)}
</WebsiteHeader>
<StickyHeader
className={styles.metrics}
stickyClassName={styles.sticky}

24
components/metrics/WebsiteHeader.js
View file

@ -1,22 +1,20 @@
import { Row, Column } from 'react-basics';
import Favicon from 'components/common/Favicon';
import OverflowText from 'components/common/OverflowText';
import PageHeader from 'components/layout/PageHeader';
import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, title, domain }) {
export default function WebsiteHeader({ websiteId, title, domain, children }) {
return (
<PageHeader>
<Row>
<Column className={styles.title} variant="two">
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Column>
<Column className={styles.active} variant="two">
<ActiveUsers websiteId={websiteId} />
</Column>
</Row>
</PageHeader>
<Row className={styles.header} justifyContent="center">
<Column className={styles.title} variant="two">
<Favicon domain={domain} />
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Column>
<Column className={styles.body} variant="two">
<ActiveUsers websiteId={websiteId} />
{children}
</Column>
</Row>
);
}

12
components/metrics/WebsiteHeader.module.css
View file

@ -1,15 +1,21 @@
.header {
height: 100px;
}
.title {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: var(--font-size-lg);
font-size: 24px;
font-weight: 700;
overflow: hidden;
}
.active {
.body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: flex-end;
gap: 30px;
}