add eventchart and metrictable to sharepage

src/app/(main)/websites/[websiteId]/WebsitePanels.tsx

@@ -1,13 +1,15 @@
-import { Grid, Tabs, Tab, TabList, TabPanel, Heading, Row } from '@umami/react-zen';
 import { GridRow } from '@/components/common/GridRow';
 import { Panel } from '@/components/common/Panel';
-import { WorldMap } from '@/components/metrics/WorldMap';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { EventsChart } from '@/components/metrics/EventsChart';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
-import { useMessages } from '@/components/hooks';
+import { WorldMap } from '@/components/metrics/WorldMap';
+import { Grid, Heading, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
 
 export function WebsitePanels({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
   const tableProps = {
     websiteId,
     limit: 10,
@@ -16,6 +18,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     metric: formatMessage(labels.visitors),
   };
   const rowProps = { minHeight: '570px' };
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Grid gap="3">
@@ -113,6 +116,23 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>
       </GridRow>
+      {isSharePage && (
+        <GridRow layout="two-one" {...rowProps}>
+          <Panel>
+            <MetricsTable
+              websiteId={websiteId}
+              type="event"
+              title={formatMessage(labels.events)}
+              metric={formatMessage(labels.count)}
+              limit={15}
+              filterLink={false}
+            />
+          </Panel>
+          <Panel gridColumn="span 2">
+            <EventsChart websiteId={websiteId} />
+          </Panel>
+        </GridRow>
+      )}
     </Grid>
   );
 }

src/components/metrics/MetricsTable.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useMemo } from 'react';
-import { Icon, Row, Text } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
 import { Maximize } from '@/components/icons';
-import { percentFilter } from '@/lib/filters';
-import { ListTable, ListTableProps } from './ListTable';
 import { MetricLabel } from '@/components/metrics/MetricLabel';
+import { percentFilter } from '@/lib/filters';
+import { Icon, Row, Text } from '@umami/react-zen';
+import { useEffect, useMemo } from 'react';
+import { ListTable, ListTableProps } from './ListTable';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -14,6 +14,7 @@ export interface MetricsTableProps extends ListTableProps {
   dataFilter?: (data: any) => any;
   limit?: number;
   showMore?: boolean;
+  filterLink?: boolean;
   params?: Record<string, any>;
   onDataLoad?: (data: any) => void;
 }
@@ -24,6 +25,7 @@ export function MetricsTable({
   dataFilter,
   limit,
   showMore = false,
+  filterLink = true,
   params,
   onDataLoad,
   ...props
@@ -64,7 +66,7 @@ export function MetricsTable({
   }, [data]);
 
   const renderLabel = (row: any) => {
-    return <MetricLabel type={type} data={row} />;
+    return filterLink ? <MetricLabel type={type} data={row} /> : row.label;
   };
 
   return (