add event name to properties table

This commit is contained in:
Francis Cao 2024-08-14 12:29:47 -07:00
parent 04de691893
commit aaf9adacc6
5 changed files with 44 additions and 16 deletions

View file

@ -8,9 +8,10 @@ import styles from './EventProperties.module.css';
export function EventProperties({ websiteId }: { websiteId: string }) {
const [propertyName, setPropertyName] = useState('');
const [eventName, setEventName] = useState('');
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
const { data: values } = useEventDataValues(websiteId, propertyName);
const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
const chartData =
propertyName && values
? {
@ -25,13 +26,25 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
}
: null;
const handleRowClick = row => {
setEventName(row.eventName);
setPropertyName(row.propertyName);
};
return (
<LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
<div className={styles.container}>
<GridTable data={data} cardMode={false} className={styles.table}>
<GridColumn name="eventName" label={formatMessage(labels.name)}>
{row => (
<div className={styles.link} onClick={() => handleRowClick(row)}>
{row.eventName}
</div>
)}
</GridColumn>
<GridColumn name="propertyName" label={formatMessage(labels.property)}>
{row => (
<div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
<div className={styles.link} onClick={() => handleRowClick(row)}>
{row.propertyName}
</div>
)}