watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Show event data values.

Browse source
This commit is contained in:
Mike Cao 2023-07-10 05:46:45 -07:00
parent c865f43b11
commit cabff7924e
8 changed files with 90 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/pages/event-data/EventDataMetricsBar.js
View file

@ -23,7 +23,7 @@ export function EventDataMetricsBar({ websiteId }) {
);
return (
<Row>
<Row className={styles.row}>
<Column defaultSize={12} xl={8}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{!error && isFetched && (

4
components/pages/event-data/EventDataMetricsBar.module.css
View file

@ -40,3 +40,7 @@
flex-basis: calc(50% - 20px);
}
}
.row {
border-bottom: 1px solid var(--border-color);
}

22
components/pages/event-data/EventDataTable.js
View file

@ -1,14 +1,28 @@
import Link from 'next/link';
import { GridTable, GridColumn } from 'react-basics';
import { useMessages } from 'hooks';
import { useMessages, usePageQuery } from 'hooks';
import Empty from 'components/common/Empty';
export function EventDataTable({ data = [], showValue }) {
const { formatMessage, labels } = useMessages();
const { resolveUrl } = usePageQuery();
if (data.length === 0) {
return <Empty />;
}
return (
<GridTable data={data}>
<GridColumn name="field" label={formatMessage(labels.field)} />
<GridColumn name="value" label={formatMessage(labels.value)} hidden={!showValue} />
<GridColumn name="total" label={formatMessage(labels.total)}>
<GridColumn name="field" label={formatMessage(labels.field)}>
{row => {
return (
<Link href={resolveUrl({ view: row.field })} shallow={true}>
{row.field}
</Link>
);
}}
</GridColumn>
<GridColumn name="total" label={formatMessage(labels.totalRecords)}>
{({ total }) => total.toLocaleString()}
</GridColumn>
</GridTable>

44
components/pages/event-data/EventDataValueTable.js Normal file
View file

@ -0,0 +1,44 @@
import { GridTable, GridColumn, Button, Icon, Text, Flexbox } from 'react-basics';
import { useMessages, usePageQuery } from 'hooks';
import Link from 'next/link';
import Icons from 'components/icons';
import PageHeader from 'components/layout/PageHeader';
import Empty from 'components/common/Empty';
export function EventDataTable({ data = [], field }) {
const { formatMessage, labels } = useMessages();
const { resolveUrl } = usePageQuery();
const Title = () => {
return (
<>
<Link href={resolveUrl({ view: undefined })}>
<Button>
<Icon rotate={180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</Button>
</Link>
<Text>{field}</Text>
</>
);
};
return (
<>
<PageHeader title={<Title />} />
{data.length <= 0 && <Empty />}
{data.length > 0 && (
<GridTable data={data}>
<GridColumn name="value" label={formatMessage(labels.value)} />
<GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
{({ total }) => total.toLocaleString()}
</GridColumn>
</GridTable>
)}
</>
);
}
export default EventDataTable;