umami/components/metrics/EventsTable.js

56 lines
1.7 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-25 08:49:14 +02:00
import MetricsTable from './MetricsTable';
2020-10-09 21:39:03 +02:00
import Tag from 'components/common/Tag';
import DropDown from 'components/common/DropDown';
import { eventTypeFilter } from 'lib/filters';
2021-02-15 16:44:27 +01:00
import styles from './EventsTable.module.css';
const EVENT_FILTER_DEFAULT = {
value: 'EVENT_FILTER_DEFAULT',
label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
};
2020-08-25 08:49:14 +02:00
2020-10-11 11:29:55 +02:00
export default function EventsTable({ websiteId, ...props }) {
const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
const [eventTypes, setEventTypes] = useState([]);
const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
function handleDataLoad(data) {
setEventTypes([...new Set(data.map(({ x }) => x.split('\t')[0]))]);
props.onDataLoad?.(data);
}
2020-08-25 08:49:14 +02:00
return (
<>
{eventTypes?.length > 1 && (
2021-02-15 16:44:27 +01:00
<div className={styles.filter}>
<DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
</div>
)}
<MetricsTable
{...props}
title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
type="event"
metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
websiteId={websiteId}
dataFilter={eventTypeFilter}
filterOptions={eventType === EVENT_FILTER_DEFAULT.value ? [] : [eventType]}
renderLabel={({ x }) => <Label value={x} />}
onDataLoad={handleDataLoad}
/>
</>
2020-08-25 08:49:14 +02:00
);
}
2020-08-28 03:44:20 +02:00
const Label = ({ value }) => {
2020-12-05 05:45:12 +01:00
const [event, label] = value.split('\t');
2020-08-28 03:44:20 +02:00
return (
<>
2020-10-09 21:39:03 +02:00
<Tag>{event}</Tag>
2020-08-28 03:44:20 +02:00
{label}
</>
);
};