schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rename MetricsTable to WebsiteMetricsTable

Browse Source
This commit is contained in:
moonrailgun 2024-03-03 19:02:35 +08:00
parent daef9ff084
commit 1306187f01
4 changed files with 100 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/dashboard/items/WebsiteEventItem.tsx
View File

@ -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']}

88
src/client/components/website/MetricsTable.tsx
View File

@ -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';

90
src/client/components/website/WebsiteMetricsTable.tsx Normal file
View File

@ -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';

16
src/client/pages/Website/Detail.tsx
View File

@ -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')]}