Update EventProperties.tsx

This commit is contained in:
Minseo Lee 2024-09-09 15:08:36 +09:00
parent 9697ac61d3
commit c1eb76ded7

View file

@ -5,8 +5,11 @@ import PieChart from 'components/charts/PieChart';
import { useState } from 'react'; import { useState } from 'react';
import { CHART_COLORS } from 'lib/constants'; import { CHART_COLORS } from 'lib/constants';
import styles from './EventProperties.module.css'; import styles from './EventProperties.module.css';
import { useIntl } from 'react-intl';
import { formatLongNumberOptions } from 'lib/format';
export function EventProperties({ websiteId }: { websiteId: string }) { export function EventProperties({ websiteId }: { websiteId: string }) {
const intl = useIntl();
const [propertyName, setPropertyName] = useState(''); const [propertyName, setPropertyName] = useState('');
const [eventName, setEventName] = useState(''); const [eventName, setEventName] = useState('');
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
@ -49,7 +52,13 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
</div> </div>
)} )}
</GridColumn> </GridColumn>
<GridColumn name="total" label={formatMessage(labels.count)} alignment="end" /> <GridColumn name="total" label={formatMessage(labels.count)} alignment="end">
{row => (
<span title={intl.formatNumber(row.count)}>
{intl.formatNumber(row.count, formatLongNumberOptions(row.count))}
</span>
)}
</GridColumn>
</GridTable> </GridTable>
{propertyName && ( {propertyName && (
<div className={styles.chart}> <div className={styles.chart}>