Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
Mike Cao 2024-06-13 22:15:48 -07:00
commit 499392c110
7 changed files with 92 additions and 48 deletions

View file

@ -3,5 +3,5 @@
grid-template-rows: max-content 1fr;
grid-template-columns: max-content 1fr;
margin-bottom: 60px;
height: 100%;
height: 90vh;
}

View file

@ -1,14 +1,14 @@
import Link from 'next/link';
import { Button, Icons, Text, Icon } from 'react-basics';
import PageHeader from 'components/layout/PageHeader';
import Funnel from 'assets/funnel.svg';
import Lightbulb from 'assets/lightbulb.svg';
import Magnet from 'assets/magnet.svg';
import Path from 'assets/path.svg';
import Tag from 'assets/tag.svg';
import Target from 'assets/target.svg';
import Path from 'assets/path.svg';
import styles from './ReportTemplates.module.css';
import { useMessages, useTeamUrl } from 'components/hooks';
import PageHeader from 'components/layout/PageHeader';
import Link from 'next/link';
import { Button, Icon, Icons, Text } from 'react-basics';
import styles from './ReportTemplates.module.css';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
const { formatMessage, labels } = useMessages();

View file

@ -3,6 +3,7 @@ import { GridTable, GridColumn } from 'react-basics';
import { useFormat, useMessages } from 'components/hooks';
import { ReportContext } from '../[reportId]/Report';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { formatShortTime } from 'lib/format';
export function InsightsTable() {
const [fields, setFields] = useState([]);
@ -31,6 +32,12 @@ export function InsightsTable() {
</GridColumn>
);
})}
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
{row => row?.views?.toLocaleString()}
</GridColumn>
<GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" alignment="end">
{row => row?.visits?.toLocaleString()}
</GridColumn>
<GridColumn
name="visitors"
label={formatMessage(labels.visitors)}
@ -39,8 +46,27 @@ export function InsightsTable() {
>
{row => row?.visitors?.toLocaleString()}
</GridColumn>
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
{row => row?.views?.toLocaleString()}
<GridColumn
name="bounceRate"
label={formatMessage(labels.bounceRate)}
width="100px"
alignment="end"
>
{row => {
const n = (Math.min(row?.visits, row?.bounces) / row?.visits) * 100;
return Math.round(+n) + '%';
}}
</GridColumn>
<GridColumn
name="visitDuration"
label={formatMessage(labels.visitDuration)}
width="100px"
alignment="end"
>
{row => {
const n = row?.totaltime / row?.visits;
return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
}}
</GridColumn>
</GridTable>
);

View file

@ -57,11 +57,11 @@ export function WebsiteMetricsBar({
},
{
label: formatMessage(labels.bounceRate),
value: (Math.min(visitors.value, bounces.value) / visitors.value) * 100,
prev: (Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
value: (Math.min(visits.value, bounces.value) / visits.value) * 100,
prev: (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
change:
(Math.min(visitors.value, bounces.value) / visitors.value) * 100 -
(Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
(Math.min(visits.value, bounces.value) / visits.value) * 100 -
(Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
formatValue: n => Math.round(+n) + '%',
reverseColors: true,
},