diff --git a/components/messages.js b/components/messages.js index d41c4430..38834c67 100644 --- a/components/messages.js +++ b/components/messages.js @@ -81,6 +81,7 @@ export const labels = defineMessages({ devices: { id: 'label.devices', defaultMessage: 'Devices' }, countries: { id: 'label.countries', defaultMessage: 'Countries' }, languages: { id: 'label.languages', defaultMessage: 'Languages' }, + event: { id: 'label.event', defaultMessage: 'Event' }, events: { id: 'label.events', defaultMessage: 'Events' }, query: { id: 'label.query', defaultMessage: 'Query' }, queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' }, diff --git a/components/pages/event-data/EventDataTable.js b/components/pages/event-data/EventDataTable.js index 2724962f..4f938f8a 100644 --- a/components/pages/event-data/EventDataTable.js +++ b/components/pages/event-data/EventDataTable.js @@ -7,20 +7,25 @@ export function EventDataTable({ data = [] }) { const { formatMessage, labels } = useMessages(); const { resolveUrl } = usePageQuery(); + function linkToView(row, cell) { + return ( + + {cell} + + ); + } + if (data.length === 0) { return ; } return ( + + {row => linkToView(row, row.event)} + - {row => { - return ( - - {row.field} - - ); - }} + {row => linkToView(row, row.field)} {({ total }) => total.toLocaleString()} diff --git a/components/pages/event-data/EventDataValueTable.js b/components/pages/event-data/EventDataValueTable.js index 2a20c9b0..fedda654 100644 --- a/components/pages/event-data/EventDataValueTable.js +++ b/components/pages/event-data/EventDataValueTable.js @@ -5,7 +5,7 @@ import Icons from 'components/icons'; import PageHeader from 'components/layout/PageHeader'; import Empty from 'components/common/Empty'; -export function EventDataTable({ data = [], field }) { +export function EventDataTable({ data = [], field, event }) { const { formatMessage, labels } = useMessages(); const { resolveUrl } = usePageQuery(); @@ -20,7 +20,9 @@ export function EventDataTable({ data = [], field }) { {formatMessage(labels.back)} - {field} + + {event} - {field} + ); }; diff --git a/components/pages/websites/WebsiteEventData.js b/components/pages/websites/WebsiteEventData.js index 7dc68d41..41fc9839 100644 --- a/components/pages/websites/WebsiteEventData.js +++ b/components/pages/websites/WebsiteEventData.js @@ -5,7 +5,7 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric import { useDateRange, useApi, usePageQuery } from 'hooks'; import styles from './WebsiteEventData.module.css'; -function useFields(websiteId, field) { +function useFields(websiteId, field, event) { const [dateRange] = useDateRange(websiteId); const { startDate, endDate } = dateRange; const { get, useQuery } = useApi(); @@ -17,6 +17,7 @@ function useFields(websiteId, field) { startAt: +startDate, endAt: +endDate, field, + withEventNames: true, }), { enabled: !!(websiteId && startDate && endDate) }, ); @@ -26,15 +27,15 @@ function useFields(websiteId, field) { export default function WebsiteEventData({ websiteId }) { const { - query: { view }, + query: { view, event }, } = usePageQuery(); - const { data } = useFields(websiteId, view); + const { data } = useFields(websiteId, view, event); return ( {!view && } - {view && } + {view && } ); }