feat: add telemetry events chart

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}
     />

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;
 }

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"

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(),
         })