Refactored tables.

This commit is contained in:
Mike Cao 2025-08-23 01:12:37 -07:00
parent 600a3d28c3
commit c8fe93dd9d
56 changed files with 643 additions and 1038 deletions

View file

@ -100,9 +100,9 @@ const EventValues = ({ websiteId, eventName, propertyName }) => {
const tableData = useMemo(() => {
if (!propertyName || !values || propertySum === 0) return [];
return values.map(({ value, total }) => ({
x: value,
y: total,
z: 100 * (total / propertySum),
label: value,
count: total,
percent: 100 * (total / propertySum),
}));
}, [propertyName, values, propertySum]);

View file

@ -1,6 +1,6 @@
'use client';
import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
import { EventsTable } from '@/components/metrics/EventsTable';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useState, Key } from 'react';
import { EventsDataTable } from './EventsDataTable';
import { Panel } from '@/components/common/Panel';
@ -13,14 +13,9 @@ import { getItem, setItem } from '@/lib/storage';
const KEY_NAME = 'umami.events.tab';
export function EventsPage({ websiteId }) {
const [label, setLabel] = useState(null);
const [tab, setTab] = useState(getItem(KEY_NAME) || 'chart');
const { formatMessage, labels } = useMessages();
const handleLabelClick = (value: string) => {
setLabel(value !== label ? value : '');
};
const handleSelect = (value: Key) => {
setItem(KEY_NAME, value);
setTab(value);
@ -42,14 +37,13 @@ export function EventsPage({ websiteId }) {
<TabPanel id="chart">
<Column gap="6">
<Column border="bottom" paddingBottom="6">
<EventsChart websiteId={websiteId} focusLabel={label} />
<EventsChart websiteId={websiteId} />
</Column>
<EventsTable
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
onLabelClick={handleLabelClick}
/>
</Column>
</TabPanel>