From 941861f8856ec02935b221dbbd488226d69884c4 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 14 Mar 2024 01:26:02 +0800
Subject: [PATCH] feat: add telemetry events chart

---
 .../dashboard/items/WebsiteEventItem.tsx           |  4 +++-
 .../components/telemetry/TelemetryMetricsTable.tsx |  2 +-
 src/client/pages/Telemetry/Detail.tsx              | 14 ++++++++++++--
 src/server/trpc/routers/telemetry.ts               |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/client/components/dashboard/items/WebsiteEventItem.tsx b/src/client/components/dashboard/items/WebsiteEventItem.tsx
index 15dfcd3..b86331d 100644
--- a/src/client/components/dashboard/items/WebsiteEventItem.tsx
+++ b/src/client/components/dashboard/items/WebsiteEventItem.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { WebsiteMetricsTable } from '../../website/WebsiteMetricsTable';
 import { useGlobalRangeDate } from '../../../hooks/useGlobalRangeDate';
+import { useTranslation } from '@i18next-toolkit/react';
 
 export const WebsiteEventItem: React.FC<{
   websiteId: string;
 }> = React.memo((props) => {
+  const { t } = useTranslation();
   const { startDate, endDate } = useGlobalRangeDate();
   const startAt = startDate.valueOf();
   const endAt = endDate.valueOf();
@@ -13,7 +15,7 @@ export const WebsiteEventItem: React.FC<{
     <WebsiteMetricsTable
       websiteId={props.websiteId}
       type="event"
-      title={['Events', 'Actions']}
+      title={[t('Events'), t('Actions')]}
       startAt={startAt}
       endAt={endAt}
     />
diff --git a/src/client/components/telemetry/TelemetryMetricsTable.tsx b/src/client/components/telemetry/TelemetryMetricsTable.tsx
index d43e6d7..aecfeae 100644
--- a/src/client/components/telemetry/TelemetryMetricsTable.tsx
+++ b/src/client/components/telemetry/TelemetryMetricsTable.tsx
@@ -12,7 +12,7 @@ type MetricsItemType = AppRouterOutput['telemetry']['metrics'][number];
 interface MetricsTableProps {
   telemetryId: string;
   title: [string, string];
-  type: 'source' | 'url' | 'referrer' | 'country';
+  type: 'source' | 'url' | 'event' | 'referrer' | 'country';
   startAt: number;
   endAt: number;
 }
diff --git a/src/client/pages/Telemetry/Detail.tsx b/src/client/pages/Telemetry/Detail.tsx
index b3bc091..48d617a 100644
--- a/src/client/pages/Telemetry/Detail.tsx
+++ b/src/client/pages/Telemetry/Detail.tsx
@@ -32,7 +32,7 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
           />
         </Card.Grid>
 
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
           <TelemetryMetricsTable
             telemetryId={telemetryId}
             type="source"
@@ -42,7 +42,17 @@ export const TelemetryDetailPage: React.FC = React.memo(() => {
           />
         </Card.Grid>
 
-        <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
+        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
+          <TelemetryMetricsTable
+            telemetryId={telemetryId}
+            type="event"
+            title={[t('Events'), t('Views')]}
+            startAt={startAt}
+            endAt={endAt}
+          />
+        </Card.Grid>
+
+        <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
           <TelemetryMetricsTable
             telemetryId={telemetryId}
             type="country"
diff --git a/src/server/trpc/routers/telemetry.ts b/src/server/trpc/routers/telemetry.ts
index 3a3fdf4..1e39285 100644
--- a/src/server/trpc/routers/telemetry.ts
+++ b/src/server/trpc/routers/telemetry.ts
@@ -211,7 +211,7 @@ export const telemetryRouter = router({
       z
         .object({
           telemetryId: z.string(),
-          type: z.enum(['source', 'url', 'referrer', 'country']),
+          type: z.enum(['source', 'url', 'event', 'referrer', 'country']),
           startAt: z.number(),
           endAt: z.number(),
         })