refactor: rename MetricsTable to WebsiteMetricsTable

src/client/components/dashboard/items/WebsiteEventItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MetricsTable } from '../../website/MetricsTable';
+import { WebsiteMetricsTable } from '../../website/WebsiteMetricsTable';
 import { useGlobalRangeDate } from '../../../hooks/useGlobalRangeDate';
 
 export const WebsiteEventItem: React.FC<{
@@ -10,7 +10,7 @@ export const WebsiteEventItem: React.FC<{
   const endAt = endDate.valueOf();
 
   return (
-    <MetricsTable
+    <WebsiteMetricsTable
       websiteId={props.websiteId}
       type="event"
       title={['Events', 'Actions']}

src/client/components/website/MetricsTable.tsx

@@ -1,88 +0,0 @@
-import { Table } from 'antd';
-import { ColumnsType } from 'antd/es/table/interface';
-import React from 'react';
-import { AppRouterOutput, trpc } from '../../api/trpc';
-import { useCurrentWorkspaceId } from '../../store/user';
-import { sum } from 'lodash-es';
-import { formatNumber } from '../../utils/common';
-import { useTranslation } from '@i18next-toolkit/react';
-
-type MetricsItemType = AppRouterOutput['website']['metrics'][number];
-
-interface MetricsTableProps {
-  websiteId: string;
-  title: [string, string];
-  type:
-    | 'url'
-    | 'language'
-    | 'referrer'
-    | 'browser'
-    | 'os'
-    | 'device'
-    | 'country'
-    | 'event';
-  startAt: number;
-  endAt: number;
-}
-export const MetricsTable: React.FC<MetricsTableProps> = React.memo((props) => {
-  const { websiteId, title, type, startAt, endAt } = props;
-  const workspaceId = useCurrentWorkspaceId();
-  const { t } = useTranslation();
-
-  const { isLoading, data: metrics = [] } = trpc.website.metrics.useQuery({
-    workspaceId,
-    websiteId,
-    type,
-    startAt,
-    endAt,
-  });
-
-  const total = sum(metrics.map((m) => m.y));
-
-  const columns: ColumnsType<MetricsItemType> = [
-    {
-      title: title[0],
-      dataIndex: 'x',
-      ellipsis: true,
-      render: (val) =>
-        val ?? <span className="italic opacity-60">{t('(None)')}</span>,
-    },
-    {
-      title: title[1],
-      dataIndex: 'y',
-      width: 100,
-      align: 'center',
-      render: (val) => {
-        const percent = (Number(val) / total) * 100;
-
-        return (
-          <div className="flex">
-            <div className="w-12 text-right">{formatNumber(val)}</div>
-            <div className="inline-block w-12 relative border-l ml-1 px-1">
-              <div
-                className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none"
-                style={{ width: `${percent}%` }}
-              />
-              <span>{percent.toFixed(0)}%</span>
-            </div>
-          </div>
-        );
-      },
-    },
-  ];
-
-  return (
-    <Table
-      rowKey="x"
-      loading={isLoading}
-      dataSource={metrics}
-      columns={columns}
-      pagination={{
-        pageSize: 10,
-        hideOnSinglePage: true,
-      }}
-      size="small"
-    />
-  );
-});
-MetricsTable.displayName = 'MetricsTable';

src/client/components/website/WebsiteMetricsTable.tsx

@@ -0,0 +1,90 @@
+import { Table } from 'antd';
+import { ColumnsType } from 'antd/es/table/interface';
+import React from 'react';
+import { AppRouterOutput, trpc } from '../../api/trpc';
+import { useCurrentWorkspaceId } from '../../store/user';
+import { sum } from 'lodash-es';
+import { formatNumber } from '../../utils/common';
+import { useTranslation } from '@i18next-toolkit/react';
+
+type MetricsItemType = AppRouterOutput['website']['metrics'][number];
+
+interface MetricsTableProps {
+  websiteId: string;
+  title: [string, string];
+  type:
+    | 'url'
+    | 'language'
+    | 'referrer'
+    | 'browser'
+    | 'os'
+    | 'device'
+    | 'country'
+    | 'event';
+  startAt: number;
+  endAt: number;
+}
+export const WebsiteMetricsTable: React.FC<MetricsTableProps> = React.memo(
+  (props) => {
+    const { websiteId, title, type, startAt, endAt } = props;
+    const workspaceId = useCurrentWorkspaceId();
+    const { t } = useTranslation();
+
+    const { isLoading, data: metrics = [] } = trpc.website.metrics.useQuery({
+      workspaceId,
+      websiteId,
+      type,
+      startAt,
+      endAt,
+    });
+
+    const total = sum(metrics.map((m) => m.y));
+
+    const columns: ColumnsType<MetricsItemType> = [
+      {
+        title: title[0],
+        dataIndex: 'x',
+        ellipsis: true,
+        render: (val) =>
+          val ?? <span className="italic opacity-60">{t('(None)')}</span>,
+      },
+      {
+        title: title[1],
+        dataIndex: 'y',
+        width: 100,
+        align: 'center',
+        render: (val) => {
+          const percent = (Number(val) / total) * 100;
+
+          return (
+            <div className="flex">
+              <div className="w-12 text-right">{formatNumber(val)}</div>
+              <div className="inline-block w-12 relative border-l ml-1 px-1">
+                <div
+                  className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none"
+                  style={{ width: `${percent}%` }}
+                />
+                <span>{percent.toFixed(0)}%</span>
+              </div>
+            </div>
+          );
+        },
+      },
+    ];
+
+    return (
+      <Table
+        rowKey="x"
+        loading={isLoading}
+        dataSource={metrics}
+        columns={columns}
+        pagination={{
+          pageSize: 10,
+          hideOnSinglePage: true,
+        }}
+        size="small"
+      />
+    );
+  }
+);
+WebsiteMetricsTable.displayName = 'WebsiteMetricsTable';

src/client/pages/Website/Detail.tsx

@@ -5,7 +5,7 @@ import { trpc } from '../../api/trpc';
 import { ErrorTip } from '../../components/ErrorTip';
 import { Loading } from '../../components/Loading';
 import { NotFoundTip } from '../../components/NotFoundTip';
-import { MetricsTable } from '../../components/website/MetricsTable';
+import { WebsiteMetricsTable } from '../../components/website/WebsiteMetricsTable';
 import { WebsiteOverview } from '../../components/website/WebsiteOverview';
 import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
 import { useCurrentWorkspaceId } from '../../store/user';
@@ -45,7 +45,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           <WebsiteOverview website={website} showDateFilter={true} />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="url"
             title={[t('Pages'), t('Views')]}
@@ -54,7 +54,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="referrer"
             title={[t('Referrers'), t('Views')]}
@@ -63,7 +63,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="browser"
             title={[t('Browser'), t('Visitors')]}
@@ -72,7 +72,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="os"
             title={[t('OS'), t('Visitors')]}
@@ -81,7 +81,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/3 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="device"
             title={[t('Devices'), t('Visitors')]}
@@ -90,7 +90,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           />
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="country"
             title={[t('Countries'), t('Visitors')]}
@@ -108,7 +108,7 @@ export const WebsiteDetail: React.FC = React.memo(() => {
           </Button>
         </Card.Grid>
         <Card.Grid hoverable={false} className="!w-1/2 min-h-[470px]">
-          <MetricsTable
+          <WebsiteMetricsTable
             websiteId={websiteId}
             type="event"
             title={[t('Events'), t('Actions')]}